coba-tampilan/components/apps/Setting/TipePengguna/FormRole.vue

<script setup>
import { ref, reactive } from "vue";
import permission from "@/components/Setting/ViewPermission/element/selectElement.vue";
import menuRoles from "@/components/apps/Setting/TipePengguna/element/table.vue";
import pages from "@/components/apps/Setting/TipePengguna/element/checkboxElement.vue";
import { useSettingStore } from "~/store/apps/Setting/setting";

import rolePages from "~/data/dummy/rolePage1.ts";
import sidebarItem from "@/components/layout/full/vertical-sidebar/sidebarItem.ts";

const store = useSettingStore();
const props = defineProps({
  typeForm: {
    type: String,
  },
});

const onSubmit = () => {
  // console.log(data.value.form$.data);
  console.log("ini form:",form.value);
  // emit('stateValue', {data:data.value.form$.data, state:false})
};


const data = ref(null);
const menu = ref(null);
const form = ref({});
const allMenu = () => {
    menu.value = sidebarItem.flatMap((item) => {
     return item.children
      .flatMap((subitem) => {
        const data = {
          header: item.header,
          title: subitem.title,
          path: subitem.to,
          permission: [],
        }
        if(subitem.children){
        const dataSubChildren = subitem.children.map((submenu) => ({
          header: item.header,
            title: submenu.title,
            path: submenu.to,
            permission: [],
        }))
        return [data, ...dataSubChildren];
      }
        return [data];
      })
      
  });
}

/*const onSelectSearch = (option,index) => {
  // console.log("ini option:",option)
  // console.log("ini option:",index)
  const data = menu.value.find((i) => i.title == option)
  // console.log("baru",data.header)
  form.value.pages[index].path = data.path
  form.value.pages[index].title = option
  if(data)
  form.value.pages[index].header = data.header
else 
  form.value.pages[index].header = ""

  // console.log("el:",el$.$parent)
  // el$.$parent.$parent.children$.path.update(data.path)
  // if(data.path === undefined){
  // }
}*/
const addPages = () => {
  form.value.pages.push({
    title: "",
    path: "",
    permissions: [{
      create: 0,
      view: 0, 
      update: 0,
      delete: 0,
    }]
  })
}

const canclePages = (index) => {
  // console.log("ini index:",index)
  form.value.pages.splice(index,1)
}
onBeforeMount(async () => {
  if (props.typeForm === "edit"){
    console.log("yg edit:",store.typeUser)
    data.value = rolePages.find((item) => item.role === store.typeUser.display);
    // data.value = rolePages.find((item) => item.id_user === 1);
    Object.assign(form.value, data.value);
    console.log("form.value:", form.value);
  allMenu()
}else{
  // add()
  form.value ={
    username: "",
    role: "",
    pages: [{
      title: "",
      path: "",
      permissions: [{
        create: 0,
        view: 0, 
        update: 0,
        delete: 0,
      }]
    }],
  }
  allMenu()
}
});
</script>

<template>
  <!-- <pre>{{ rolePages  }}</pre> -->
  <!-- <pre>{{ data }}</pre> -->
  <!-- <pre>{{ menu }}</pre> -->
   <!-- <pre>{{ form }}</pre> -->
  <Vueform
    ref="data"
    validate-on="change|step"
    method="post"
    :endpoint="onSubmit"
  >
   
        <TextElement
          :default="form.username"
          @input="(e) => (form.username = e.target.value)"
          name="username"
          label="user name"
          :columns="{
            container: 6,
          }"
        />
        <TextElement
          :default="form.role"
          @input="(e) => (form.role = e.target.value)"
          name="role"
          label="Role Type"
          :columns="{
            container: 6,
          }"
        />

         <div class="vf-element-layout vf-col-12  border border-gray-200 rounded-xl">
          <v-table style="min-width: 100%;height: 300px;" class="nowrap">
      <thead>
        <tr>
          <th class="text-h6 ps-6" style="width:20%">Module</th>
          <th class="text-h6">Path</th>
          <th class="text-h6">Create</th>
          <th class="text-h6">View</th>
          <th class="text-h6">Update</th>
          <th class="text-h6">Delete</th>
          <th class="text-h6">Action</th>
        </tr>
      </thead>
      <tbody>
        <!-- <div class="vf-element-layout vf-col-12"> -->
          <tr v-for="(item, index) in form?.pages" :key="index" :default="form.pages">
            <!-- {{ console.log("ini item:",form.pages[index].title) }} -->
            <td>
              <!-- @change="(oldValue, newValue, el$)=>onSelectSearch(oldValue, newValue, el$,index)" -->
              <SelectElement
              :default="form.pages[index].title"
              @select="(val)=>onSelectSearch(val,index)"
                :items="menu"
                :search="true"
                :native="false"
                input-type="search"
                autocomplete="of"
                value-prop="title"
                label-prop="title"
                :create="true"
                :add-option-on="['enter', 'tab', 'space']"
                :columns="{
                  container: 6,
                }"
              />
            </td>
            <td>
              <!-- v-model="form.pages[index].path" -->
              <TextElement
              :default="form.pages[index].path"
            :columns="{
              container: 6,
            }"
          />
            </td>
            <td>
              <!-- <p>{{ form.pages[index].permissions[0].update }}</p> -->
              <CheckboxElement
              :default="form.pages[index].permissions[0].create"
              @change="(val) => form.pages[index].permissions[0].create = val"
                :columns="{
                  container: 6,
                }"
                trueValue=1
                falseValue=0
              />
            </td>            
            <td>
              <CheckboxElement
              :default="form.pages[index].permissions[0].view"
              @change="(val) => form.pages[index].permissions[0].view = val"
                :columns="{
                  container: 6,
                }"
                trueValue=1
                falseValue=0
              />
            </td>            
            <td>
              <CheckboxElement
              :default="form.pages[index].permissions[0].update"
              @change="(val) => form.pages[index].permissions[0].update = val"
                :columns="{
                  container: 6,
                }"
                trueValue=1
                falseValue=0
              />
            </td>            
            <td>
              <CheckboxElement
              :default="form.pages[index].permissions[0].delete"
              @change="(val) => form.pages[index].permissions[0].delete = val"
                :columns="{
                  container: 6,
                }"
                trueValue=1
                falseValue=0
              />
            </td>  
            <td>
              <div class="d-flex flex-row ga-1">
                <v-btn v-if="index == form.pages.length - 1 && props.typeForm != 'edit'" @click="addPages" variant="tonal" color="primary" class="px-auto"><v-icon icon="mdi-plus" /> Page</v-btn>
                <v-btn @click="canclePages(index)" variant="tonal" color="error" class="px-auto"><v-icon icon="mdi-delete" /> Page</v-btn>
              </div>
            </td>          
          </tr>
        <!-- </div> -->
      </tbody>
    </v-table>
  </div>
  <ButtonElement
        name="primaryButton"
        button-label="Button"
        :submits="true"
        align="right"
      />
   
  </Vueform>
</template>