@7365admin1/layer-common 1.8.0

package/components/Layout/Header.vue

@@ -0,0 +1,129 @@
+<template>
+  <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
+    <v-app-bar-nav-icon v-if="!props.hideNavIcon" @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+    <template #append>
+      <v-btn icon="mdi-theme-light-dark" variant="text" class="mx-2" @click="toggleTheme" />
+
+      <v-menu offset="10px" :close-on-content-click="false">
+        <template #activator="{ props }">
+          <v-btn fab variant="text" icon v-bind="props" class="mx-2">
+            <AvatarMain :image-src="currentUser?.profile" :name="name" />
+          </v-btn>
+        </template>
+
+        <v-card width="350" max-height="600px" elevation="2" rounded="xl" class="pa-4">
+          <v-row no-gutters>
+            <v-col cols="12">
+              <v-row no-gutters justify="center">
+               <AvatarMain :image-src="currentUser?.profile" :name="name" />
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="text-center mt-2 mb-4">
+              {{ name }}
+            </v-col>
+
+            <v-col cols="12" class="mb-3">
+              <v-btn v-if="APP_NAME.toLowerCase() !== 'account'" block rounded="xl" variant="tonal" size="x-large"
+                class="text-none text-subtitle-1 font-weight-regular" @click="redirect(APP_ACCOUNT, 'home')">
+                Manage Account
+              </v-btn>
+            </v-col>
+
+            <v-col cols="12">
+              <v-btn block rounded="xl" variant="tonal" size="x-large"
+                class="text-none text-subtitle-1 font-weight-regular" @click="logout()">
+                Logout
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-menu>
+    </template>
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+
+const props = defineProps({
+  hideNavIcon: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const menu = defineModel("menu", { type: Boolean });
+
+const search = defineModel("search", { type: String });
+
+const { drawer } = useLocal();
+
+const { redirect } = useUtils();
+
+const { APP_ACCOUNT, APP_MAIN, APP_NAME } = useRuntimeConfig().public;
+
+const theme = useTheme();
+
+function toggleTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
+}
+
+const { currentUser } = useLocalAuth();
+
+const profile = computed(() => {
+  return `/api/public/${currentUser.value?.profile}`;
+});
+
+function logout() {
+  if (APP_NAME.toLowerCase() !== "main") {
+    redirect(APP_MAIN, "logout");
+    return;
+  }
+
+  useRouter().push({ name: "logout" });
+}
+
+const name = computed(() => {
+  const user = currentUser.value;
+  if(!user) return "";
+
+  const first = user?.firstName?.trim() || ""
+  const last = user?.lastName?.trim() || ""
+  const full = [first, last].filter(Boolean).join(" ")
+
+  if(full) return full;
+
+  const alternative = user?.name?.trim();
+  return alternative || ""
+
+})
+
+
+const { getNameInitials } = useUtils();
+</script>
+
+<style scoped>
+.APP_NAME {
+  display: inline-block;
+  word-wrap: break-word;
+  white-space: normal;
+  text-align: center;
+  color: unset !important;
+}
+
+.open-list {
+  transition: transform 0.2s ease-in-out;
+  transform: rotate(180deg);
+}
+
+.close-list {
+  transition: transform 0.3s ease-in-out;
+  transform: rotate(0deg);
+}
+
+.v-list-group__items .v-list-item {
+  padding-inline-start: 32px !important;
+}
+</style>

package/components/Layout/NavigationDrawer.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-navigation-drawer v-model="drawer" permanent floating class="bg-primary">
+    <v-list>
+      <v-list-item>
+        <v-list-item-title class="text-h6 text-white">
+          {{ APP_NAME }}
+        </v-list-item-title>
+      </v-list-item>
+      <slot name="action" />
+      <template
+        v-for="(navigationItem, navigationIndex) in props.navigationItems"
+        :key="`${navigationItem.title}-${navigationIndex}`"
+      >
+        <NavigationItem
+          v-if="navigationItem.children?.length"
+          :title="navigationItem.title"
+          :icon="navigationItem.icon"
+          :route="navigationItem.route"
+          :children="navigationItem.children"
+        />
+
+        <NavigationItem
+          v-else-if="navigationItem.route"
+          :title="navigationItem.title"
+          :icon="navigationItem.icon"
+          :link="navigationItem.link"
+          :route="navigationItem.route"
+        />
+      </template>
+
+      <slot name="services"> </slot>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  navigationItems: { type: Array<TNavigationItem>, required: true },
+});
+
+const { drawer } = useLocal();
+
+const { APP_NAME } = useRuntimeConfig().public;
+</script>

package/components/ListItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-list-item :class="props.divider ? border : defaultBorder">
+    <v-row>
+      <v-col cols="4" class="text-subtitle-2">
+        <slot name="title"> List Title </slot>
+      </v-col>
+
+      <v-col cols="8" class="text-subtitle-2">
+        <slot name="value"> value </slot>
+      </v-col>
+    </v-row>
+
+    <template #append>
+      <slot name="append">
+        <v-icon size="30">{{ props.icon }}</v-icon>
+      </slot>
+    </template>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  divider: {
+    type: Boolean,
+    default: true,
+  },
+  icon: {
+    type: String,
+    default: "mdi-chevron-right",
+  },
+});
+
+const defaultBorder = "pa-0 pl-8 pr-6 py-4";
+const border = "border-b-sm" + " " + defaultBorder;
+</script>

package/components/ListView.vue

@@ -0,0 +1,87 @@
+<template>
+  <TableListSecondary
+    :headers="headers"
+    :items="items"
+    :pages="pages"
+    :page-range="pageRange"
+    :loading="loading"
+    :height="height"
+    :page="page"
+    v-model="selected"
+    @update:pagination="_getItems"
+    @click:row="onRowClick"
+    :length="pages"
+    :clickable-rows="clickableRows"
+    @update:page="onPageChange"
+  >
+    <template #title>
+      <slot name="title" />
+    </template>
+
+    <template #action-button>
+      <slot name="action-button" />
+    </template>
+
+    <template
+      v-for="header in headers"
+      :key="header.value"
+      #[header.value]="slotProps"
+    >
+      <slot :name="header.value" v-bind="slotProps" />
+    </template>
+
+    <template #action-table="{ item }">
+      <slot name="action-table" :item="item" />
+    </template>
+  </TableListSecondary>
+</template>
+
+<script lang="ts" setup>
+import { getCurrentInstance } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const emit = defineEmits(["click:create", "update:pagination", "row-click"]);
+const page = defineModel("page", { type: Number, default: 1 });
+
+const props = defineProps({
+  headers: Array as PropType<any[]>,
+  items: Array as PropType<any[]>,
+  pages: Number,
+  pageRange: String,
+  page: Number,
+  loading: Boolean,
+  height: {
+    type: String,
+    default: "calc(100vh - 175px)",
+  },
+  viewPage: Object as PropType<{ name: string }>,
+  org: String,
+  site: String,
+  id: String,
+  getItems: Function as PropType<() => Promise<void>>,
+  deleteItem: Function as PropType<(id: string) => Promise<void>>,
+  clickableRows: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const selected = ref<string[]>([]);
+
+async function _getItems() {
+  if (props.getItems) {
+    await props.getItems();
+    emit("update:pagination");
+  }
+}
+
+function onPageChange(newPage: number) {
+  page.value = newPage;
+  _getItems();
+  emit("update:pagination", newPage);
+}
+
+function onRowClick(item: any) {
+  emit("row-click", item);
+}
+</script>

package/components/LocalPagination.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="arrow-navigation">
+        <v-btn icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="decrement" />
+        <v-btn
+icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= props.length"
+            @click="increment" />
+    </div>
+</template>
+
+<script setup lang="ts">
+const page = defineModel({ type: Number, default: 0 });
+function increment() {
+    page.value++;
+}
+
+function decrement() {
+    page.value--;
+}
+const emit = defineEmits(['update:value']);
+watch(page, () => {
+    emit('update:value', page.value);
+});
+
+const props = defineProps({
+    length: {
+        type: Number,
+        required: true,
+        default: 0
+    }
+});
+</script>