slider popup
This commit is contained in:
burakovec
@ -2,7 +2,8 @@ import axios from 'axios'
|
||||
import { useUsersStore } from '@/stores/usersStore'
|
||||
import router from '@/router'
|
||||
|
||||
axios.defaults.baseURL = 'http://panel.cekilisevi.gov.tr:5001/'
|
||||
// axios.defaults.baseURL = 'http://panel.cekilisevi.gov.tr:5001/'
|
||||
axios.defaults.baseURL = 'https://mpiapi.beyaz.net/'
|
||||
// axios.defaults.baseURL = 'https://localhost:7241/'
|
||||
//axios.defaults.timeout = 2000;
|
||||
axios.defaults.headers['Content-Type'] = 'application/json; charset=utf-8'
|
||||
|
||||
@ -122,6 +122,14 @@
|
||||
{
|
||||
title: 'Menü Yönetimi',
|
||||
to: '/site-yonetimi/menu-listesi'
|
||||
},
|
||||
{
|
||||
title: 'Slider Yönetimi',
|
||||
to: '/site-yonetimi/slider-listesi'
|
||||
},
|
||||
{
|
||||
title: 'Popup Yönetimi',
|
||||
to: '/site-yonetimi/popup-listesi'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -6,7 +6,7 @@ let connectionId = "";
|
||||
|
||||
export const connectToHub = async () => {
|
||||
connection = new signalR.HubConnectionBuilder()
|
||||
.withUrl("http://panel.cekilisevi.gov.tr:5001/uploadHub", {
|
||||
.withUrl("https://mpiapi.beyaz.net/uploadHub", {
|
||||
withCredentials: false // Bu zorunlu, yoksa cookie vs gönderilmez
|
||||
}) // backend adresine göre düzenle
|
||||
.withAutomaticReconnect()
|
||||
|
||||
@ -5,4 +5,9 @@ import menuYonetimi from '@/module/site-yonetimi/routes/menu-yonetimi'
|
||||
import menuListe from '@/module/site-yonetimi/routes/menu-liste'
|
||||
import ayarlar from '@/module/site-yonetimi/routes/ayarlar'
|
||||
|
||||
export default [sayfaYeni, sayfDetay, sayfaListe, menuYonetimi, menuListe, ayarlar]
|
||||
import sliderYonetimi from '@/module/site-yonetimi/routes/slider-yonetimi'
|
||||
import sliderListe from '@/module/site-yonetimi/routes/slider-liste'
|
||||
import popupYonetimi from '@/module/site-yonetimi/routes/popup-yonetimi'
|
||||
import popupListe from '@/module/site-yonetimi/routes/popup-liste'
|
||||
|
||||
export default [sayfaYeni, sayfDetay, sayfaListe, menuYonetimi, menuListe, ayarlar,sliderYonetimi,sliderListe,popupYonetimi,popupListe]
|
||||
|
||||
10
src/module/site-yonetimi/routes/popup-liste.ts
Normal file
10
src/module/site-yonetimi/routes/popup-liste.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import PopupListe from "../views/PopupListe.vue";
|
||||
|
||||
export default {
|
||||
path: '/site-yonetimi/popup-listesi',
|
||||
name: 'PopupListe',
|
||||
component: PopupListe,
|
||||
meta: {
|
||||
authRequired: true
|
||||
}
|
||||
}
|
||||
10
src/module/site-yonetimi/routes/popup-yonetimi.ts
Normal file
10
src/module/site-yonetimi/routes/popup-yonetimi.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import PopupYonetimi from "../views/PopupYonetimi.vue";
|
||||
|
||||
export default {
|
||||
path: '/site-yonetimi/popup-yonetimi/:popupId',
|
||||
name: 'PopupYonetimi',
|
||||
component: PopupYonetimi,
|
||||
meta: {
|
||||
authRequired: true
|
||||
}
|
||||
}
|
||||
10
src/module/site-yonetimi/routes/slider-liste.ts
Normal file
10
src/module/site-yonetimi/routes/slider-liste.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import SliderListe from "../views/SliderListe.vue";
|
||||
|
||||
export default {
|
||||
path: '/site-yonetimi/slider-listesi',
|
||||
name: 'SliderListe',
|
||||
component: SliderListe,
|
||||
meta: {
|
||||
authRequired: true
|
||||
}
|
||||
}
|
||||
10
src/module/site-yonetimi/routes/slider-yonetimi.ts
Normal file
10
src/module/site-yonetimi/routes/slider-yonetimi.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import SliderYonetimi from "../views/SliderYonetimi.vue";
|
||||
|
||||
export default {
|
||||
path: '/site-yonetimi/slider-yonetimi/:sliderId',
|
||||
name: 'SliderYonetimi',
|
||||
component: SliderYonetimi,
|
||||
meta: {
|
||||
authRequired: true
|
||||
}
|
||||
}
|
||||
199
src/module/site-yonetimi/views/PopupListe.vue
Normal file
199
src/module/site-yonetimi/views/PopupListe.vue
Normal file
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<AdminLayout>
|
||||
<Breadcrumb currentPageText='Popup Listesi' />
|
||||
<section class='section-list'>
|
||||
<list-table-content
|
||||
:tableHeader='tableHeader'
|
||||
:rowAction='updateAction'
|
||||
:addAction='addAction'
|
||||
icon='sitemanagement'
|
||||
title='Popup Listesi'
|
||||
listText='Popup'
|
||||
:tableData='popups'
|
||||
apiText='Popup Listesi'
|
||||
apiList='Popup'
|
||||
v-model:refresh='refresh'
|
||||
/>
|
||||
</section>
|
||||
<panel-wrapper
|
||||
v-if='panel'
|
||||
v-model='panel'
|
||||
:panel-title="
|
||||
isUpdate
|
||||
? 'Popup Düzenle'
|
||||
: 'Popup Ekle'
|
||||
">
|
||||
<template #panelContent>
|
||||
<form-input
|
||||
v-model='panelPopup.baslik'
|
||||
label='Başlık' />
|
||||
<form-file
|
||||
v-model='panelPopup.resimUrl'
|
||||
label='Resim Url'
|
||||
:fileTypes="['png','jpg','jpeg']"
|
||||
elclass='panel-documents-item'
|
||||
fileType='img' />
|
||||
<div class='image-preview-wrapper' v-if='resimPreview'>
|
||||
<img :src='resimPreview' alt='Seçilen Resim' />
|
||||
</div>
|
||||
<form-checkbox
|
||||
:listData="Checker"
|
||||
listText="label"
|
||||
listVal="val"
|
||||
v-model="panelPopup.durum" >
|
||||
<template #checktext0>
|
||||
<span>
|
||||
Durum
|
||||
</span>
|
||||
</template>
|
||||
</form-checkbox>
|
||||
</template>
|
||||
<template #footerButton>
|
||||
<div class='button-c button-save' @click='save'>
|
||||
{{ isUpdate ? 'Kaydet' : 'Ekle' }}
|
||||
</div>
|
||||
</template>
|
||||
</panel-wrapper>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted, 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 PanelPiyangoItiraz from '@/module/cekilisler/components/panel/PanelPiyangoItiraz.vue'
|
||||
const Checker = ref([
|
||||
{
|
||||
label: '',
|
||||
val: 'durum'
|
||||
}
|
||||
])
|
||||
const dataStore = useDataStore()
|
||||
const refreshList = ref<boolean>(false)
|
||||
const panel = ref<boolean>(false)
|
||||
const isUpdate = ref<boolean>(false)
|
||||
const tableHeader = ref<Record<string, any>[]>([
|
||||
{
|
||||
name: 'baslik',
|
||||
title: 'Başlık',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
name: 'resimUrl',
|
||||
title: 'Resim Url',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
name: 'durum',
|
||||
title: 'Durum'
|
||||
}
|
||||
])
|
||||
const resimPreview = computed(() => {
|
||||
if (!panelPopup.value.resimUrl) return null
|
||||
|
||||
if (typeof panelPopup.value.resimUrl === 'string') {
|
||||
return panelPopup.value.resimUrl
|
||||
}
|
||||
|
||||
// Eğer dosya ise
|
||||
return URL.createObjectURL(panelPopup.value.resimUrl)
|
||||
})
|
||||
|
||||
interface Popup {
|
||||
id: number
|
||||
baslik: string
|
||||
resimUrl: string
|
||||
durum: boolean
|
||||
}
|
||||
|
||||
const refresh = ref<number>(1)
|
||||
const panelPopup = ref<Popup>()
|
||||
const popups = ref<Popup[]>([])
|
||||
const OpenMenu = (row: any) => {
|
||||
router.push('slider-yonetimi/' + row.id)
|
||||
}
|
||||
const addAction = async () => {
|
||||
isUpdate.value = false
|
||||
panelPopup.value = {
|
||||
baslik: '',
|
||||
resimUrl: '',
|
||||
durum: false
|
||||
}
|
||||
panel.value = true
|
||||
|
||||
}
|
||||
const updateAction = (row: any) => {
|
||||
panelPopup.value = popups.value.find(x => x.id == row.id)
|
||||
panel.value = true
|
||||
isUpdate.value = true
|
||||
}
|
||||
const load = async () => {
|
||||
const data = await dataStore.dataGet('Popup')
|
||||
console.log('apidata', data)
|
||||
popups.value = data
|
||||
console.log(popups.value)
|
||||
}
|
||||
|
||||
const save = async () => {
|
||||
if (isUpdate.value)
|
||||
{
|
||||
const formData = new FormData()
|
||||
formData.append('Baslik', panelPopup.value.baslik)
|
||||
formData.append('Durum', panelPopup.value.durum)
|
||||
if (panelPopup.value.resimUrl instanceof File) {
|
||||
formData.append('ResimUrl', panelPopup.value.resimUrl)
|
||||
}
|
||||
|
||||
let update = dataStore.dataPut('Popup/'+panelPopup.value.id,{
|
||||
data: formData,
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
})
|
||||
if (update !== 'errorfalse') {
|
||||
panel.value = false
|
||||
isUpdate.value = false
|
||||
refresh.value = refresh.value + 1
|
||||
}
|
||||
}
|
||||
else {
|
||||
let add = await dataStore.dataPost('Popup', {
|
||||
data: panelPopup.value,
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
})
|
||||
if (add !== 'errorfalse') {
|
||||
panel.value = false
|
||||
isUpdate.value = false
|
||||
refresh.value = refresh.value + 1
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.image-preview-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f8f9fa;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 12px;
|
||||
margin: 12px 20px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.image-preview-wrapper img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 250px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
278
src/module/site-yonetimi/views/PopupYonetimi.vue
Normal file
278
src/module/site-yonetimi/views/PopupYonetimi.vue
Normal file
@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<AdminLayout>
|
||||
<Breadcrumb current-page-text="Menu Yonetimi" />
|
||||
<div class="form-content">
|
||||
<div class="form-inner-content form-inner-content-left">
|
||||
<div class="form-part">
|
||||
<div class="form-part-title">
|
||||
<h4>
|
||||
{{ Number(route.params.menuId) === 1 ? 'Ana Menü' : 'Footer Menü' }}
|
||||
</h4>
|
||||
<div class="form-part-title-buttons">
|
||||
<div class="button-c button-save" @click="SaveMenu">Kaydet</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-part-content">
|
||||
<template v-if="loaded">
|
||||
<template v-if="siteManagementMenuStore.menuContentList.length > 0">
|
||||
<div class="form-inner-comment">
|
||||
Menü öğelerini sürükle-bırak yaparak düzenleyebilirsiniz.
|
||||
</div>
|
||||
<draggable
|
||||
class="menu-list-group"
|
||||
:list="siteManagementMenuStore.menuContentList"
|
||||
:group="{ name: 'menu', put: false }"
|
||||
itemKey="id"
|
||||
@end="ChangeMenu">
|
||||
<template #item="{ element, index }">
|
||||
<div class="menu-list-item">
|
||||
<span>{{ element.title }}</span>
|
||||
<div class="menu-list-item-buttons">
|
||||
<button
|
||||
@click="EditMenu(element, index)"
|
||||
v-if="element.pageId === null">
|
||||
Düzenle
|
||||
</button>
|
||||
<button
|
||||
@click="RemoveFromMenu(element, index)"
|
||||
class="button-alert">
|
||||
Sil
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="form-inner-comment">
|
||||
Menüye henüz öğe eklenmemiş. Sağdaki bölümden öğe ekleyebilirsiniz.
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-inner-content form-inner-content-right">
|
||||
<div class="form-part">
|
||||
<div class="form-part-title">
|
||||
<h4>Sayfalar</h4>
|
||||
<div class="form-part-title-buttons">
|
||||
<div class="button-c button-save" @click="AddMenuItem">Menü Öğesi Ekle</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-part-content">
|
||||
<div class="menu-list-group">
|
||||
<template v-for="(page, i) in pageList">
|
||||
<div v-if="page.show" class="menu-list-item menu-list-item-page">
|
||||
<span>{{ page.title }}</span>
|
||||
<div class="menu-list-item-buttons">
|
||||
<button @click="AddToMenu(page, i)">Menüye Ekle</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<panel-wrapper
|
||||
wide
|
||||
v-if="menuItemPanel"
|
||||
v-model="menuItemPanel"
|
||||
:panel-title="isEdit ? 'Menü Öğesi Düzenle' : 'Menü Öğesi Ekle'">
|
||||
<template #panelContent>
|
||||
<panel-menu-item />
|
||||
</template>
|
||||
<template #footerButton>
|
||||
<div class="button-c button-save" @click="SaveMenuItem">
|
||||
{{ isEdit ? 'Kaydet' : 'Ekle' }}
|
||||
</div>
|
||||
</template>
|
||||
</panel-wrapper>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onBeforeMount } from 'vue'
|
||||
import draggable from 'vuedraggable'
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue'
|
||||
import { Breadcrumb } from '@/components/global'
|
||||
import PanelWrapper from '@/components/PanelWrapper.vue'
|
||||
import PanelMenuItem from '../components/panel/PanelMenuItem.vue'
|
||||
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
import { useDataStore } from '@/stores/dataStore'
|
||||
const dataStore = useDataStore()
|
||||
import { useSiteManagementMenuStore } from '../stores/siteManagementMenuStore'
|
||||
const siteManagementMenuStore = useSiteManagementMenuStore()
|
||||
import { useSiteManagementPageStore } from '../stores/siteManagementPageStore'
|
||||
const siteManagementPageStore = useSiteManagementPageStore()
|
||||
import { useSiteManagementMenuValidationStore } from '../validation/siteManagementMenuValidationStore'
|
||||
const siteManagementMenuValidationStore = useSiteManagementMenuValidationStore()
|
||||
import { useSiteManagementMenuService } from '../service/siteManagementMenuService'
|
||||
const siteManagementMenuService = useSiteManagementMenuService()
|
||||
import { useSiteManagementPageService } from '../service/siteManagementPageService'
|
||||
const siteManagementPageService = useSiteManagementPageService()
|
||||
|
||||
const onayIslemTipleri = ref<Record<string, any>[]>([])
|
||||
const formData = reactive<Record<string, any>>({})
|
||||
const invalidTexts = reactive<Record<string, any>>({})
|
||||
const loaded = ref<boolean>(false)
|
||||
|
||||
const menuItemPanel = ref<boolean>(false)
|
||||
const isEdit = ref<boolean>(false)
|
||||
const pageList = ref<Record<string, any>[]>([])
|
||||
const editMenuIndex = ref<number | null>(null)
|
||||
|
||||
const AddMenuItem = () => {
|
||||
isEdit.value = false
|
||||
Object.assign(
|
||||
siteManagementMenuStore.menuItemData,
|
||||
siteManagementMenuStore.safeMenuItemData
|
||||
)
|
||||
menuItemPanel.value = true
|
||||
}
|
||||
|
||||
const EditMenu = (data: Record<string, any>, i: number) => {
|
||||
isEdit.value = true
|
||||
Object.assign(siteManagementMenuStore.menuItemData, data)
|
||||
siteManagementMenuStore.menuItemData.targetKey =
|
||||
siteManagementMenuStore.menuItemData.targetKey === '_blank' ? true : false
|
||||
|
||||
editMenuIndex.value = i
|
||||
menuItemPanel.value = true
|
||||
}
|
||||
|
||||
const SaveMenu = async () => {
|
||||
var dt: any
|
||||
siteManagementMenuStore.menuContentList.forEach(async (el, i) => {
|
||||
if (el.type === 'update') {
|
||||
dt = await dataStore.dataPut('Menu/' + el.id, {
|
||||
data: el
|
||||
})
|
||||
}
|
||||
if (el.type === 'new') {
|
||||
dt = await dataStore.dataPost('Menu', {
|
||||
data: el
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
siteManagementMenuStore.deleteMenuList.forEach(async (el, i) => {
|
||||
dt = await dataStore.dataDelete('Menu/' + el)
|
||||
})
|
||||
|
||||
setTimeout(async () => {
|
||||
siteManagementMenuStore.deleteMenuList = []
|
||||
await GetMenuList()
|
||||
}, 50)
|
||||
}
|
||||
|
||||
const ReorderMenu = () => {
|
||||
siteManagementMenuStore.menuContentList.forEach((el, i) => {
|
||||
el.sira = i + 1
|
||||
if (el.id !== undefined) el.type = 'update'
|
||||
})
|
||||
}
|
||||
const ChangeMenu = (data: Record<string, any>) => {
|
||||
ReorderMenu()
|
||||
}
|
||||
const AddToMenu = (data: Record<string, any>, i: number) => {
|
||||
let newData: Record<string, any> = {
|
||||
title: data.title,
|
||||
konumId: route.params.menuId,
|
||||
slug: data.slug,
|
||||
parentMenuId: null,
|
||||
pageId: data.id,
|
||||
isActive: true,
|
||||
type: 'new',
|
||||
targetKey: '',
|
||||
sira: siteManagementMenuStore.menuContentList.length + 1
|
||||
}
|
||||
siteManagementMenuStore.menuContentList.push(newData)
|
||||
data.show = false
|
||||
}
|
||||
|
||||
const CheckPageList = () => {
|
||||
pageList.value.forEach((page) => {
|
||||
var show: boolean = true
|
||||
siteManagementMenuStore.menuContentList.forEach((menu) => {
|
||||
if (page.id === menu.pageId) show = false
|
||||
})
|
||||
page.show = show
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
loaded.value = true
|
||||
}, 10)
|
||||
}
|
||||
|
||||
const RemoveFromMenu = (el: Record<string, any>, i: number) => {
|
||||
siteManagementMenuStore.menuContentList.splice(i, 1)
|
||||
|
||||
if (el.pageId !== null) {
|
||||
let page = pageList.value.filter((itm) => itm.id === el.pageId)[0]
|
||||
page.show = true
|
||||
}
|
||||
if (el.id !== undefined) {
|
||||
siteManagementMenuStore.deleteMenuList.push(el.id)
|
||||
}
|
||||
ReorderMenu()
|
||||
}
|
||||
|
||||
const SaveMenuItem = () => {
|
||||
if (siteManagementMenuValidationStore.FormCheck()) {
|
||||
if (!isEdit.value) {
|
||||
let newData: Record<string, any> = {
|
||||
title: siteManagementMenuStore.menuItemData.title,
|
||||
konumId: route.params.menuId,
|
||||
slug: siteManagementMenuStore.menuItemData.slug,
|
||||
parentMenuId: null,
|
||||
pageId: null,
|
||||
isActive: true,
|
||||
type: 'new',
|
||||
targetKey: siteManagementMenuStore.menuItemData.targetKey ? '_blank' : '',
|
||||
sira: siteManagementMenuStore.menuContentList.length + 1
|
||||
}
|
||||
siteManagementMenuStore.menuContentList.push(newData)
|
||||
} else {
|
||||
if (siteManagementMenuStore.menuItemData.id !== undefined)
|
||||
siteManagementMenuStore.menuItemData.type = 'update'
|
||||
|
||||
siteManagementMenuStore.menuItemData.targetKey = siteManagementMenuStore
|
||||
.menuItemData.targetKey
|
||||
? '_blank'
|
||||
: ''
|
||||
|
||||
Object.assign(
|
||||
siteManagementMenuStore.menuContentList[editMenuIndex.value!],
|
||||
siteManagementMenuStore.menuItemData
|
||||
)
|
||||
|
||||
isEdit.value = false
|
||||
editMenuIndex.value = null
|
||||
}
|
||||
menuItemPanel.value = false
|
||||
}else{
|
||||
siteManagementMenuValidationStore.isFormValid = true
|
||||
}
|
||||
}
|
||||
|
||||
const GetMenuList = async () => {
|
||||
await siteManagementMenuService.GetMenuContentList()
|
||||
siteManagementMenuStore.menuContentList.sort((a, b) => a.sira - b.sira)
|
||||
|
||||
pageList.value.splice(
|
||||
0,
|
||||
pageList.value.length,
|
||||
...siteManagementPageStore.allPagesList
|
||||
)
|
||||
|
||||
CheckPageList()
|
||||
}
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await siteManagementPageService.GetAllPages()
|
||||
await GetMenuList()
|
||||
})
|
||||
</script>
|
||||
203
src/module/site-yonetimi/views/SliderListe.vue
Normal file
203
src/module/site-yonetimi/views/SliderListe.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<AdminLayout>
|
||||
<Breadcrumb currentPageText='Slider Listesi' />
|
||||
<section class='section-list'>
|
||||
<list-table-content
|
||||
:tableHeader='tableHeader'
|
||||
:rowAction='updateAction'
|
||||
:addAction='addAction'
|
||||
icon='sitemanagement'
|
||||
title='Slider Listesi'
|
||||
listText='Slider'
|
||||
:tableData='sliders'
|
||||
apiText='Slider Listesi'
|
||||
apiList='Slider'
|
||||
v-model:refresh='refresh'
|
||||
/>
|
||||
</section>
|
||||
<panel-wrapper
|
||||
v-if='panel'
|
||||
v-model='panel'
|
||||
:panel-title="
|
||||
isUpdate
|
||||
? 'Slider Düzenle'
|
||||
: 'Slider Ekle'
|
||||
">
|
||||
<template #panelContent>
|
||||
<form-input
|
||||
required
|
||||
v-model='panelSlider.baslik'
|
||||
label='Başlık' />
|
||||
<form-file
|
||||
v-model='panelSlider.resimUrl'
|
||||
label='Resim Url'
|
||||
:fileTypes="['png','jpg','jpeg']"
|
||||
elclass='panel-documents-item'
|
||||
fileType='img' />
|
||||
<div class='image-preview-wrapper' v-if='resimPreview'>
|
||||
<img :src='resimPreview' alt='Seçilen Resim' />
|
||||
</div>
|
||||
<form-input
|
||||
required
|
||||
v-model='panelSlider.url'
|
||||
label='Url' />
|
||||
<form-input
|
||||
required
|
||||
v-model='panelSlider.sira'
|
||||
label='Sıra' />
|
||||
</template>
|
||||
<template #footerButton>
|
||||
<div class='button-c button-save' @click='save'>
|
||||
{{ isUpdate ? 'Kaydet' : 'Ekle' }}
|
||||
</div>
|
||||
</template>
|
||||
</panel-wrapper>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted, 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 PanelPiyangoItiraz from '@/module/cekilisler/components/panel/PanelPiyangoItiraz.vue'
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const refreshList = ref<boolean>(false)
|
||||
const panel = ref<boolean>(false)
|
||||
const isUpdate = ref<boolean>(false)
|
||||
const tableHeader = ref<Record<string, any>[]>([
|
||||
{
|
||||
name: 'baslik',
|
||||
title: 'Başlık',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
name: 'sira',
|
||||
title: 'Sıra',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
name: 'resimUrl',
|
||||
title: 'Resim Url',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
name: 'url',
|
||||
title: 'Url',
|
||||
sort: true
|
||||
}
|
||||
])
|
||||
const resimPreview = computed(() => {
|
||||
if (!panelSlider.value.resimUrl) return null
|
||||
|
||||
if (typeof panelSlider.value.resimUrl === 'string') {
|
||||
return panelSlider.value.resimUrl
|
||||
}
|
||||
|
||||
// Eğer dosya ise
|
||||
return URL.createObjectURL(panelSlider.value.resimUrl)
|
||||
})
|
||||
|
||||
interface Slider {
|
||||
id: number
|
||||
baslik: string
|
||||
resimUrl: string
|
||||
sira: number
|
||||
url: string
|
||||
positionId: number
|
||||
}
|
||||
|
||||
const refresh = ref<number>(1)
|
||||
const panelSlider = ref<Slider>()
|
||||
const sliders = ref<Slider[]>([])
|
||||
const OpenMenu = (row: any) => {
|
||||
router.push('slider-yonetimi/' + row.id)
|
||||
}
|
||||
const addAction = async () => {
|
||||
isUpdate.value = false
|
||||
panelSlider.value = {
|
||||
baslik: '',
|
||||
resimUrl: '',
|
||||
url: '',
|
||||
sira: 1
|
||||
}
|
||||
panel.value = true
|
||||
|
||||
}
|
||||
const updateAction = (row: any) => {
|
||||
panelSlider.value = sliders.value.find(x => x.id == row.id)
|
||||
panel.value = true
|
||||
isUpdate.value = true
|
||||
}
|
||||
const loadSliders = async () => {
|
||||
const data = await dataStore.dataGet('Slider')
|
||||
console.log('apidata', data)
|
||||
sliders.value = data
|
||||
|
||||
console.log(sliders.value)
|
||||
}
|
||||
|
||||
const save = async () => {
|
||||
if (isUpdate.value)
|
||||
{
|
||||
const formData = new FormData()
|
||||
formData.append('Baslik', panelSlider.value.baslik)
|
||||
formData.append('Url', panelSlider.value.url)
|
||||
formData.append('Sira', panelSlider.value?.sira)
|
||||
if (panelSlider.value.resimUrl instanceof File) {
|
||||
formData.append('ResimUrl', panelSlider.value.resimUrl)
|
||||
}
|
||||
|
||||
let update = dataStore.dataPut('Slider/'+panelSlider.value.id,{
|
||||
data: formData,
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
})
|
||||
if (update !== 'errorfalse') {
|
||||
panel.value = false
|
||||
isUpdate.value = false
|
||||
refresh.value = refresh.value + 1
|
||||
}
|
||||
}
|
||||
else {
|
||||
let add = await dataStore.dataPost('Slider/CreateSlider', {
|
||||
data: panelSlider.value,
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
})
|
||||
if (add !== 'errorfalse') {
|
||||
panel.value = false
|
||||
isUpdate.value = false
|
||||
refresh.value = refresh.value + 1
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadSliders()
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.image-preview-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f8f9fa;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 12px;
|
||||
margin: 12px 20px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.image-preview-wrapper img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 250px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
278
src/module/site-yonetimi/views/SliderYonetimi.vue
Normal file
278
src/module/site-yonetimi/views/SliderYonetimi.vue
Normal file
@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<AdminLayout>
|
||||
<Breadcrumb current-page-text="Menu Yonetimi" />
|
||||
<div class="form-content">
|
||||
<div class="form-inner-content form-inner-content-left">
|
||||
<div class="form-part">
|
||||
<div class="form-part-title">
|
||||
<h4>
|
||||
{{ Number(route.params.menuId) === 1 ? 'Ana Menü' : 'Footer Menü' }}
|
||||
</h4>
|
||||
<div class="form-part-title-buttons">
|
||||
<div class="button-c button-save" @click="SaveMenu">Kaydet</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-part-content">
|
||||
<template v-if="loaded">
|
||||
<template v-if="siteManagementMenuStore.menuContentList.length > 0">
|
||||
<div class="form-inner-comment">
|
||||
Menü öğelerini sürükle-bırak yaparak düzenleyebilirsiniz.
|
||||
</div>
|
||||
<draggable
|
||||
class="menu-list-group"
|
||||
:list="siteManagementMenuStore.menuContentList"
|
||||
:group="{ name: 'menu', put: false }"
|
||||
itemKey="id"
|
||||
@end="ChangeMenu">
|
||||
<template #item="{ element, index }">
|
||||
<div class="menu-list-item">
|
||||
<span>{{ element.title }}</span>
|
||||
<div class="menu-list-item-buttons">
|
||||
<button
|
||||
@click="EditMenu(element, index)"
|
||||
v-if="element.pageId === null">
|
||||
Düzenle
|
||||
</button>
|
||||
<button
|
||||
@click="RemoveFromMenu(element, index)"
|
||||
class="button-alert">
|
||||
Sil
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="form-inner-comment">
|
||||
Menüye henüz öğe eklenmemiş. Sağdaki bölümden öğe ekleyebilirsiniz.
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-inner-content form-inner-content-right">
|
||||
<div class="form-part">
|
||||
<div class="form-part-title">
|
||||
<h4>Sayfalar</h4>
|
||||
<div class="form-part-title-buttons">
|
||||
<div class="button-c button-save" @click="AddMenuItem">Menü Öğesi Ekle</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-part-content">
|
||||
<div class="menu-list-group">
|
||||
<template v-for="(page, i) in pageList">
|
||||
<div v-if="page.show" class="menu-list-item menu-list-item-page">
|
||||
<span>{{ page.title }}</span>
|
||||
<div class="menu-list-item-buttons">
|
||||
<button @click="AddToMenu(page, i)">Menüye Ekle</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<panel-wrapper
|
||||
wide
|
||||
v-if="menuItemPanel"
|
||||
v-model="menuItemPanel"
|
||||
:panel-title="isEdit ? 'Menü Öğesi Düzenle' : 'Menü Öğesi Ekle'">
|
||||
<template #panelContent>
|
||||
<panel-menu-item />
|
||||
</template>
|
||||
<template #footerButton>
|
||||
<div class="button-c button-save" @click="SaveMenuItem">
|
||||
{{ isEdit ? 'Kaydet' : 'Ekle' }}
|
||||
</div>
|
||||
</template>
|
||||
</panel-wrapper>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onBeforeMount } from 'vue'
|
||||
import draggable from 'vuedraggable'
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue'
|
||||
import { Breadcrumb } from '@/components/global'
|
||||
import PanelWrapper from '@/components/PanelWrapper.vue'
|
||||
import PanelMenuItem from '../components/panel/PanelMenuItem.vue'
|
||||
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
import { useDataStore } from '@/stores/dataStore'
|
||||
const dataStore = useDataStore()
|
||||
import { useSiteManagementMenuStore } from '../stores/siteManagementMenuStore'
|
||||
const siteManagementMenuStore = useSiteManagementMenuStore()
|
||||
import { useSiteManagementPageStore } from '../stores/siteManagementPageStore'
|
||||
const siteManagementPageStore = useSiteManagementPageStore()
|
||||
import { useSiteManagementMenuValidationStore } from '../validation/siteManagementMenuValidationStore'
|
||||
const siteManagementMenuValidationStore = useSiteManagementMenuValidationStore()
|
||||
import { useSiteManagementMenuService } from '../service/siteManagementMenuService'
|
||||
const siteManagementMenuService = useSiteManagementMenuService()
|
||||
import { useSiteManagementPageService } from '../service/siteManagementPageService'
|
||||
const siteManagementPageService = useSiteManagementPageService()
|
||||
|
||||
const onayIslemTipleri = ref<Record<string, any>[]>([])
|
||||
const formData = reactive<Record<string, any>>({})
|
||||
const invalidTexts = reactive<Record<string, any>>({})
|
||||
const loaded = ref<boolean>(false)
|
||||
|
||||
const menuItemPanel = ref<boolean>(false)
|
||||
const isEdit = ref<boolean>(false)
|
||||
const pageList = ref<Record<string, any>[]>([])
|
||||
const editMenuIndex = ref<number | null>(null)
|
||||
|
||||
const AddMenuItem = () => {
|
||||
isEdit.value = false
|
||||
Object.assign(
|
||||
siteManagementMenuStore.menuItemData,
|
||||
siteManagementMenuStore.safeMenuItemData
|
||||
)
|
||||
menuItemPanel.value = true
|
||||
}
|
||||
|
||||
const EditMenu = (data: Record<string, any>, i: number) => {
|
||||
isEdit.value = true
|
||||
Object.assign(siteManagementMenuStore.menuItemData, data)
|
||||
siteManagementMenuStore.menuItemData.targetKey =
|
||||
siteManagementMenuStore.menuItemData.targetKey === '_blank' ? true : false
|
||||
|
||||
editMenuIndex.value = i
|
||||
menuItemPanel.value = true
|
||||
}
|
||||
|
||||
const SaveMenu = async () => {
|
||||
var dt: any
|
||||
siteManagementMenuStore.menuContentList.forEach(async (el, i) => {
|
||||
if (el.type === 'update') {
|
||||
dt = await dataStore.dataPut('Menu/' + el.id, {
|
||||
data: el
|
||||
})
|
||||
}
|
||||
if (el.type === 'new') {
|
||||
dt = await dataStore.dataPost('Menu', {
|
||||
data: el
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
siteManagementMenuStore.deleteMenuList.forEach(async (el, i) => {
|
||||
dt = await dataStore.dataDelete('Menu/' + el)
|
||||
})
|
||||
|
||||
setTimeout(async () => {
|
||||
siteManagementMenuStore.deleteMenuList = []
|
||||
await GetMenuList()
|
||||
}, 50)
|
||||
}
|
||||
|
||||
const ReorderMenu = () => {
|
||||
siteManagementMenuStore.menuContentList.forEach((el, i) => {
|
||||
el.sira = i + 1
|
||||
if (el.id !== undefined) el.type = 'update'
|
||||
})
|
||||
}
|
||||
const ChangeMenu = (data: Record<string, any>) => {
|
||||
ReorderMenu()
|
||||
}
|
||||
const AddToMenu = (data: Record<string, any>, i: number) => {
|
||||
let newData: Record<string, any> = {
|
||||
title: data.title,
|
||||
konumId: route.params.menuId,
|
||||
slug: data.slug,
|
||||
parentMenuId: null,
|
||||
pageId: data.id,
|
||||
isActive: true,
|
||||
type: 'new',
|
||||
targetKey: '',
|
||||
sira: siteManagementMenuStore.menuContentList.length + 1
|
||||
}
|
||||
siteManagementMenuStore.menuContentList.push(newData)
|
||||
data.show = false
|
||||
}
|
||||
|
||||
const CheckPageList = () => {
|
||||
pageList.value.forEach((page) => {
|
||||
var show: boolean = true
|
||||
siteManagementMenuStore.menuContentList.forEach((menu) => {
|
||||
if (page.id === menu.pageId) show = false
|
||||
})
|
||||
page.show = show
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
loaded.value = true
|
||||
}, 10)
|
||||
}
|
||||
|
||||
const RemoveFromMenu = (el: Record<string, any>, i: number) => {
|
||||
siteManagementMenuStore.menuContentList.splice(i, 1)
|
||||
|
||||
if (el.pageId !== null) {
|
||||
let page = pageList.value.filter((itm) => itm.id === el.pageId)[0]
|
||||
page.show = true
|
||||
}
|
||||
if (el.id !== undefined) {
|
||||
siteManagementMenuStore.deleteMenuList.push(el.id)
|
||||
}
|
||||
ReorderMenu()
|
||||
}
|
||||
|
||||
const SaveMenuItem = () => {
|
||||
if (siteManagementMenuValidationStore.FormCheck()) {
|
||||
if (!isEdit.value) {
|
||||
let newData: Record<string, any> = {
|
||||
title: siteManagementMenuStore.menuItemData.title,
|
||||
konumId: route.params.menuId,
|
||||
slug: siteManagementMenuStore.menuItemData.slug,
|
||||
parentMenuId: null,
|
||||
pageId: null,
|
||||
isActive: true,
|
||||
type: 'new',
|
||||
targetKey: siteManagementMenuStore.menuItemData.targetKey ? '_blank' : '',
|
||||
sira: siteManagementMenuStore.menuContentList.length + 1
|
||||
}
|
||||
siteManagementMenuStore.menuContentList.push(newData)
|
||||
} else {
|
||||
if (siteManagementMenuStore.menuItemData.id !== undefined)
|
||||
siteManagementMenuStore.menuItemData.type = 'update'
|
||||
|
||||
siteManagementMenuStore.menuItemData.targetKey = siteManagementMenuStore
|
||||
.menuItemData.targetKey
|
||||
? '_blank'
|
||||
: ''
|
||||
|
||||
Object.assign(
|
||||
siteManagementMenuStore.menuContentList[editMenuIndex.value!],
|
||||
siteManagementMenuStore.menuItemData
|
||||
)
|
||||
|
||||
isEdit.value = false
|
||||
editMenuIndex.value = null
|
||||
}
|
||||
menuItemPanel.value = false
|
||||
}else{
|
||||
siteManagementMenuValidationStore.isFormValid = true
|
||||
}
|
||||
}
|
||||
|
||||
const GetMenuList = async () => {
|
||||
await siteManagementMenuService.GetMenuContentList()
|
||||
siteManagementMenuStore.menuContentList.sort((a, b) => a.sira - b.sira)
|
||||
|
||||
pageList.value.splice(
|
||||
0,
|
||||
pageList.value.length,
|
||||
...siteManagementPageStore.allPagesList
|
||||
)
|
||||
|
||||
CheckPageList()
|
||||
}
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await siteManagementPageService.GetAllPages()
|
||||
await GetMenuList()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user