@iservice365/layer-common 0.0.6 → 0.2.0

package/components/Input/ListGroupSelection.vue

@@ -0,0 +1,96 @@
+<template>
+  <v-input v-bind="attrs">
+    <v-card width="100%" v-bind="attrs">
+      <v-list
+        v-model:selected="selected"
+        lines="two"
+        :select-strategy="attrs.readonly ? 'classic' : 'leaf'"
+        class="pa-0"
+        density="compact"
+        read-only
+        open-strategy="single"
+      >
+        <template
+          v-for="(permission, permissionKey, permissionIndex) in props.items"
+          :key="permissionKey"
+        >
+          <v-divider v-if="permissionIndex > 0"></v-divider>
+          <v-list-group :value="permissionKey" fluid>
+            <template v-slot:activator="{ props }">
+              <v-list-item v-bind="props" density="compact">
+                <span class="text-capitalize">
+                  {{ String(permissionKey).replace(/-/g, " ") }}
+                </span>
+
+                <template #prepend>
+                  <v-chip class="mr-2" small>
+                    {{ selectedActionCount(String(permissionKey)) }}
+                  </v-chip>
+                </template>
+              </v-list-item>
+            </template>
+
+            <template v-for="(item, itemKey) in permission" :key="itemKey">
+              <v-divider></v-divider>
+              <v-list-item v-if="attrs.readonly" density="compact">
+                <template #title class="pl-2">
+                  <span class="text-subtitle-2 text-capitalize">
+                    {{ String(itemKey).replace(/-/g, " ") }}
+                  </span>
+                </template>
+
+                <template #subtitle class="pl-2">
+                  <span class="text-subtitle-2">{{ item.description }}</span>
+                </template>
+              </v-list-item>
+
+              <v-list-item
+                v-else
+                :value="`${permissionKey}:${itemKey}`"
+                density="compact"
+              >
+                <template #title class="pl-2">
+                  <span class="text-subtitle-2 text-capitalize">
+                    {{ String(itemKey).replace(/-/g, " ") }}
+                  </span>
+                </template>
+
+                <template #subtitle class="pl-2">
+                  <span class="text-subtitle-2 text-capitalize">
+                    {{ String(item.description).replace(/-/g, " ") }}
+                  </span>
+                </template>
+
+                <template #prepend="{ isSelected, select }" class="pl-1">
+                  <v-list-item-action start>
+                    <v-checkbox-btn
+                      :model-value="isSelected"
+                      @update:model-value="select"
+                    ></v-checkbox-btn>
+                  </v-list-item-action>
+                </template>
+              </v-list-item>
+            </template>
+          </v-list-group>
+        </template>
+      </v-list>
+    </v-card>
+  </v-input>
+</template>
+
+<script setup lang="ts">
+const selected = defineModel<Array<string>>({ default: [] });
+const attrs = useAttrs();
+const props = defineProps({
+  items: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+
+const selectedActionCount = (resource: string) => {
+  return selected.value.filter((permission) => permission.startsWith(resource))
+    .length;
+};
+</script>

package/components/Input/NewDate.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { defineModel, defineProps, computed, ref } from "vue";
+
+const props = defineProps<{
+  rules?: ((value: string) => boolean | string)[]; // Accepts external validation rules
+}>();
+
+const dateValue = defineModel<string>({ default: "" });
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const formatDate = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  let value = input.value.replace(/\D/g, ""); // Remove non-numeric characters
+
+  // Format as MM/DD/YYYY
+  let formattedValue = value
+    .slice(0, 8)
+    .replace(/(\d{2})(\d{0,2})?(\d{0,4})?/, (_, m, d, y) =>
+      [m, d, y].filter(Boolean).join("/")
+    );
+
+  // Preserve cursor position
+  const cursorPosition = input.selectionStart ?? 0;
+  const slashCountBefore = (dateValue.value.match(/\//g) || []).length;
+  const slashCountAfter = (formattedValue.match(/\//g) || []).length;
+  const cursorOffset = slashCountAfter - slashCountBefore;
+
+  // Only update if value changed to prevent unnecessary reactivity updates
+  if (dateValue.value !== formattedValue) {
+    dateValue.value = formattedValue;
+    setTimeout(() => {
+      input.setSelectionRange(
+        cursorPosition + cursorOffset,
+        cursorPosition + cursorOffset
+      );
+    });
+  }
+};
+
+// Compute combined validation rules
+const computedRules = computed(() => {
+  return props.rules ? [...props.rules] : [];
+});
+
+// Handle arrow key increments with cursor preservation
+const handleArrowKeys = (event: KeyboardEvent) => {
+  if (!dateValue.value) return;
+
+  const input = event.target as HTMLInputElement;
+  const cursorPosition = input.selectionStart ?? 0; // Store cursor position
+  dateValue.value.split("/").map(Number);
+
+  let updatedDate = dateValue.value;
+
+  // Determine which part to modify
+  if (cursorPosition <= 2) {
+    updatedDate = modifyDatePart(
+      dateValue.value,
+      "month",
+      event.key === "ArrowUp" ? 1 : -1
+    );
+  } else if (cursorPosition <= 5) {
+    updatedDate = modifyDatePart(
+      dateValue.value,
+      "day",
+      event.key === "ArrowUp" ? 1 : -1
+    );
+  } else {
+    updatedDate = modifyDatePart(
+      dateValue.value,
+      "year",
+      event.key === "ArrowUp" ? 1 : -1
+    );
+  }
+
+  if (dateValue.value !== updatedDate) {
+    dateValue.value = updatedDate;
+    setTimeout(() => {
+      input.setSelectionRange(cursorPosition, cursorPosition);
+    });
+  }
+
+  event.preventDefault();
+};
+
+const modifyDatePart = (
+  date: string,
+  part: "month" | "day" | "year",
+  change: number
+) => {
+  let [month, day, year] = date.split("/").map(Number);
+
+  if (part === "month") {
+    month = Math.max(1, Math.min(12, month + change));
+    const maxDays = new Date(year, month, 0).getDate();
+    day = Math.min(day, maxDays); // Adjust day to fit new month's max days
+  } else if (part === "day") {
+    const maxDays = new Date(year, month, 0).getDate();
+    day = Math.max(1, Math.min(maxDays, day + change));
+  } else if (part === "year") {
+    year += change;
+    const maxDays = new Date(year, month, 0).getDate();
+    day = Math.min(day, maxDays); // Adjust day to fit new year's month
+  }
+
+  return `${String(month).padStart(2, "0")}/${String(day).padStart(
+    2,
+    "0"
+  )}/${year}`;
+};
+</script>
+
+<template>
+  <v-text-field
+    ref="inputRef"
+    v-model="dateValue"
+    placeholder="MM/DD/YYYY"
+    @input="formatDate"
+    @keydown.up="handleArrowKeys"
+    @keydown.down="handleArrowKeys"
+    :rules="computedRules"
+  ></v-text-field>
+</template>

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 = false;
+
+// 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/InvitationMain.vue

@@ -0,0 +1,284 @@
+<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="{
+            name: 'org-customer-site-invitations-invite',
+          }"
+          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">
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn
+              fab
+              icon
+              density="comfortable"
+              @click="_getVerifications({ search: headerSearch, status })"
+            >
+              <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="_getVerifications({ search: headerSearch })"
+              />
+            </v-row>
+          </template>
+
+          <template #extension>
+            <v-tabs>
+              <v-tab
+                :to="{
+                  name: 'org-customer-site-invitations-status-status',
+                  params: { status: 'pending' },
+                }"
+              >
+                Pending
+              </v-tab>
+              <v-tab
+                :to="{
+                  name: 'org-customer-site-invitations-status-status',
+                  params: { status: 'expired' },
+                }"
+              >
+                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
+          style="max-height: calc(100vh - (126px))"
+          :loading="loading"
+        >
+          <template #item.permissions="{ value }">
+            <span class="text-caption font-weight-bold text-capitalize">
+              permissions
+            </span>
+            <v-chip>{{ value.length }}</v-chip>
+          </template>
+          <template #item.createdAt="{ item }">
+            {{ formatDate(item.createdAt) }}
+          </template>
+          <template #item.action-table="{ item }">
+            <v-menu
+              :close-on-content-click="false"
+              offset-y
+              width="150"
+              v-if="props.cancelInvitation"
+            >
+              <template v-slot:activator="{ props }">
+                <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
+              </template>
+              <v-list>
+                <v-list-item @click="openConfirmDialog(item._id)">
+                  Cancel Invite
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+  </v-row>
+  <ConfirmDialog
+    v-model="confirmDialog"
+    :loading="cancelLoading"
+    @submit="onConfirmCancel"
+  >
+    <template #title>
+      <span class="font-weight-medium text-h5">Cancel Invitation</span>
+    </template>
+    <template #description>
+      <p class="text-subtitle-2">
+        Are you sure you want to cancel this invitation? This action cannot be
+        undone.
+      </p>
+    </template>
+    <template #footer>
+      <v-btn
+        variant="text"
+        @click="confirmDialog = false"
+        :disabled="cancelLoading"
+      >
+        Close
+      </v-btn>
+      <v-btn
+        color="primary"
+        variant="flat"
+        @click="onConfirmCancel"
+        :loading="cancelLoading"
+      >
+        Cancel Invite
+      </v-btn>
+    </template>
+  </ConfirmDialog>
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  route: {
+    type: String,
+    default: "index",
+  },
+  orgId: {
+    type: String,
+    default: "",
+  },
+  customerId: {
+    type: String,
+    default: "",
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+  status: {
+    type: String,
+    default: "pending",
+  },
+  cancelInvitation: {
+    type: Boolean,
+    default: true,
+  },
+  inviteMember: {
+    type: Boolean,
+    default: true,
+  },
+  viewInvitations: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { authenticate } = useLocalAuth();
+authenticate();
+
+const organization = (useRoute().params.org as string) ?? "";
+
+const headers = [
+  {
+    title: "Date",
+    value: "createdAt",
+  },
+  {
+    title: "E-mail",
+    value: "email",
+  },
+  {
+    title: "Action",
+    value: "action-table",
+  },
+];
+
+const status = (useRoute().params.status as string) ?? "";
+
+const { getVerifications: _getVerifications, cancelUserInvitation } =
+  useVerification();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Array<TMiniVerification>>([]);
+const { headerSearch } = useLocal();
+const { formatDate } = useUtils();
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+const {
+  data: getVerificationsReq,
+  refresh: getVerifications,
+  status: getVerificationsStatus,
+} = useLazyAsyncData<{
+  items: TMiniVerification[];
+  pages: number;
+  pageRange: string;
+}>("get-verifications" + props.status, () =>
+  _getVerifications({
+    page: page.value,
+    status: props.status,
+    search: headerSearch.value,
+    type: "user-invite",
+  })
+);
+
+const loading = computed(() => getVerificationsStatus.value === "pending");
+
+watchEffect(() => {
+  if (getVerificationsReq.value) {
+    items.value = getVerificationsReq.value.items;
+    pages.value = getVerificationsReq.value.pages;
+    pageRange.value = getVerificationsReq.value.pageRange;
+  }
+});
+
+watch([page, headerSearch], () => {
+  getVerifications();
+});
+
+const confirmDialog = ref(false);
+const selectedInviteId = ref<string | null>(null);
+const cancelLoading = ref(false);
+
+function openConfirmDialog(id: string) {
+  selectedInviteId.value = id;
+  confirmDialog.value = true;
+}
+
+async function onConfirmCancel() {
+  if (!selectedInviteId.value) return;
+
+  cancelLoading.value = true;
+  try {
+    const res = await cancelUserInvitation(selectedInviteId.value);
+
+    showMessage(res.message || "Invitation cancelled successfully", "success");
+    await getVerifications();
+    confirmDialog.value = false;
+    selectedInviteId.value = null;
+  } catch (error: any) {
+    showMessage(error?.message || "Failed to cancel invitation", "error");
+  }
+  cancelLoading.value = false;
+}
+
+watchEffect(() => {
+  if (!props.viewInvitations) {
+    useRouter().back();
+  }
+});
+</script>

package/components/Layout/Header.vue

@@ -1,6 +1,9 @@
 <template>
   <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
-    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+    <v-app-bar-nav-icon
+      v-if="!props.hideNavIcon"
+      @click="drawer = !drawer"
+    ></v-app-bar-nav-icon>
 
     <template #append>
       <v-btn
@@ -55,6 +58,20 @@
               {{ currentUser?.firstName }} {{ currentUser?.lastName }}
             </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
@@ -77,6 +94,13 @@
 <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 });
@@ -85,7 +109,7 @@ const { drawer } = useLocal();
 
 const { redirect } = useUtils();
 
-const { APP_ACCOUNT, APP_NAME } = useRuntimeConfig().public;
+const { APP_ACCOUNT, APP_MAIN, APP_NAME } = useRuntimeConfig().public;
 
 const theme = useTheme();
 
@@ -100,8 +124,8 @@ const profile = computed(() => {
 });
 
 function logout() {
-  if (APP_NAME.toLowerCase() !== "account") {
-    redirect(`${APP_ACCOUNT}/logout`);
+  if (APP_NAME.toLowerCase() !== "main") {
+    redirect(APP_MAIN, "logout");
     return;
   }