slider popup

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "panel-vue",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "panel-vue",
-      "version": "0.0.0",
+      "version": "1.0.0",
       "dependencies": {
         "@microsoft/signalr": "^8.0.7",
         "axios": "^1.7.2",

src/init/axios-init.ts

@@ -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'

src/layouts/admin-inc/SideMenu.vue

@@ -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'
         }
       ]
     },

src/module/cekilisler/service/signalrService.ts

@@ -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()

src/module/site-yonetimi/routes/index.ts

@@ -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]

src/module/site-yonetimi/routes/popup-liste.ts

@@ -0,0 +1,10 @@
+import PopupListe from "../views/PopupListe.vue";
+
+export default {
+    path: '/site-yonetimi/popup-listesi',
+    name: 'PopupListe',
+    component: PopupListe,
+    meta: {
+        authRequired: true
+    }
+}

src/module/site-yonetimi/routes/popup-yonetimi.ts

@@ -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
+    }
+}

src/module/site-yonetimi/routes/slider-liste.ts

@@ -0,0 +1,10 @@
+import SliderListe from "../views/SliderListe.vue";
+
+export default {
+    path: '/site-yonetimi/slider-listesi',
+    name: 'SliderListe',
+    component: SliderListe,
+    meta: {
+        authRequired: true
+    }
+}

src/module/site-yonetimi/routes/slider-yonetimi.ts

@@ -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
+    }
+}

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>