data dari api

pages/Setting/typeUser/index.vue

@@ -1,31 +1,44 @@
 <script setup lang="ts">
 // import encounter from "@/data/dummy/encounter.json";
-import typeUser from "@/data/dummy/keuangan.type_user.json";
+// 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 { ref } from "vue";
+import {useTypeUser} from "@/stores/api/typeUser"
+import {useRoleMode} from "@/stores/api/roleMenu"
+
+const {getTypeUser} = useTypeUser()
+const {getRoleMenuById} = useRoleMode()
+
+const {listTypeUser} =storeToRefs(useTypeUser())
+const {typeUser} =storeToRefs(useRoleMode())
 
-// console.log(typeUser);
-// console.log(role_menu);
-// console.log(menu);
 const state = ref(false)
-const detailType = (item) => {
-  console.log(item); //simpan pinia
-  navigateTo(`/Setting/typeUser/HakAkses`);
+const type = ref('')
+const detailType = async(item:any) => {
+  // console.log(item._id); //simpan pinia
+  await getRoleMenuById(item._id)
+  type.value='detail'
+  state.value= true
+  // navigateTo(`/Setting/typeUser/HakAkses`);
 };
 // const dialog = ref(false);
 // const detail = ref(false);
+onMounted(async() => {
+  await getTypeUser()
+  // console.log(listTypeUser);
+})
 </script>
 <!-- ini list -->
 <template>
   <div class="d-flex pt-6 align-center justify-end">
-        <v-btn class="mr-16" color="primary" variant="tonal" @click="state= !state"><v-icon>mdi-plus</v-icon> Tipe User</v-btn>
+        <v-btn class="mr-16" color="primary" variant="tonal" @click="state= !state; type='create'"><v-icon>mdi-plus</v-icon> Tipe User</v-btn>
   </div>
   <v-row no-gutters>
     <v-col cols="12" md="4">
       <div class="d-flex justify-space-between">
-        <template v-if="typeUser && typeUser.length > 0">
-          <v-col v-for="(item, index) in typeUser" :key="index">
+        <template v-if="listTypeUser && listTypeUser.length > 0">
+          <v-col v-for="(item, index) in listTypeUser" :key="index">
             <MasterCardList :item="item" @detail="detailType" />
           </v-col>
         </template>
@@ -40,7 +53,9 @@ const detailType = (item) => {
   <MasterDialogModal v-if="state" :stateValue="state" @stateValue="val => state = val" >
     <template v-slot:text>
       <!-- <p>coba ini</p> -->
-       <MasterFormTypeUser />
+       {{ type }}
+       <MasterFormTypeUser v-if="type=='create'"/>
+       <MasterFormDetail1 v-if="type=='detail'"/>
     </template>
   </MasterDialogModal>
 </template>