step 53 : copy dan paste v1, untuk komponen reusable
This commit is contained in:
sindhu
352
v1-test-cmp/js/master_data.js
Normal file
352
v1-test-cmp/js/master_data.js
Normal file
@@ -0,0 +1,352 @@
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('masterData', () => ({
|
||||
// 0. Init dijalankan sebelum inisialisasi
|
||||
init() {
|
||||
},
|
||||
// 1. Inisialisasi Start
|
||||
// multiple select
|
||||
dataAssay: [
|
||||
{
|
||||
idAssay: 1,
|
||||
namaAssay: 'Xn500'
|
||||
},
|
||||
{
|
||||
idAssay: 2,
|
||||
namaAssay: 'HGB'
|
||||
},
|
||||
{
|
||||
idAssay: 3,
|
||||
namaAssay: 'WBC'
|
||||
},
|
||||
{
|
||||
idAssay: 4,
|
||||
namaAssay: 'RBC'
|
||||
},
|
||||
{
|
||||
idAssay: 5,
|
||||
namaAssay: 'PLT'
|
||||
},
|
||||
],
|
||||
dataAlat: [
|
||||
{
|
||||
idAlat: 1,
|
||||
namaAlat: 'Hema 01',
|
||||
},
|
||||
{
|
||||
idAlat: 2,
|
||||
namaAlat: 'Axsym',
|
||||
},
|
||||
{
|
||||
idAlat: 3,
|
||||
namaAlat: 'Cobas C311',
|
||||
},
|
||||
],
|
||||
|
||||
// multiple select
|
||||
dataMaster: [
|
||||
{
|
||||
idMaster: 1,
|
||||
kode: 'A04',
|
||||
namaPemeriksaan: 'Darah Lengkap',
|
||||
harga: '50.000',
|
||||
pemeriksaanStr: 'Xn500, HCB, WBC, RBC, PLT',
|
||||
dataDetail: [
|
||||
{
|
||||
idDetail: 1,
|
||||
dataAlat: {
|
||||
idAlat: 1,
|
||||
namaAlat: 'Hema 01',
|
||||
},
|
||||
dataAssay: [
|
||||
{
|
||||
idAssay: 1,
|
||||
namaAssay: 'Xn500'
|
||||
},
|
||||
{
|
||||
idAssay: 2,
|
||||
namaAssay: 'HGB'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
idDetail: 2,
|
||||
dataAlat: {
|
||||
idAlat: 3,
|
||||
namaAlat: 'Cobas C311',
|
||||
},
|
||||
dataAssay: [
|
||||
{
|
||||
idAssay: 3,
|
||||
namaAssay: 'WBC'
|
||||
},
|
||||
{
|
||||
idAssay: 4,
|
||||
namaAssay: 'RBC'
|
||||
},
|
||||
{
|
||||
idAssay: 5,
|
||||
namaAssay: 'PLT'
|
||||
},
|
||||
],
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
showDialogAdd: false,
|
||||
kodeAdd: '',
|
||||
e_kode: '',
|
||||
namaAdd: '',
|
||||
e_nama: '',
|
||||
hargaAdd: '',
|
||||
e_harga: '',
|
||||
formAddArray: [],
|
||||
formEditArray: [],
|
||||
showDialogEdit: false,
|
||||
objForm: {
|
||||
nama: '',
|
||||
kode: '',
|
||||
harga: '',
|
||||
alat: {},
|
||||
assay: []
|
||||
},
|
||||
objFormEdit: {
|
||||
nama: '',
|
||||
kode: '',
|
||||
harga: '',
|
||||
alat: {},
|
||||
assay: []
|
||||
},
|
||||
// 1. Inisialisasi End
|
||||
// 2. Fungsi Start
|
||||
formDetail(action) {
|
||||
if (action === 'add') {
|
||||
const lastId = this.formAddArray.length;
|
||||
this.formAddArray.push({
|
||||
idForm: lastId + 1,
|
||||
openAlat: false,
|
||||
dataAlatForm: this.dataAlat,
|
||||
selectedAlat: {
|
||||
idAlat: -1,
|
||||
namaAlat: 'Alat'
|
||||
},
|
||||
selectedAssay: [],
|
||||
searchAssay: "",
|
||||
filterItemAssay: this.dataAssay,
|
||||
dataAssayForm: this.dataAssay,
|
||||
openAssayAdd: false,
|
||||
})
|
||||
} else {
|
||||
const lastId = this.formEditArray.length;
|
||||
this.formEditArray.push({
|
||||
idForm: lastId + 1,
|
||||
openAlat: false,
|
||||
dataAlatForm: this.dataAlat,
|
||||
selectedAlat: {
|
||||
idAlat: -1,
|
||||
namaAlat: 'Alat'
|
||||
},
|
||||
selectedAssay: [],
|
||||
searchAssay: "",
|
||||
filterItemAssay: this.dataAssay,
|
||||
dataAssayForm: this.dataAssay,
|
||||
openAssayAdd: false,
|
||||
})
|
||||
}
|
||||
},
|
||||
filterItemAssay(idx, formItem, action) {
|
||||
if (action === 'add') {
|
||||
let formId = formItem.idForm
|
||||
// console.log('formItem ',formItem)
|
||||
let targetForm = this.formAddArray.find(e => e.idForm === formId);
|
||||
|
||||
if (targetForm) {
|
||||
targetForm.openAssayAdd = true
|
||||
let searchTerm = targetForm.searchAssay ? targetForm.searchAssay.toLowerCase() : "";
|
||||
targetForm.filterItemAssay = targetForm.dataAssayForm.filter(item =>
|
||||
item.namaAssay.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
|
||||
// targetForm.dataAssayForm = targetForm.filterItemAssay
|
||||
console.log('Filtered Assay:', targetForm.filterItemAssay);
|
||||
} else {
|
||||
console.warn('Tidak match ID Form nya');
|
||||
}
|
||||
} else {
|
||||
let formId = formItem.idForm
|
||||
// console.log('formItem ',formItem)
|
||||
let targetForm = this.formEditArray.find(e => e.idForm === formId);
|
||||
|
||||
if (targetForm) {
|
||||
targetForm.openAssayAdd = true
|
||||
let searchTerm = targetForm.searchAssay ? targetForm.searchAssay.toLowerCase() : "";
|
||||
targetForm.filterItemAssay = targetForm.dataAssayForm.filter(item =>
|
||||
item.namaAssay.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
|
||||
// targetForm.dataAssayForm = targetForm.filterItemAssay
|
||||
console.log('Filtered Assay:', targetForm.filterItemAssay);
|
||||
} else {
|
||||
console.warn('Tidak match ID Form nya');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addItemAssayToForm(item, idForm, action) {
|
||||
if (action === 'add') {
|
||||
let form = this.formAddArray.find(f => f.idForm === idForm);
|
||||
|
||||
if (form) {
|
||||
let exists = form.selectedAssay.some(a => a.idAssay === item.idAssay);
|
||||
if (!exists) {
|
||||
form.selectedAssay.push(item);
|
||||
} else {
|
||||
console.warn("Item sudah dipilih:", item);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let form = this.formEditArray.find(f => f.idForm === idForm);
|
||||
|
||||
if (form) {
|
||||
let exists = form.selectedAssay.some(a => a.idAssay === item.idAssay);
|
||||
if (!exists) {
|
||||
form.selectedAssay.push(item);
|
||||
} else {
|
||||
console.warn("Item sudah dipilih:", item);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
removeItemAssayToForm(idForm, index, action) {
|
||||
if (action === 'add') {
|
||||
let form = this.formAddArray.find(f => f.idForm === idForm);
|
||||
if (!form) return;
|
||||
|
||||
form.selectedAssay.splice(index, 1);
|
||||
} else {
|
||||
let form = this.formEditArray.find(f => f.idForm === idForm);
|
||||
if (!form) return;
|
||||
|
||||
form.selectedAssay.splice(index, 1);
|
||||
}
|
||||
},
|
||||
closeDialog() {
|
||||
this.formAddArray = []
|
||||
this.kodeAdd = ''
|
||||
this.namaAdd = ''
|
||||
this.hargaAdd = ''
|
||||
this.objForm = {
|
||||
nama: '',
|
||||
kode: '',
|
||||
harga: '',
|
||||
dataAssay: [],
|
||||
}
|
||||
this.showDialogAdd = false
|
||||
},
|
||||
saveA() {
|
||||
this.objForm.alat = this.formAddArray.map(form => form.selectedAlat);
|
||||
this.objForm.assay = this.formAddArray.map(form => form.selectedAssay);
|
||||
|
||||
console.log('Data yang disimpan:', this.objForm);
|
||||
},
|
||||
saveE() {
|
||||
this.objFormEdit.alat = this.formEditArray.map(form => form.selectedAlat);
|
||||
this.objFormEdit.assay = this.formEditArray.map(form => form.selectedAssay);
|
||||
|
||||
console.log('Data Edit yang disimpan:', this.objFormEdit);
|
||||
},
|
||||
deleteData(){
|
||||
console.log('hapus record ke database')
|
||||
},
|
||||
onChangeInstrument(item, idForm, action) {
|
||||
if (action === 'add') {
|
||||
let form = this.formAddArray.find(f => f.idForm === idForm);
|
||||
if (!form) return;
|
||||
|
||||
form.selectedAlat = {
|
||||
idAlat: item.idAlat,
|
||||
namaAlat: item.namaAlat
|
||||
}
|
||||
|
||||
form.openAlat = false
|
||||
} else {
|
||||
let form = this.formEditArray.find(f => f.idForm === idForm);
|
||||
if (!form) return;
|
||||
|
||||
form.selectedAlat = {
|
||||
idAlat: item.idAlat,
|
||||
namaAlat: item.namaAlat
|
||||
}
|
||||
|
||||
form.openAlat = false
|
||||
}
|
||||
|
||||
},
|
||||
onChangeNamaAdd() {
|
||||
this.objForm.nama = this.namaAdd;
|
||||
},
|
||||
onChangeNamaEdit() {
|
||||
this.objFormEdit.nama = this.e_nama;
|
||||
},
|
||||
onChangeKodeAdd() {
|
||||
this.objForm.kode = this.kodeAdd;
|
||||
},
|
||||
onChangeKodeEdit() {
|
||||
this.objFormEdit.kode = this.e_kode;
|
||||
},
|
||||
onChangeHargaAdd() {
|
||||
this.objForm.harga = this.hargaAdd;
|
||||
},
|
||||
onChangeHargaEdit() {
|
||||
this.objFormEdit.harga = this.e_harga;
|
||||
},
|
||||
openModalEdit(item) {
|
||||
console.log('edit item', item)
|
||||
this.e_harga = item.harga
|
||||
this.e_kode = item.kode
|
||||
this.e_nama = item.namaPemeriksaan
|
||||
|
||||
this.formEditArray = [];
|
||||
item.dataDetail.forEach((detail, index) => {
|
||||
this.formEditArray.push({
|
||||
idForm: detail.idDetail,
|
||||
openAlat: false,
|
||||
dataAlatForm: this.dataAlat,
|
||||
selectedAlat: {
|
||||
idAlat: detail.dataAlat.idAlat,
|
||||
namaAlat: detail.dataAlat.namaAlat,
|
||||
},
|
||||
selectedAssay: detail.dataAssay,
|
||||
searchAssay: "",
|
||||
filterItemAssay: [...this.dataAssay],
|
||||
dataAssayForm: [...this.dataAssay],
|
||||
openAssayAdd: false,
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
console.log('formEditArray', this.formEditArray);
|
||||
this.showDialogEdit = !this.showDialogEdit;
|
||||
},
|
||||
closeDialogEdit() {
|
||||
this.formEditArray = []
|
||||
this.e_harga = ''
|
||||
this.e_kode = ''
|
||||
this.e_nama = ''
|
||||
this.objFormEdit = {
|
||||
nama: '',
|
||||
kode: '',
|
||||
harga: '',
|
||||
dataAssay: [],
|
||||
}
|
||||
this.showDialogEdit = false
|
||||
},
|
||||
editMobilePage(item){
|
||||
var json = JSON.stringify(item);
|
||||
localStorage.setItem('itemEditMobile', json);
|
||||
window.location.href = "master_data_mobile_edit.html"
|
||||
},
|
||||
// 2. Fungsi End
|
||||
}))
|
||||
})
|
||||
Reference in New Issue
Block a user