update user login baru dan hakakses

components/HakAkses/EditHakAkses.vue

@@ -1,7 +1,15 @@
 <template>
   <v-card class="pa-4 rounded-lg elevation-2">
     <v-card-title class="text-h5 font-weight-bold mb-4">
-      Edit Hak Akses Menu | {{ localItem.namaTipeUser }}
+      Edit Hak Akses Menu
+      <div class="text-subtitle-2 text-medium-emphasis mt-1">
+        <span v-if="localItem.role || localItem.group">
+          {{ localItem.role }} / {{ localItem.group }}
+        </span>
+        <span v-else-if="localItem.namaTipeUser">
+          {{ localItem.namaTipeUser }}
+        </span>
+      </div>
     </v-card-title>
     <v-card-text>
       <v-row>
@@ -20,7 +28,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(menu, index) in localItem.hakAksesMenu" :key="menu.name">
+              <tr v-for="(menu, index) in orderedMenus" :key="menu.name">
                 <td>{{ index + 1 }}</td>
                 <td>{{ menu.name }}</td>
                 <td class="text-center">
@@ -66,7 +74,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { useNavItemsStore } from '~/stores/navItems1';
 
 // Define types for better readability and safety
 interface HakAksesMenu {
@@ -80,6 +89,8 @@ interface HakAksesMenu {
 
 interface HakAksesData {
   id: number;
+  role?: string;
+  group?: string;
   namaTipeUser: string;
   hakAksesMenu: HakAksesMenu[];
 }
@@ -91,7 +102,7 @@ const props = defineProps({
     required: true,
     // Add custom validator for more robust checks
     validator: (value: HakAksesData) => {
-      return 'namaTipeUser' in value && 'hakAksesMenu' in value;
+      return 'hakAksesMenu' in value;
     },
   },
 });
@@ -102,6 +113,40 @@ const emits = defineEmits(['save', 'cancel']);
 // Use a local copy to avoid mutating the prop directly
 const localItem = ref<HakAksesData>(JSON.parse(JSON.stringify(props.item)));
 
+const navItemsStore = useNavItemsStore();
+
+interface NavItemOrder {
+  name: string;
+  children?: NavItemOrder[];
+}
+
+// Build a map of menu order based on the sidebar configuration so the list is always aligned
+const menuOrder = computed(() => {
+  const order: Record<string, number> = {};
+  const walk = (items: NavItemOrder[], startIndex = 0): number => {
+    let idx = startIndex;
+    items.forEach((item) => {
+      order[item.name] = idx;
+      idx += 1;
+      if (item.children?.length) {
+        idx = walk(item.children, idx);
+      }
+    });
+    return idx;
+  };
+  walk(navItemsStore.navItems);
+  return order;
+});
+
+const orderedMenus = computed(() => {
+  const order = menuOrder.value;
+  return [...localItem.value.hakAksesMenu].sort((a, b) => {
+    const orderA = order[a.name] ?? Number.MAX_SAFE_INTEGER;
+    const orderB = order[b.name] ?? Number.MAX_SAFE_INTEGER;
+    return orderA - orderB;
+  });
+});
+
 // Watch the prop for changes and update the local copy
 watch(() => props.item, (newItem) => {
   localItem.value = JSON.parse(JSON.stringify(newItem));