ilk

ui/src/layouts/MainLayout.vue

@@ -0,0 +1,302 @@
+<template>
+  <q-layout view="hHh Lpr fFf">
+
+    <!-- HEADER -->
+    <q-header elevated class="bg-primary text-white">
+      <q-toolbar>
+
+        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+
+        <q-toolbar-title>
+          <q-avatar class="bg-secondary q-mr-sm">
+            <img src="/images/Baggi-tekstilas-logolu.jpg" />
+          </q-avatar>
+          Baggi Software System
+        </q-toolbar-title>
+
+        <q-btn flat dense round icon="logout" @click="confirmLogout" />
+
+      </q-toolbar>
+    </q-header>
+
+    <!-- DRAWER -->
+    <q-drawer
+      v-if="perm.loaded"
+      v-model="leftDrawerOpen"
+      show-if-above
+      bordered
+      class="bg-secondary text-white"
+    >
+
+      <q-scroll-area style="height:100%">
+
+        <q-list padding>
+
+          <!-- DYNAMIC MENU -->
+          <template
+            v-for="(item, i) in filteredMenu"
+            :key="i"
+          >
+
+            <!-- GROUP -->
+            <q-expansion-item
+              v-if="item.children"
+              :icon="item.icon"
+              :label="item.label"
+              expand-separator
+            >
+
+              <q-item
+                v-for="(c, j) in item.children"
+                :key="j"
+                clickable
+                :to="c.to"
+              >
+
+                <q-item-section avatar>
+                  <q-icon name="chevron_right" />
+                </q-item-section>
+
+                <q-item-section>
+                  {{ c.label }}
+                </q-item-section>
+
+              </q-item>
+
+            </q-expansion-item>
+
+
+            <!-- SINGLE -->
+            <q-item
+              v-else
+              clickable
+              :to="item.to"
+            >
+
+              <q-item-section avatar>
+                <q-icon :name="item.icon" />
+              </q-item-section>
+
+              <q-item-section>
+                {{ item.label }}
+              </q-item-section>
+
+            </q-item>
+
+            <q-separator spaced />
+
+          </template>
+
+
+          <!-- PASSWORD -->
+          <q-item clickable to="/app/change-password">
+
+            <q-item-section avatar>
+              <q-icon name="vpn_key" />
+            </q-item-section>
+
+            <q-item-section>
+              Şifre Değiştir
+            </q-item-section>
+
+          </q-item>
+
+        </q-list>
+
+      </q-scroll-area>
+
+    </q-drawer>
+
+
+    <!-- CONTENT -->
+    <q-page-container class="with-bg">
+      <router-view />
+    </q-page-container>
+
+
+    <!-- FOOTER -->
+    <q-footer class="bg-grey-8 text-white">
+      <q-toolbar class="bg-secondary">
+
+        <q-toolbar-title>
+          Baggi Software System
+        </q-toolbar-title>
+
+      </q-toolbar>
+    </q-footer>
+
+  </q-layout>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Dialog } from 'quasar'
+
+import { useAuthStore } from 'stores/authStore'
+import { usePermissionStore } from 'stores/permissionStore'
+import { usePermission } from 'src/composables/usePermission'
+
+const { canRead, canWrite, canUpdate } = usePermission()
+
+const canReadOrder   = canRead('order')
+const canWriteOrder  = canWrite('order')
+const canUpdateOrder = canUpdate('order')
+
+
+/* ================= STORES ================= */
+
+const router = useRouter()
+const auth = useAuthStore()
+const perm = usePermissionStore()
+
+
+/* ================= UI ================= */
+
+const leftDrawerOpen = ref(true)
+
+function toggleLeftDrawer () {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
+
+function confirmLogout () {
+  Dialog.create({
+    title: 'Çıkış Yap',
+    message: 'Oturumunuzu kapatmak istediğinize emin misiniz?',
+    cancel: true,
+    persistent: true
+  }).onOk(() => {
+    auth.clearSession()
+    perm.clear()
+    router.push('/login')
+  })
+}
+
+
+/* ================= LOAD PERMISSIONS ================= */
+
+onMounted(async () => {
+  if (!perm.loaded) {
+    await perm.fetchPermissions()
+  }
+})
+
+
+/* ================= MENU CONFIG ================= */
+
+const menuItems = [
+
+  {
+    label: 'Ana Panel',
+    icon: 'dashboard',
+    to: '/app',
+    permission: 'system:view'
+  },
+
+  {
+    label: 'Finans',
+    icon: 'account_balance',
+
+    children: [
+      {
+        label: 'Cari Ekstre',
+        to: '/app/statementofaccount',
+        permission: 'finance:view'
+      }
+    ]
+  },
+
+  {
+    label: 'Sipariş',
+    icon: 'shopping_cart',
+
+    children: [
+      {
+        label: 'Siparişler',
+        to: '/app/order-gateway',
+        permission: 'order:view'
+      }
+    ]
+  },
+
+  {
+    label: 'Sistem',
+    icon: 'settings',
+
+    children: [
+
+      {
+        label: 'Rol + Departman Yetkileri',
+        to: '/app/role-dept-permissions',
+        permission: 'user:update'
+      },
+
+      {
+        label: 'Kullanıcı Yetkileri',
+        to: '/app/user-permissions',
+        permission: 'user:update'
+      },
+
+      {
+        label: 'Loglar',
+        to: '/app/activity-logs',
+        permission: 'user:view'
+      },
+
+      {
+        label: 'Test Mail',
+        to: '/app/test-mail',
+        permission: 'user:insert'
+      }
+
+    ]
+  },
+
+  {
+    label: 'Kullanıcı Yönetimi',
+    icon: 'people',
+
+    children: [
+      {
+        label: 'Kullanıcılar',
+        to: '/app/users',
+        permission: 'user:view'
+      }
+    ]
+  }
+
+]
+
+
+/* ================= FILTERED MENU ================= */
+
+const filteredMenu = computed(() => {
+
+  if (!perm.loaded) return []
+
+  return menuItems
+    .map(item => {
+
+      if (item.children) {
+
+        const children = item.children.filter(c =>
+          perm.hasApiPermission(c.permission)
+        )
+
+        if (!children.length) return null
+
+        return {
+          ...item,
+          children
+        }
+      }
+
+      if (!perm.hasApiPermission(item.permission)) {
+        return null
+      }
+
+      return item
+    })
+    .filter(Boolean)
+})
+</script>