Refactor SliderListe.vue to improve data handling and validation. Update table data binding to an empty array, enhance form validation for image uploads, and streamline slider data processing with a new rowToPanelSlider function. Adjust save logic to ensure proper handling of form data and improve user feedback with toast notifications.

src/module/site-yonetimi/views/SliderListe.vue

@@ -9,7 +9,7 @@
         icon="sitemanagement"
         title="Slider Listesi"
         listText="Slider"
-        :tableData="sliders"
+        :tableData="[]"
         apiText="Slider Listesi"
         apiList="Slider"
         v-model:refresh="refresh"
@@ -25,6 +25,7 @@
         <form-file
           v-model="panelSlider.resimUrl"
           label="Resim Url"
+          :required="!isUpdate"
           :fileTypes="['png', 'jpg', 'jpeg']"
           elclass="panel-documents-item"
           fileType="img" />
@@ -43,53 +44,64 @@
   </AdminLayout>
 </template>
 <script setup lang="ts">
-  import { ref, onMounted, computed } from 'vue'
+  import { ref, computed } from 'vue'
   import AdminLayout from '@/layouts/AdminLayout.vue'
   import { Breadcrumb } from '@/components/global'
-  import router from '@/router'
   import { useDataStore } from '@/stores/dataStore'
   import PanelWrapper from '@/components/PanelWrapper.vue'
   import { useDialogStore } from '@/components/global/dialogStore'
-  import { useGlobalStore } from '@/stores/globalStore'
+  import { useToastStore } from '@/components/global/toastStore'
-  const globalStore = useGlobalStore()
 
   const dialogStore = useDialogStore()
+  const toastStore = useToastStore()
 
   const dataStore = useDataStore()
   const panel = ref<boolean>(false)
   const isUpdate = ref<boolean>(false)
   const refresh = ref<boolean>(false)
   const panelSlider = ref<Record<string, any>>({})
-  const sliders = ref<Record<string, any>[]>([])
+
+  const rowToPanelSlider = (row: Record<string, any>) => ({
+    id: row.id ?? row.Id,
+    baslik: row.baslik ?? row.Baslik ?? '',
+    resimUrl: row.resimUrl ?? row.ResimUrl ?? '',
+    url: row.url ?? row.Url ?? '',
+    sira: row.sira ?? row.Sira ?? 1
+  })
 
   const tableHeader = ref<Record<string, any>[]>([
     {
       name: 'baslik',
       title: 'Başlık',
-      sort: true
+      sort: true,
+      compute: (v: Record<string, any>) => v.baslik ?? v.Baslik
     },
     {
       name: 'sira',
       title: 'Sıra',
-      sort: true
+      sort: true,
+      compute: (v: Record<string, any>) => v.sira ?? v.Sira
     },
     {
       name: 'resimUrl',
       title: 'Resim Url',
       computeHtml: (v: Record<string, any>) => {
-        if (v.resimUrl !== null && v.resimUrl !== undefined) {
+        const src = v.resimUrl ?? v.ResimUrl
-          return `<a href="${ v.resimUrl }" target="_blank" onclick="event.stopPropagation()"><img class="table-cell-image" src="${ v.resimUrl }" /></a>`
+        if (src !== null && src !== undefined && src !== '') {
+          return `<a href="${ src }" target="_blank" onclick="event.stopPropagation()"><img class="table-cell-image" src="${ src }" /></a>`
         }
       }
     },
     {
       name: 'url',
       title: 'Url',
-      sort: true
+      sort: true,
+      compute: (v: Record<string, any>) => v.url ?? v.Url
     }
   ])
 
   const DeleteRowPop = (data: Record<string, any>, i: number) => {
+    const id = data.id ?? data.Id
     dialogStore.CreateDialog({
       title: 'Slider Sil',
       id: 'deleteslider',
@@ -99,7 +111,7 @@
         {
           label: 'Slider Sil',
           type: 'alert',
-          function: () => DeleteRow(data.id)
+          function: () => DeleteRow(id)
         }
       ]
     })
@@ -133,9 +145,6 @@
     return URL.createObjectURL(panelSlider.value.resimUrl)
   })
 
-  const OpenMenu = (row: any) => {
-    router.push('slider-yonetimi/' + row.id)
-  }
   const addAction = async () => {
     isUpdate.value = false
     panelSlider.value = {
@@ -147,28 +156,25 @@
     panel.value = true
   }
   const updateAction = (row: any) => {
-    panelSlider.value = sliders.value.find((x) => x.id == row.id) || {}
+    panelSlider.value = rowToPanelSlider(row)
     panel.value = true
     isUpdate.value = true
   }
-  const loadSliders = async () => {
-    const data = await dataStore.dataGet('Slider')
-    sliders.value = data
-  }
 
   const save = async () => {
     if (isUpdate.value) {
+      const id = panelSlider.value.id ?? panelSlider.value.Id
       const formData = new FormData()
-      formData.append('Baslik', panelSlider.value.baslik)
+      formData.append('Baslik', panelSlider.value.baslik ?? '')
-      formData.append('Url', panelSlider.value.url)
+      formData.append('Url', panelSlider.value.url ?? '')
-      formData.append('Sira', panelSlider.value?.sira)
+      const siraVal = panelSlider.value.sira ?? panelSlider.value.Sira ?? 0
+      formData.append('Sira', String(siraVal))
       if (panelSlider.value.resimUrl instanceof File) {
         formData.append('ResimUrl', panelSlider.value.resimUrl)
       }
 
-      let update: any = dataStore.dataPut('Slider/' + panelSlider.value.id, {
+      let update: any = await dataStore.dataPut('Slider/' + id, {
-        data: formData,
+        data: formData
-        headers: { 'Content-Type': 'multipart/form-data' }
       })
       if (update !== 'errorfalse') {
         panel.value = false
@@ -176,9 +182,19 @@
         refresh.value = true
       }
     } else {
-      let add = await dataStore.dataPost('Slider/CreateSlider', {
+      if (!(panelSlider.value.resimUrl instanceof File)) {
-        data: panelSlider.value,
+        toastStore.AddToast('Lütfen bir resim yükleyin.', 'error', 5000)
-        headers: { 'Content-Type': 'multipart/form-data' }
+        return
+      }
+      const formData = new FormData()
+      formData.append('Baslik', panelSlider.value.baslik ?? '')
+      formData.append('Url', panelSlider.value.url ?? '')
+      const siraVal = panelSlider.value.sira ?? panelSlider.value.Sira ?? 0
+      formData.append('Sira', String(siraVal))
+      formData.append('ResimUrl', panelSlider.value.resimUrl)
+
+      let add: any = await dataStore.dataPost('Slider/CreateSlider', {
+        data: formData
       })
       if (add !== 'errorfalse') {
         panel.value = false