Refactor PopupListe.vue to enhance data handling and improve table rendering. Update tableData binding to an empty array, implement rowToPanelPopup function for consistent data mapping, and streamline save logic for form submissions. Adjust dialog handling for row deletion and enhance image URL rendering with improved null checks.

This commit is contained in:
burakovec
2026-07-20 09:57:49 +03:00
parent 6030dedbdb
commit c0bc8f39e9

View File

@ -9,7 +9,7 @@
icon="sitemanagement" icon="sitemanagement"
title="Popup Listesi" title="Popup Listesi"
listText="Popup" listText="Popup"
:tableData="popups" :tableData="[]"
apiText="Popup Listesi" apiText="Popup Listesi"
apiList="Popup" apiList="Popup"
v-model:refresh="refresh" v-model:refresh="refresh"
@ -54,11 +54,8 @@
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import AdminLayout from '@/layouts/AdminLayout.vue' import AdminLayout from '@/layouts/AdminLayout.vue'
import { Breadcrumb } from '@/components/global' import { Breadcrumb } from '@/components/global'
import router from '@/router'
import { useDataStore } from '@/stores/dataStore' import { useDataStore } from '@/stores/dataStore'
import PanelWrapper from '@/components/PanelWrapper.vue' import PanelWrapper from '@/components/PanelWrapper.vue'
import { useGlobalStore } from '@/stores/globalStore'
const globalStore = useGlobalStore()
import { useDialogStore } from '@/components/global/dialogStore' import { useDialogStore } from '@/components/global/dialogStore'
const dialogStore = useDialogStore() const dialogStore = useDialogStore()
@ -74,32 +71,43 @@
const refresh = ref<boolean>(false) const refresh = ref<boolean>(false)
const panelPopup = ref<Record<string, any>>({}) const panelPopup = ref<Record<string, any>>({})
const popups = ref<Record<string, any>[]>([])
const rowToPanelPopup = (row: Record<string, any>) => ({
id: row.id ?? row.Id,
baslik: row.baslik ?? row.Baslik ?? '',
resimUrl: row.resimUrl ?? row.ResimUrl ?? '',
url: row.url ?? row.Url ?? '',
durum: row.durum ?? row.Durum ?? false
})
const tableHeader = ref<Record<string, any>[]>([ const tableHeader = ref<Record<string, any>[]>([
{ {
name: 'baslik', name: 'baslik',
title: 'Başlık', title: 'Başlık',
sort: true sort: true,
compute: (v: Record<string, any>) => v.baslik ?? v.Baslik
}, },
{ {
name: 'resimUrl', name: 'resimUrl',
title: 'Resim Url', title: 'Resim Url',
computeHtml: (v: Record<string, any>) => { 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', name: 'url',
title: 'Url' title: 'Url',
compute: (v: Record<string, any>) => v.url ?? v.Url
}, },
{ {
name: 'durum', name: 'durum',
title: 'Durum', title: 'Durum',
computeHtml: (v: Record<string, any>): string => { computeHtml: (v: Record<string, any>): string => {
if (v.durum) { const durum = v.durum ?? v.Durum
if (durum) {
return `<span class="back-grad back-grad-ok"> return `<span class="back-grad back-grad-ok">
Aktif Aktif
</strong>` </strong>`
@ -111,6 +119,7 @@
]) ])
const DeleteRowPop = (data: Record<string, any>, i: number) => { const DeleteRowPop = (data: Record<string, any>, i: number) => {
const id = data.id ?? data.Id
dialogStore.CreateDialog({ dialogStore.CreateDialog({
title: 'Popup Sil', title: 'Popup Sil',
id: 'deletepop', id: 'deletepop',
@ -120,7 +129,7 @@
{ {
label: 'Popup Sil', label: 'Popup Sil',
type: 'alert', type: 'alert',
function: () => DeleteRow(data.id) function: () => DeleteRow(id)
} }
] ]
}) })
@ -154,9 +163,6 @@
return URL.createObjectURL(panelPopup.value.resimUrl) return URL.createObjectURL(panelPopup.value.resimUrl)
}) })
const OpenMenu = (row: any) => {
router.push('slider-yonetimi/' + row.id)
}
const addAction = async () => { const addAction = async () => {
isUpdate.value = false isUpdate.value = false
panelPopup.value = { panelPopup.value = {
@ -168,24 +174,24 @@
panel.value = true panel.value = true
} }
const updateAction = (row: any) => { const updateAction = (row: any) => {
Object.assign(panelPopup.value,row) panelPopup.value = rowToPanelPopup(row)
panel.value = true panel.value = true
isUpdate.value = true isUpdate.value = true
} }
const save = async () => { const save = async () => {
if (isUpdate.value) { if (isUpdate.value) {
const id = panelPopup.value.id ?? panelPopup.value.Id
const formData = new FormData() const formData = new FormData()
formData.append('Baslik', panelPopup.value.baslik) formData.append('Baslik', panelPopup.value.baslik ?? '')
formData.append('Durum', panelPopup.value.durum) formData.append('Durum', String(panelPopup.value.durum ?? panelPopup.value.Durum ?? false))
formData.append('Url', panelPopup.value.url) formData.append('Url', panelPopup.value.url ?? '')
if (panelPopup.value.resimUrl instanceof File) { if (panelPopup.value.resimUrl instanceof File) {
formData.append('ResimUrl', panelPopup.value.resimUrl) formData.append('ResimUrl', panelPopup.value.resimUrl)
} }
let update: any = dataStore.dataPut('Popup/' + panelPopup.value.id, { let update: any = await dataStore.dataPut('Popup/' + id, {
data: formData, data: formData
headers: { 'Content-Type': 'multipart/form-data' }
}) })
if (update !== 'errorfalse') { if (update !== 'errorfalse') {
panel.value = false panel.value = false
@ -194,8 +200,7 @@
} }
} else { } else {
let add = await dataStore.dataPost('Popup', { let add = await dataStore.dataPost('Popup', {
data: panelPopup.value, data: panelPopup.value
headers: { 'Content-Type': 'multipart/form-data' }
}) })
if (add !== 'errorfalse') { if (add !== 'errorfalse') {
panel.value = false panel.value = false