halaman dipisah
This commit is contained in:
No files matched your search
@@ -0,0 +1,129 @@
|
||||
<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/rolePage.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);
|
||||
// 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];
|
||||
})
|
||||
|
||||
});
|
||||
// filter((menu) => !data.value?.pages.some((m) => m.path === menu.path))
|
||||
// menu.value.push(...data.value.pages);
|
||||
// console.log("menu:", menu.value);
|
||||
}
|
||||
|
||||
onBeforeMount(async () => {
|
||||
if (props.typeForm === "edit"){
|
||||
data.value = rolePages.find((item) => item.id_user === 1);
|
||||
Object.assign(form.value, data.value);
|
||||
|
||||
// console.log("data.value:", data.value);
|
||||
// console.log("all menu:", sidebarItem);
|
||||
|
||||
allMenu()
|
||||
}else{
|
||||
allMenu()
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <pre>{{ rolePages }}</pre> -->
|
||||
<pre>{{ data }}</pre>
|
||||
<!-- <pre>{{ form }}</pre> -->
|
||||
<Vueform
|
||||
ref="data"
|
||||
v-model="form"
|
||||
validate-on="change|step"
|
||||
method="post"
|
||||
:endpoint="onSubmit"
|
||||
>
|
||||
<template #empty>
|
||||
<FormSteps>
|
||||
<FormStep
|
||||
name="page0"
|
||||
label="Type User"
|
||||
:elements="['username', 'role']"
|
||||
/>
|
||||
<FormStep
|
||||
name="page1"
|
||||
label="Permission Categories"
|
||||
:elements="['text', 'tab', 'gridTable', 'roleMenu', 'permission','pages']"
|
||||
/>
|
||||
</FormSteps>
|
||||
<FormElements>
|
||||
<TextElement
|
||||
:default="form.username"
|
||||
name="username"
|
||||
label="user name"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
/>
|
||||
<TextElement
|
||||
:default="form.role"
|
||||
name="role"
|
||||
label="Role Type"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
/>
|
||||
|
||||
|
||||
<!-- <div class="vf-element-layout vf-col-12 border border-gray-200 rounded-xl">
|
||||
<ListElement name="pages" :default="form.pages" class="mx-4" >
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index" class="px-3"> -->
|
||||
<!-- <menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: ''}] " :typeForm = "'edit'" :menus="menu"/> -->
|
||||
<!-- <pages name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: ''}] " :typeForm = "'edit'" :menus="menu"/> -->
|
||||
<!-- </ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</div> -->
|
||||
<menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: '',permission:[]}] " :typeForm = "'edit'" :menus="menu"/>
|
||||
</FormElements>
|
||||
|
||||
<FormStepsControls />
|
||||
</template>
|
||||
</Vueform>
|
||||
</template>
|
||||
@@ -0,0 +1,256 @@
|
||||
<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>
|
||||
@@ -0,0 +1,192 @@
|
||||
<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: "coba",
|
||||
// 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"
|
||||
v-model="form"
|
||||
validate-on="change|step"
|
||||
method="post"
|
||||
:endpoint="onSubmit"
|
||||
>
|
||||
<TextElement
|
||||
name="username"
|
||||
label="user name"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
/>
|
||||
<TextElement
|
||||
name="role"
|
||||
label="Role Type"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
/>
|
||||
|
||||
<div class="vf-element-layout vf-col-12 border border-gray-200 rounded-xl">
|
||||
<v-table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-h6 ps-6" style="width: 50%">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>
|
||||
|
||||
<ListElement name="pages" :default="form.pages" class="mx-4">
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index" class="px-3">
|
||||
<div class="vf-element-layout vf-col-12">
|
||||
<tr>
|
||||
<!-- {{ console.log("ini item:",form.pages[index].title) }} -->
|
||||
<td>
|
||||
<TextElement
|
||||
name="title"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextElement
|
||||
name="path"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</div>
|
||||
<ButtonElement
|
||||
name="primaryButton"
|
||||
button-label="Button"
|
||||
:submits="true"
|
||||
align="right"
|
||||
/>
|
||||
</Vueform>
|
||||
</template>
|
||||
@@ -0,0 +1,153 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { HeartIcon, UsersIcon, TrashIcon } from "vue-tabler-icons";
|
||||
import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
|
||||
// import { useFrinedsStore } from '@/stores/apps/userprofile/friends';
|
||||
import SettingCards from "@/components/widgets2/cards/SettingCards.vue";
|
||||
// import data from "@/data/dummy/keuangan.type_user.json";
|
||||
import { toast } from "vue3-toastify";
|
||||
import "vue3-toastify/dist/index.css";
|
||||
import Form from "@/components/Setting/ViewPermission/Form.vue";
|
||||
import { Icon } from "@iconify/vue";
|
||||
import { useSettingStore } from "~/store/apps/Setting/setting";
|
||||
import useRole from "@/composable/index";
|
||||
|
||||
const {
|
||||
datas: { dialog, dialogDelete,getData},
|
||||
method: {
|
||||
formTitle,
|
||||
typeForm,
|
||||
deleteItem,
|
||||
toastAlert,
|
||||
openDeleteDialog,
|
||||
openFormDialog,
|
||||
findRole,
|
||||
paginated
|
||||
},
|
||||
} = useRole();
|
||||
|
||||
const store = useSettingStore();
|
||||
|
||||
const editedIndex = ref(-1);
|
||||
|
||||
const searchValue = ref("");
|
||||
|
||||
|
||||
const filteredCards = computed(() => {
|
||||
console.log("getData.value:",getData.value)
|
||||
return getData.value.filter((card: any) => {
|
||||
return card.display.toLowerCase().includes(searchValue.value.toLowerCase());
|
||||
});
|
||||
});
|
||||
|
||||
const editItem = async(item: any) =>{
|
||||
console.log("item:",item._id)
|
||||
// editedIndex.value = getData.value.indexOf(item);
|
||||
// editedIndex.value = item._id;
|
||||
store.getTypeUser(item);
|
||||
// await store.getRoleMenuById(item._id)
|
||||
openFormDialog(true);
|
||||
}
|
||||
|
||||
function onDelete(item: any) {
|
||||
editedIndex.value = getData.value.indexOf(item);
|
||||
openDeleteDialog(true);
|
||||
console.log("data:",editedIndex)
|
||||
}
|
||||
|
||||
function deleteConfirm(data: any, index: number) {
|
||||
deleteItem(data, index);
|
||||
openDeleteDialog(false);
|
||||
toastAlert("Berhasil hapus data!", "success");
|
||||
}
|
||||
|
||||
onBeforeMount(async() => {
|
||||
await store.getAllTypeUser();
|
||||
paginated(store.listTypeUser)
|
||||
// console.log("getData.value:",filteredCards)
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <pre>{{ filteredCards }}</pre> -->
|
||||
<v-row class="justify-content-end mt-5">
|
||||
<v-col cols="12">
|
||||
<div class="d-sm-flex justify-end mb-2">
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="flat"
|
||||
dark
|
||||
to="/apps/Setting/TipePengguna/create"
|
||||
><v-icon icon="mdi-plus" /> Type User</v-btn
|
||||
>
|
||||
</div>
|
||||
<div class="d-sm-flex align-center mb-5">
|
||||
<h3 class="text-h3">
|
||||
Type User
|
||||
<v-chip
|
||||
size="small"
|
||||
class="ml-2 elevation-0"
|
||||
variant="elevated"
|
||||
color="secondary"
|
||||
>{{ getData.length }}</v-chip
|
||||
>
|
||||
</h3>
|
||||
<v-sheet width="250" class="ml-0 ml-sm-auto mt-3 mt-sm-0">
|
||||
<v-text-field
|
||||
color="primary"
|
||||
hide-details
|
||||
variant="outlined"
|
||||
placeholder="Search Friends"
|
||||
density="compact"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
v-model="searchValue"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-sheet>
|
||||
</div>
|
||||
|
||||
<!-- card list -->
|
||||
<SettingCards :data="filteredCards" @paginated="paginated(store.listTypeUser)">
|
||||
<template v-slot:avatar="data">
|
||||
<Icon icon="solar:user-circle-broken" height="140" width="80" />
|
||||
<!-- <img src="@/assets/images/profile/user-3.jpg" height="140" alt="image" /> -->
|
||||
</template>
|
||||
<template v-slot:title="data">
|
||||
<!-- {{ data.prop.title }} -->
|
||||
{{ data.prop.display }}
|
||||
</template>
|
||||
<template v-slot:content="data">
|
||||
|
||||
</template>
|
||||
<template v-slot:actions="data">
|
||||
<v-btn flat color="primary" size="large" @click="editItem(data.prop)" to="/apps/Setting/TipePengguna/update"><v-icon icon="mdi-pencil" />Type User</v-btn>
|
||||
<v-btn flat variant="tonal" size="large" color="error" @click="onDelete(data.prop)"><v-icon icon="mdi-delete" />Type User</v-btn>
|
||||
</template>
|
||||
</SettingCards>
|
||||
|
||||
<!-- dialog delete -->
|
||||
<UiComponents2DialogsActivator v-model="dialogDelete">
|
||||
<template v-slot:text
|
||||
>Are you sure you want to delete this item?</template
|
||||
>
|
||||
<template v-slot:actions>
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="flat"
|
||||
dark
|
||||
@click="openDeleteDialog(false)"
|
||||
>Cancel</v-btn
|
||||
>
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="flat"
|
||||
dark
|
||||
@click="deleteConfirm(getData, editedIndex)"
|
||||
>OK</v-btn
|
||||
>
|
||||
</template>
|
||||
</UiComponents2DialogsActivator>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,94 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
menus: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const onSelectSearch = (option, el$) => {
|
||||
const data = props.menus.find((i) => i.title == option)
|
||||
console.log("baru",data.path)
|
||||
el$.$parent.$parent.children$.path.update(data.path)
|
||||
// if(data.path === undefined){
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<!-- {{props.menus}} -->
|
||||
<ListElement
|
||||
name="pages"
|
||||
:default="props.items"
|
||||
>
|
||||
<template #default="{ index }">
|
||||
<ObjectElement
|
||||
:name="index"
|
||||
class = "px-3 py-3 border border-gray-200 rounded-xl"
|
||||
>
|
||||
<!-- <TextElement
|
||||
name="title"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
label="Module"
|
||||
/> -->
|
||||
<SelectElement
|
||||
@select="onSelectSearch"
|
||||
name="title"
|
||||
:items="props.menus"
|
||||
:search="true"
|
||||
:native="false"
|
||||
label="Module"
|
||||
input-type="search"
|
||||
autocomplete="of"
|
||||
value-prop="title"
|
||||
label-prop="title"
|
||||
:create="true"
|
||||
:add-option-on="[
|
||||
'enter',
|
||||
'tab',
|
||||
'space',
|
||||
]"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
/>
|
||||
<TextElement
|
||||
name="path"
|
||||
label="Path"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
/>
|
||||
<CheckboxgroupElement
|
||||
name="permissions"
|
||||
view="tabs"
|
||||
:items="[
|
||||
{
|
||||
value: 'create',
|
||||
label: 'create',
|
||||
},
|
||||
{
|
||||
value: 'view',
|
||||
label: 'view',
|
||||
},
|
||||
{
|
||||
value: 'update',
|
||||
label: 'update',
|
||||
},
|
||||
{
|
||||
value: 'delete',
|
||||
label: 'delete',
|
||||
},
|
||||
]"
|
||||
label="Permissions"
|
||||
/>
|
||||
</ObjectElement>
|
||||
</template>
|
||||
</ListElement>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
items:{
|
||||
type:Array
|
||||
},
|
||||
label:{
|
||||
string:String
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<SelectElement
|
||||
:items="props.items"
|
||||
:search="true"
|
||||
:native="false"
|
||||
:label="props.label"
|
||||
input-type="search"
|
||||
autocomplete="off"
|
||||
:columns="{
|
||||
container: 5,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
menus: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
const form = ref({});
|
||||
// onBeforeMount(() => {
|
||||
// console.log(props.items);
|
||||
// })
|
||||
</script>
|
||||
<template>
|
||||
<!-- {{ props.items }} -->
|
||||
<div class="vf-element-layout vf-col-12 border border-gray-200 rounded-xl">
|
||||
<v-table style="min-width: 100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-h6 ps-6">Module</th>
|
||||
<th class="text-h6">Permission</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- <div class="vf-element-layout vf-col-12"> -->
|
||||
<tr v-for="(item, index) in props.items" :key="index">
|
||||
<td>
|
||||
<SelectElement
|
||||
@select="onSelectSearch"
|
||||
:name="item.title"
|
||||
:model-value="form.title"
|
||||
:items="props.menus"
|
||||
:search="true"
|
||||
:native="false"
|
||||
label="Module"
|
||||
input-type="search"
|
||||
autocomplete="of"
|
||||
value-prop="title"
|
||||
label-prop="title"
|
||||
:create="true"
|
||||
:add-option-on="['enter', 'tab', 'space']"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<!-- <td>
|
||||
<CheckboxElement
|
||||
name="create"
|
||||
text="create"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
trueValue="1"
|
||||
falseValue="0"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<CheckboxElement
|
||||
name="update"
|
||||
text="update"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
trueValue="1"
|
||||
falseValue="0"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<CheckboxElement
|
||||
name="delete"
|
||||
text="delete"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
trueValue="1"
|
||||
falseValue="0"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<CheckboxElement
|
||||
name="view"
|
||||
text="view"
|
||||
:columns="{
|
||||
container: 6,
|
||||
}"
|
||||
trueValue="1"
|
||||
falseValue="0"
|
||||
/>
|
||||
</td> -->
|
||||
</tr>
|
||||
<!-- </div> -->
|
||||
</tbody>
|
||||
</v-table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import {BasicDatatables} from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Tables Grouping' });
|
||||
// const breadcrumbs = ref([
|
||||
// {
|
||||
// text: 'Dashboard',
|
||||
// disabled: false,
|
||||
// href: '#'
|
||||
// },
|
||||
// {
|
||||
// text: 'Data Tables Grouping',
|
||||
// disabled: true,
|
||||
// href: '#'
|
||||
// }
|
||||
// ]);
|
||||
|
||||
/*Header Data*/
|
||||
const sortBy : any = ref([
|
||||
{ key: 'name', order: 'asc' }
|
||||
])
|
||||
const groupBy : any = ref([
|
||||
{ key: 'status', order: 'asc' }
|
||||
])
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<!-- <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb> -->
|
||||
<!-- <v-row>
|
||||
<v-col cols="12"> -->
|
||||
<!-- <UiParentCard title="Grouping"> -->
|
||||
<div class="vf-element-layout vf-col-12 border border-gray-200 rounded-xl">
|
||||
<ListElement name="pages" :default="props.items" class="mx-4" >
|
||||
<template #default="{ index }">
|
||||
<ObjectElement :name="index" class="px-3">
|
||||
<div class="vf-element-layout vf-col-12">
|
||||
<v-data-table items-per-page="5" :items="BasicDatatables" item-value="name"
|
||||
:group-by="groupBy" :sort-by="sortBy"
|
||||
class="border rounded-md datatabels">
|
||||
<template v-slot:headers>
|
||||
<!-- <thead class="v-data-table-header"> -->
|
||||
<tr v-if="index === 0">
|
||||
<th>Module</th>
|
||||
<th>Permission</th>
|
||||
<th>post</th>
|
||||
</tr>
|
||||
<!-- </thead> -->
|
||||
</template>
|
||||
<template v-slot:item="{ item }">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td> {{ item.name }} </td>
|
||||
<td> {{ item.post }} </td></tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<!-- </UiParentCard> -->
|
||||
<!-- </v-col>
|
||||
</v-row> -->
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user