@goweekdays/layer-common 1.2.4 → 1.2.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @goweekdays/layer-common
 
+## 1.2.6
+
+### Patch Changes
+
+- bcdc6ba: Fix setRole() to clear message
+
+## 1.2.5
+
+### Patch Changes
+
+- 774d113: Fix role management components and composable
+
 ## 1.2.4
 
 ### Patch Changes

package/components/ListGroupSelection.vue

@@ -0,0 +1,116 @@
+<template>
+  <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 name="prepend"></template>
+
+      <template
+        v-for="(keyGroup, keyGroupIndex) in props.items"
+        :key="keyGroupIndex"
+      >
+        <v-divider v-if="keyGroupIndex > 0"></v-divider>
+        <v-list-group :value="keyGroup.title" fluid>
+          <template v-slot:activator="{ props }">
+            <v-list-item v-bind="props" density="compact">
+              <span class="text-capitalize">
+                {{ keyGroup.title }}
+              </span>
+
+              <template #prepend>
+                <v-chip class="mr-2" small>
+                  {{ selectedActionCount(String(keyGroup.key)) }}
+                </v-chip>
+              </template>
+            </v-list-item>
+          </template>
+
+          <template
+            v-for="(item, itemIndex) in keyGroup.children"
+            :key="itemIndex"
+          >
+            <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">
+                  {{ item.title }}
+                </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="item.key" density="compact">
+              <template #title class="pl-2">
+                <span class="text-subtitle-2 text-capitalize">
+                  {{ item.title }}
+                </span>
+              </template>
+
+              <template #subtitle class="pl-2">
+                <span class="text-subtitle-2 text-capitalize">
+                  {{ item.description }}
+                </span>
+              </template>
+
+              <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>
+            </v-list-item>
+          </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>
+</template>
+
+<script setup lang="ts">
+const selected = defineModel<Array<string>>({ default: [] });
+const attrs = useAttrs();
+
+type TListGroup = {
+  title: string;
+  key: string;
+  children: { title: string; key: string; description: string }[];
+};
+
+const props = defineProps({
+  items: {
+    // Array of object
+    type: Array as PropType<TListGroup[]>,
+    required: true,
+    default: () => [],
+  },
+  message: {
+    type: String,
+    default: "",
+  },
+});
+
+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/components/RoleForm.vue

@@ -0,0 +1,326 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5 text-capitalize">
+          {{ localProps.title }}
+        </span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto">
+      <v-form v-model="valid">
+        <v-row no-gutters>
+          <v-col cols="12" class="mb-1">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Name"
+                :required="isMutable"
+              />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="role.name"
+                  :rules="isMutable ? [requiredRule] : []"
+                  :readonly="!isMutable"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mb-1">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Permissions"
+                :required="isMutable"
+              />
+              <v-col cols="12">
+                <ListGroupSelection
+                  v-model="role.permissions"
+                  :items="permissions"
+                  :readonly="!isMutable"
+                  variant="outlined"
+                  border="thin"
+                  :loading="loadingPermissions"
+                />
+                <v-input
+                  :messages="errorPermissionSelection"
+                  :error="!!errorPermissionSelection"
+                ></v-input>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mb-1">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Description" />
+              <v-col cols="12">
+                <v-textarea
+                  v-model="role.description"
+                  rows="2"
+                  no-resize
+                  :readonly="!isMutable"
+                ></v-textarea>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="!localProps.app && isMutable" cols="12" class="mb-1">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="App"
+                :required="isMutable"
+              />
+              <v-col cols="12">
+                <v-select
+                  v-model="role.type"
+                  :items="apps"
+                  item-title="name"
+                  item-value="code"
+                  :readonly="!isMutable"
+                  :loading="loadingApps"
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-form>
+
+      <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 v-if="isMutable" cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="emits('cancel')"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="localProps.mode === 'view'" cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="emits('close')"
+          >
+            Close
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="localProps.mode === 'view'" cols="6">
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none"
+                height="48"
+                v-bind="props"
+                tile
+              >
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0">
+              <v-list-item @click="emits('edit')">
+                <v-list-item-title class="text-subtitle-2">
+                  Edit Role
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item @click="emits('delete')" class="text-red">
+                <v-list-item-title class="text-subtitle-2">
+                  Delete Role
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+
+        <v-col v-if="isMutable" cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            @click="emits('submit')"
+            :disabled="!valid"
+          >
+            {{ localProps.mode === "add" ? "Add Role" : "Save Changes" }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits(["submit", "cancel", "close", "edit", "delete"]);
+
+const isMutable = computed(() => ["add", "edit"].includes(localProps.mode));
+
+const localProps = defineProps({
+  title: {
+    type: String,
+    default: "Role Form",
+  },
+  app: {
+    type: String,
+    default: "",
+  },
+  mode: {
+    type: String,
+    default: "add",
+  },
+});
+
+const role = defineModel<TRole>({
+  default: () => useRole().role.value,
+});
+
+const errorPermissionSelection = computed(() =>
+  requireListRule(role.value.permissions ?? [])
+);
+
+const message = defineModel("message", { default: "" });
+
+const valid = ref(false);
+
+const { requiredRule, requireListRule } = useUtils();
+
+const apps = ref<TApp[]>([]);
+
+const { getAll: getAllApps } = useApps();
+
+const {
+  data: appsData,
+  status: appsReqStatus,
+  refresh: refreshApps,
+} = await useLazyAsyncData(
+  `role-form-get-apps-${localProps.app}`,
+  () =>
+    getAllApps({
+      limit: 20,
+    }),
+  {
+    immediate: false,
+  }
+);
+
+if (!localProps.app) {
+  refreshApps();
+}
+
+const loadingApps = computed(() => appsReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (appsData.value) {
+    apps.value = appsData.value.items;
+  }
+});
+
+type PermChild = {
+  title: string;
+  key: string;
+  description: string;
+};
+
+type PermGroup = {
+  title: string;
+  key: string;
+  children: PermChild[];
+};
+
+const permissions = ref<PermGroup[]>([]);
+
+const { getAllPerm } = usePermission();
+
+const {
+  data: permissionsData,
+  status: permissionsReqStatus,
+  refresh: refreshPermissions,
+} = await useLazyAsyncData(
+  `role-form-get-all-permission-${localProps.app}`,
+  () =>
+    getAllPerm({
+      app: localProps.app,
+      limit: 200,
+    })
+);
+
+const loadingPermissions = computed(
+  () => permissionsReqStatus.value === "pending"
+);
+
+function groupPermissions(permissions: TPerm[]): PermGroup[] {
+  const groups: Record<string, PermGroup> = {};
+
+  for (const perm of permissions) {
+    if (perm.status !== "active") continue;
+
+    const groupKey = perm.group;
+
+    if (!groups[groupKey]) {
+      groups[groupKey] = {
+        title: groupKey,
+        key: groupKey,
+        children: [],
+      };
+    }
+
+    groups[groupKey].children.push({
+      title: perm.name,
+      key: perm.key,
+      description: perm.description,
+    });
+  }
+
+  return Object.values(groups);
+}
+
+watchEffect(() => {
+  if (
+    permissionsData.value &&
+    permissionsData.value &&
+    permissionsData.value.items
+  ) {
+    let items = permissionsData.value.items;
+    if (localProps.mode === "view") {
+      items = permissionsData.value.items.filter((p: TPerm) =>
+        role.value.permissions?.includes(p.key)
+      );
+    }
+    permissions.value = groupPermissions(items);
+  }
+});
+</script>

package/components/RolePermissionFormCreate.vue

@@ -141,12 +141,12 @@ const type = defineModel("type", {
   default: "",
 });
 
-const { createRole } = useRole();
+const { add } = useRole();
 
 async function submit() {
   disable.value = true;
   try {
-    await createRole({
+    await add({
       name: name.value,
       permissions: selectedPermissions.value,
       type: type.value,