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:
@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user