video-maker/frontend/src/views/main/Main.vue

<script lang="ts">
import { appName } from "@/env";
import { reactive } from "vue";
import type { RouteLocationNormalized, NavigationGuardNext } from "vue-router";
import { onBeforeRouteUpdate } from "vue-router";
import { useMainStore } from "@/stores/main";
import { storeToRefs } from "pinia";
import { useI18n } from "vue-i18n";

export default {
  setup() {
    onBeforeRouteUpdate((to, from, next) => {
      routeGuardAdmin(to, from, next);
    });

    const { t, locale } = useI18n();
    const mainStore = useMainStore();
    const mainStoreRef = storeToRefs(mainStore);

    const hasAdminAccess = mainStoreRef.readhasAdminAccess;
    const miniDrawer = mainStoreRef.readDashboardMiniDrawer;
    const showDrawer = mainStoreRef.readDashboardShowDrawer;

    function switchMiniDrawer() {
      mainStore.setDashboardMiniDrawer(
        !mainStoreRef.readDashboardMiniDrawer.value
      );
    }

    function switchShowDrawer() {
      mainStore.setDashboardShowDrawer(
        !mainStoreRef.readDashboardShowDrawer.value
      );
    }

    (function () {
      if (window.innerWidth < 600) {
        switchShowDrawer();
      }
    })();

    function logout() {
      mainStore.logOut();
    }

    const lang = reactive([
      { title: "English", text: "en" },
      { title: "中文", text: "zh" },
    ]);

    function setLang(lang: String) {
      locale.value = `${lang}`;
      localStorage.setItem("lang", `${lang}`);
    }

    return {
      t,
      locale,
      hasAdminAccess,
      miniDrawer,
      showDrawer,
      switchMiniDrawer,
      switchShowDrawer,
      logout,
      lang,
      setLang,
      appName,
    };
  },
  beforeRouteEnter(to, from, next) {
    routeGuardAdmin(to, from, next);
  },
};
const routeGuardAdmin = async (
  to: RouteLocationNormalized,
  from: RouteLocationNormalized,
  next: NavigationGuardNext
) => {
  const mainStore = useMainStore();
  const mainStoreRef = storeToRefs(mainStore);
  if (!mainStoreRef.readhasAdminAccess) {
    next("/main");
  } else {
    next();
  }
};
</script>

<template>
  <div>
    <v-navigation-drawer persistent :rail="miniDrawer" v-model="showDrawer">
      <v-sheet class="d-flex flex-column fill-height">
        <v-sheet>
          <!-- <a href="https://ai.choozmo.com/ai-presenter/info/" class="d-flex justify-center mt-3">
            <img src="@/assets/img/Choozmo-logo.png" alt="" class="logo-img" />
          </a> -->
          <v-list>
            <v-list-item
              class="py-4"
              @click="switchShowDrawer"
              :prepend-icon="miniDrawer ? 'chevron_right' : 'chevron_left'"
            >
            </v-list-item>
            <!-- <v-list-subheader><span v-show="!miniDrawer">Main menu</span></v-list-subheader> -->
            <v-list-item to="/main/dashboard" prepend-icon="dashboard">
              <v-list-item-title>{{ t("dashboard") }}</v-list-item-title>
            </v-list-item>
            <v-list-item to="/main/make-video" prepend-icon="video_call">
              <v-list-item-title>{{ t("makeVideo") }}</v-list-item-title>
            </v-list-item>
            <v-list-item to="/main/progress" prepend-icon="list">
              <v-list-item-title>{{ t("progress") }}</v-list-item-title>
            </v-list-item>
            <v-list-item to="/main/make-article" prepend-icon="article">
              <v-list-item-title>{{ t("article") }}</v-list-item-title>
            </v-list-item>
            <v-list-item to="/main/make-image" prepend-icon="image">
              <v-list-item-title>圖片優化</v-list-item-title>
            </v-list-item>
            <!-- <v-list-item to="/main/profile/view" prepend-icon="person">
              <v-list-item-title>{{ t("userProfile") }}</v-list-item-title>
            </v-list-item> -->
            <v-list-item to="/main/profile/edit" prepend-icon="edit">
              <v-list-item-title>{{ t("editProfile") }}</v-list-item-title>
            </v-list-item>
            <v-list-item to="/main/profile/password" prepend-icon="key">
              <v-list-item-title>{{ t("changePassword") }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-sheet>
        <v-divider></v-divider>
        <v-sheet class="">
          <v-list subheader v-show="hasAdminAccess">
            <v-list-subheader
              ><span v-show="!miniDrawer">Admin</span></v-list-subheader
            >
            <v-list-item to="/main/admin/users/all" prepend-icon="people">
              <v-list-item-title>Manage Users</v-list-item-title>
            </v-list-item>
            <v-list-item
              to="/main/admin/users/create"
              prepend-icon="person_add"
            >
              <v-list-item-title>Create User</v-list-item-title>
            </v-list-item>
            <v-list-item
              to="/main/admin/test-celery"
              prepend-icon="engineering"
            >
              <v-list-item-title>Test Celery</v-list-item-title>
            </v-list-item>
            <v-list-item
              to="/main/admin/test-ecpay"
              prepend-icon="payments"
            >
              <v-list-item-title>Test ECPay</v-list-item-title>
            </v-list-item>
            <v-list-item
              to="/main/admin/test-style-preview"
              prepend-icon="preview"
            >
              <v-list-item-title>Test Style Preview</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-sheet>
        <!-- <v-spacer></v-spacer> -->
        <v-sheet class="mt-auto">
          <v-list>
            <v-list-item @click="logout" prepend-icon="logout">
              <v-list-item-title>{{ t("logout") }}</v-list-item-title>
            </v-list-item>
            <v-divider></v-divider>
            <a
              href="https://ai.choozmo.com/ai-presenter/info/"
              class="d-flex justify-center mt-3"
              target="_blank"
            >
              <img
                src="@/assets/img/Choozmo-logo.png"
                alt="Choozmo-logo"
                class="logo-img"
              />
            </a>
            <!-- <v-list-item
              @click="switchMiniDrawer"
              :prepend-icon="miniDrawer ? 'chevron_right' : 'chevron_left'"
            >
              <v-list-item-title>{{ t("collapse") }}</v-list-item-title>
            </v-list-item> -->
          </v-list>
        </v-sheet>
      </v-sheet>
    </v-navigation-drawer>
    <v-main>
      <v-toolbar class="navbar">
        <v-app-bar-nav-icon @click.stop="switchShowDrawer"></v-app-bar-nav-icon>
        <v-toolbar-title v-text="appName"></v-toolbar-title>
        <v-spacer></v-spacer>
        <v-menu bottom left offset-y :close-on-content-click="false">
          <template v-slot:activator="{ props }">
            <v-btn icon="more_vert" v-bind="props" />
          </template>
          <v-list>
            <!-- <v-list-item to="/main/profile" append-icon="person">
              <v-list-item-title>{{ t("userProfile") }}</v-list-item-title>
            </v-list-item> -->

            <!-- <v-list-item to="/main/profile" append-icon="language">
              <v-list-item-title>{{ t("language") }}</v-list-item-title>
            </v-list-item> -->

            <v-list-group value="Admin">
              <template v-slot:activator="{ props }">
                <v-list-item v-bind="props">
                  <v-list-item-title>{{ t("language") }}</v-list-item-title>
                </v-list-item>
              </template>

              <v-list-item
                v-for="(item, index) in lang"
                :key="index"
                :value="item.text"
                @click="setLang(item.text)"
              >
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </v-list-item>
            </v-list-group>

            <v-list-item @click="logout" append-icon="logout">
              <v-list-item-title>{{ t("logout") }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-toolbar>
      <router-view></router-view>
    </v-main>

    <v-footer class="pa-3" app>
      <v-spacer></v-spacer>
      <span>&copy; ChoozMo</span>
    </v-footer>
  </div>
</template>

<style lang="scss">
.navbar {
  color: #fff;
  background-image: linear-gradient(
    -225deg,
    rgb(234, 84, 19) 35%,
    rgb(178, 69, 146) 100%
  );
}

.logo-img {
  max-width: 150px;
}

.card-title {
  letter-spacing: 1px !important;
}
</style>