@7365admin1/layer-common 1.11.37 → 1.11.39

package/components/InvitationForm.vue

@@ -24,7 +24,11 @@
             </v-row>
           </v-col>
 
-          <v-col v-if="APP === 'organization'" cols="12" class="mt-2">
+          <v-col
+            v-if="!props.hideApp && props.adminState && APP === 'organization'"
+            cols="12"
+            class="mt-2"
+          >
             <v-row no-gutters>
               <InputLabel class="text-capitalize" title="App" required />
               <v-col cols="12">
@@ -55,7 +59,7 @@
             </v-row>
           </v-col>
 
-          <v-col v-if="hasSite" cols="12">
+          <v-col v-if="hasSite && props.adminState" cols="12">
             <v-row no-gutters>
               <InputLabel class="text-capitalize" title="Site" />
               <v-col cols="12">
@@ -139,6 +143,8 @@ import useUser from '../composables/useUser';
 import useUtils from '../composables/useUtils';
 
 const APP = useRuntimeConfig().public.APP;
+
+
 const props = defineProps({
   title: {
     type: String,
@@ -177,13 +183,21 @@ const props = defineProps({
       metadata: { app: "organization", role: "" },
     }),
   },
+  adminState: {
+    type: Boolean,
+    default: true
+  },
+  hideApp: {
+    type: Boolean,
+    default: false
+  }
 });
 
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
 
 const validForm = ref(false);
 const form = ref<HTMLFormElement | null>(null);
-const app = computed(() => useRuntimeConfig().public.APP ?? "");
+// const app = computed(() => useRuntimeConfig().public.APP ?? "");
 
 const loading = reactive({
   submittingForm: false,
@@ -200,8 +214,24 @@ const invite = ref<Record<string, any>>({
   isMemberInvite: false,
 });
 
-invite.value.app = props.app;
-invite.value.org = props.org ?? "";
+watch(
+  () => [props.hideApp, props.adminState, props.app, props.org],
+  () => {
+    invite.value.org = props.org || ""
+
+    if (props.hideApp) {
+      invite.value.app = "property_management_agency"
+      return
+    }
+
+    invite.value.app = props.adminState
+      ? (props.app || "")
+      : "property_management_agency"
+  },
+  { immediate: true }
+)
+// invite.value.app = props.app;
+// invite.value.org = props.org ?? "";
 
 if (props.mode === "edit") {
   invite.value.email = props.invite.email;

package/components/Layout/NavigationDrawer.vue

@@ -1,45 +1,68 @@
 <template>
-  <v-navigation-drawer v-model="drawer" permanent floating class="bg-primary">
+  <v-navigation-drawer
+    v-model="drawer"
+    permanent
+    floating
+    class="bg-primary"
+  >
     <v-list>
       <v-list-item>
         <v-list-item-title class="text-h6 text-white">
           {{ props.title || APP_NAME }}
         </v-list-item-title>
       </v-list-item>
+
       <slot name="action" />
-      <template
-        v-for="(navigationItem, navigationIndex) in props.navigationItems"
-        :key="`${navigationItem.title}-${navigationIndex}`"
+
+      <!-- NAVIGATION ITEMS -->
+      <v-tooltip
+        v-for="(item, index) in props.navigationItems"
+        :key="`${item.title}-${index}`"
+        location="right"
       >
-        <NavigationItem
-          v-if="navigationItem.children?.length"
-          :title="navigationItem.title"
-          :icon="navigationItem.icon"
-          :route="navigationItem.route"
-          :children="navigationItem.children"
-        />
-
-        <NavigationItem
-          v-else-if="navigationItem.route"
-          :title="navigationItem.title"
-          :icon="navigationItem.icon"
-          :link="navigationItem.link"
-          :route="navigationItem.route"
-        />
-      </template>
-
-      <slot name="services"> </slot>
+        <template #activator="{ props: tooltipProps }">
+          <div v-bind="tooltipProps">
+            <NavigationItem
+              :title="item.title"
+              :icon="item.icon"
+              :route="item.route"
+              :link="item.link"
+              :class="{
+                'opacity-50 pointer-events-none': item.disabled
+              }"
+              @click="() => handleClick(item)"
+            />
+          </div>
+        </template>
+
+        <!-- TOOLTIP ONLY WHEN DISABLED -->
+        <span v-if="item.disabled">
+          Please complete onboarding first
+        </span>
+      </v-tooltip>
+
+      <!-- SERVICES SLOT -->
+      <slot name="services" />
     </v-list>
   </v-navigation-drawer>
 </template>
 
 <script setup lang="ts">
 const props = defineProps({
-  navigationItems: { type: Array<TNavigationItem>, required: true },
+  navigationItems: { type: Array, required: true },
   title: { type: String, default: "" }
-});
+})
+
+const emit = defineEmits(['navigate'])
 
-const { drawer } = useLocal();
+const { drawer } = useLocal()
+const { APP_NAME } = useRuntimeConfig().public
 
-const { APP_NAME } = useRuntimeConfig().public;
+/**
+ * GLOBAL CLICK CONTROL
+ */
+const handleClick = (item: any) => {
+  if (item.disabled) return
+  emit('navigate', item)
+}
 </script>

package/components/RolePermissionFormCreate.vue

@@ -26,17 +26,11 @@
             </v-row>
           </v-col>
 
-          <v-col cols="12" class="mt-2">
+          <v-col v-if="props.siteState" cols="12" class="mt-2">
             <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>
@@ -53,12 +47,21 @@
             </v-radio-group>
           </v-col>
 
+          <v-col cols="12" class="mt-2">
+            <v-btn
+              size="small"
+              variant="tonal"
+              class="text-none mb-2"
+              @click="() => toggleSelectAll(!isAllSelected)"
+            >
+              {{ isAllSelected ? 'Unselect All' : 'Select All' }}
+            </v-btn>
+          </v-col>
+
           <v-col cols="12" class="mt-3">
             <v-card variant="outlined" border="thin" rounded="lg">
               <template
-                v-for="(
-                  actions, resourceKey, resourceIndex
-                ) in props.permissions"
+                v-for="(actions, resourceKey, resourceIndex) in safePermissions"
                 :key="resourceKey"
               >
                 <v-divider v-if="resourceIndex > 0" />
@@ -94,18 +97,14 @@
                 <!-- Expanded checkboxes when toggled on -->
                 <template v-if="isCategoryEnabled(String(resourceKey))">
                   <template
-                    v-for="(action, actionKey) in 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="
-                            selectedPermissions.includes(
-                              `${String(resourceKey)}:${String(actionKey)}`
-                            )
-                          "
+                          :model-value="permState.selected.includes(`${String(resourceKey)}:${String(actionKey)}`)"
                           @update:model-value="
                             toggleAction(
                               String(resourceKey),
@@ -204,59 +203,90 @@ const props = defineProps({
     type: String,
     default: "app",
   },
+  siteState: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
 
 const validForm = ref(false);
 const name = ref("");
-const selectedPermissions = ref<Array<string>>([]);
 const platform = ref("web");
 const disable = ref(false);
 const message = ref("");
 
-const { requiredRule, requireListRule } = useUtils();
+const { requiredRule } = useUtils();
 const { createRole } = useRole();
 const { getSiteById } = useSite();
 
-const enabledCategories = ref<Set<string>>(new Set());
+// Gom selected + enabled vào 1 shallowRef duy nhất
+// để chỉ trigger 1 render cycle khi update cả 2
+const permState = shallowRef({
+  selected: [] as string[],
+  enabled: [] as string[],
+})
 
-function selectedActionCount(resource: string) {
-  return selectedPermissions.value.filter((p) => p.startsWith(`${resource}:`))
-    .length;
+function isCategoryEnabled(resource: string) {
+  return permState.value.enabled.includes(resource)
 }
 
-function isCategoryEnabled(resource: string) {
-  return enabledCategories.value.has(resource);
+function selectedActionCount(resource: string) {
+  return permState.value.selected.filter(p => p.startsWith(`${resource}:`)).length
 }
 
 function toggleCategory(resource: string, value: boolean | null) {
-  const updated = new Set(enabledCategories.value);
+  const { selected, enabled } = permState.value
   if (value) {
-    updated.add(resource);
+    if (!enabled.includes(resource)) {
+      permState.value = { selected, enabled: [...enabled, resource] }
+    }
   } else {
-    updated.delete(resource);
-
-    selectedPermissions.value = selectedPermissions.value.filter(
-      (p) => !p.startsWith(`${resource}:`)
-    );
+    permState.value = {
+      selected: selected.filter(p => !p.startsWith(`${resource}:`)),
+      enabled: enabled.filter(r => r !== resource),
+    }
   }
-  enabledCategories.value = updated;
 }
 
 function toggleAction(resource: string, action: string, value: boolean | null) {
-  const key = `${resource}:${action}`;
+  if (value !== true && value !== false) return
+  const key = `${resource}:${action}`
+  const { selected, enabled } = permState.value
   if (value) {
-    if (!selectedPermissions.value.includes(key)) {
-      selectedPermissions.value = [...selectedPermissions.value, key];
+    if (!selected.includes(key)) {
+      permState.value = { selected: [...selected, key], enabled }
     }
   } else {
-    selectedPermissions.value = selectedPermissions.value.filter(
-      (p) => p !== key
-    );
+    permState.value = { selected: selected.filter(p => p !== key), enabled }
   }
 }
 
+function toggleSelectAll(value: boolean) {
+  if (!value) {
+    permState.value = { selected: [], enabled: [] }
+    return
+  }
+
+  const perms = safePermissions.value
+  if (!perms) return
+
+  const allKeys: string[] = []
+  const categories: string[] = []
+
+  for (const [resource, actions] of Object.entries(perms)) {
+    if (!resource || !actions || typeof actions !== 'object') continue
+    categories.push(resource)
+    for (const action of Object.keys(actions)) {
+      if (action) allKeys.push(`${resource}:${action}`)
+    }
+  }
+
+  // 1 assignment duy nhất = 1 render cycle, không crash
+  permState.value = { selected: allKeys, enabled: categories }
+}
+
 const siteName = ref("");
 const loadSite = ref(false);
 
@@ -286,7 +316,7 @@ async function submit() {
     const platformValue = platform.value === "web" ? "website" : platform.value;
     await createRole({
       name: name.value,
-      permissions: selectedPermissions.value,
+      permissions: permState.value.selected,
       type: props.type,
       org: props.org,
       site: props.siteId,
@@ -301,11 +331,41 @@ async function submit() {
 }
 
 function cancel() {
-  name.value = "";
-  selectedPermissions.value = [];
-  enabledCategories.value = new Set();
-  platform.value = "web";
-  message.value = "";
-  emit("cancel");
+  name.value = ""
+  permState.value = { selected: [], enabled: [] }
+  platform.value = "web"
+  message.value = ""
+  emit("cancel")
 }
+
+const safePermissions = computed(() => {
+  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
+    } else {
+      cleaned[k] = {}
+    }
+  }
+
+  return cleaned
+})
+
+const isAllSelected = computed(() => {
+  const perms = safePermissions.value
+  const allKeys: string[] = []
+
+  Object.entries(perms).forEach(([resource, actions]) => {
+    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))
+})
+
 </script>