dwi.firman/cobaKeuangan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'cobaTampilan' of https://git.rssa.top/dwi.firman/cobaKeuangan into keycloak

Browse Source 
# Conflicts:
#	components/Master/CardList.vue
#	pages/Setting/typeUser/index.vue
This commit is contained in:
dwi.firman
2025-06-04 09:26:54 +07:00
parent 11a24396aa 3b288fd861
commit 85241f5128
13 changed files with 384 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Master/CardList.vue
+2 -8
View File
@@ -11,7 +11,7 @@ const emit = defineEmits(['detail']);
const state = ref(false)
</script>
<template>
<v-card elevation="10" style="overflow: hidden;min-width: 300px;" @click="state = true">
<v-card elevation="10" style="overflow: hidden;min-width: 300px;" @click="state = true; emit('detail', props?.item)">
<template v-slot:prepend>
<v-avatar size="50">
<Icon icon="solar:user-circle-broken" height="32"/>
@@ -29,11 +29,5 @@ const state = ref(false)
</template> -->
</v-card>
<MasterDialogModal v-if="state" :stateValue="state" @stateValue="val => state = val">
<template v-slot:text>
<!-- <p>coba ini</p> -->
<!-- <MasterFormTypeUser />-->
<MasterFormListMenu/>
</template>
</MasterDialogModal>
<!-- <MasterDialogModal v-if="state" :stateValue="state" @stateValue="val => state = val" /> -->
</template>
components/Master/DialogModal.vue
+1 -1
View File
@@ -2,7 +2,7 @@
import { ref, watch, defineProps } from 'vue';
const props = defineProps({
stateValue: { type: Boolean, required: true }
stateValue: { type: Boolean, required: true },
});
const isActive = ref(props.stateValue);
components/Master/formDetail.vue
+67
View File
@@ -0,0 +1,67 @@
<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 dataMenu = async() => {
await getMenu()
await getTypeUser()
// console.log('ini semua tipe:',listTypeUser.value);
return roleMenuById.value.data.map((role_menu: any) => {
const menuItem = listMenu.value.find((menu:any) => menu._id == role_menu.menu_id)
const type_user= 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?.display || '-',
type_user: type_user?.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 onSubmit = async() => {
// console.log("ini disimpan:",data.value?.data.typeUser);
// console.log("ini disimpan:",data.value?.form$.data);
// await getTypeUser(data.value?.form$.data)
}
onMounted(async () => {
// console.log(roleMenuById.value.data);
data.value = await dataMenu()
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}} -->
<MasterTable :columns="columns" :data="data"/>
</div>
</template>
components/Master/formDetail1.vue
+177
View File
@@ -0,0 +1,177 @@
<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>
components/Master/formTypeUser.vue
+1 -1
View File
@@ -6,7 +6,7 @@ const {getTypeUser} = useTypeUser()
const onSubmit = async() => {
// console.log("ini disimpan:",data.value?.data.typeUser);
// console.log("ini disimpan:",data.value?.form$.data);
await getTypeUser(data.value?.form$.data)
// await getTypeUser(data.value?.form$.data)
}
</script>
data/dummy/keuangan.role_menu.json
+31 -6
View File
@@ -2,20 +2,24 @@
"_id": {
"$oid": "683da37c1b8c132fda4b32f7"
},
"type_user_id": "683d57b2bccc67d467a9e10f",
"menu_id": "683d582ebccc67d467a9e114",
"type_user_id": {
"$oid": "683d57b2bccc67d467a9e10f"
},
"menu_id": {
"$oid": "683d582ebccc67d467a9e114"
},
"access": [
{
"add": 0
"add": 1
},
{
"update": 0
"update": 1
},
{
"read": 0
"read": 1
},
{
"delete": 0
"delete": 1
}
]
},
@@ -123,4 +127,25 @@
"delete": 0
}
]
},
{
"_id": {
"$oid": "683f35251b8c132fda4b3338"
},
"type_user_id": "683d5805bccc67d467a9e110",
"menu_id": "683d582ebccc67d467a9e114",
"access": [
{
"add": 1
},
{
"update": 1
},
{
"read": 1
},
{
"delete": 1
}
]
}]
pages/Setting/typeUser/index.vue
+25 -17
View File
@@ -4,35 +4,41 @@
import role_menu from "@/data/dummy/keuangan.role_menu.json";
import menu from "@/data/dummy/keuangan.menu.json";
import { ref } from "vue";
import {boolean} from "zod/v4";
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())
const state = ref(false)
const typeUser = ref<any[]>([]);
$fetch("/api/setting/getTipeUser").then((res) => {
console.log('uuu',res);
typeUser.value = res;
})
// console.log(typeUser);
// console.log(role_menu);
// console.log(menu);
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>
@@ -47,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>
server/api/menu/listMenu.get.ts
+4
View File
@@ -0,0 +1,4 @@
export default defineEventHandler(async(event)=> {
const a = await $fetch("http://10.10.150.131:8080/api/menu/getlist")
return a
})
server/api/roleMenu/roleMenu.post.ts
+11
View File
@@ -0,0 +1,11 @@
export default defineEventHandler(async(event)=> {
const body = await readBody(event)
console.log(body)
const a = await $fetch(`http://10.10.150.131:8080/api/menu/role/type/${body}`,{
headers: {
"Content-Type": "application/json",
},
method: "GET",
})
return a
})
server/api/typeUser/listTypeUser.get.ts
+4
View File
@@ -0,0 +1,4 @@
export default defineEventHandler(async(event)=> {
const a = await $fetch("http://10.10.150.131:8080/api/menu/type")
return a
})
stores/api/menu.ts
+21
View File
@@ -0,0 +1,21 @@
import { defineStore } from "pinia";
import axios from "axios";
export const useMenu = defineStore("menu", () => {
const listMenu = ref<any>([]);
const getMenu = async () => {
// await $fetch("http://10.10.150.131:8080/api/menu/getlist", {
await $fetch("/api/menu/listMenu", {
// mode: "no-cors",
headers: {
"Content-Type": "application/json",
},
method:"GET",
})
.then((res) => {
listMenu.value = res
console.log(listMenu.value);
});
// return listMenu;
};
return { getMenu,listMenu };
});
stores/api/roleMenu.ts
+24
View File
@@ -0,0 +1,24 @@
import { defineStore } from "pinia";
import axios from "axios";
export const useRoleMode = defineStore("roleMode", () => {
const typeUser = ref<any>([]);
const roleMenuById = ref<any>([]);
const getRoleMenuById = async (body: Record<string, any>) => {
typeUser.value = body;
// console.log(typeUser.value);
// await $fetch("http://10.10.150.131:8080/api/menu/getlist", {
await $fetch(`/api/roleMenu/roleMenu`, {
// mode: "no-cors",
headers: {
"Content-Type": "application/json",
},
method: "POST",
body: JSON.stringify(body),
}).then((res) => {
roleMenuById.value = res;
// console.log(roleMenuById.value);
});
// return roleMenuById;
};
return { getRoleMenuById, roleMenuById, typeUser };
});
stores/api/typeUser.ts
+16 -15
View File
@@ -1,22 +1,23 @@
import { defineStore } from "pinia";
import axios from "axios";
export const useTypeUser = defineStore("typeUser", () => {
const data = ref<any>([]);
const getTypeUser = async (body: Record<string, any>) => {
const a = await $fetch("http://10.10.150.131:8080/api/menu/getlist", {
mode: "no-cors",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*"
},
const listTypeUser = ref<any>([]);
const getTypeUser = async () => {
// await $fetch("http://10.10.150.131:8080/api/menu/type", {
await $fetch("/api/typeUser/listTypeUser", {
// mode: 'no-cors',
// headers: {
// 'Access-Control-Allow-Origin': '*',
// Accept: 'application/json',
// 'Content-Type': 'application/json',
// },
method:"GET",
})
// .then((res) => {
// data.value = res
// console.log(data.value);
// });
// return data;
console.log(a);
.then((res) => {
listTypeUser.value = res
// console.log(listTypeUser.value);
});
// return listTypeUser;
};
return { getTypeUser,data };
return { getTypeUser,listTypeUser };
});