AndriDiki/smartproc-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update core smartproc

Browse Source
This commit is contained in:
Titan Hadiyan
2023-05-29 10:48:07 +07:00
parent fc7a97585a
commit e577788c80
36 changed files with 1303 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/views/master-data/jabatan-page.vue
View File

@@ -6,28 +6,31 @@
<div class="dx-card responsive-paddings">
<div id="app-container">
<DxDataGrid ref="currDataGrid"
:data-source="customDataSource"
key-expr="ID"
:data-source="dataSource"
key-expr="id"
:allow-column-reordering="true"
:column-auto-width="true"
@exporting="onExporting">
:column-auto-width="true">
<DxRemoteOperations :group-paging="true" />
<DxEditing
:allow-adding="true"
:allow-updating="true"
:allow-deleting="true"
:use-icons="true"
form="popup"
mode="popup">
<DxTexts
add-row="Tambah"
edit-row="Ubah"
delete-row="Hapus"
confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
save-row-changes="Simpan"
cancel-row-changes="Batal"
></DxTexts>
add-row="Tambah"
edit-row="Ubah"
delete-row="Hapus"
confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
save-row-changes="Simpan"
cancel-row-changes="Batal"></DxTexts>
<DxForm label-location="top" :col-count="1">
<DxItem dataField="instansiId">
<DxRequiredRule message="Instansi harus dipilih" />
</DxItem>
<DxItem dataField="bidangId">
<DxRequiredRule message="Bidang harus dipilih" />
</DxItem>
<DxItem dataField="jabatan">
<DxRequiredRule message="Nama Jabatan harus diisi" />
</DxItem>
@@ -37,7 +40,7 @@
:hide-on-outside-click="true"
:show-title="true"
:width="400"
:height="400"
:height="450"
title="Form Jabatan"
/>
</DxEditing>
@@ -61,6 +64,12 @@
info-text="Hal {0} dari {1} ({2} data)" />
<DxFilterRow :visible="false" />
<DxColumn data-field="id" caption="No" :width="45"></DxColumn>
<DxColumn data-field="instansiId" caption="Instansi">
<DxLookup display-expr="instansi" value-expr="id" :data-source="instansis" :search-enabled="true" />
</DxColumn>
<DxColumn data-field="bidangId" caption="Bidang">
<DxLookup display-expr="bidang" value-expr="id" :data-source="bidangs" :search-enabled="true" />
</DxColumn>
<DxColumn data-field="jabatan" caption="Nama Jabatan"></DxColumn>
<DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
<DxColumn type="buttons" caption="Aksi">
@@ -68,11 +77,6 @@
<DxButton name="delete"/>
</DxColumn>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Jabatan..."/>
<!--<DxExport
:enabled="true"
:formats="['xlsx', 'pdf']"
:allow-export-selected-data="true"
/>-->
</DxDataGrid>
</div>
</div>
@@ -93,18 +97,78 @@ import DxDataGrid, {
DxSearchPanel,
DxToolbar,
DxTexts,
DxRequiredRule
DxRequiredRule,
DxLookup
} from "devextreme-vue/data-grid";
import CustomStore from "devextreme/data/custom_store";
import { Workbook } from 'exceljs';
import { saveAs } from 'file-saver-es';
import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
import { jsPDF } from 'jspdf';
import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
const URL = process.env.VUE_APP_ROOT_API+'/jabatan';
const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
const URL_bidang = process.env.VUE_APP_ROOT_API+'/bidang';
const customDataSource = new CustomStore({
const instansiOptions = new CustomStore({
key: 'id',
load:() => {
return fetch(URL_instansi+'?size=1000')
.then((response) => response.json())
.then(response => {
console.log(response.data);
return {
data: response.data
};
})
// .then(data => {
// console.log(JSON.parse(data));
// })
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
},
byKey: (key) => {
return fetch(URL_instansi+'/' + key)
.then((response) => response.json())
.then(response => {
console.log(response.instansi);
return {
data: response.instansi
};
})
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
}
});
const bidangOptions = new CustomStore({
key: 'id',
load:() => {
return fetch(URL_bidang+'?size=1000')
.then((response) => response.json())
.then(response => {
console.log(response.data);
return {
data: response.data
};
})
// .then(data => {
// console.log(JSON.parse(data));
// })
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
},
byKey: (key) => {
return fetch(URL_bidang+'/' + key)
.then((response) => response.json())
.then(response => {
console.log(response.bidang);
return {
data: response.bidang
};
})
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
}
});
const dataSource = new CustomStore({
key: 'id',
load: () => {
@@ -154,62 +218,16 @@ export default {
DxSearchPanel,
DxToolbar,
DxTexts,
DxRequiredRule
},
methods: {
onExporting(e) {
e.cancel = true;
switch (e.format) {
case "pdf": {
const doc = new jsPDF();
exportDataGridToPDF({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save('Jenispengadaan.pdf');
});
}
break;
case "xlsx": {
const workbook = new Workbook();
const worksheet = workbook.addWorksheet('Jabatan');
exportDataGridToExcel({
component: e.component,
worksheet: worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
});
});
}
break;
}
},
onCellPrepared(e) {
var isEditing = e.row.isEditing, $links = e.cellElement.find(".dx-link");
$links.text("");
if(isEditing){
$links.filter(".dx-link-save").addClass("dx-icon-save").addClass("yellowClass");
$links.filter(".dx-link-cancel").addClass("dx-icon-revert").addClass("yellowClass");
} else {
$links.filter(".dx-link-edit").addClass("dx-icon-edit").addClass("greenClass");
$links.filter(".dx-link-delete").addClass("dx-icon-trash").addClass("redClass");
}
},
DxRequiredRule,
DxLookup
},
data() {
return {
//jsonUrl: URL,
customDataSource,
dataSource,
instansis: instansiOptions,
bidangs: bidangOptions,
}
},
}