simple mode change step working

This commit is contained in:
Jordan Blasenhauer 2024-04-22 20:33:30 +02:00
parent 7756cf141c
commit 90e957674c
2 changed files with 69 additions and 21 deletions

View file

@ -36,8 +36,8 @@ class ServiceModal {
);
this.nextBtn = this.modal.querySelector("button[data-simple-next]");
this.backBtn = this.modal.querySelector("button[data-simple-back]");
this.saveSimpleBtn = this.modal.querySelector(
"button[data-services-simple-modal-submit]",
this.saveSimpleBtn = this.simpleForm.querySelector(
"button[data-services-modal-submit]",
);
// list els
this.serverNameInps = this.modal.querySelectorAll(
@ -91,6 +91,7 @@ class ServiceModal {
});
});
});
this.modal.addEventListener("click", (e) => {
// update draft mode
try {
@ -126,6 +127,16 @@ class ServiceModal {
this.checkVisibleInpsValidity();
});
this.nextBtn.addEventListener("click", () => {
this.nextSimpleStep();
this.checkVisibleInpsValidity();
});
this.backBtn.addEventListener("click", () => {
this.prevSimpleStep();
this.checkVisibleInpsValidity();
});
this.container.addEventListener("click", (e) => {
//edit action
try {
@ -252,7 +263,10 @@ class ServiceModal {
const firstStep = this.simpleForm.querySelector("[data-step='1']");
firstStep.classList.remove("hidden");
// we want to update settings by current security level
this.setSettingsByAtt(this.simpleForm);
const securityLevelValue = this.simpleForm.querySelector(
'[data-setting-select-text="security-level"]',
);
this.setSettingsByAtt(this.simpleForm, "");
}
nextSimpleStep() {
@ -263,26 +277,59 @@ class ServiceModal {
const nextStep = this.simpleForm.querySelector(
`[data-step="${+currStepNum + 1}"]`,
);
const nextStepPlusOne = this.simpleForm.querySelector(
`[data-step="${+currStepNum + 2}"]`,
);
// Handle case last step or not
if (nextStepPlusOne) {
this.nextBtn.classList.remove("hidden");
this.saveSimpleBtn.classList.add("hidden");
}
if (!nextStepPlusOne) {
this.nextBtn.classList.add("hidden");
this.saveSimpleBtn.classList.remove("hidden");
}
// hide current step and show next one
currStep.classList.add("hidden");
nextStep.classList.remove("hidden");
this.checkCurrInpSimple();
this.updateSimpleActions();
}
prevSimpleStep() {
// get current step
const currStep = this.simpleForm.querySelector("[data-step]:not(.hidden)");
const currStepNum = currStep.getAttribute("data-step");
// get next step and next step + 1 to determine if continue or save
const prevStep = this.simpleForm.querySelector(
`[data-step="${+currStepNum - 1}"]`,
);
// hide current step and show next one
currStep.classList.add("hidden");
prevStep.classList.remove("hidden");
this.updateSimpleActions();
}
updateSimpleActions() {
const currStep = this.simpleForm.querySelector("[data-step]:not(.hidden)");
const currStepNum = currStep.getAttribute("data-step");
// get next step and next step + 1 to determine if continue or save
const prevStep = this.simpleForm.querySelector(
`[data-step="${+currStepNum - 1}"]`,
);
const nextStep = this.simpleForm.querySelector(
`[data-step="${+currStepNum + 1}"]`,
);
// Handle case last step or not
if (nextStep) {
this.nextBtn.classList.remove("hidden");
this.saveSimpleBtn.classList.add("hidden");
}
if (!nextStep) {
this.nextBtn.classList.add("hidden");
this.saveSimpleBtn.classList.remove("hidden");
}
if (prevStep) {
this.backBtn.removeAttribute("disabled");
}
if (!prevStep) {
this.backBtn.setAttribute("disabled", "");
}
}
resetFilterInp() {

View file

@ -126,8 +126,9 @@ class Select {
selectCustom.querySelector(`[data-setting-select-text]`).textContent =
btnValue;
//add selected to new value
selectCustom
.querySelector(`[data-setting-select-text]`)
.setAttribute("data-value", btnValue);
//change style
const dropdownEl = btn.closest(`div[data-setting-select-dropdown]`);
dropdownEl.classList.add("hidden");