bssapp/ui/src/layouts/MainLayout.vue

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


/* ================= 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: 'Tamamlanan Siparişleri Toplu Kapatma',
        to: '/app/order-bulk-close',
        permission: 'order:update'
      }
    ]
  },

  {
    label: 'Sistem',
    icon: 'settings',

    children: [

      {
        label: 'Rol + Departman Yetkileri',
        to: '/app/role-dept-permissions',
        permission: 'system:update'
      },

      {
        label: 'Kullanıcı Yetkileri',
        to: '/app/user-permissions',
        permission: 'system:update'
      },

      {
        label: 'Loglar',
        to: '/app/activity-logs',
        permission: 'system:read'
      },

      {
        label: 'Test Mail',
        to: '/app/test-mail',
        permission: 'system:update'
      }

    ]
  },

  {
    label: 'Kullanıcı Yönetimi',
    icon: 'people',

    children: [
      {
        label: 'Kullanıcılar',
        to: '/app/users',
        permission: 'system:read'
      }
    ]
  }

]


/* ================= 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>