@eeplatform/nuxt-layer-common 1.0.0

package/components/Input/Number.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref, computed, nextTick, useAttrs } from "vue";
+
+const props = defineProps({
+  infinityEnabled: { type: Boolean, default: false }, // Enable ∞ display for 0
+});
+
+const modelValue = defineModel<number>(); // Store actual number
+const inputRef = ref<HTMLInputElement | null>(null);
+const attrs = useAttrs();
+
+let cursorPosition = 0;
+let forceCursorToEnd = true;
+
+// Computed property to format value with commas or infinity sign
+const formattedValue = computed({
+  get: () => {
+    if (props.infinityEnabled && modelValue.value === 0) return "∞"; // Show ∞ if enabled
+    return modelValue.value?.toLocaleString() ?? "";
+  },
+  set: (val: string) => {
+    if (props.infinityEnabled && val === "∞") {
+      modelValue.value = 0; // Convert back to 0 internally
+      return;
+    }
+
+    const rawValue = val.replace(/\D/g, ""); // Remove non-numeric characters
+    const numericValue = rawValue ? Number(rawValue) : 0;
+
+    if (!isNaN(numericValue)) {
+      modelValue.value = numericValue;
+      nextTick(() => restoreCursor());
+    }
+  },
+});
+
+// Handle keydown for navigation & number changes
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (!inputRef.value || modelValue.value === undefined) return;
+
+  const { selectionStart, selectionEnd, value } = inputRef.value;
+  const isAllSelected = selectionStart === 0 && selectionEnd === value.length;
+
+  if (
+    !/^\d$/.test(event.key) &&
+    ![
+      "Backspace",
+      "Delete",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+    ].includes(event.key)
+  ) {
+    event.preventDefault();
+    return;
+  }
+
+  if (isAllSelected && /^\d$/.test(event.key)) {
+    event.preventDefault();
+    modelValue.value = Number(event.key);
+    forceCursorToEnd = true;
+    nextTick(() => restoreCursor());
+    return;
+  }
+
+  if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+    forceCursorToEnd = false;
+    return;
+  }
+
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    modelValue.value += 1;
+    forceCursorToEnd = true;
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    modelValue.value = Math.max(0, modelValue.value - 1);
+    forceCursorToEnd = true;
+  } else {
+    cursorPosition = selectionStart || 0;
+  }
+
+  nextTick(() => restoreCursor());
+};
+
+// Restore cursor position
+const restoreCursor = () => {
+  if (!inputRef.value) return;
+  const length = formattedValue.value.length;
+
+  if (forceCursorToEnd) {
+    inputRef.value.setSelectionRange(length, length);
+  } else {
+    inputRef.value.setSelectionRange(cursorPosition, cursorPosition);
+  }
+};
+</script>
+
+<template>
+  <v-text-field
+    ref="inputRef"
+    v-model="formattedValue"
+    v-bind="attrs"
+    type="text"
+    @keydown="handleKeyDown"
+  >
+    <template v-if="$slots.prepend" v-slot:prepend>
+      <slot name="prepend"></slot>
+    </template>
+
+    <template v-if="$slots.append" v-slot:append>
+      <slot name="append"></slot>
+    </template>
+
+    <template v-if="$slots['append-inner']" v-slot:append-inner>
+      <slot name="append-inner"></slot>
+    </template>
+
+    <template v-if="$slots['prepend-inner']" v-slot:prepend-inner>
+      <slot name="prepend-inner"></slot>
+    </template>
+  </v-text-field>
+</template>

package/components/Input/Password.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-text-field
+    id="_password"
+    :model-value="modelValue"
+    :type="showPassword ? 'text' : 'password'"
+    :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
+    @click:append-inner="togglePasswordVisibility"
+    @update:model-value="updatePassword"
+    v-bind="$attrs"
+    autocomplete="off"
+  />
+</template>
+
+<script setup lang="ts">
+// Define the props for the v-model
+defineProps({
+  modelValue: {
+    type: String,
+  },
+});
+
+// Define emit for updating v-model
+const emit = defineEmits(["update:modelValue"]);
+
+// Control password visibility
+const showPassword = ref(false);
+const togglePasswordVisibility = () => {
+  showPassword.value = !showPassword.value;
+};
+
+// Handle input update and emit to parent
+const updatePassword = (value: string) => {
+  emit("update:modelValue", value);
+};
+</script>

package/components/InputLabel.vue

@@ -0,0 +1,18 @@
+<template>
+  <span class="text-subtitle-2 font-weight-bold">
+    {{ title }} <span v-if="props.required" class="text-error">*</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: 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

@@ -0,0 +1,285 @@
+<template>
+  <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
+    <v-app-bar-nav-icon @click="drawer = !drawer" />
+    <div style="width: 206px" class="ml-4">
+      <nuxt-link
+        class="text-h6 font-weight-medium text-decoration-none APP_NAME"
+        :to="{ name: APP_NAME_ROUTE }"
+      >
+        {{ APP_NAME }}
+      </nuxt-link>
+    </div>
+
+    <v-row no-gutters>
+      <v-col cols="12" lg="6" md="9">
+        <v-text-field
+          v-model="_search"
+          width="100%"
+          prepend-inner-icon="mdi-magnify"
+          variant="solo-filled"
+          flat
+          density="comfortable"
+          hide-details
+          rounded="xl"
+        />
+      </v-col>
+    </v-row>
+
+    <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 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">
+                  <template v-for="item in defaultApps">
+                    <v-col cols="4">
+                      <v-btn
+                        :prepend-icon="item.icon"
+                        stacked
+                        rounded="xl"
+                        variant="text"
+                        class="text-capitalize text-subtitle-2"
+                        @click="redirect(item.link, item.landingPage)"
+                      >
+                        {{ item.title }}
+                      </v-btn>
+                    </v-col>
+                  </template>
+                </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">
+            <v-avatar color="surface-variant" size="42">
+              <v-img
+                v-if="currentUser?.profile"
+                :src="profile"
+                width="42"
+                height="42"
+              ></v-img>
+
+              <span v-else class="text-subtitle-1">{{
+                getNameInitials(name)
+              }}</span>
+            </v-avatar>
+          </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">
+                <v-avatar color="surface-variant" size="75">
+                  <v-img
+                    v-if="currentUser?.profile"
+                    :src="profile"
+                    width="75"
+                    height="75"
+                  ></v-img>
+
+                  <span v-else class="text-h5">{{
+                    getNameInitials(name)
+                  }}</span>
+                </v-avatar>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="text-center mt-2 mb-4">
+              {{ currentUser?.firstName }} {{ currentUser?.lastName }}
+            </v-col>
+
+            <v-col cols="12">
+              <v-btn
+                block
+                rounded="xl"
+                variant="tonal"
+                size="x-large"
+                @click="logout()"
+                class="text-none text-subtitle-1 font-weight-regular"
+              >
+                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 { 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 {
+  APP_MAIN,
+  APP_ACCOUNT,
+  APP_ORG,
+  APP_ADMIN,
+  APP_NAME,
+  APP_NAME_ROUTE,
+  APP_AFFILIATE,
+} = 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(() => {
+  let name = "";
+  if (currentUser.value?.firstName) {
+    name = currentUser.value.firstName;
+  }
+
+  if (currentUser.value?.lastName) {
+    name += ` ${currentUser.value.lastName}`;
+  }
+
+  return name;
+});
+
+const defaultApps = computed(() => [
+  {
+    title: "Account",
+    icon: "mdi-account",
+    link: APP_ACCOUNT,
+    landingPage: "home",
+  },
+  {
+    title: "Business",
+    icon: "mdi-domain",
+    link: APP_ORG,
+    landingPage: currentUser.value?.defaultOrg
+      ? `org/${currentUser.value?.defaultOrg}`
+      : "",
+  },
+  {
+    title: "Admin",
+    icon: "mdi-security",
+    link: APP_ADMIN,
+    landingPage: "home",
+  },
+  {
+    title: "Affiliate",
+    icon: "mdi-account-multiple-check",
+    link: APP_AFFILIATE,
+    landingPage: "home",
+  },
+]);
+</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,52 @@
+<template>
+  <v-navigation-drawer
+    v-model="drawer"
+    permanent
+    floating
+    :class="props.class"
+    :location="props.location"
+  >
+    <slot name="action"></slot>
+    <v-list>
+      <template
+        v-for="(navigationItem, navigationIndex) in props.navigationItems"
+        :key="`${navigationItem.title}-${navigationIndex}`"
+      >
+        <NavigationItem
+          :title="navigationItem.title"
+          :icon="navigationItem.icon"
+          :route="navigationItem.route"
+          :children="navigationItem.children"
+          :disabled="navigationItem.disabled"
+          :rounded="props.rounded"
+        />
+      </template>
+    </v-list>
+
+    <template #append>
+      <slot name="append"></slot>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+
+const props = defineProps({
+  navigationItems: { type: Array<TNavigationItem>, required: true },
+  rounded: {
+    type: String,
+    default: "e-pill",
+  },
+  class: {
+    type: String,
+    default: "pr-2",
+  },
+  location: {
+    type: String as PropType<"left" | "right">,
+    default: "left",
+  },
+});
+
+const { drawer } = useLocal();
+</script>