step 38 : form add data datepicker dan multiple select
This commit is contained in:
sindhu
503
v1/js/order.js
Normal file
503
v1/js/order.js
Normal file
@@ -0,0 +1,503 @@
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('order', () => ({
|
||||
// 0. Init dijalankan sebelum inisialisasi
|
||||
init() {
|
||||
let today = new Date();
|
||||
this.selectedDaySD = today.getDate();
|
||||
this.month = today.getMonth();
|
||||
this.year = today.getFullYear();
|
||||
// this.datepickerValueSD = this.formatDate(today);
|
||||
this.datepickerValueSD = 'Start Date'
|
||||
this.getNoOfDays();
|
||||
this.selectedDaySD = today.getDate();
|
||||
|
||||
// End Date Functions
|
||||
this.selectedDayED = today.getDate();
|
||||
this.monthED = today.getMonth();
|
||||
this.yearED = today.getFullYear();
|
||||
this.datepickerValueED = 'End Date';
|
||||
this.getNoOfDaysED();
|
||||
|
||||
// Order Date
|
||||
this.selectedDayOD = today.getDate();
|
||||
this.monthOD = today.getMonth();
|
||||
this.yearOD = today.getFullYear();
|
||||
this.datepickerValueOD = this.formatDate(today);
|
||||
this.getNoOfDaysOD();
|
||||
|
||||
// DOB
|
||||
this.selectedDayDOB = today.getDate();
|
||||
this.monthDOB = today.getMonth();
|
||||
this.yearDOB = today.getFullYear();
|
||||
this.datepickerValueDOB = this.formatDate(today);
|
||||
this.getNoOfDaysDOB();
|
||||
|
||||
// multiple pemeriksaan add
|
||||
this.filteredPemeriksaan = [...this.dataPemeriksaan];
|
||||
|
||||
},
|
||||
// 1. Inisialisasi Start
|
||||
// datepicker
|
||||
selectedDaySD: null,
|
||||
showDatepickerSD: false,
|
||||
datepickerValueSD: '',
|
||||
month: 0,
|
||||
year: 0,
|
||||
no_of_days: [],
|
||||
blankdays: [],
|
||||
|
||||
selectedDayED: null,
|
||||
showDatepickerED: false,
|
||||
datepickerValueED: '',
|
||||
monthED: 0,
|
||||
yearED: 0,
|
||||
no_of_daysED: [],
|
||||
blankdaysED: [],
|
||||
|
||||
// Order Date Variables
|
||||
showDatepickerOD: false,
|
||||
selectedDayOD: null,
|
||||
datepickerValueOD: '',
|
||||
monthOD: 0,
|
||||
yearOD: 0,
|
||||
no_of_daysOD: [],
|
||||
blankdaysOD: [],
|
||||
|
||||
// DOB Variabless
|
||||
showDatepickerDOB: false,
|
||||
selectedDayDOB: null,
|
||||
datepickerValueDOB: '',
|
||||
monthDOB: 0,
|
||||
yearDOB: 0,
|
||||
no_of_daysDOB: [],
|
||||
blankdaysDOB: [],
|
||||
|
||||
MONTH_NAMES: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
DAYS: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
|
||||
formatDate(date) {
|
||||
let day = date.getDate().toString().padStart(2, '0');
|
||||
let month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
let year = date.getFullYear();
|
||||
return `${day}/${month}/${year}`;
|
||||
},
|
||||
|
||||
prevMonth() {
|
||||
if (this.month === 0) {
|
||||
this.year--;
|
||||
this.month = 11;
|
||||
} else {
|
||||
this.month--;
|
||||
}
|
||||
this.getNoOfDays();
|
||||
},
|
||||
|
||||
nextMonth() {
|
||||
if (this.month === 11) {
|
||||
this.year++;
|
||||
this.month = 0;
|
||||
} else {
|
||||
this.month++;
|
||||
}
|
||||
this.getNoOfDays();
|
||||
},
|
||||
|
||||
getDateValue(date) {
|
||||
let selectedDate = new Date(this.year, this.month, date);
|
||||
this.selectedDaySD = date; // Simpan tanggal yang dipilih
|
||||
this.datepickerValueSD = this.formatDate(selectedDate);
|
||||
this.showDatepickerSD = false;
|
||||
},
|
||||
|
||||
isToday(date) {
|
||||
let today = new Date();
|
||||
let d = new Date(this.year, this.month, date);
|
||||
return today.toDateString() === d.toDateString();
|
||||
},
|
||||
|
||||
isSelected(date) {
|
||||
return this.selectedDaySD === date;
|
||||
},
|
||||
|
||||
getNoOfDays() {
|
||||
let daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
|
||||
let dayOfWeek = new Date(this.year, this.month, 1).getDay();
|
||||
this.blankdays = Array.from({ length: dayOfWeek }, (_, i) => i);
|
||||
this.no_of_days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
|
||||
},
|
||||
|
||||
setDate(date) {
|
||||
let selectedDate = new Date(this.year, this.month, date);
|
||||
this.selectedDaySD = date;
|
||||
this.datepickerValueSD = this.formatDate(selectedDate);
|
||||
this.showDatepickerSD = false;
|
||||
},
|
||||
|
||||
// End Date Functions
|
||||
prevMonthED() {
|
||||
if (this.monthED === 0) {
|
||||
this.yearED--;
|
||||
this.monthED = 11;
|
||||
} else {
|
||||
this.monthED--;
|
||||
}
|
||||
this.getNoOfDaysED();
|
||||
},
|
||||
|
||||
nextMonthED() {
|
||||
if (this.monthED === 11) {
|
||||
this.yearED++;
|
||||
this.monthED = 0;
|
||||
} else {
|
||||
this.monthED++;
|
||||
}
|
||||
this.getNoOfDaysED();
|
||||
},
|
||||
|
||||
setDateED(date) {
|
||||
let selectedDate = new Date(this.yearED, this.monthED, date);
|
||||
this.selectedDayED = date;
|
||||
this.datepickerValueED = this.formatDate(selectedDate);
|
||||
this.showDatepickerED = false;
|
||||
},
|
||||
|
||||
isSelectedED(date) {
|
||||
return this.selectedDayED === date;
|
||||
},
|
||||
|
||||
getNoOfDaysED() {
|
||||
let daysInMonth = new Date(this.yearED, this.monthED + 1, 0).getDate();
|
||||
let dayOfWeek = new Date(this.yearED, this.monthED, 1).getDay();
|
||||
this.blankdaysED = Array.from({ length: dayOfWeek }, (_, i) => i);
|
||||
this.no_of_daysED = Array.from({ length: daysInMonth }, (_, i) => i + 1);
|
||||
},
|
||||
|
||||
// Order Date Functions
|
||||
prevMonthOD() {
|
||||
if (this.monthOD === 0) {
|
||||
this.yearOD--;
|
||||
this.monthOD = 11;
|
||||
} else {
|
||||
this.monthOD--;
|
||||
}
|
||||
this.getNoOfDaysOD();
|
||||
},
|
||||
|
||||
nextMonthOD() {
|
||||
if (this.monthOD === 11) {
|
||||
this.yearOD++;
|
||||
this.monthOD = 0;
|
||||
} else {
|
||||
this.monthOD++;
|
||||
}
|
||||
this.getNoOfDaysOD();
|
||||
},
|
||||
|
||||
setDateOD(date) {
|
||||
let selectedDate = new Date(this.yearOD, this.monthOD, date);
|
||||
this.selectedDayOD = date;
|
||||
this.datepickerValueOD = this.formatDate(selectedDate);
|
||||
this.showDatepickerOD = false;
|
||||
},
|
||||
|
||||
isSelectedOD(date) {
|
||||
return this.selectedDayOD === date;
|
||||
},
|
||||
|
||||
getNoOfDaysOD() {
|
||||
let daysInMonth = new Date(this.yearOD, this.monthOD + 1, 0).getDate();
|
||||
let dayOfWeek = new Date(this.yearOD, this.monthOD, 1).getDay();
|
||||
this.blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
|
||||
this.no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
|
||||
},
|
||||
|
||||
// Dob Functions
|
||||
prevMonthDOB() {
|
||||
if (this.monthDOB === 0) {
|
||||
this.yearDOB--;
|
||||
this.monthDOB = 11;
|
||||
} else {
|
||||
this.monthDOB--;
|
||||
}
|
||||
this.getNoOfDaysDOB();
|
||||
},
|
||||
|
||||
nextMonthDOB() {
|
||||
if (this.monthDOB === 11) {
|
||||
this.yearDOB++;
|
||||
this.monthDOB = 0;
|
||||
} else {
|
||||
this.monthDOB++;
|
||||
}
|
||||
this.getNoOfDaysDOB();
|
||||
},
|
||||
|
||||
setDateDOB(date) {
|
||||
let selectedDate = new Date(this.yearDOB, this.monthDOB, date);
|
||||
this.selectedDayDOB = date;
|
||||
this.datepickerValueDOB = this.formatDate(selectedDate);
|
||||
this.showDatepickerDOB = false;
|
||||
},
|
||||
|
||||
isSelectedDOB(date) {
|
||||
return this.selectedDayDOB === date;
|
||||
},
|
||||
|
||||
getNoOfDaysDOB() {
|
||||
let daysInMonth = new Date(this.yearDOB, this.monthDOB + 1, 0).getDate();
|
||||
let dayOfWeek = new Date(this.yearDOB, this.monthDOB, 1).getDay();
|
||||
this.blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
|
||||
this.no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
|
||||
},
|
||||
|
||||
// datepicker
|
||||
|
||||
// multiple select
|
||||
openPemeriksaanAdd: false,
|
||||
searchPemeriksaan: "",
|
||||
selectedPemeriksaan: [],
|
||||
dataPemeriksaan: [
|
||||
{
|
||||
idPemeriksaan: 1,
|
||||
namaPemeriksaan: 'SGOT'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 2,
|
||||
namaPemeriksaan: 'SGPT'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 3,
|
||||
namaPemeriksaan: 'GLOB'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 4,
|
||||
namaPemeriksaan: 'TBIL'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 5,
|
||||
namaPemeriksaan: 'Darah Lengkap'
|
||||
},
|
||||
],
|
||||
filteredItemPemeriksaan: [],
|
||||
filterItemPemeriksaan() {
|
||||
this.filteredPemeriksaan = this.dataPemeriksaan.filter(item =>
|
||||
item.namaPemeriksaan.toLowerCase().includes(this.searchPemeriksaan.toLowerCase())
|
||||
);
|
||||
},
|
||||
|
||||
addItemPemeriksaan(item) {
|
||||
if (!this.selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
|
||||
this.selectedPemeriksaan.push(item);
|
||||
this.objForm.pemeriksaan.push(item);
|
||||
}
|
||||
this.searchPemeriksaan = "";
|
||||
this.filterItemPemeriksaan();
|
||||
},
|
||||
|
||||
removeItemPemeriksaan(index) {
|
||||
this.selectedPemeriksaan.splice(index, 1);
|
||||
},
|
||||
|
||||
// multiple select
|
||||
showDialogAdd: false,
|
||||
showDialogEdit: false,
|
||||
loadingVerifikasi: false,
|
||||
isVerifikasiDone: false,
|
||||
MRN_SID: '',
|
||||
dataOrder: [
|
||||
{
|
||||
idOrder: 1,
|
||||
date: '02/03/2025',
|
||||
mrn: 'P.2024.205.1',
|
||||
sid: 'SRK1234SK',
|
||||
name: 'Joko Santoso',
|
||||
dob: '01/03/2000',
|
||||
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
|
||||
dataPemeriksaan: [
|
||||
{
|
||||
idPemeriksaan: 1,
|
||||
namaPemeriksaan: 'SGOT'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 2,
|
||||
namaPemeriksaan: 'SGPT'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 3,
|
||||
namaPemeriksaan: 'GLOB'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 4,
|
||||
namaPemeriksaan: 'TBIL'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
idOrder: 2,
|
||||
date: '02/03/2025',
|
||||
mrn: 'P.2024.205.1',
|
||||
sid: 'SRK1234SK',
|
||||
name: 'Joko Santoso',
|
||||
dob: '01/03/2000',
|
||||
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
|
||||
dataPemeriksaan: [
|
||||
{
|
||||
idPemeriksaan: 1,
|
||||
namaPemeriksaan: 'SGOT'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 2,
|
||||
namaPemeriksaan: 'SGPT'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 3,
|
||||
namaPemeriksaan: 'GLOB'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 4,
|
||||
namaPemeriksaan: 'TBIL'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
idOrder: 3,
|
||||
date: '02/03/2025',
|
||||
mrn: 'P.2024.205.1',
|
||||
sid: 'SRK1234SK',
|
||||
name: 'Joko Santoso',
|
||||
dob: '01/03/2000',
|
||||
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL, Darah Lengkap',
|
||||
dataPemeriksaan: [
|
||||
{
|
||||
idPemeriksaan: 1,
|
||||
namaPemeriksaan: 'SGOT'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 2,
|
||||
namaPemeriksaan: 'SGPT'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 3,
|
||||
namaPemeriksaan: 'GLOB'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 4,
|
||||
namaPemeriksaan: 'TBIL'
|
||||
},
|
||||
{
|
||||
idPemeriksaan: 5,
|
||||
namaPemeriksaan: 'Darah Lengkap'
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
selectedInstrument: {
|
||||
idInstrument: -1,
|
||||
namaInstrument: 'Instrument'
|
||||
},
|
||||
openInstrument: false,
|
||||
openInstrumentSearchMobile: false,
|
||||
openInstrumentSearch: false,
|
||||
dataInstrument: [
|
||||
{
|
||||
idInstrument: 1,
|
||||
namaInstrument: 'Hema 01',
|
||||
},
|
||||
{
|
||||
idInstrument: 2,
|
||||
namaInstrument: 'Axsym',
|
||||
},
|
||||
{
|
||||
idInstrument: 3,
|
||||
namaInstrument: 'Cobas C311',
|
||||
},
|
||||
],
|
||||
|
||||
mrnAdd: '',
|
||||
datePickerValueAdd: '',
|
||||
sidAdd: '',
|
||||
nameAdd: '',
|
||||
dobAdd: '',
|
||||
pemeriksaanAdd: [],
|
||||
objForm: {
|
||||
date: '',
|
||||
mrn: '',
|
||||
sid: '',
|
||||
name: '',
|
||||
dob: '',
|
||||
pemeriksaan: [],
|
||||
},
|
||||
// 1. Inisialisasi End
|
||||
// 2. Fungsi Start
|
||||
closeDialog() {
|
||||
this.pemeriksaanAdd = []
|
||||
this.filteredItemPemeriksaan = []
|
||||
this.selectedPemeriksaan = []
|
||||
this.mrnAdd = ''
|
||||
this.datePickerValueAdd = ''
|
||||
this.sidAdd = ''
|
||||
this.nameAdd = ''
|
||||
this.dobAdd = ''
|
||||
this.objForm = {
|
||||
date: '',
|
||||
mrn: '',
|
||||
sid: '',
|
||||
name: '',
|
||||
dob: '',
|
||||
pemeriksaan: [],
|
||||
}
|
||||
this.showDialogAdd = false
|
||||
},
|
||||
onChangeInstrumentSearch(item) {
|
||||
this.openInstrumentSearch = false;
|
||||
this.selectedInstrument = item;
|
||||
},
|
||||
onChangeInstrument(item) {
|
||||
this.openInstrument = false;
|
||||
this.selectedInstrumentAdd = item;
|
||||
},
|
||||
onChangeInstrumentEdit(item) {
|
||||
this.openInstrument = false;
|
||||
this.selectedInstrumentEdit = item;
|
||||
},
|
||||
onChangeMrnAdd() {
|
||||
this.objForm.assayCode = this.mrnAdd;
|
||||
},
|
||||
onChangeSidAdd() {
|
||||
this.objForm.sid = this.sidAdd;
|
||||
},
|
||||
onChangeNameAdd() {
|
||||
this.objForm.name = this.nameAdd;
|
||||
},
|
||||
onChangeInstrumentMobile(item) {
|
||||
this.openInstrumentSearchMobile = false;
|
||||
// this.selectedInstrument = item;
|
||||
this.selectedInstrument = { ...item };
|
||||
},
|
||||
openModalEdit(item) {
|
||||
this.selectedInstrumentEdit = {
|
||||
idInstrument: item.idInstrument,
|
||||
namaInstrument: item.namaInstrument
|
||||
}
|
||||
|
||||
this.assayCodeEdit = item.assayCode
|
||||
this.decimalFontEdit = item.decimalFont
|
||||
this.formulaEdit = item.formula
|
||||
|
||||
this.showDialogEdit = !this.showDialogEdit;
|
||||
},
|
||||
closeDialogEdit() {
|
||||
this.loadingVerifikasi = false;
|
||||
this.isErrorVerifikasi = false;
|
||||
this.isVerifikasiDone = false;
|
||||
this.hasilVerifikasi = ''
|
||||
this.showDialogEdit = !this.showDialogEdit;
|
||||
},
|
||||
editMobilePage(item) {
|
||||
var json = JSON.stringify(item);
|
||||
localStorage.setItem('itemEditMobile', json)
|
||||
window.location.href = "assay_format_mobile_edit.html";
|
||||
},
|
||||
// 2. Fungsi End
|
||||
}))
|
||||
})
|
||||
Reference in New Issue
Block a user