pisah add & edit

components/Master/formDetail1.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import {useSettingStore} from "@/stores/api/setting/setting";
 import {sweetalert} from "~/utils/helper";
+import roleMenuByIdDummy from "@/data/dummy/role.json"
 
 const {getTypeUser, getMenu, postRoleUserMenu} = useSettingStore();
 const {listMenu, listTypeUser, typeUser, roleMenuById, messages} = storeToRefs(useSettingStore());
 const data = ref<any>([]);
 const menuItem = ref<any>([]);
+const menuParentDisplay = ref<any>([]);
 const type_user = ref<any>([]);
 const dataDetail = ref(null)
 
@@ -16,6 +18,7 @@ const dataMenu = async () => {
     getMenu(),
     getTypeUser()
   ])
+    // console.log("ini data tabel",data)
   // filtering role akses menu terhadap tipe user
   if (roleMenuById.value.data != null && roleMenuById.value.data != "") {
     return roleMenuById.value.data.map((role_menu: any) => {
@@ -23,6 +26,8 @@ const dataMenu = async () => {
           (menu: any) =>
               menu._id == role_menu.menu_id
       );
+      menuParentDisplay.value = listMenu.value.find((menu:any)=> menu._id == menuItem?.value.parent)
+      // menuParentDisplay.value = menuItem.value.find((menu:any)=> menu.parent == listMenu?.value._id)
       type_user.value = listTypeUser.value.find(
           (type_user: any) => type_user._id == role_menu.type_user_id
       );
@@ -31,6 +36,9 @@ const dataMenu = async () => {
         idTipeUser: type_user.value._id,
         menu: menuItem?.value.display || "-",
         menu_id: menuItem?.value._id,
+        menu_parent: menuItem?.value.parent,
+        ordered: menuItem?.value.ordered,
+        menu_parent_display: menuParentDisplay.value?.display || "-",
         type_user: type_user?.value.display || "-",
         accessAdd: role_menu.access?.[0]?.add || 0,
         accessUpdate: role_menu.access?.[0]?.update || 0,
@@ -52,11 +60,15 @@ const checkMenu = () => {
   // Check if arr is not empty or roleMenuById.value.data is null
   if (arr.length !== 0 || !roleMenuById.value.data) {
     arr.forEach((i: any, index: number) => {
+      menuParentDisplay.value = listMenu.value.find((menu:any)=> menu._id == i.parent)
       data.value.push({
         _id: `${i._id}`,
-        idTipeUser: type_user.value._id,
+        idTipeUser: typeUser.value,
         menu: i.display,
         menu_id: i._id,
+        menu_parent: i.parent,
+        menu_parent_display: menuParentDisplay.value?.display || "-",
+        ordered: i.ordered,
         accessAdd: 0,
         accessUpdate: 0,
         accessRead: 0,
@@ -64,9 +76,12 @@ const checkMenu = () => {
       });
     });
   }
+  data.value.sort((a:any,b:any)=> a.ordered - b.ordered)
+  // console.log("data baru:",data.value)
 }
 
 const onSubmit = async () => {
+  console.log("submit",dataDetail.value?.form$.data)
   const formData = dataDetail.value?.form$.data;
   // Jika data.value kosong, kita akan mengambil data dari form
   const menusToProcess = data.value !== undefined ? data.value : listMenu.value;
@@ -98,7 +113,10 @@ const onSubmit = async () => {
 
 onMounted(async () => {
   data.value = await dataMenu();
+  data.value.sort((a:any,b:any)=> a.ordered - b.ordered)
   checkMenu()
+
+  console.log("list menu:",data.value)
 });
 
 // function untu craete checkbox
@@ -109,6 +127,7 @@ const createCheckbox = (namePrefix: string, menu: any) => {
     accessRead: menu.accessRead,
     accessDelete: menu.accessDelete
   };
+  if(menu.menu_parent != ''){
   return {
     name: `${namePrefix}_${menu.menu_id}`,
     type: 'checkbox',
@@ -121,15 +140,17 @@ const createCheckbox = (namePrefix: string, menu: any) => {
       label: 'Checkbox'
     }
   };
+  }
 };
 
 // Helper function untuk create row menu
 let count = 0
 const createMenuRow = (menu: any) => {
+  console.log("ini id cari:",menu.idTipeUser)
   count += 1;
   const multiElement = {
     nama_menu: {
-      type: 'static', content: menu.menu,
+      type: 'static', content: menu.menu_parent != '' ? '<span class="bg-lighterror text-error rounded px-2">'+menu.menu_parent_display+'</span> / '+menu.menu : menu.menu,
       builder: {
         type: 'p',
       },
@@ -171,10 +192,18 @@ const createMenuRow = (menu: any) => {
 <template>
   <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
     <Vueform ref="dataDetail" validate-on="change|step" method="post" :endpoint="onSubmit">
+      <TextElement
+          name="typeUser"
+          label="Type user"
+          :rules="['required', 'max:255', 'min:3']"
+          :columns="{
+          container: 4,
+        }"
+        />
       <GridElement
           name="gridTable"
           :widths="['80px', '','90px','90px','90px','90px']"
-          :presets="['grid']"
+          :presets="['grid-table']"
           :cols="6"
           :rows="1+data.length"
           :grid="[

components/Master/formTypeUser.vue

@@ -1,41 +1,208 @@
 <script setup lang="ts">
-const data = ref(null)
+// const data = ref(null)
 // import {useSettingStore} from "@/stores/api/setting/setting"
 // const {getTypeUser} = useSettingStore()
+import {useSettingStore} from "@/stores/api/setting/setting";
+import {sweetalert} from "~/utils/helper";
+import roleMenuByIdDummy from "@/data/dummy/role.json"
+
+const {getTypeUser, getMenu, postRoleUserMenu} = useSettingStore();
+const {listMenu, listTypeUser, typeUser, roleMenuById, messages} = storeToRefs(useSettingStore());
+const data = ref<any>([]);
+const menuItem = ref<any>([]);
+const menuParentDisplay = ref<any>([]);
+const type_user = ref<any>([]);
+const dataDetail = ref(null)
+
+const emit = defineEmits(['stateValue']);
 import {useMySetting2Store} from "@/stores/api/setting/setting2"
 const store = useMySetting2Store()
-const onSubmit = async() => {
-  // await store.getTypeUser()
-  // console.log("ini tipe usernya",store.listTypeUser)
-  // await store.getRoleMenuById('683d57b2bccc67d467a9e10f')
-  // console.log("ini tipe usernya",store.roleMenuById)
-  // await store.addTypeUser(data.value?.form$.data)
-    // await getTypeUser(data.value?.form$.data)
+
+const checkMenu = () => {
+  // Filter the listMenu based on roleMenuById
+  // var arr = listMenu.value.filter((i: any) =>
+  //     !roleMenuById.value.data ||
+  //     !roleMenuById.value.data.map((r: any) => r.menu_id).includes(i._id)
+  // );
+  // Check if arr is not empty or roleMenuById.value.data is null
+  if (store.listMenu) {
+    store.listMenu.forEach((i: any, index: number) => {
+      menuParentDisplay.value = store.listMenu.find((menu:any)=> menu._id == i.parent)
+      data.value.push({
+        _id: `${i._id}`,
+        idTipeUser: typeUser.value,
+        menu: i.display,
+        menu_id: i._id,
+        menu_parent: i.parent,
+        menu_parent_display: menuParentDisplay.value?.display || "-",
+        ordered: i.ordered,
+        accessAdd: 0,
+        accessUpdate: 0,
+        accessRead: 0,
+        accessDelete: 0
+      });
+    });
+  }
+  data.value.sort((a:any,b:any)=> a.ordered - b.ordered)
+  console.log("data baru:",data.value)
+}
+
+const onSubmit = async () => {
+  console.log("submit",dataDetail.value?.form$.data)
+  const formData = dataDetail.value?.form$.data;
+  // Jika data.value kosong, kita akan mengambil data dari form
+  const menusToProcess = data.value !== undefined ? data.value : listMenu.value;
+  // Struktur data untuk dikirim ke backend
+  const payload = {
+    menus: menusToProcess.map(menu => {
+      const menuId = menu.menu_id || menu._id; // Gunakan _id atau id tergantung struktur data
+      return {
+        type_user_id: '', // ID tipe user dari hidden field
+        menu_id: menuId,
+        access: [
+          {type: 'add', value: formData[`accessAdd_${menuId}`] || 0},
+          {type: 'update', value: formData[`accessUpdate_${menuId}`] || 0},
+          {type: 'read', value: formData[`accessRead_${menuId}`] || 0},
+          {type: 'delete', value: formData[`accessDelete_${menuId}`] || 0}
+        ]
+      };
+    })
+  };
+
+  // await postRoleUserMenu(payload);
+  if (messages.value.type === 'success') {
+    emit('stateValue', false)
+    sweetalert(messages.value.title, '', messages.value.type);
+  } else {
+    sweetalert(messages.value.title, '', messages.value.type);
+  }
+  console.log("payload:",payload)
+};
+
+onMounted(async () => {
+  await store.getMenu()
+  checkMenu()
+  // console.log("ini data:",data)
+  // console.log("menu:",store.listMenu)
+});
+// function untu craete checkbox
+const createCheckbox = (namePrefix: string, menu: any) => {
+  const accessMap = {
+    accessAdd: menu.accessAdd,
+    accessUpdate: menu.accessUpdate,
+    accessRead: menu.accessRead,
+    accessDelete: menu.accessDelete
+  };
+  if(menu.menu_parent != ''){
+    return {
+      name: `${namePrefix}_${menu.menu_id}`,
+      type: 'checkbox',
+      text: 'Ya',
+      default: accessMap[namePrefix] !== undefined ? accessMap[namePrefix] : 0,
+      'true-value': 1,
+      'false-value': 0,
+      builder: {
+        type: 'checkbox',
+        label: 'Checkbox'
+      }
+    };
+  }
+};
+
+
+// Helper function untuk create row menu
+let count = 0
+const createMenuRow = (menu: any) => {
+  console.log("ini id cari:",menu.idTipeUser)
+  count += 1;
+  console.log("count:",count)
+  const multiElement = {
+    nama_menu: {
+      type: 'static', content: menu.menu_parent != '' ? '<span class="bg-lighterror text-error rounded px-2">'+menu.menu_parent_display+'</span> / '+menu.menu : menu.menu,
+      builder: {
+        type: 'p',
+      },
+    },
+    [`idMenu_${menu._id}`]: {
+      type: 'hidden',
+      default: menu._id,
+      builder: {
+        type: 'text',
+      },
+    },
+    idTipeUser: {
+      type: 'hidden',
+      default: menu.idTipeUser,
+      builder: {
+        type: 'text',
+      },
+    },
+  }
+  const result = [
+    [`${count}`, 1, 1],
+    [{
+      name: 'container1',
+      type: 'group',
+      schema: {
+        column: {name: 'column', type: 'group', schema: multiElement},
+      },
+      builder: {type: 'container2', label: '2 columns',},
+    }, 1, 1],
+    [createCheckbox('accessAdd', menu), 1, 1],
+    [createCheckbox('accessUpdate', menu), 1, 1],
+    [createCheckbox('accessRead', menu), 1, 1],
+    [createCheckbox('accessDelete', menu), 1, 1]
+  ]
+  return result
 }
 </script>
 
+
 <template>
   <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
-    <Vueform
-      ref="data"
-      validate-on="change|step"
-      method="post"
-      :endpoint="onSubmit"
-      size="md"
-      :display-errors="false"
-    >
-    
-      <GroupElement
-        name="container"
-        description="Pastikan Tipe Pengguna Belum ada"
-      >
-        <TextElement
+    <Vueform ref="dataDetail" validate-on="change|step" method="post" :endpoint="onSubmit">
+      <TextElement
           name="typeUser"
           label="Type user"
           :rules="['required', 'max:255', 'min:3']"
+          :columns="{
+          container: 4,
+        }"
         />
-      </GroupElement>
-      <ButtonElement name="primaryButton" button-label="Button" :submits="true" size="lg"/>
+        
+          <GridElement
+          label="Role Menu"
+          name="gridTable"
+          :widths="['80px', '','90px','90px','90px','90px']"
+          :presets="['grid-table']"
+          :cols="6"
+          :rows="1+data.length"
+          :grid="[
+        [
+          ['<strong>No</strong>', 1, 1, null, null],
+          ['<strong>Nama Menu</strong>', 1, 1, null, null],
+          ['<strong>Tambah</strong>', 1, 1, null, null],
+          ['<strong>Ubah</strong>', 1, 1, null, null],
+          ['<strong>Baca</strong>', 1, 1, null, null],
+          ['<strong>Hapus</strong>', 1, 1, null, null],
+        ],
+        ...data.map((menu:any) => createMenuRow(menu))
+      ]"
+      />
+
+      <ButtonElement
+          class="mt-6"
+          name="primaryButton"
+          button-label="Simpan"
+          :submits="true"
+          align="right"
+      />
+
     </Vueform>
   </div>
 </template>
+<style>
+.my-swal {
+  z-index: 2147483647 !important;
+}
+</style>

data/dummy/keuangan.role_menu.json

@@ -1,151 +1,75 @@
 [{
   "_id": {
-    "$oid": "683da37c1b8c132fda4b32f7"
-  },
-  "type_user_id": {
-    "$oid": "683d57b2bccc67d467a9e10f"
-  },
-  "menu_id": {
-    "$oid": "683d582ebccc67d467a9e114"
+    "$oid": "68521cf598993d8a60c2de3b"
   },
+  "type_user_id": "683d57b2bccc67d467a9e10f",
+  "menu_id": "683d582ebccc67d467a9e114",
   "access": [
     {
-      "add": 1
-    },
-    {
-      "update": 1
-    },
-    {
-      "read": 1
-    },
-    {
+      "add": 1,
+      "update": 1,
+      "read": 1,
       "delete": 1
     }
   ]
 },
 {
   "_id": {
-    "$oid": "683da7481b8c132fda4b3302"
+    "$oid": "68521cf598993d8a60c2de3c"
   },
   "type_user_id": "683d57b2bccc67d467a9e10f",
   "menu_id": "683d99fe1b8c132fda4b32cb",
   "access": [
     {
-      "add": 1
-    },
-    {
-      "update": 1
-    },
-    {
-      "read": 1
-    },
-    {
-      "delete": 1
-    }
-  ]
-},
-{
-  "_id": {
-    "$oid": "683da81a1b8c132fda4b3308"
-  },
-  "type_user_id": "683d57b2bccc67d467a9e10f",
-  "menu_id": "683d9d561b8c132fda4b32e1",
-  "access": [
-    {
-      "add": 1
-    },
-    {
-      "update": 1
-    },
-    {
-      "read": 1
-    },
-    {
+      "add": 0,
+      "update": 0,
+      "read": 0,
       "delete": 0
     }
   ]
 },
 {
   "_id": {
-    "$oid": "683da9791b8c132fda4b3314"
+    "$oid": "68521cf598993d8a60c2de3d"
   },
   "type_user_id": "683d57b2bccc67d467a9e10f",
   "menu_id": "683d9ebc1b8c132fda4b32e2",
   "access": [
     {
-      "add": 1
-    },
-    {
-      "update": 1
-    },
-    {
-      "read": 1
-    },
-    {
+      "add": 0,
+      "update": 0,
+      "read": 0,
       "delete": 0
     }
   ]
 },
 {
   "_id": {
-    "$oid": "683daa6f1b8c132fda4b3319"
+    "$oid": "68521cf598993d8a60c2de3e"
   },
   "type_user_id": "683d57b2bccc67d467a9e10f",
   "menu_id": "683d9f071b8c132fda4b32e3",
   "access": [
     {
-      "add": 1
-    },
-    {
-      "update": 1
-    },
-    {
-      "read": 1
-    },
-    {
-      "delete": 1
-    }
-  ]
-},
-{
-  "_id": {
-    "$oid": "683daaf71b8c132fda4b3322"
-  },
-  "type_user_id": "683d57b2bccc67d467a9e10f",
-  "menu_id": "683da1491b8c132fda4b32e7",
-  "access": [
-    {
-      "add": 1
-    },
-    {
-      "update": 1
-    },
-    {
-      "read": 1
-    },
-    {
+      "add": 0,
+      "update": 0,
+      "read": 0,
       "delete": 0
     }
   ]
 },
 {
   "_id": {
-    "$oid": "683f35251b8c132fda4b3338"
+    "$oid": "68521cf598993d8a60c2de3f"
   },
-  "type_user_id": "683d5805bccc67d467a9e110",
-  "menu_id": "683d582ebccc67d467a9e114",
+  "type_user_id": "683d57b2bccc67d467a9e10f",
+  "menu_id": "683da1491b8c132fda4b32e7",
   "access": [
     {
-      "add": 1
-    },
-    {
-      "update": 1
-    },
-    {
-      "read": 1
-    },
-    {
-      "delete": 1
+      "add": 0,
+      "update": 0,
+      "read": 0,
+      "delete": 0
     }
   ]
 }]

data/dummy/role.json

@@ -0,0 +1,70 @@
+{
+    "data": [
+        {
+            "_id": "68521cf598993d8a60c2de3b",
+            "type_user_id": "683d57b2bccc67d467a9e10f",
+            "menu_id": "683d582ebccc67d467a9e114",
+            "access": [
+                {
+                    "add": 1,
+                    "update": 1,
+                    "read": 1,
+                    "delete": 1
+                }
+            ]
+        },
+        {
+            "_id": "68521cf598993d8a60c2de3c",
+            "type_user_id": "683d57b2bccc67d467a9e10f",
+            "menu_id": "683d99fe1b8c132fda4b32cb",
+            "access": [
+                {
+                    "add": 0,
+                    "update": 0,
+                    "read": 0,
+                    "delete": 0
+                }
+            ]
+        },
+        {
+            "_id": "68521cf598993d8a60c2de3d",
+            "type_user_id": "683d57b2bccc67d467a9e10f",
+            "menu_id": "683d9ebc1b8c132fda4b32e2",
+            "access": [
+                {
+                    "add": 0,
+                    "update": 0,
+                    "read": 0,
+                    "delete": 0
+                }
+            ]
+        },
+        {
+            "_id": "68521cf598993d8a60c2de3e",
+            "type_user_id": "683d57b2bccc67d467a9e10f",
+            "menu_id": "683d9f071b8c132fda4b32e3",
+            "access": [
+                {
+                    "add": 0,
+                    "update": 0,
+                    "read": 0,
+                    "delete": 0
+                }
+            ]
+        },
+        {
+            "_id": "68521cf598993d8a60c2de3f",
+            "type_user_id": "683d57b2bccc67d467a9e10f",
+            "menu_id": "683da1491b8c132fda4b32e7",
+            "access": [
+                {
+                    "add": 0,
+                    "update": 0,
+                    "read": 0,
+                    "delete": 0
+                }
+            ]
+        }
+    ],
+    "message": "ID berhasil di cari"
+}

layouts/default.vue

@@ -47,6 +47,7 @@ const response = $fetch(`${issuer.value}/protocol/openid-connect/token`, {
       const idMongose = response.idMongose
       const encodeProfile = $encodeBase64(JSON.stringify(response))
       localStorage.setItem('userProfile', encodeProfile)
+      console.log("ini id mongose",idMongose)
       // cobaSetProfile.value.push(encodeProfile)
       $fetch(`/api/auth/sidebarItem`, {
         method: 'POST',

stores/api/setting/setting.ts

@@ -2,6 +2,7 @@ import {defineStore} from "pinia";
 import type {MessagesHandler} from "~/types/messagesHandler";
 const runtime = useRuntimeConfig().public;
 const messages = ref<MessagesHandler>({});
+const typeUser = ref<any>([]);
 
 export const useSettingStore = defineStore("SettingStore", () => {
   messages.value = {}
@@ -17,9 +18,8 @@ export const useSettingStore = defineStore("SettingStore", () => {
         listMenu.value = res
         // console.log("menu pinia :",listMenu.value);
       });
-  };
-
-  const typeUser = ref<any>([]);
+    };
+    
   const roleMenuById = ref<any>([]);
   const getRoleMenuById = async (body: Record<string, any>) => {
     typeUser.value = body;
@@ -35,6 +35,7 @@ export const useSettingStore = defineStore("SettingStore", () => {
     }).then((res) => {
       roleMenuById.value = res;
     });
+    console.log("rolemenu byid",roleMenuById.value)
   };
 
   const listTypeUser = ref<any>([]);