@7365admin1/layer-common 3.2.1-staging.60 → 3.2.1-staging.62

package/components/RolePermissionFormCreate.vue

@@ -30,21 +30,28 @@
             <v-row no-gutters>
               <InputLabel title="Site" />
               <v-col cols="12">
-                <v-text-field :model-value="siteName" density="comfortable" readonly disabled :loading="loadSite" />
+                <v-text-field
+                  :model-value="siteName"
+                  density="comfortable"
+                  readonly
+                  disabled
+                  :loading="loadSite"
+                />
               </v-col>
             </v-row>
           </v-col>
 
-          <v-col cols="12" class="mt-1">
-            <v-radio-group
-              v-model="platform"
-              inline
-              color="primary"
-              hide-details
-            >
-              <v-radio label="Website" value="web" />
-              <v-radio label="Mobile" value="mobile" />
-            </v-radio-group>
+          <v-col cols="12" class="mt-3">
+            <div class="d-flex align-center ga-4 text-caption">
+              <span class="d-flex align-center ga-2">
+                <v-icon color="amber-darken-2" size="14">mdi-circle</v-icon>
+                Web and Mobile
+              </span>
+              <span class="d-flex align-center ga-2">
+                <v-icon color="blue-darken-2" size="14">mdi-circle</v-icon>
+                Web only
+              </span>
+            </div>
           </v-col>
 
           <v-col cols="12" class="mt-2">
@@ -54,7 +61,7 @@
               class="text-none mb-2"
               @click="() => toggleSelectAll(!isAllSelected)"
             >
-              {{ isAllSelected ? 'Unselect All' : 'Select All' }}
+              {{ isAllSelected ? "Unselect All" : "Select All" }}
             </v-btn>
           </v-col>
 
@@ -69,7 +76,12 @@
                 <!-- Category row -->
                 <v-list-item density="compact" :ripple="false">
                   <template #prepend>
-                    <v-chip class="mr-3" size="small" label>
+                    <v-chip
+                      class="mr-3"
+                      size="small"
+                      label
+                      :color="resourceColor(String(resourceKey))"
+                    >
                       {{ selectedActionCount(String(resourceKey)) }}
                     </v-chip>
                   </template>
@@ -97,14 +109,18 @@
                 <!-- Expanded checkboxes when toggled on -->
                 <template v-if="isCategoryEnabled(String(resourceKey))">
                   <template
-                    v-for="([actionKey, action]) in Object.entries(actions || {})"
+                    v-for="[actionKey, action] in Object.entries(actions || {})"
                     :key="actionKey"
                   >
                     <v-divider />
                     <v-list-item density="compact" :ripple="false">
                       <template #prepend>
                         <v-checkbox-btn
-                          :model-value="permState.selected.includes(`${String(resourceKey)}:${String(actionKey)}`)"
+                          :model-value="
+                            permState.selected.includes(
+                              `${String(resourceKey)}:${String(actionKey)}`
+                            )
+                          "
                           @update:model-value="
                             toggleAction(
                               String(resourceKey),
@@ -207,17 +223,20 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  webOnlyResources: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
   cancelText: {
     type: String,
-    default: "Cancel"
-  }
+    default: "Cancel",
+  },
 });
 
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
 
 const validForm = ref(false);
 const name = ref("");
-const platform = ref("web");
 const disable = ref(false);
 const message = ref("");
 
@@ -229,73 +248,81 @@ const { getSiteById } = useSite();
 const permState = shallowRef({
   selected: [] as string[],
   enabled: [] as string[],
-})
+});
 
 const resourceLabels: Record<string, string> = {
   "access-card-mgmt": "Access Mgmt",
 };
 
 function formatResourceLabel(key: string): string {
-  return resourceLabels[key] ?? key.replace(/-/g, " ");
+  const label = resourceLabels[key] ?? key.replace(/-/g, " ");
+  return props.webOnlyResources.includes(key) ? `${label} (Web Only)` : label;
+}
+
+function resourceColor(resource: string) {
+  return props.webOnlyResources.includes(resource)
+    ? "blue-darken-2"
+    : "amber-darken-2";
 }
 
 function isCategoryEnabled(resource: string) {
-  return permState.value.enabled.includes(resource)
+  return permState.value.enabled.includes(resource);
 }
 
 function selectedActionCount(resource: string) {
-  return permState.value.selected.filter(p => p.startsWith(`${resource}:`)).length
+  return permState.value.selected.filter((p) => p.startsWith(`${resource}:`))
+    .length;
 }
 
 function toggleCategory(resource: string, value: boolean | null) {
-  const { selected, enabled } = permState.value
+  const { selected, enabled } = permState.value;
   if (value) {
     if (!enabled.includes(resource)) {
-      permState.value = { selected, enabled: [...enabled, resource] }
+      permState.value = { selected, enabled: [...enabled, resource] };
     }
   } else {
     permState.value = {
-      selected: selected.filter(p => !p.startsWith(`${resource}:`)),
-      enabled: enabled.filter(r => r !== resource),
-    }
+      selected: selected.filter((p) => !p.startsWith(`${resource}:`)),
+      enabled: enabled.filter((r) => r !== resource),
+    };
   }
 }
 
 function toggleAction(resource: string, action: string, value: boolean | null) {
-  if (value !== true && value !== false) return
-  const key = `${resource}:${action}`
-  const { selected, enabled } = permState.value
+  if (value !== true && value !== false) return;
+  const key = `${resource}:${action}`;
+  const { selected, enabled } = permState.value;
   if (value) {
     if (!selected.includes(key)) {
-      permState.value = { selected: [...selected, key], enabled }
+      permState.value = { selected: [...selected, key], enabled };
     }
   } else {
-    permState.value = { selected: selected.filter(p => p !== key), enabled }
+    permState.value = { selected: selected.filter((p) => p !== key), enabled };
   }
 }
 
 function toggleSelectAll(value: boolean) {
   if (!value) {
-    permState.value = { selected: [], enabled: [] }
-    return
+    permState.value = { selected: [], enabled: [] };
+    return;
   }
 
-  const perms = safePermissions.value
-  if (!perms) return
+  const perms = safePermissions.value;
+  if (!perms) return;
 
-  const allKeys: string[] = []
-  const categories: string[] = []
+  const allKeys: string[] = [];
+  const categories: string[] = [];
 
   for (const [resource, actions] of Object.entries(perms)) {
-    if (!resource || !actions || typeof actions !== 'object') continue
-    categories.push(resource)
+    if (!resource || !actions || typeof actions !== "object") continue;
+    categories.push(resource);
     for (const action of Object.keys(actions)) {
-      if (action) allKeys.push(`${resource}:${action}`)
+      if (action) allKeys.push(`${resource}:${action}`);
     }
   }
 
   // 1 assignment to trigger reactivity only once
-  permState.value = { selected: allKeys, enabled: categories }
+  permState.value = { selected: allKeys, enabled: categories };
 }
 
 const siteName = ref("");
@@ -324,14 +351,13 @@ watch(
 async function submit() {
   disable.value = true;
   try {
-    const platformValue = platform.value === "web" ? "website" : platform.value;
     await createRole({
       name: name.value,
       permissions: permState.value.selected,
       type: props.type,
       org: props.org,
       site: props.siteId,
-      platform: platformValue,
+      platform: "website",
     });
     emit("success");
   } catch (error: any) {
@@ -342,41 +368,41 @@ async function submit() {
 }
 
 function cancel() {
-  name.value = ""
-  permState.value = { selected: [], enabled: [] }
-  platform.value = "web"
-  message.value = ""
-  emit("cancel")
+  name.value = "";
+  permState.value = { selected: [], enabled: [] };
+  message.value = "";
+  emit("cancel");
 }
 
 const safePermissions = computed(() => {
-  const p = props.permissions || {}
-  const cleaned: Record<string, any> = {}
+  const p = props.permissions || {};
+  const cleaned: Record<string, any> = {};
 
   for (const [k, v] of Object.entries(p)) {
-    if (v && typeof v === 'object' && !Array.isArray(v)) {
-      cleaned[k] = v
+    if (v && typeof v === "object" && !Array.isArray(v)) {
+      cleaned[k] = v;
     } else {
-      cleaned[k] = {}
+      cleaned[k] = {};
     }
   }
 
-  return cleaned
-})
+  return cleaned;
+});
 
 const isAllSelected = computed(() => {
-  const perms = safePermissions.value
-  const allKeys: string[] = []
+  const perms = safePermissions.value;
+  const allKeys: string[] = [];
 
   Object.entries(perms).forEach(([resource, actions]) => {
-    if (!actions) return
+    if (!actions) return;
     Object.keys(actions).forEach((action) => {
-      if (action) allKeys.push(`${resource}:${action}`)
-    })
-  })
-
-  return allKeys.length > 0 &&
-    allKeys.every(k => permState.value.selected.includes(k))
-})
+      if (action) allKeys.push(`${resource}:${action}`);
+    });
+  });
 
+  return (
+    allKeys.length > 0 &&
+    allKeys.every((k) => permState.value.selected.includes(k))
+  );
+});
 </script>

package/components/RolePermissionFormPreviewUpdate.vue

@@ -11,18 +11,104 @@
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-4">
-            <InputListGroupSelection
-              v-model="definedModel"
-              :items="props.permissions"
-              variant="outlined"
-              border="thin"
-              :error-messages="errorMessages"
-              :readonly="!edit"
-              :hint="
-                edit && 'Select permissions'
-              "
-              persistent-hint
-            />
+            <div class="d-flex align-center ga-4 text-caption mb-3">
+              <span class="d-flex align-center ga-2">
+                <v-icon color="amber-darken-2" size="14">mdi-circle</v-icon>
+                Web and Mobile
+              </span>
+              <span class="d-flex align-center ga-2">
+                <v-icon color="blue-darken-2" size="14">mdi-circle</v-icon>
+                Web only
+              </span>
+            </div>
+            <v-btn
+              v-if="edit"
+              size="small"
+              variant="tonal"
+              class="text-none mb-2"
+              @click="toggleSelectAll(!isAllSelected)"
+            >
+              {{ isAllSelected ? "Unselect All" : "Select All" }}
+            </v-btn>
+            <v-card variant="outlined" border="thin" rounded="lg">
+              <template
+                v-for="(actions, resourceKey, resourceIndex) in safePermissions"
+                :key="resourceKey"
+              >
+                <v-divider v-if="resourceIndex > 0" />
+                <v-list-item density="compact" :ripple="false">
+                  <template #prepend>
+                    <v-chip
+                      class="mr-3"
+                      size="small"
+                      label
+                      :color="resourceColor(String(resourceKey))"
+                    >
+                      {{ selectedActionCount(String(resourceKey)) }}
+                    </v-chip>
+                  </template>
+                  <v-list-item-title
+                    class="text-capitalize text-subtitle-2 font-weight-medium"
+                  >
+                    {{ formatResourceLabel(String(resourceKey)) }}
+                  </v-list-item-title>
+                  <template #append>
+                    <v-switch
+                      :model-value="isCategoryEnabled(String(resourceKey))"
+                      :disabled="!edit"
+                      color="green"
+                      density="compact"
+                      hide-details
+                      inset
+                      @update:model-value="
+                        toggleCategory(String(resourceKey), $event)
+                      "
+                    />
+                  </template>
+                </v-list-item>
+                <template v-if="isCategoryEnabled(String(resourceKey))">
+                  <template
+                    v-for="[actionKey, action] in Object.entries(actions || {})"
+                    :key="actionKey"
+                  >
+                    <v-divider />
+                    <v-list-item density="compact" :ripple="false">
+                      <template #prepend>
+                        <v-checkbox-btn
+                          :model-value="
+                            definedModel.includes(
+                              `${String(resourceKey)}:${String(actionKey)}`
+                            )
+                          "
+                          :disabled="!edit"
+                          color="primary"
+                          density="compact"
+                          class="mr-2"
+                          @update:model-value="
+                            toggleAction(
+                              String(resourceKey),
+                              String(actionKey),
+                              $event
+                            )
+                          "
+                        />
+                      </template>
+                      <v-list-item-title
+                        class="text-subtitle-2 font-weight-medium text-capitalize"
+                      >
+                        {{ String(actionKey).replace(/-/g, " ") }}
+                      </v-list-item-title>
+                      <v-list-item-subtitle class="text-caption">
+                        {{ action.description }}
+                      </v-list-item-subtitle>
+                    </v-list-item>
+                  </template>
+                </template>
+              </template>
+            </v-card>
+            <div v-if="errorMessages" class="text-caption text-error mt-2">
+              {{ errorMessages }}
+            </div>
           </v-col>
 
           <v-col v-if="edit" cols="12" class="my-2">
@@ -85,7 +171,7 @@
             color="black"
             class="text-none"
             size="large"
-            :disabled="!validForm"
+            :disabled="disable"
             @click="edit = true"
           >
             Edit
@@ -99,7 +185,8 @@
             color="black"
             class="text-none"
             size="large"
-            :disabled="!validForm"
+            :disabled="Boolean(errorMessages) || disable"
+            :loading="disable"
             @click="submit()"
           >
             Submit
@@ -111,8 +198,8 @@
 </template>
 
 <script setup lang="ts">
-import useRole from '../composables/useRole';
-import useUtils from '../composables/useUtils';
+import useRole from "../composables/useRole";
+import useUtils from "../composables/useUtils";
 
 const definedModel = defineModel<Array<string>>({
   default: () => [],
@@ -135,11 +222,97 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  webOnlyResources: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
 });
 
 const validForm = ref(false);
 const message = ref("");
 const disable = ref(false);
+const expandedResources = ref<string[]>([]);
+
+const resourceLabels: Record<string, string> = {
+  "access-card-mgmt": "Access Mgmt",
+};
+
+function formatResourceLabel(key: string) {
+  const label = resourceLabels[key] ?? key.replace(/-/g, " ");
+  return props.webOnlyResources.includes(key) ? `${label} (Web Only)` : label;
+}
+
+function resourceColor(resource: string) {
+  return props.webOnlyResources.includes(resource)
+    ? "blue-darken-2"
+    : "amber-darken-2";
+}
+
+function selectedActionCount(resource: string) {
+  return definedModel.value.filter((permission) =>
+    permission.startsWith(`${resource}:`)
+  ).length;
+}
+
+function isCategoryEnabled(resource: string) {
+  return (
+    expandedResources.value.includes(resource) ||
+    selectedActionCount(resource) > 0
+  );
+}
+
+function toggleCategory(resource: string, value: boolean | null) {
+  if (!edit.value || value === null) return;
+  if (value) {
+    if (!expandedResources.value.includes(resource))
+      expandedResources.value.push(resource);
+    return;
+  }
+  expandedResources.value = expandedResources.value.filter(
+    (item) => item !== resource
+  );
+  definedModel.value = definedModel.value.filter(
+    (permission) => !permission.startsWith(`${resource}:`)
+  );
+}
+
+function toggleAction(resource: string, action: string, value: boolean | null) {
+  if (!edit.value || value === null) return;
+  const permission = `${resource}:${action}`;
+  if (value && !definedModel.value.includes(permission)) {
+    definedModel.value = [...definedModel.value, permission];
+  } else if (!value) {
+    definedModel.value = definedModel.value.filter(
+      (item) => item !== permission
+    );
+  }
+}
+
+const safePermissions = computed(() => props.permissions || {});
+
+const isAllSelected = computed(() => {
+  const keys = Object.entries(safePermissions.value).flatMap(
+    ([resource, actions]) =>
+      Object.keys(actions || {}).map((action) => `${resource}:${action}`)
+  );
+  return (
+    keys.length > 0 && keys.every((key) => definedModel.value.includes(key))
+  );
+});
+
+function toggleSelectAll(value: boolean) {
+  if (!value) {
+    definedModel.value = [];
+    expandedResources.value = [];
+    return;
+  }
+  const permissions = Object.entries(safePermissions.value).flatMap(
+    ([resource, actions]) =>
+      Object.keys(actions || {}).map((action) => `${resource}:${action}`)
+  );
+  definedModel.value = permissions;
+  expandedResources.value = Object.keys(safePermissions.value);
+}
 
 const emit = defineEmits(["success", "cancel"]);
 

package/components/RolePermissionMain.vue

@@ -84,6 +84,7 @@
         :permissions="props.permissions"
         :org="props.orgId"
         :site-id="props.siteId"
+        :web-only-resources="props.webOnlyResources"
         @success="success()"
         :type="props.type"
         @success:create-more="getRoles()"
@@ -100,6 +101,7 @@
         v-model:edit="edit"
         :name="name"
         :id="roleId"
+        :web-only-resources="props.webOnlyResources"
       />
     </v-dialog>
 
@@ -168,6 +170,10 @@ const props = defineProps({
     required: true,
     default: () => ({}),
   },
+  webOnlyResources: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
   headers: {
     type: Array as PropType<Array<Record<string, any>>>,
     default: () => [

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.1-staging.60",
+  "version": "3.2.1-staging.62",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {