@goweekdays/layer-common 1.1.2 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @goweekdays/layer-common
 
+## 1.2.1
+
+### Patch Changes
+
+- 4ab7a09: Fix confirmationPrompt component error message display
+
+## 1.2.0
+
+### Minor Changes
+
+- 1e43eff: Add app and permission management composables and types
+
 ## 1.1.2
 
 ### Patch Changes

package/components/ConfirmationPrompt.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar density="compact" class="pl-4">
+      <span class="font-weight-medium text-h5 text-capitalize">
+        {{ localProps.title }}
+      </span>
+    </v-toolbar>
+
+    <v-card-text>
+      <p class="text-subtitle-2 text-center">
+        {{ localProps.content }}
+      </p>
+
+      <v-alert
+        v-if="message"
+        type="error"
+        variant="flat"
+        closable
+        position="absolute"
+        location="bottom"
+        style="bottom: 48px"
+        @click:close="message = ''"
+        width="100%"
+        tile
+        class="text-caption"
+      >
+        {{ message }}
+      </v-alert>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            size="48"
+            variant="text"
+            class="text-none"
+            @click="emits('cancel')"
+            :disabled="localProps.disabled"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            size="48"
+            color="black"
+            variant="flat"
+            class="text-none"
+            @click="emits('confirm')"
+            :disabled="localProps.disabled"
+          >
+            {{ localProps.action }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const localProps = defineProps({
+  title: {
+    type: String,
+    default: "Title",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  action: {
+    type: String,
+    default: "Submit",
+  },
+  content: {
+    type: String,
+    default: "Are you sure you want to proceed?",
+  },
+});
+
+const emits = defineEmits(["cancel", "confirm"]);
+
+const message = defineModel("message", { default: "" });
+</script>

package/components/Input/ListGroupSelection.vue

@@ -10,6 +10,8 @@
         read-only
         open-strategy="single"
       >
+        <template name="prepend"></template>
+
         <template
           v-for="(permission, permissionKey, permissionIndex) in props.items"
           :key="permissionKey"
@@ -61,8 +63,8 @@
                   </span>
                 </template>
 
-                <template #prepend="{ isSelected }" class="pl-1">
-                  <v-list-item-action start>
+                <template #prepend="{ isSelected }">
+                  <v-list-item-action start class="pl-1">
                     <v-checkbox-btn :model-value="isSelected"></v-checkbox-btn>
                   </v-list-item-action>
                 </template>
@@ -70,6 +72,14 @@
             </template>
           </v-list-group>
         </template>
+
+        <slot v-if="noData" name="no-data">
+          <v-list-item>
+            <v-list-item-title>No data</v-list-item-title>
+          </v-list-item>
+        </slot>
+
+        <template name="append"></template>
       </v-list>
     </v-card>
   </v-input>
@@ -90,4 +100,8 @@ const selectedActionCount = (resource: string) => {
   return selected.value.filter((permission) => permission.startsWith(resource))
     .length;
 };
+
+const noData = computed(() => {
+  return Object.keys(props.items).length === 0;
+});
 </script>

package/composables/useApps.ts

@@ -0,0 +1,57 @@
+export default function useApps() {
+  const app = ref<TApp>({
+    _id: "",
+    code: "",
+    name: "",
+    description: "",
+    status: "active",
+    createdAt: "",
+    updatedAt: "",
+    deletedAt: "",
+  });
+
+  const resource = "/api/apps";
+
+  function add(value: TApp) {
+    return $fetch(resource, {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function getAll({
+    page = 1,
+    limit = 10,
+    search = "",
+    status = "active",
+  } = {}) {
+    return $fetch<Record<string, any>>(resource, {
+      method: "GET",
+      query: { page, limit, search, status },
+    });
+  }
+
+  function updateById(
+    id: string,
+    value: { name: string; description: string }
+  ) {
+    return $fetch(`${resource}/id/${id}`, {
+      method: "PATCH",
+      body: value,
+    });
+  }
+
+  function deleteById(id: string) {
+    return $fetch(`${resource}/id/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  return {
+    app,
+    add,
+    getAll,
+    updateById,
+    deleteById,
+  };
+}

package/composables/useLocalSetup.ts

@@ -6,7 +6,7 @@ export function useLocalSetup(type: string, org?: string) {
   const { getByUserType } = useMember();
 
   const { data: userMemberData, error: userMemberError } = useLazyAsyncData(
-    "get-member-by-id",
+    "get-member-by-id-local-setup",
     () => getByUserType(userId.value, type, org),
     { watch: [userId], immediate: false }
   );

package/composables/usePermission.ts

@@ -47,8 +47,104 @@ export default function usePermission() {
     return false;
   }
 
+  const perm = ref<TPerm>({
+    app: "",
+    key: "",
+    group: "",
+    description: "",
+  });
+
+  function addPerm(value: TPerm) {
+    return $fetch("/api/permissions", {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function updatePermById(
+    id: string,
+    value: Pick<TPerm, "key" | "group" | "description">
+  ) {
+    return $fetch(`/api/permissions/id/${id}`, {
+      method: "PATCH",
+      body: value,
+    });
+  }
+
+  function getAllPerm({
+    page = 1,
+    limit = 10,
+    search = "",
+    app = "",
+    status = "active",
+  } = {}) {
+    return $fetch<Record<string, any>>("/api/permissions", {
+      method: "GET",
+      query: { page, limit, search, app, status },
+    });
+  }
+
+  function deletePermById(id: string) {
+    return $fetch(`/api/permissions/id/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  const permGroup = ref<TPermGroup>({
+    app: "",
+    key: "",
+    label: "",
+    order: 0,
+  });
+
+  function addPermGroup(value: Pick<TPermGroup, "app" | "key" | "label">) {
+    return $fetch("/api/permissions/groups", {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function updatePermGroupById(
+    id: string,
+    value: Pick<TPermGroup, "key" | "label">
+  ) {
+    return $fetch(`/api/permissions/groups/id/${id}`, {
+      method: "PATCH",
+      body: value,
+    });
+  }
+
+  function getAllPermGroup({
+    page = 1,
+    limit = 10,
+    search = "",
+    app = "",
+    status = "active",
+  } = {}) {
+    return $fetch<Record<string, any>>("/api/permissions/groups", {
+      method: "GET",
+      query: { page, limit, search, app, status },
+    });
+  }
+
+  function deletePermGroupById(id: string) {
+    return $fetch(`/api/permissions/groups/id/${id}`, {
+      method: "DELETE",
+    });
+  }
+
   return {
     listPermissions,
     hasPermission,
+    perm,
+    addPerm,
+    updatePermById,
+    getAllPerm,
+    deletePermById,
+    permGroup,
+    addPermGroup,
+    updatePermGroupById,
+    getAllPermGroup,
+    deletePermGroupById,
   };
 }

package/composables/useUtils.ts

@@ -74,6 +74,13 @@ export default function useUtils() {
     }
   };
 
+  function validateKey(value: string) {
+    const pattern = /^[a-z._-]+$/;
+    return (
+      pattern.test(value) || "Key must be lowercase and can include ., _, -"
+    );
+  }
+
   function back() {
     useRouter().back();
   }
@@ -296,5 +303,6 @@ export default function useUtils() {
     replaceMatch,
     setRouteParams,
     positiveNumberRule,
+    validateKey,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@goweekdays/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,7 @@
     "typescript": "^5.6.3",
     "vite-plugin-vuetify": "^2.0.4",
     "vue": "latest",
-    "vuetify": "^3.7.3"
+    "vuetify": "^3.11.6"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "dependencies": {

package/types/local.d.ts

@@ -23,3 +23,14 @@ declare type TKeyValuePair<
 > = {
   [key in K]: V;
 };
+
+declare type TApp = {
+  _id?: string;
+  code: string;
+  name: string;
+  description: string;
+  status?: string;
+  createdAt?: string | Date;
+  updatedAt?: string | Date;
+  deletedAt?: string | Date;
+};

package/types/permission.d.ts

@@ -12,3 +12,25 @@ declare type TPermissions = {
     [action: string]: TPermission;
   };
 };
+
+declare type TPerm = {
+  _id?: string;
+  app: string;
+  key: string;
+  group: string;
+  description: string;
+  createdAt?: string | Date;
+  updatedAt?: string | Date;
+  deletedAt?: string | Date;
+};
+
+declare type TPermGroup = {
+  _id?: string;
+  app: string;
+  key: string;
+  label: string;
+  order: number;
+  createdAt?: string | Date;
+  updatedAt?: string | Date;
+  deletedAt?: string | Date;
+};