277 lines
8.1 KiB
Vue
277 lines
8.1 KiB
Vue
<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> |