Merge branch 'feat/master-konfigurasi' into wip2
This commit is contained in:
Mulia Nasution
commit
b5f493a562
@ -18,6 +18,7 @@ import RolesConfig from './views/master-config/roles-config';
|
||||
import UsersConfig from './views/master-config/users-config';
|
||||
import PermissionsConfig from './views/master-config/permissions-config';
|
||||
import User from './views/user-page';
|
||||
import DetailPermissionsConfig from './views/master-config/permissions-config/detail-permissions-config';
|
||||
|
||||
/* Master Template */
|
||||
import RksTemplateKontrak from './views/rks/rks-template-kontrak';
|
||||
@ -296,13 +297,22 @@ const router = new createRouter({
|
||||
component: UsersConfig
|
||||
},
|
||||
{
|
||||
path: "/master-config/permissions-config",
|
||||
path: "/master-config/permission-config",
|
||||
name: "permissions-config",
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
layout: defaultLayout
|
||||
},
|
||||
component: PermissionsConfig
|
||||
component: PermissionsConfig,
|
||||
},
|
||||
{
|
||||
path: "/master-config/permission-config/:id",
|
||||
name: "detail-permissions-config",
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
layout: defaultLayout
|
||||
},
|
||||
component: DetailPermissionsConfig,
|
||||
},
|
||||
{
|
||||
path: "/rks-daftar",
|
||||
|
||||
@ -12,9 +12,9 @@
|
||||
:column-auto-width="true">
|
||||
<DxRemoteOperations :group-paging="true" />
|
||||
<DxEditing
|
||||
:allow-adding="true"
|
||||
:allow-updating="true"
|
||||
:allow-deleting="true"
|
||||
:allow-adding="false"
|
||||
:allow-updating="false"
|
||||
:allow-deleting="false"
|
||||
:use-icons="true"
|
||||
mode="popup">
|
||||
<DxTexts
|
||||
@ -28,7 +28,7 @@
|
||||
<DxForm label-location="top" :col-count="1">
|
||||
<DxItem dataField="role" />
|
||||
<DxItem dataField="keterangan" />
|
||||
<DxItem dataField="is_active" editor-type="dxCheckBox" />
|
||||
<DxItem dataField="isActive" editor-type="dxCheckBox" />
|
||||
</DxForm>
|
||||
<DxPopup
|
||||
:hide-on-outside-click="true"
|
||||
@ -60,10 +60,13 @@
|
||||
<DxColumn data-field="id" caption="No" :width="45"></DxColumn>
|
||||
<DxColumn data-field="role" caption="Role"></DxColumn>
|
||||
<DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
|
||||
<DxColumn data-field="is_active" caption="Status"></DxColumn>
|
||||
<DxColumn data-field="isActive" caption="Status"></DxColumn>
|
||||
<DxColumn type="buttons" caption="Aksi">
|
||||
<DxButton name="edit"/>
|
||||
<DxButton name="delete"/>
|
||||
<DxButton
|
||||
text="Detail"
|
||||
icon="rename"
|
||||
:on-click="handleDetail"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Manajemen Permission..."/>
|
||||
<!--<DxExport
|
||||
@ -90,11 +93,13 @@ import DxDataGrid, {
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxToolbar,
|
||||
DxTexts
|
||||
DxTexts,
|
||||
DxButton,
|
||||
} from "devextreme-vue/data-grid";
|
||||
import CustomStore from "devextreme/data/custom_store";
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const URL = process.env.VUE_APP_ROOT_API+'/permission';
|
||||
const URL = process.env.VUE_APP_ROOT_API+'/roles';
|
||||
|
||||
const customDataSource = new CustomStore({
|
||||
key: 'id',
|
||||
@ -102,6 +107,9 @@ const customDataSource = new CustomStore({
|
||||
load: () => {
|
||||
return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
|
||||
.then((response) => response.json())
|
||||
.then(response => {
|
||||
return response.data;
|
||||
})
|
||||
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
||||
},
|
||||
|
||||
@ -145,15 +153,22 @@ export default {
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxToolbar,
|
||||
DxTexts
|
||||
DxTexts,
|
||||
DxButton
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
//jsonUrl: URL,
|
||||
customDataSource,
|
||||
router: useRouter()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDetail() {
|
||||
this.router.push({ name: 'detail-permissions-config', params: { id: '123'}})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="content-block main-title">Manajemen Permission</h3>
|
||||
<p class="content-block">Manajemen User</p>
|
||||
<div class="content-block">
|
||||
<div class="dx-card responsive-paddings">
|
||||
<div id="app-container">
|
||||
<div class="header-detail">
|
||||
<h4>Informasi Nama Role</h4>
|
||||
<span>Nama Role A</span>
|
||||
</div>
|
||||
<DxDataGrid
|
||||
ref="detail-data-grid"
|
||||
:data-source="dataSource"
|
||||
key-expr="id"
|
||||
:allow-column-reordering="true"
|
||||
:column-auto-width="true"
|
||||
>
|
||||
<DxToolbar>
|
||||
<DxItem name="addRowButton" show-text="always" css-class="">
|
||||
<DxTexts add-row="Tambah"></DxTexts>
|
||||
</DxItem>
|
||||
</DxToolbar>
|
||||
<DxPaging :page-size="5" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 50]"
|
||||
display-mode="compact"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
info-text="Hal {0} dari {1} ({2} data)"
|
||||
/>
|
||||
<DxColumn data-field="menu" caption="Menu"> </DxColumn>
|
||||
<DxColumn data-field="sub-menu" caption="Sub Menu"> </DxColumn>
|
||||
<DxColumn type="buttons" caption="Access">
|
||||
<DxButton text="Detail" :on-click="handleDetail">
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span> </label
|
||||
></DxButton>
|
||||
</DxColumn>
|
||||
<DxColumn type="buttons" caption="Create">
|
||||
<DxButton text="Detail" :on-click="handleDetail">
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span> </label
|
||||
></DxButton>
|
||||
</DxColumn>
|
||||
<DxColumn type="buttons" caption="Read">
|
||||
<DxButton text="Detail" :on-click="handleDetail">
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span> </label
|
||||
></DxButton>
|
||||
</DxColumn>
|
||||
<DxColumn type="buttons" caption="Update">
|
||||
<DxButton text="Detail" :on-click="handleDetail">
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span> </label
|
||||
></DxButton>
|
||||
</DxColumn>
|
||||
<DxColumn type="buttons" caption="Delete">
|
||||
<DxButton text="Detail" :on-click="handleDetail">
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span> </label
|
||||
></DxButton>
|
||||
</DxColumn>
|
||||
<DxSearchPanel
|
||||
:visible="true"
|
||||
:highlight-case-sensitive="true"
|
||||
:width="300"
|
||||
placeholder="Cari Manajemen User..."
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomStore from "devextreme/data/custom_store";
|
||||
import notify from "devextreme/ui/notify";
|
||||
import {
|
||||
DxDataGrid,
|
||||
DxPaging,
|
||||
DxPager,
|
||||
DxSearchPanel,
|
||||
DxColumn,
|
||||
DxButton,
|
||||
} from "devextreme-vue/data-grid";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DxDataGrid,
|
||||
DxPaging,
|
||||
DxPager,
|
||||
DxSearchPanel,
|
||||
DxColumn,
|
||||
DxButton,
|
||||
},
|
||||
setup() {
|
||||
const URL = process.env.VUE_APP_ROOT_API + "/permission";
|
||||
|
||||
const dataSource = new CustomStore({
|
||||
key: "id",
|
||||
|
||||
load: async () => {
|
||||
await fetch(URL)
|
||||
.then((response) => response.json())
|
||||
.then((response) => response.data)
|
||||
.catch((err) => {
|
||||
if (err.code) {
|
||||
notify(
|
||||
{
|
||||
message: err.title,
|
||||
position: {
|
||||
my: "center top",
|
||||
at: "center top",
|
||||
},
|
||||
},
|
||||
"error",
|
||||
3000
|
||||
);
|
||||
} else {
|
||||
notify(
|
||||
{
|
||||
message: "Data Berhasil Dibuat",
|
||||
position: {
|
||||
my: "center top",
|
||||
at: "center top",
|
||||
},
|
||||
},
|
||||
"success",
|
||||
3000
|
||||
);
|
||||
}
|
||||
});
|
||||
return [
|
||||
{
|
||||
id: 1,
|
||||
menu: "Manajemen A",
|
||||
"sub-menu": "Sub Manajemen A",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
menu: "Manajemen B",
|
||||
"sub-menu": "Sub Manajemen B",
|
||||
},
|
||||
];
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
dataSource,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.float-rigth {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.header-detail h4::before {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background-color: #0996c2;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-detail span {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #c4c4c4;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #21cd3c;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #21cd3c;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(16px);
|
||||
-ms-transform: translateX(16px);
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
@ -92,32 +92,64 @@ import DxDataGrid, {
|
||||
DxRequiredRule
|
||||
} from "devextreme-vue/data-grid";
|
||||
import CustomStore from "devextreme/data/custom_store";
|
||||
import { ref } from "vue"
|
||||
import notify from 'devextreme/ui/notify';
|
||||
|
||||
const URL = process.env.VUE_APP_ROOT_API+'/roles';
|
||||
const data = ref([])
|
||||
|
||||
const dataSource = new CustomStore({
|
||||
key: 'id',
|
||||
|
||||
load: () => {
|
||||
return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
|
||||
load: async () => {
|
||||
return await fetch(URL+process.env.VUE_APP_PAGE_SIZE)
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
data.value = response.data;
|
||||
return response.data;
|
||||
})
|
||||
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
||||
},
|
||||
|
||||
insert: (values) => {
|
||||
return fetch(URL, {
|
||||
fetch(URL, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(values),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then((resp) => {
|
||||
return resp.json()
|
||||
}).then(resp => {
|
||||
if (resp.code) {
|
||||
notify({
|
||||
message: resp.title,
|
||||
position: {
|
||||
my: 'center top',
|
||||
at: 'center top',
|
||||
},
|
||||
}, 'error', 3000);
|
||||
} else {
|
||||
notify({
|
||||
message: 'Data Berhasil Dibuat',
|
||||
position: {
|
||||
my: 'center top',
|
||||
at: 'center top',
|
||||
},
|
||||
}, 'success', 3000);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
update: (key, values) => {
|
||||
const findData = data.value.find(item => item.id === key)
|
||||
const payload = {
|
||||
...findData,
|
||||
...values
|
||||
}
|
||||
return fetch(URL + "/" + encodeURIComponent(key), {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(values),
|
||||
body: JSON.stringify(payload),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
|
||||
@ -129,6 +129,9 @@ import {
|
||||
DxEmailRule
|
||||
} from "devextreme-vue/data-grid";
|
||||
import CustomStore from "devextreme/data/custom_store";
|
||||
import { ref } from "vue"
|
||||
import notify from 'devextreme/ui/notify';
|
||||
import auth from '../../auth.js'
|
||||
|
||||
const URL = process.env.VUE_APP_ROOT_API+'/users';
|
||||
const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
|
||||
@ -136,6 +139,8 @@ const URL_bidang = process.env.VUE_APP_ROOT_API+'/bidang';
|
||||
const URL_jabatan = process.env.VUE_APP_ROOT_API+'/jabatan';
|
||||
const URL_role = process.env.VUE_APP_ROOT_API+'/roles';
|
||||
|
||||
const data = ref([])
|
||||
|
||||
const instansiOptions = new CustomStore({
|
||||
key: 'id',
|
||||
|
||||
@ -211,26 +216,58 @@ const dataSource = new CustomStore({
|
||||
|
||||
load: () => {
|
||||
return fetch(URL)
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
return response.json()
|
||||
})
|
||||
.then((response) => {
|
||||
data.value = response.data
|
||||
return response.data
|
||||
})
|
||||
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
||||
},
|
||||
|
||||
insert: (values) => {
|
||||
values.password = process.env.VUE_APP_DEFAULT_PASS;
|
||||
//console.log(values);
|
||||
return fetch(URL, {
|
||||
insert: async (values) => {
|
||||
await fetch(URL, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(values),
|
||||
body: JSON.stringify({
|
||||
...values,
|
||||
password : auth.encrypt(process.env.VUE_APP_DEFAULT_PASS)
|
||||
}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
}).then(res => {
|
||||
return res.json()
|
||||
}).then(res => {
|
||||
if (res.code) {
|
||||
notify({
|
||||
message: res.title,
|
||||
position: {
|
||||
my: 'center top',
|
||||
at: 'center top',
|
||||
},
|
||||
}, 'error', 3000);
|
||||
} else {
|
||||
notify({
|
||||
message: 'Data Berhasil Dibuat',
|
||||
position: {
|
||||
my: 'center top',
|
||||
at: 'center top',
|
||||
},
|
||||
}, 'success', 3000);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
update: (key, values) => {
|
||||
const findData = data.value.find(item => item.id === key)
|
||||
const payload = {
|
||||
...findData,
|
||||
...values
|
||||
}
|
||||
return fetch(URL + "/" + encodeURIComponent(key), {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(values),
|
||||
body: JSON.stringify(payload),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user