cobaKeuangan/components/Master/formDetail1.vue

<script setup lang="ts">
import typeUser from "@/data/dummy/keuangan.type_user.json";
import role_menu from "@/data/dummy/keuangan.role_menu.json";
import menu from "@/data/dummy/keuangan.menu.json";

import { useRoleMode } from "@/stores/api/roleMenu";
import { useMenu } from "@/stores/api/menu";
import { useTypeUser } from "@/stores/api/typeUser";

const { getMenu } = useMenu();
const { getTypeUser } = useTypeUser();

const { roleMenuById } = storeToRefs(useRoleMode());
const { listMenu } = storeToRefs(useMenu());
const { listTypeUser } = storeToRefs(useTypeUser());
const data = ref<any>([]);
const menuItem = ref<any>([]);
const type_user = ref<any>([]);

const dataDetail = ref(null)

const dataMenu = async () => {
  await getMenu();
  await getTypeUser();
//   console.log("ini roleMenu:",roleMenuById.value.data);
  // console.log('ini semua tipe:',listTypeUser.value);
  return roleMenuById.value.data.map((role_menu: any) => {
    menuItem.value = listMenu.value.find(
      (menu: any) => menu._id == role_menu.menu_id
    );
    console.log("ini menunya:", menuItem.value);
    type_user.value = listTypeUser.value.find(
      (type_user: any) => type_user._id == role_menu.type_user_id
    );
    // console.log("ini menunya:",menuItem);
    return {
      _id: role_menu._id,
      menu: menuItem?.value.display || "-",
      type_user: type_user?.value.display || "-",
      accessAdd: role_menu.access?.[0]?.add || 0,
      accessUpdate: role_menu.access?.[1]?.update || 0,
      accessRead: role_menu.access?.[2]?.read || 0,
      accessDelete: role_menu.access?.[3]?.delete || 0,
    };
  });
  //   console.log(data)
};

const checkMenu = () => {
    // var arr = listMenu.value.filter((i:any) => !roleMenuById.value.data.includes(i._id))
    // https://stackoverflow.com/questions/33577868/filter-array-not-in-another-array
    var arr = listMenu.value.filter((i:any) => !roleMenuById.value.data.map((r:any) => r.menu_id).includes(i._id))
    if(arr.length != 0){
        data.value.push(...arr.map((i:any) => ({menu:i.display,accessAdd:0,accessUpdate:0,accessRead:0,accessDelete:0})))
    }
    // console.log("yang belum ada di role menu",arr)
}

const onSubmit = async () => {
  // console.log("ini disimpan:",data.value?.data.typeUser);
  console.log("ini disimpan:",dataDetail.value?.form$.data);
  // await getTypeUser(data.value?.form$.data)
};
onMounted(async () => {
  //   console.log(roleMenuById.value.data);
  data.value = await dataMenu();
  console.log(checkMenu())
  console.log(data.value);
});

// const columns = ref([
//   { label: "Nama Menu", key: "menu" },
//   { label: "Tambah", key: "accessAdd" },
//   { label: "Ubah", key: "accessUpdate" },
//   { label: "Baca", key: "accessRead" },
//   { label: "Hapus", key: "accessDelete" },
//   { label: "Aksi", key: "actions" },
// ]);
</script>

<template>
  <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
  <!-- {{roleMenuById.data}} -->
  <!-- {{dataMenu}} -->
  <!-- {{data}} -->
  <pre>{{ data }}</pre>
  <!-- <MasterTable :columns="columns" :data="data"/> -->


  <Vueform ref="dataDetail" validate-on="change|step" method="post" :endpoint="onSubmit">
    <GridElement
      name="gridTable"
      :presets="['grid-table']"
      :cols="5"
      :rows="2"
      :grid="[
        [
          ['Nama Menu', 1, 1, null, null],
          ['Tambah', 1, 1, null, null],
          ['Ubah', 1, 1, null, null],
          ['Baca', 1, 1, null, null],
          ['Hapus', 1, 1, null, null],
        ],
        [
          ['', 1, 1, null, null],
          [
            {
              name: 'accessAdd',
              type: 'checkbox',
              text: 'Ya',
              builder: {
                type: 'checkbox',
                label: 'Checkbox',
              },
            },
            1,
            1,
            null,
            null,
          ],
          [
            {
              name: 'accessUpdate',
              type: 'checkbox',
              text: 'Ya',
              builder: {
                type: 'checkbox',
                label: 'Checkbox',
              },
            },
            1,
            1,
            null,
            null,
          ],
          [
            {
              name: 'accessRead',
              type: 'checkbox',
              text: 'Ya',
              builder: {
                type: 'checkbox',
                label: 'Checkbox',
              },
            },
            1,
            1,
            null,
            null,
          ],
          [
            {
              name: 'accessDelete',
              type: 'checkbox',
              text: 'Ya',
              builder: {
                type: 'checkbox',
                label: 'Checkbox',
              },
            },
            1,
            1,
            null,
            null,
          ],
        ],
      ]"
    />
    <ButtonElement
      name="primaryButton"
      button-label="Simpan"
      :submits="true"
      align="right"
    />
  </Vueform>
    </div>
</template>