autoflow-web-console/src/components/common/LayoutComponent.vue

<script setup>
import { useRoute, useRouter } from "vue-router";
import { storage } from "@/utils/storage.js";
import DrawerComponent from "@/components/common/DrawerComponent.vue";
import { watchEffect } from "vue";
import Select from "@/views/Select.vue";
import { UserManagerService } from "@/components/service/management/userManagerService";

import { storeToRefs } from "pinia";
import { useAutoflowStore } from "@/stores/autoflowStore";

const autoflow = useAutoflowStore();
const { ProjectName } = storeToRefs(autoflow);
const showPasswordModal = ref(false);
const selectedUserData = ref({});

const route = useRoute();
const router = useRouter();

const menu = ref([]);

const menuItems = [
  {
    title: "Select Project",
    click: () => {
      goSelect();
    },
  },
  {
    title: "Change Password",
    click: () => {
      showPasswordModal.value = true;
    },
  },
  {
    title: "Logout",
    icon: "mdi-logout",
    click: () => {
      logOut();
    },
  },
];

const userMenuItems = [
  {
    title: "Select Project",
  },
  {
    title: "Change Password",
  },
  {
    title: "Logout",
    icon: "mdi-logout",
    click: () => {
      logOut();
    },
  },
];

const drawer = ref(null);
const pageTitle = computed(() => {
  return route.meta.title;
});

const pagePath = computed(() => {
  return route.path;
});
const goSelect = () => {
  storage.clearAuth();
  router.push("/select");
};

const logOut = () => {
  UserManagerService.signOut()
    .catch((err) => {
      console.error("logout API failed:", err);
    })
    .finally(() => {
      autoflow.setProjectName("");
      storage.clearAuth();
      router.push("/login");
    });
};
const goHome = () => {
  router.push("/main");
};

watchEffect(() => {
  // const auth = storage.getAuth().auth;
  // if (auth === "ADMIN") {
  menu.value = menuItems;
  // } else {
  //   menu.value = userMenuItems;
  // }
});
</script>

<template>
  <v-app>
    <v-navigation-drawer
      v-model="drawer"
      border="0"
      hide-overlay
      permanent
      v-if="!route.meta.hideSidebar"
    >
      <DrawerComponent />
    </v-navigation-drawer>

    <v-app-bar class="bg-shades-transparent" flat>
      <v-spacer></v-spacer>
      <v-menu location="bottom end">
        <template v-slot:activator="{ props }">
          <v-tooltip location="bottom" text="settings">
            <template #activator="{ props }">
              <v-btn icon color="primary" class="mr-3" v-bind="props">
                <v-icon>mdi-cog</v-icon>
              </v-btn>
            </template>
          </v-tooltip>
          <v-tooltip location="bottom" text="Projact">
            <template #activator="{ props }">
              <v-btn
                icon
                color="primary"
                class="mr-3"
                @click="goSelect"
                v-bind="props"
              >
                <v-icon>mdi-home</v-icon>
              </v-btn>
            </template>
          </v-tooltip>
          <div style="min-width: 180px" class="d-flex flex-column align-end">
            <div class="font-weight-black">ADMIN_001</div>
            <div class="text-subtitle-2">
              {{ ProjectName || "No Project Selected" }}
            </div>
          </div>
          <v-btn icon color="primary" v-bind="props" class="mr-3">
            <v-icon>mdi-arrow-down-drop-circle-outline</v-icon>
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in menu"
            :key="index"
            :value="index"
            @click="item.click"
            :prepend-icon="item.icon"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>

    <v-main>
      <v-container
        fluid
        class="pa-16 background d-flex justify-center"
        style="width: 100%"
      >
        <slot></slot>
      </v-container>
    </v-main>
  </v-app>
</template>

<style scoped lang="sass"></style>