133 lines
3.9 KiB
JavaScript
133 lines
3.9 KiB
JavaScript
import GlobalConfig from "../global-config.js";
|
|
|
|
class MultiFormCreatePBG {
|
|
constructor() {
|
|
this.currentStep = 1;
|
|
this.totalSteps = 4;
|
|
this.formData = {}; // Menyimpan data dari semua langkah
|
|
}
|
|
|
|
init() {
|
|
document
|
|
.getElementById("nextStep")
|
|
.addEventListener("click", () => this.nextStep());
|
|
|
|
document
|
|
.getElementById("prevStep")
|
|
.addEventListener("click", () => this.prevStep());
|
|
}
|
|
|
|
nextStep() {
|
|
if (!this.validateStep()) return;
|
|
|
|
this.saveStepData();
|
|
|
|
if (this.currentStep < this.totalSteps) {
|
|
document
|
|
.getElementById(`step${this.currentStep}`)
|
|
.classList.add("d-none");
|
|
|
|
this.currentStep++;
|
|
document
|
|
.getElementById(`step${this.currentStep}`)
|
|
.classList.remove("d-none");
|
|
|
|
document.getElementById(
|
|
"stepTitle"
|
|
).innerText = `Step ${this.currentStep}`;
|
|
document.getElementById("prevStep").disabled = false;
|
|
document.getElementById("nextStep").innerText =
|
|
this.currentStep === this.totalSteps ? "Submit" : "Next →";
|
|
} else {
|
|
this.submitForm(); // Submit ke API jika sudah step terakhir
|
|
}
|
|
}
|
|
|
|
prevStep() {
|
|
if (this.currentStep > 1) {
|
|
document
|
|
.getElementById(`step${this.currentStep}`)
|
|
.classList.add("d-none");
|
|
|
|
this.currentStep--;
|
|
document
|
|
.getElementById(`step${this.currentStep}`)
|
|
.classList.remove("d-none");
|
|
|
|
document.getElementById(
|
|
"stepTitle"
|
|
).innerText = `Step ${this.currentStep}`;
|
|
document.getElementById("prevStep").disabled =
|
|
this.currentStep === 1;
|
|
document.getElementById("nextStep").innerText = "Next →";
|
|
}
|
|
}
|
|
|
|
saveStepData() {
|
|
const stepForm = document.querySelector(`#step${this.currentStep}Form`);
|
|
const formDataObj = new FormData(stepForm);
|
|
|
|
if (!this.formData) {
|
|
this.formData = {};
|
|
}
|
|
|
|
const stepKey = `step${this.currentStep}Form`;
|
|
this.formData[stepKey] = {};
|
|
|
|
for (const [key, value] of formDataObj.entries()) {
|
|
this.formData[stepKey][key] = value;
|
|
}
|
|
|
|
console.log("form data", this.formData);
|
|
}
|
|
|
|
validateStep() {
|
|
const stepForm = document.querySelector(`#step${this.currentStep}Form`);
|
|
const inputs = stepForm.querySelectorAll(
|
|
"input[required], select[required]"
|
|
);
|
|
let isValid = true;
|
|
|
|
inputs.forEach((input) => {
|
|
if (!input.value) {
|
|
input.classList.add("is-invalid");
|
|
isValid = false;
|
|
} else {
|
|
input.classList.remove("is-invalid");
|
|
}
|
|
});
|
|
|
|
return isValid;
|
|
}
|
|
|
|
async submitForm() {
|
|
try {
|
|
const response = await fetch(
|
|
`${GlobalConfig.apiHost}/api/api-pbg-task`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
Authorization: `Bearer ${
|
|
document.querySelector("meta[name='api-token']")
|
|
.content
|
|
}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(this.formData),
|
|
}
|
|
);
|
|
|
|
const result = await response.json();
|
|
alert(result.message);
|
|
window.location.href = "/pbg-task";
|
|
} catch (error) {
|
|
console.error("Error submitting form:", error);
|
|
alert("Terjadi kesalahan saat mengirim data.");
|
|
}
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
new MultiFormCreatePBG().init();
|
|
});
|