@goweekdays/layer-common 1.0.0 → 1.0.2

package/.playground/nuxt.config.ts

@@ -15,7 +15,6 @@ export default defineNuxtConfig({
       APP_ACCOUNT: (process.env.APP_ACCOUNT as string) ?? "",
       S3_BUCKET_ENDPOINT: (process.env.S3_BUCKET_ENDPOINT as string) ?? "",
       APP_ADMIN: (process.env.APP_ADMIN as string) ?? "",
-      APP_CBA_RECAP: (process.env.APP_CBA_RECAP as string) ?? "",
     },
   },
 });

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @goweekdays/layer-common
 
+## 1.0.2
+
+### Patch Changes
+
+- d4fa4a8: Add finance app
+
+## 1.0.1
+
+### Patch Changes
+
+- 5643fd9: Add org switch
+
 ## 1.0.0
 
 ### Major Changes

package/components/ConfirmDialog.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-dialog v-model="dialog" max-width="400" persistent>
+    <v-card class="rounded-xl pa-6" elevation="2">
+      <!-- Close Button -->
+      <v-btn
+        icon
+        variant="text"
+        size="small"
+        class="position-absolute"
+        style="top: 8px; right: 8px"
+        @click="closeDialog"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+
+      <v-card-text class="text-center">
+        <v-row v-if="imageSrc" justify="center" class="py-10">
+          <v-img height="120" :src="imageSrc" alt="Dialog Image" contain />
+        </v-row>
+
+        <!-- Title Slot -->
+        <div class="text-h6 font-weight-medium mb-2">
+          <slot name="title"></slot>
+        </div>
+
+        <!-- Description Slot -->
+        <div class="text-body-1 mb-4">
+          <slot name="description"></slot>
+        </div>
+      </v-card-text>
+
+      <!-- Footer Slot -->
+      <v-card-actions>
+        <slot name="footer"></slot>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  imageSrc: {
+    type: String,
+    default: "",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "submit"]);
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+</script>

package/components/InvitationMain.vue

@@ -0,0 +1,195 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters>
+        <v-btn
+          class="text-none mr-2"
+          rounded="pill"
+          variant="tonal"
+          :to="props.inviteRoute"
+          size="large"
+          v-if="props.inviteMember"
+        >
+          Invite member
+        </v-btn>
+      </v-row>
+    </v-col>
+
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="getInvitations()">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="getInvitations()"
+              />
+            </v-row>
+          </template>
+
+          <template #extension>
+            <v-tabs>
+              <v-tab
+                :to="{
+                  name: 'org-organization-invitations-status-status',
+                  params: { status: 'pending', organization },
+                }"
+              >
+                Pending
+              </v-tab>
+              <v-tab
+                :to="{
+                  name: 'org-organization-invitations-status-status',
+                  params: { status: 'expired', organization },
+                }"
+              >
+                Expired
+              </v-tab>
+            </v-tabs>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="20"
+          fixed-header
+          hide-default-footer
+          hide-default-header
+          class="table-height"
+          :loading="loading"
+          @click:row="tableRowClickHandler"
+        >
+          <template #item.permissions="{ value }">
+            <span class="text-caption font-weight-bold text-capitalize">
+              permissions
+            </span>
+            <v-chip>{{ value.length }}</v-chip>
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  status: {
+    type: String,
+    default: "active",
+  },
+  app: {
+    type: String,
+    default: "organization",
+  },
+  inviteMember: {
+    type: Boolean,
+    default: false,
+  },
+  inviteRoute: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => ({
+      name: "index",
+      params: {},
+    }),
+  },
+});
+
+const organization = (useRoute().params.organization as string) ?? "";
+
+const headers = [
+  {
+    title: "Date",
+    value: "createdAt",
+  },
+  {
+    title: "E-mail",
+    value: "email",
+  },
+  {
+    title: "App",
+    value: "metadata.app",
+  },
+];
+
+const { getVerifications } = useVerification();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const items = ref<Array<Record<string, any>>>([]);
+const { headerSearch } = useLocal();
+
+const {
+  data: getInviteReq,
+  refresh: getInvitations,
+  status: getInviteReqStatus,
+} = await useLazyAsyncData("get-invitations", () =>
+  getVerifications({
+    page: page.value,
+    search: headerSearch.value,
+    status: props.status,
+    type: "user-invite,member-invite",
+    app: props.app,
+  })
+);
+
+const loading = computed(() => getInviteReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getInviteReq.value) {
+    const _items = getInviteReq.value.items;
+    items.value = _items.length
+      ? _items.map((i: Record<string, any>) => ({
+          ...i,
+          createdAt: new Date(i.createdAt).toLocaleString(),
+        }))
+      : [];
+    pages.value = getInviteReq.value.pages;
+    pageRange.value = getInviteReq.value.pageRange;
+  }
+});
+
+function tableRowClickHandler(_: any, row: any) {
+  const item = items.value[row.index];
+  useRouter().push({
+    name: "roles-permissions-id",
+    params: { id: item._id },
+  });
+}
+
+const selected = ref<Array<string>>([]);
+const selectAll = ref(false);
+
+watch(selectAll, (curr) => {
+  selected.value.splice(0, selected.value.length);
+  if (curr) {
+    const ids = items.value.map((i) => i._id as string);
+    selected.value.push(...ids);
+  }
+});
+</script>
+
+<style scoped>
+.table-height {
+  max-height: calc(100vh - (220px));
+}
+</style>

package/components/Layout/Header.vue

@@ -11,9 +11,9 @@
     </div>
 
     <v-row no-gutters>
-      <v-col cols="6">
+      <v-col cols="12" lg="6" md="9">
         <v-text-field
-          v-model="search"
+          v-model="_search"
           width="100%"
           prepend-inner-icon="mdi-magnify"
           variant="solo-filled"
@@ -171,8 +171,19 @@
 <script setup lang="ts">
 import { useTheme } from "vuetify";
 
+const { getNameInitials, debounce } = useUtils();
+
+const _search = ref("");
+
 const search = defineModel("search", { type: String });
 
+watch(
+  _search,
+  debounce((value) => {
+    search.value = value;
+  }, 1000)
+);
+
 const { redirect, apps, drawer } = useLocal();
 
 const {
@@ -219,8 +230,6 @@ const name = computed(() => {
   return name;
 });
 
-const { getNameInitials } = useUtils();
-
 const defaultApps = computed(() => [
   {
     title: "Account",
@@ -234,7 +243,7 @@ const defaultApps = computed(() => [
     link: APP_ORG,
     landingPage: currentUser.value?.defaultOrg
       ? `org/${currentUser.value?.defaultOrg}`
-      : "index",
+      : "",
   },
   {
     title: "Admin",