@goweekdays/layer-common 0.0.9 → 0.0.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @goweekdays/layer-common
 
+## 0.0.11
+
+### Patch Changes
+
+- 833df66: Revise payment method
+
+## 0.0.10
+
+### Patch Changes
+
+- acceb5a: Revise role creation and update
+
 ## 0.0.9
 
 ### Patch Changes

package/components/AddPaymentMethod.vue

@@ -0,0 +1,171 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <slot name="header">
+        <v-row no-gutters>
+          <v-col cols="12" class="text-h6 font-weight-bold">
+            Payment Method
+          </v-col>
+        </v-row>
+      </slot>
+    </v-col>
+
+    <v-col cols="12" class="mt-2">
+      <v-row no-gutters>
+        <v-col cols="12">
+          <v-item-group
+            v-model.number="selectedPaymentMethod"
+            selected-class="bg-cyan-accent-1"
+            mandatory
+          >
+            <v-row>
+              <v-col cols="12">
+                <InputLabel title="E-Wallet" />
+              </v-col>
+              <template v-for="eWalletItem in props.supportedEwallets">
+                <v-col cols="12" lg="3" md="4" sm="4">
+                  <v-item v-slot="{ toggle, selectedClass }">
+                    <v-card
+                      variant="outlined"
+                      border="thin"
+                      @click="toggle"
+                      :class="['px-4', selectedClass]"
+                    >
+                      <v-img :src="eWalletItem.logo" width="100%" height="60px">
+                      </v-img>
+                    </v-card>
+                  </v-item>
+                </v-col>
+              </template>
+
+              <v-col cols="12">
+                <InputLabel title="Direct Debit" />
+              </v-col>
+
+              <template
+                v-for="supportedDirectDebitItem in props.supportedDirectDebit"
+              >
+                <v-col cols="12" lg="3" md="4" sm="4">
+                  <v-item v-slot="{ toggle, selectedClass }">
+                    <v-card
+                      variant="outlined"
+                      border="thin"
+                      @click="toggle"
+                      :class="['px-4', selectedClass]"
+                    >
+                      <v-img
+                        :src="supportedDirectDebitItem.logo"
+                        width="100%"
+                        height="60px"
+                      >
+                      </v-img>
+                    </v-card>
+                  </v-item>
+                </v-col>
+              </template>
+            </v-row>
+          </v-item-group>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const selectedPaymentMethod = ref<number | null>(null);
+const channel = defineModel<string | null>("channel", {
+  default: null,
+});
+const type = defineModel<string | null>("type", {
+  default: null,
+});
+const props = defineProps({
+  supportedEwallets: {
+    type: Array as PropType<
+      {
+        channel: string;
+        logo: string;
+        type: string;
+      }[]
+    >,
+    default() {
+      return [
+        {
+          channel: "GCASH",
+          logo: "/gcash-logo.svg",
+          type: "EWALLET",
+        },
+        {
+          channel: "PAYMAYA",
+          logo: "/paymaya-logo.svg",
+          type: "EWALLET",
+        },
+        {
+          channel: "GRABPAY",
+          logo: "/grabpay-logo.svg",
+          type: "EWALLET",
+        },
+        {
+          channel: "SHOPEEPAY",
+          logo: "/shopeepay-logo.svg",
+          type: "EWALLET",
+        },
+      ];
+    },
+  },
+  supportedDirectDebit: {
+    type: Array as PropType<
+      {
+        channel: string;
+        logo: string;
+        type: string;
+      }[]
+    >,
+    default() {
+      return [
+        {
+          channel: "UBP",
+          logo: "/ubp-logo.svg",
+          type: "DIRECT_DEBIT",
+        },
+        {
+          channel: "BDO",
+          logo: "/bdo-logo.svg",
+          type: "DIRECT_DEBIT",
+        },
+        {
+          channel: "BPI",
+          logo: "/bpi-logo.svg",
+          type: "DIRECT_DEBIT",
+        },
+        {
+          channel: "RCBC",
+          logo: "/rcbc-logo.svg",
+          type: "DIRECT_DEBIT",
+        },
+        {
+          channel: "Chinabank",
+          logo: "/chinabank-logo.svg",
+          type: "DIRECT_DEBIT",
+        },
+      ];
+    },
+  },
+});
+
+const supportedPaymentMethods = [
+  ...props.supportedEwallets,
+  ...props.supportedDirectDebit,
+];
+
+watch(selectedPaymentMethod, (value: number | null) => {
+  if (value !== null) {
+    const selectedPayment = supportedPaymentMethods[value];
+    channel.value = selectedPayment.channel;
+    type.value = selectedPayment.type;
+  } else {
+    channel.value = null;
+    type.value = null;
+  }
+});
+</script>

package/components/Container/Standard.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <span
+        class="font-weight-medium text-subtitle-1 text-decoration-underline cursor-pointer"
+        @click="emit('back')"
+      >
+        Back
+      </span>
+    </v-col>
+    <v-col cols="12">
+      <span class="text-h5 font-weight-medium">{{ props.title }}</span>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <slot name="default"> </slot>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <slot name="footer"> </slot>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(["back"]);
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>

package/components/Input/ListGroupSelection.vue

@@ -0,0 +1,93 @@
+<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 }" class="pl-1">
+                  <v-list-item-action start>
+                    <v-checkbox-btn :model-value="isSelected"></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/SwitchOrg.vue

@@ -1,7 +1,15 @@
 <template>
   <v-row no-gutters class="mb-4 pl-4 fill-height" align="center">
     <v-avatar color="surface-variant" size="28">
-      <v-img :src="profile" width="200" height="200"></v-img>
+      <v-img
+        v-if="currentUser?.profile"
+        :src="profile"
+        width="200"
+        height="200"
+      />
+      <span v-else class="text-subtitle-1">{{
+        getNameInitials(selectedOrg?.text)
+      }}</span>
     </v-avatar>
 
     <v-menu
@@ -70,6 +78,7 @@
 const { currentUser } = useLocalAuth();
 
 const menu = ref(false);
+const { getNameInitials } = useUtils();
 
 const profile = computed(() => {
   return `/api/public/${currentUser.value?.profile}`;

package/components/TableList.vue

@@ -0,0 +1,128 @@
+<template>
+  <v-card
+    width="100%"
+    variant="outlined"
+    border="thin"
+    rounded="lg"
+    :loading="loading"
+  >
+    <v-toolbar density="compact" color="grey-lighten-4">
+      <template #prepend>
+        <v-checkbox v-model="selectAll" hide-details class="mx-1"></v-checkbox>
+
+        <v-btn fab icon density="comfortable" @click="emit('refresh')">
+          <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">
+            {{ props.pageRange }}
+          </span>
+          <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.pages"
+              @click="increment"
+            />
+          </div>
+        </v-row>
+      </template>
+
+      <template v-if="$slots.extension" v-slot:extension>
+        <slot name="extension"></slot>
+      </template>
+    </v-toolbar>
+
+    <v-data-table
+      v-model="selected"
+      v-bind="$attrs"
+      :headers="props.headers"
+      :items="props.items"
+      item-value="_id"
+      items-per-page="10"
+      show-select
+      fixed-header
+      hide-default-footer
+      hide-default-header
+      :loading="props.loading"
+      :style="`max-height: ${props.height};`"
+    >
+      <template v-if="$slots.item" v-slot:item>
+        <slot name="item"></slot>
+      </template>
+    </v-data-table>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const selected = defineModel({
+  type: Array as PropType<Array<string>>,
+  default: () => [],
+});
+const page = defineModel("page", { type: Number, default: 0 });
+
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, string>>>,
+    required: true,
+    default: () => [],
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, string>>>,
+    required: true,
+    default: () => [],
+  },
+  pages: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  pageRange: {
+    type: String,
+    required: true,
+    default: "-- - -- of --",
+  },
+  loading: {
+    type: Boolean,
+    required: true,
+    default: true,
+  },
+  height: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["refresh", "update:pagination"]);
+
+function increment() {
+  page.value++;
+  emit("update:pagination", page.value);
+}
+
+function decrement() {
+  page.value--;
+  emit("update:pagination", page.value);
+}
+
+const selectAll = ref(false);
+
+watch(selectAll, (curr) => {
+  selected.value.splice(0, selected.value.length);
+  if (curr) {
+    const ids = props.items.map((i) => i._id as string);
+    selected.value.push(...ids);
+  }
+});
+</script>

package/composables/useAdminPermission.ts

@@ -0,0 +1,127 @@
+export default function useAdminPermission() {
+  const permissions: TPermissions = {
+    organizations: {
+      "see-all-organizations": {
+        check: true,
+        description: "Allows the user to view the list of all organizations.",
+      },
+      "see-organization-details": {
+        check: true,
+        description:
+          "Allows the user to view the details of a specific organization.",
+      },
+    },
+    "promo-codes": {
+      "create-promo-code": {
+        check: true,
+        description: "Allows the user to add new promo codes to the system.",
+      },
+      "see-promo-code-details": {
+        check: true,
+        description:
+          "Allows the user to view the details of a specific promo code.",
+      },
+      "edit-promo-code-details": {
+        check: true,
+        description:
+          "Allows the user to update the promo code’s name, discount value, and other settings.",
+      },
+      "change-promo-code-status": {
+        check: true,
+        description:
+          "Allows the user to activate, deactivate, or expire a promo code.",
+      },
+      "delete-promo-code": {
+        check: true,
+        description:
+          "Allows the user to remove a promo code from the system permanently.",
+      },
+    },
+    users: {
+      "see-all-users": {
+        check: true,
+        description: "Allows the user to view the list of all users.",
+      },
+      "see-user-details": {
+        check: true,
+        description: "Allows the user to view the details of a specific user.",
+      },
+    },
+    invitations: {
+      "see-all-invitations": {
+        check: true,
+        description: "Allows the user to view the list of all invitations.",
+      },
+      "see-invitation-details": {
+        check: true,
+        description:
+          "Allows the user to view the details of a specific invitation.",
+      },
+      "edit-invitation-details": {
+        check: true,
+        description:
+          "Allows the user to update the details of a specific invitation.",
+      },
+      "change-invitation-status": {
+        check: true,
+        description: "Allows the user to update the status of an invitation.",
+      },
+      "delete-invitation": {
+        check: true,
+        description:
+          "Allows the user to remove an invitation from the system permanently.",
+      },
+    },
+    members: {
+      "see-all-members": {
+        check: true,
+        description: "Allows the user to view the list of all members.",
+      },
+      "see-member-details": {
+        check: true,
+        description:
+          "Allows the user to view the details of a specific member.",
+      },
+      "change-member-status": {
+        check: true,
+        description: "Allows the user to update the status of a member.",
+      },
+      "remove-member": {
+        check: true,
+        description: "Allows the user to remove a member from the system.",
+      },
+    },
+    "roles-and-permissions": {
+      "view-all-roles": {
+        check: true,
+        description: "Allows the user to view the list of all roles.",
+      },
+      "view-role-details": {
+        check: true,
+        description: "Allows the user to view the details of a specific role.",
+      },
+      "update-role-name": {
+        check: true,
+        description: "Allows the user to edit the name of an existing role.",
+      },
+      "update-role-permissions": {
+        check: true,
+        description:
+          "Allows the user to modify permissions assigned to a role.",
+      },
+      "update-role-status": {
+        check: true,
+        description: "Allows the user to activate or deactivate a role.",
+      },
+      "delete-role": {
+        check: true,
+        description:
+          "Allows the user to remove a role from the system permanently.",
+      },
+    },
+  };
+
+  return {
+    permissions,
+  };
+}

package/composables/useFile.ts

@@ -0,0 +1,29 @@
+export default function useFile() {
+  function addFile(file: File | null) {
+    if (!file) {
+      throw new Error("File not found.");
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    return useNuxtApp().$api<Record<string, any>>("/api/files", {
+      method: "POST",
+      body: formData,
+    });
+  }
+
+  function deleteFile(attachmentId: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/files/${attachmentId}`,
+      {
+        method: "DELETE",
+      }
+    );
+  }
+
+  return {
+    addFile,
+    deleteFile,
+  };
+}

package/composables/useInvoice.ts

@@ -0,0 +1,38 @@
+export default function useInvoice() {
+  function getBySubscriptionId({ search = "", id = "", page = 1 } = {}) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/invoices/subscription/${id}`,
+      {
+        method: "GET",
+        params: {
+          search,
+          page,
+        },
+      }
+    );
+  }
+
+  function getByNumber(number: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/invoices/number/${number}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+
+  function getByDueDateStatus(date: string, status: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/invoices/due-date/${date}/status/${status}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+
+  return {
+    getBySubscriptionId,
+    getByNumber,
+    getByDueDateStatus,
+  };
+}

package/composables/useLocalAuth.ts

@@ -102,6 +102,8 @@ export default function useLocalAuth() {
     });
   }
 
+  const permissions = useState("permissions", (): Array<string> => []);
+
   return {
     login,
     logout,