tampilan
This commit is contained in:
@@ -16,7 +16,7 @@ watch(() => props.stateValue, (newValue) => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="pa-4 text-center">
|
<div class="pa-4 text-center">
|
||||||
<v-dialog max-width="800" v-model="isActive" persistent>
|
<v-dialog max-width="800" max-height="600" v-model="isActive" persistent>
|
||||||
<template v-slot:default="{ isActive }">
|
<template v-slot:default="{ isActive }">
|
||||||
<v-card>
|
<v-card>
|
||||||
<template v-slot:title>
|
<template v-slot:title>
|
||||||
|
|||||||
277
components/Master/FormAdd.vue
Normal file
277
components/Master/FormAdd.vue
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from "vue";
|
||||||
|
const emit = defineEmits(['stateValue']);
|
||||||
|
const permissionCategories = [
|
||||||
|
{
|
||||||
|
value: 0,
|
||||||
|
label: "General",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "1",
|
||||||
|
label: "ProductServce",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
label: "Product",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const dummy = {
|
||||||
|
tab: null,
|
||||||
|
typeUser: "coba",
|
||||||
|
roleMenu: [
|
||||||
|
{
|
||||||
|
permission: "0",
|
||||||
|
menu: [
|
||||||
|
{
|
||||||
|
Module: "module1",
|
||||||
|
create: "true",
|
||||||
|
update: "false",
|
||||||
|
delete: "false",
|
||||||
|
show: "false",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Module: "module2",
|
||||||
|
create: "true",
|
||||||
|
update: "true",
|
||||||
|
delete: "false",
|
||||||
|
show: "false",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
permission: "1",
|
||||||
|
menu: [
|
||||||
|
{
|
||||||
|
Module: "module1",
|
||||||
|
create: "true",
|
||||||
|
update: "false",
|
||||||
|
delete: "true",
|
||||||
|
show: "false",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Module: "module2",
|
||||||
|
create: "true",
|
||||||
|
update: "true",
|
||||||
|
delete: "false",
|
||||||
|
show: "false",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const form = ref({});
|
||||||
|
// const form = ref({dummy})
|
||||||
|
// console.log(form)
|
||||||
|
const data = ref(null);
|
||||||
|
const ready = ref(false);
|
||||||
|
const onSubmit = () => {
|
||||||
|
console.log(data.value.form$.data);
|
||||||
|
emit('stateValue', false)
|
||||||
|
// console.log(form.value);
|
||||||
|
// console.log("masuk sini",form.value)
|
||||||
|
};
|
||||||
|
onBeforeMount(() => {
|
||||||
|
Object.assign(form.value, dummy);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- <pre>{{ form }}</pre> -->
|
||||||
|
<!-- <Vueform v-if="ready" ref="data" v-model="form" validate-on="change|step" method="post" :endpoint="onSubmit"> -->
|
||||||
|
<Vueform
|
||||||
|
ref="data"
|
||||||
|
v-model="form"
|
||||||
|
validate-on="change|step"
|
||||||
|
method="post"
|
||||||
|
:endpoint="onSubmit"
|
||||||
|
>
|
||||||
|
<template #empty>
|
||||||
|
<FormSteps>
|
||||||
|
<FormStep
|
||||||
|
name="page0"
|
||||||
|
label="Type User"
|
||||||
|
:elements="['typeUser', 'roleType']"
|
||||||
|
/>
|
||||||
|
<FormStep
|
||||||
|
name="page1"
|
||||||
|
label="Permission Categories"
|
||||||
|
:elements="['text', 'tab', 'gridTable', 'roleMenu', 'permission']"
|
||||||
|
/>
|
||||||
|
</FormSteps>
|
||||||
|
|
||||||
|
<FormElements>
|
||||||
|
<ListElement name="roleMenu" :default="form.roleMenu" class="mx-4" add-text="+ permission">
|
||||||
|
<template #default="{ index }">
|
||||||
|
<ObjectElement :name="index" class="px-3 py-3 border border-gray-200 rounded-xl">
|
||||||
|
<SelectElement
|
||||||
|
name="permission"
|
||||||
|
:items="permissionCategories"
|
||||||
|
:search="true"
|
||||||
|
:native="false"
|
||||||
|
label="Permission Category"
|
||||||
|
input-type="search"
|
||||||
|
autocomplete="off"
|
||||||
|
:columns="{
|
||||||
|
container: 5,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<GridElement
|
||||||
|
name="gridTable"
|
||||||
|
class="border"
|
||||||
|
style="background-color: #06ac8b; color: aliceblue;"
|
||||||
|
:cols="5"
|
||||||
|
:rows="1"
|
||||||
|
:grid="[
|
||||||
|
[
|
||||||
|
['Module', 1, 1, null, null],
|
||||||
|
['Create', 1, 1, null, null],
|
||||||
|
['Update', 1, 1, null, null],
|
||||||
|
['Delete', 1, 1, null, null],
|
||||||
|
['Show', 1, 1, null, null],
|
||||||
|
],
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
<ListElement
|
||||||
|
name="menu"
|
||||||
|
add-text="+ module"
|
||||||
|
:sort="true"
|
||||||
|
wrapper-class="flex flex-col items-center gap-4"
|
||||||
|
add-class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full"
|
||||||
|
>
|
||||||
|
<template #default="{ index }">
|
||||||
|
<ObjectElement :name="index">
|
||||||
|
<GridElement
|
||||||
|
name="gridTable_1"
|
||||||
|
class="!mb-0"
|
||||||
|
:cols="5"
|
||||||
|
:rows="1"
|
||||||
|
:grid="[
|
||||||
|
[
|
||||||
|
[
|
||||||
|
{
|
||||||
|
// default:form.roleMenu[index]?.Module ?? 'asa',
|
||||||
|
name: 'Module',
|
||||||
|
type: 'text',
|
||||||
|
builder: {
|
||||||
|
type: 'text',
|
||||||
|
label: 'Text input',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
null,
|
||||||
|
null,
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
// default:form.roleMenu[index]?.create ?? false,
|
||||||
|
name: 'create',
|
||||||
|
type: 'checkbox',
|
||||||
|
builder: {
|
||||||
|
type: 'checkbox',
|
||||||
|
label: 'Checkbox',
|
||||||
|
},
|
||||||
|
text: 'Ya',
|
||||||
|
trueValue: 'true',
|
||||||
|
falseValue: 'false',
|
||||||
|
},
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
null,
|
||||||
|
null,
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
// default:form.roleMenu[index]?.update?? false,
|
||||||
|
name: 'update',
|
||||||
|
type: 'checkbox',
|
||||||
|
builder: {
|
||||||
|
type: 'checkbox',
|
||||||
|
label: 'Checkbox',
|
||||||
|
},
|
||||||
|
text: 'Ya',
|
||||||
|
trueValue: 'true',
|
||||||
|
falseValue: 'false',
|
||||||
|
},
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
null,
|
||||||
|
null,
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
// default:form.roleMenu[index]?.delete?? false,
|
||||||
|
name: 'delete',
|
||||||
|
type: 'checkbox',
|
||||||
|
builder: {
|
||||||
|
type: 'checkbox',
|
||||||
|
label: 'Checkbox',
|
||||||
|
},
|
||||||
|
text: 'Ya',
|
||||||
|
trueValue: 'true',
|
||||||
|
falseValue: 'false',
|
||||||
|
},
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
null,
|
||||||
|
null,
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
// default:form.roleMenu[index]?.show?? false,
|
||||||
|
name: 'show',
|
||||||
|
type: 'checkbox',
|
||||||
|
builder: {
|
||||||
|
type: 'checkbox',
|
||||||
|
label: 'Checkbox',
|
||||||
|
},
|
||||||
|
text: 'Ya',
|
||||||
|
trueValue: 'true',
|
||||||
|
falseValue: 'false',
|
||||||
|
},
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
null,
|
||||||
|
null,
|
||||||
|
],
|
||||||
|
],
|
||||||
|
]"
|
||||||
|
:presets="['grid-table']"
|
||||||
|
/>
|
||||||
|
</ObjectElement>
|
||||||
|
</template>
|
||||||
|
</ListElement>
|
||||||
|
</ObjectElement>
|
||||||
|
</template>
|
||||||
|
</ListElement>
|
||||||
|
<TextElement
|
||||||
|
:default="form.typeUser"
|
||||||
|
name="typeUser"
|
||||||
|
label="Role Name"
|
||||||
|
:columns="{
|
||||||
|
container: 6,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
:default="form.typeUser"
|
||||||
|
name="roleType"
|
||||||
|
label="Role Type"
|
||||||
|
:columns="{
|
||||||
|
container: 6,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</FormElements>
|
||||||
|
|
||||||
|
<FormStepsControls />
|
||||||
|
</template>
|
||||||
|
</Vueform>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
/* .vf-layout-inner-wrapper .vf-rowset .vt-row{
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
} */
|
||||||
|
</style>
|
||||||
52
pages/Setting/typeUser/ViewRoles.vue
Normal file
52
pages/Setting/typeUser/ViewRoles.vue
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import {useSettingStore} from "@/stores/api/setting/setting"
|
||||||
|
|
||||||
|
const {getTypeUser,getRoleMenuById} = useSettingStore()
|
||||||
|
const {listTypeUser,typeUser} =storeToRefs(useSettingStore())
|
||||||
|
|
||||||
|
|
||||||
|
const state = ref(false)
|
||||||
|
const type = ref('')
|
||||||
|
const detailType = async(item:any) => {
|
||||||
|
//simpan pinia
|
||||||
|
await getRoleMenuById(item._id)
|
||||||
|
type.value='detail'
|
||||||
|
state.value= true
|
||||||
|
};
|
||||||
|
onMounted(async() => {
|
||||||
|
await getTypeUser()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<!-- ini list -->
|
||||||
|
<template>
|
||||||
|
<div class="d-flex pt-6 align-center ml-3 mb-6">
|
||||||
|
<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="listTypeUser && listTypeUser.length > 0">
|
||||||
|
<v-col v-for="(item, index) in listTypeUser" :key="index">
|
||||||
|
<MasterCardList :item="item" @detail="detailType" >
|
||||||
|
<template v-slot:actions></template>
|
||||||
|
</MasterCardList>
|
||||||
|
</v-col>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="d-flex justify-content-center align-items-center ml-3">
|
||||||
|
<p>Tidak ada Pasien</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<MasterDialogModal v-if="state" :stateValue="state" @stateValue="val => state = val" >
|
||||||
|
<template v-slot:text>
|
||||||
|
|
||||||
|
<MasterFormTypeUser v-if="type=='create'"/>
|
||||||
|
<MasterFormAdd v-if="type=='detail'" @stateValue="val => state = val"/>
|
||||||
|
<!-- <MasterContoh v-if="type=='detail'"/> -->
|
||||||
|
</template>
|
||||||
|
</MasterDialogModal>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user