@iservice365/layer-common 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 0.0.3
+
+### Patch Changes
+
+- ef16085: adjust services to navigation drawer
+
+## 0.0.2
+
+### Patch Changes
+
+- de78b1f: Add error page and plain layout
+
 ## 0.0.1
 
 ### Patch Changes

package/components/Layout/Header.vue

@@ -1,12 +1,7 @@
 <template>
   <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
     <div style="width: 264px" class="ml-2">
-      <nuxt-link
-        class="text-h6 font-weight-medium text-decoration-none APP_NAME"
-        :to="{ name: APP_NAME_ROUTE }"
-      >
-        {{ APP_NAME }}
-      </nuxt-link>
+      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
     </div>
 
     <v-row no-gutters>
@@ -32,86 +27,6 @@
         @click="toggleTheme"
       />
 
-      <v-menu offset="10px" :close-on-content-click="false">
-        <template #activator="{ props }">
-          <v-btn icon="mdi-dots-grid" variant="text" v-bind="props" />
-        </template>
-
-        <v-card
-          width="380"
-          max-height="400px"
-          elevation="2"
-          rounded="xl"
-          class="pa-4"
-        >
-          <v-row no-gutters>
-            <v-col cols="12">
-              <v-card width="100%" variant="tonal" rounded="t-xl b-0">
-                <v-row class="pa-4">
-                  <v-col cols="4">
-                    <v-btn
-                      prepend-icon="mdi-account"
-                      stacked
-                      rounded="xl"
-                      variant="text"
-                      class="text-capitalize text-subtitle-2"
-                      @click="redirect(APP_ACCOUNT, 'home')"
-                    >
-                      Account
-                    </v-btn>
-                  </v-col>
-
-                  <v-col cols="4">
-                    <v-btn
-                      prepend-icon="mdi-security"
-                      stacked
-                      rounded="xl"
-                      variant="text"
-                      class="text-capitalize text-subtitle-2"
-                      @click="redirect(APP_ADMIN, 'home')"
-                    >
-                      Admin
-                    </v-btn>
-                  </v-col>
-                </v-row>
-              </v-card>
-            </v-col>
-
-            <v-col cols=" 12" class="mt-2">
-              <v-card
-                width="100%"
-                min-height="50px"
-                variant="tonal"
-                rounded="b-xl"
-              >
-                <v-card-title class="text-center pb-0"> Apps </v-card-title>
-
-                <v-row no-gutters class="px-2 pb-2">
-                  <v-col
-                    v-for="item in apps"
-                    :key="item.title"
-                    cols="4"
-                    class="pa-2"
-                  >
-                    <v-btn
-                      stacked
-                      width="100%"
-                      :prepend-icon="item.icon"
-                      rounded="xl"
-                      variant="text"
-                      class="text-center text-capitalize text-caption"
-                      @click="redirect(item.link, item.landingPage)"
-                    >
-                      {{ item.title }}
-                    </v-btn>
-                  </v-col>
-                </v-row>
-              </v-card>
-            </v-col>
-          </v-row>
-        </v-card>
-      </v-menu>
-
       <v-menu offset="10px" :close-on-content-click="false">
         <template #activator="{ props }">
           <v-btn fab variant="text" icon v-bind="props" class="mx-2">
@@ -181,10 +96,11 @@ import { useTheme } from "vuetify";
 
 const search = defineModel("search", { type: String });
 
-const { redirect, apps } = useLocal();
+const { drawer } = useLocal();
+
+const { redirect } = useUtils();
 
-const { APP_ACCOUNT, APP_ADMIN, APP_NAME, APP_NAME_ROUTE } =
-  useRuntimeConfig().public;
+const { APP_ACCOUNT, APP_NAME, APP_NAME_ROUTE } = useRuntimeConfig().public;
 
 const theme = useTheme();
 

package/components/Layout/NavigationDrawer.vue

@@ -1,7 +1,19 @@
 <template>
-  <v-navigation-drawer permanent floating class="pr-2">
+  <v-navigation-drawer
+    v-model="drawer"
+    permanent
+    floating
+    class="pr-2 bg-primary"
+  >
     <v-list>
-      <slot name="action"/>
+      <v-list-item>
+        <v-list-item-content>
+          <v-list-item-title class="text-h6 text-white">
+            {{ APP_NAME }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+      <slot name="action" />
       <template
         v-for="(navigationItem, navigationIndex) in props.navigationItems"
         :key="`${navigationItem.route.name}-${navigationIndex}`"
@@ -13,6 +25,21 @@
           :children="navigationItem.children"
         />
       </template>
+
+      <v-list-subheader>
+        <span class="font-weight-bold text-white">Services</span>
+      </v-list-subheader>
+      <template
+        v-for="(service, serviceIndex) in services"
+        :key="`${service.id}-${serviceIndex}`"
+      >
+        <NavigationItem
+          :name="`${service.id}-${serviceIndex}`"
+          :title="service.title"
+          :icon="service.icon"
+          :link="service.link"
+        />
+      </template>
     </v-list>
   </v-navigation-drawer>
 </template>
@@ -21,4 +48,43 @@
 const props = defineProps({
   navigationItems: { type: Array<TNavigationItem>, required: true },
 });
+
+const { drawer } = useLocal();
+
+const {
+  APP_NAME,
+  APP_SECURITY,
+  APP_HYGIENE,
+  APP_PROPERTY_MANAGEMENT,
+  APP_MECHANICAL_ELECTRICAL,
+} = useRuntimeConfig().public;
+
+const services = computed(() => {
+  return [
+    {
+      id: "security",
+      title: "Security",
+      icon: "mdi-shield",
+      link: APP_SECURITY,
+    },
+    {
+      id: "hygiene",
+      title: "Hygiene",
+      icon: "mdi-spray",
+      link: APP_HYGIENE,
+    },
+    {
+      id: "property-management",
+      title: "Property Management",
+      icon: "mdi-home",
+      link: APP_PROPERTY_MANAGEMENT,
+    },
+    {
+      id: "mechanical-electrical",
+      title: "Mechanical & Electrical",
+      icon: "mdi-wrench",
+      link: APP_MECHANICAL_ELECTRICAL,
+    },
+  ];
+});
 </script>

package/components/NavigationItem.vue

@@ -22,7 +22,8 @@
   </v-list-group>
 
   <v-list-item
-    v-else
+    v-if="props.route.name"
+    :key="props.name"
     :prepend-icon="icon"
     :to="props.route"
     rounded="e-pill"
@@ -30,6 +31,17 @@
   >
     {{ title }}
   </v-list-item>
+
+  <v-list-item
+    v-if="props.link"
+    :key="props.name"
+    :prepend-icon="icon"
+    :href="props.link"
+    rounded="e-pill"
+    class="text-subtitle-2"
+  >
+    {{ title }}
+  </v-list-item>
 </template>
 
 <script setup lang="ts">
@@ -50,10 +62,20 @@ const props = defineProps({
       return { name: "", params: {} };
     },
   },
+  link: {
+    type: String,
+    required: false,
+    default: "",
+  },
   children: {
     type: Array<TNavigationItem>,
     required: false,
     default: () => [],
   },
+  name: {
+    type: String,
+    required: false,
+    default: "",
+  },
 });
 </script>

package/composables/useLocal.ts

@@ -22,12 +22,6 @@ export default function useLocal() {
     ];
   });
 
-  function redirect(link: string, page?: string) {
-    const href = page ? `${link}/${page}` : link;
-
-    window.location.href = href;
-  }
-
   const headerSearch = useState("headerSearch", () => "");
 
   return {
@@ -35,7 +29,6 @@ export default function useLocal() {
     getUserFromCookie,
     drawer,
     apps,
-    redirect,
     headerSearch,
   };
 }

package/composables/useLocalAuth.ts

@@ -2,22 +2,16 @@ export default function useLocalAuth() {
   const { cookieConfig } = useRuntimeConfig().public;
 
   async function login({ email = "", password = "" }) {
-    return useNuxtApp().$api<TKeyValuePair>("/api/auth", {
+    return useNuxtApp().$api<Record<string, any>>("/api/auth", {
       method: "POST",
       body: JSON.stringify({ email, password }),
     });
   }
 
-  function setToken({
-    refreshToken = "",
-    accessToken = "",
-    user = "",
-    org = "",
-  }) {
+  function setToken({ refreshToken = "", accessToken = "", user = "" }) {
     useCookie("accessToken", cookieConfig).value = accessToken;
     useCookie("refreshToken", cookieConfig).value = refreshToken;
     useCookie("user", cookieConfig).value = user;
-    useCookie("org", cookieConfig).value = org;
   }
 
   function clearCookies() {

package/composables/useUtils.ts

@@ -93,6 +93,12 @@ export default function useUtils() {
     });
   }
 
+  function redirect(link: string, page?: string) {
+    const href = page ? `${link}/${page}` : link;
+
+    window.location.href = href;
+  }
+
   return {
     requiredRule,
     emailRule,
@@ -105,5 +111,6 @@ export default function useUtils() {
     insertBetween,
     getNameInitials,
     getDimensions,
+    redirect,
   };
 }

package/error.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+
+const props = defineProps({
+  error: Object as () => NuxtError,
+});
+</script>
+
+<template>
+  <v-app>
+    <v-main>
+      <v-row
+        class="fill-height"
+        no-gutters
+        justify="center"
+        align-content="center"
+      >
+        <v-col cols="9">
+          <v-row>
+            <v-col cols="12" class="text-center text-h2">
+              <span class="font-weight-bold">{{ props.error?.message }}</span>
+            </v-col>
+            <v-col cols="12">
+              <v-row no-gutters justify="center">
+                <v-btn
+                  rounded="xl"
+                  size="large"
+                  class="text-none font-weight-bold"
+                  variant="tonal"
+                  :to="{ name: 'index' }"
+                >
+                  Go back
+                </v-btn>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-main>
+  </v-app>
+</template>

package/layouts/plain.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-app>
+    <v-main>
+      <slot />
+    </v-main>
+  </v-app>
+</template>

package/nuxt.config.ts

@@ -13,31 +13,20 @@ export default defineNuxtConfig({
         secure: true,
         maxAge: 30 * 24 * 60 * 60,
       },
+      API_DO_STORAGE_ENDPOINT:
+        (process.env.API_DO_STORAGE_ENDPOINT as string) ?? "",
       APP_NAME: (process.env.APP_NAME as string) ?? "App",
       APP_NAME_ROUTE: (process.env.APP_NAME_ROUTE as string) ?? "index",
+      APP_MAIN: (process.env.APP_MAIN as string) ?? "",
       APP_ACCOUNT: (process.env.APP_ACCOUNT as string) ?? "",
-      APP_PROJECT: (process.env.APP_PROJECT as string) ?? "",
-      APP_DEPED_HQ: (process.env.APP_DEPED_HQ as string) ?? "",
-      APP_REGION_HQ: (process.env.APP_REGION_HQ as string) ?? "",
-      APP_DIVISION_HQ: (process.env.APP_DIVISION_HQ as string) ?? "",
-      APP_SCHOOL_HQ: (process.env.APP_SCHOOL_HQ as string) ?? "",
-      APP_STUDENT_ZONE: (process.env.APP_STUDENT_ZONE as string) ?? "",
-      APP_PARENT_PORTAL: (process.env.APP_PARENT_PORTAL as string) ?? "",
-      APP_BOOK_KEEPING: (process.env.APP_BOOK_KEEPING as string) ?? "",
-      APP_ASSET_MANAGEMENT: (process.env.APP_ASSET as string) ?? "",
-      APP_EMPLOYEE_MANAGEMENT:
-        (process.env.APP_EMPLOYEE_MANAGEMENT as string) ?? "",
-      APP_PAYROLL: (process.env.APP_PAYROLL as string) ?? "",
-      APP_ATTENDANCE_KEEPING:
-        (process.env.APP_ATTENDANCE_KEEPING as string) ?? "",
-      APP_LEAVE_MANAGEMENT: (process.env.APP_LEAVE_MANAGEMENT as string) ?? "",
+      APP_ADMIN: (process.env.APP_ADMIN as string) ?? "",
+      APP_ORG: (process.env.APP_ORG as string) ?? "",
+      APP_HYGIENE: (process.env.APP_HYGIENE as string) ?? "",
+      APP_SECURITY: (process.env.APP_SECURITY as string) ?? "",
       APP_PROPERTY_MANAGEMENT:
         (process.env.APP_PROPERTY_MANAGEMENT as string) ?? "",
-      APP_RECRUITMENT: (process.env.APP_RECRUITMENT as string) ?? "",
-      API_DO_STORAGE_ENDPOINT:
-        (process.env.API_DO_STORAGE_ENDPOINT as string) ?? "",
-      APP_ADMIN: (process.env.APP_ADMIN as string) ?? "",
-      APP_RECAP: (process.env.APP_RECAP as string) ?? "",
+      APP_MECHANICAL_ELECTRICAL:
+        (process.env.APP_MECHANICAL_ELECTRICAL as string) ?? "",
     },
   },
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"