import { AbstractWidget } from "../../../sparnatural/components/widgets/AbstractWidget";
import {
Branch,
CriteriaLine,
ISparJson,
} from "../../../sparnatural/generators/json/ISparJson";
class OptionalCriteriaManager {
private initialOptionalStates: { [variable: string]: any } = {};
private queryLine: CriteriaLine;
// Store references to elements for reuse
private anyValueToggle!: HTMLInputElement;
private notExistToggle!: HTMLInputElement;
private anydiv!: HTMLDivElement;
private notExistDiv!: HTMLDivElement;
constructor(
private query: ISparJson, // The entire query structure
private variable: string, // The variable associated with this field
queryline: CriteriaLine, // The specific query line for this field
private widget: AbstractWidget, // The widget associated with this field
private formFieldDiv: HTMLElement // The container for the form field
) {
this.queryLine = queryline;
this.saveInitialOptionalState(this.query.branches); // Save initial states for optional flags
this.createOptionContainer(); // Create the UI for "Any value" and "Not Exist" options
this.attachValueChangeListener(); // Attach listener for dynamic updates
}
/**
* Saves the initial state of optional and notExist flags for each branch.
*/
private saveInitialOptionalState(
queryBranches: Branch[],
parentOptionalChain: boolean[] = []
) {
const saveState = (branches: Branch[], currentParentChain: boolean[]) => {
branches.forEach((branch: Branch) => {
const branchVariable = branch.line?.o;
const currentChain = [...currentParentChain, branch.optional || false];
const branchState: any = {
optional: branch.optional,
notExists: branch.notExists || false,
parentOptionalChain: currentChain,
children: branch.children
? saveState(branch.children, currentChain)
: [],
};
if (branchVariable) {
this.initialOptionalStates[branchVariable] = branchState;
}
});
};
saveState(queryBranches, parentOptionalChain);
}
/**
* Updates the visibility and enabled state of "Any value" and "Not Exist" options.
*/
public updateOptionVisibility() {
const hasValues = this.queryLine.values && this.queryLine.values.length > 0;
// Ensure elements exist before updating them
if (!this.anydiv || !this.notExistDiv) {
console.warn(
`Optional elements not created for variable: ${this.variable}`
);
return; // Exit if no options are created
}
if (hasValues) {
// Hide and disable options if the widget has values
if (this.anyValueToggle) {
this.anyValueToggle.checked = false;
this.anyValueToggle.disabled = true;
}
if (this.notExistToggle) {
this.notExistToggle.checked = false;
this.notExistToggle.disabled = true;
}
this.anydiv.style.display = "none";
this.notExistDiv.style.display = "none";
} else {
// Show and enable options if the widget has no values
if (this.anyValueToggle) {
this.anyValueToggle.disabled = false;
}
if (this.notExistToggle) {
this.notExistToggle.disabled = false;
}
this.anydiv.style.display = "block";
this.notExistDiv.style.display = "block";
}
}
/**
* Creates the UI container for "Any value" and "Not Exist" options.
*
*
*/
private createOptionContainer() {
// Check if an option container already exists
const existingOptionContainer =
this.formFieldDiv.querySelector(".option-container");
if (existingOptionContainer) {
// Remove the existing container to avoid duplicates
this.formFieldDiv.removeChild(existingOptionContainer);
}
// Find the branch and its parent
const branch = this.findBranch(this.query.branches);
const branchParent = this.findBranchParent(this.query.branches);
// Check if either the branch or its parent is optional
const shouldCreateOptions = branch?.optional || branchParent?.optional;
if (!shouldCreateOptions) {
// If neither the branch nor its parent is optional, skip creating options
console.log(`Skipping option creation for variable: ${this.variable}`);
return;
}
const optionContainer = document.createElement("div");
optionContainer.classList.add("option-container");
this.anydiv = document.createElement("div");
this.anydiv.classList.add("any-value-container");
this.anyValueToggle = document.createElement("input");
this.notExistDiv = document.createElement("div");
this.notExistDiv.classList.add("not-exist-container");
this.notExistToggle = document.createElement("input");
// Add "Any value" toggle
const anyValueLabel = document.createElement("label");
this.anyValueToggle.type = "checkbox";
this.anyValueToggle.id = `any-value-${this.variable}`;
this.anyValueToggle.classList.add("any-value-toggle");
anyValueLabel.htmlFor = `any-value-${this.variable}`;
anyValueLabel.innerHTML = " Any value";
this.anydiv.appendChild(this.anyValueToggle);
this.anydiv.appendChild(anyValueLabel);
optionContainer.appendChild(this.anydiv);
// Add "Not Exist" toggle
const notExistLabel = document.createElement("label");
this.notExistToggle.type = "checkbox";
this.notExistToggle.id = `not-value-${this.variable}`;
this.notExistToggle.classList.add("any-value-toggle");
notExistLabel.htmlFor = `not-value-${this.variable}`;
notExistLabel.innerHTML = " Not Exist";
this.notExistDiv.appendChild(this.notExistToggle);
this.notExistDiv.appendChild(notExistLabel);
optionContainer.appendChild(this.notExistDiv);
this.formFieldDiv.appendChild(optionContainer);
// Attach event listeners for toggles
this.attachToggleListeners();
}
private attachToggleListeners() {
// Handle "Any Value" toggle changes
this.anyValueToggle.addEventListener("change", () => {
if (this.anyValueToggle.checked) {
// Suppression du conteneur d'options
this.removeOptionContainer();
this.setAnyValueForWidget(this.variable);
this.notExistDiv.style.display = "none";
this.notExistToggle.checked = false;
this.notExistToggle.disabled = true;
this.widget.disableWidget();
// Créer une "pill" pour Any Value
const pill = document.createElement("div");
pill.className = "option-pill any-value";
pill.textContent = "Any Value";
// Bouton de suppression (croix)
const unselectBtn = document.createElement("span");
unselectBtn.className = "unselect";
unselectBtn.innerHTML = ``;
unselectBtn.addEventListener("click", () => {
// Désélectionnez l'option Any Value
this.anyValueToggle.checked = false;
this.anyValueToggle.dispatchEvent(new Event("change"));
});
pill.appendChild(unselectBtn);
this.formFieldDiv.appendChild(pill);
this.formFieldDiv.dispatchEvent(
new CustomEvent("anyValueSelected", {
bubbles: true,
detail: { variable: this.variable },
})
);
} else {
this.resetToDefaultValueForWidget(this.variable);
this.notExistToggle.disabled = false;
this.notExistDiv.style.display = "block";
this.widget.enableWidget();
// Supprimer le pill associé à "Any Value"
this.removePill("any-value");
// Recréer le conteneur des options
this.createOptionContainer();
this.formFieldDiv.dispatchEvent(
new CustomEvent("removeAnyValueOption", {
bubbles: true,
detail: { variable: this.variable },
})
);
}
});
// Handle "Not Exist" toggle changes
this.notExistToggle.addEventListener("change", () => {
if (this.notExistToggle.checked) {
// Suppression du conteneur d'options
this.removeOptionContainer();
this.setNotExistsForWidget(this.variable);
this.anyValueToggle.checked = false;
this.anyValueToggle.disabled = true;
this.anydiv.style.display = "none";
this.widget.disableWidget();
// Créer une "pill" pour Not Exist
const pill = document.createElement("div");
pill.className = "option-pill not-exist";
pill.textContent = "Not Exist";
// Bouton de suppression (croix)
const unselectBtn = document.createElement("span");
unselectBtn.className = "unselect";
unselectBtn.innerHTML = ``;
unselectBtn.addEventListener("click", () => {
// Désélectionnez l'option Not Exist
this.notExistToggle.checked = false;
this.notExistToggle.dispatchEvent(new Event("change"));
});
pill.appendChild(unselectBtn);
this.formFieldDiv.appendChild(pill);
this.formFieldDiv.dispatchEvent(
new CustomEvent("notExist", {
bubbles: true,
detail: { variable: this.variable },
})
);
} else {
this.removeNotExistsForWidget(this.variable);
this.anyValueToggle.disabled = false;
this.anydiv.style.display = "block";
this.widget.enableWidget();
// Supprimer le pill associé à "Not Exist"
this.removePill("not-exist");
// Recréer le conteneur des options
this.createOptionContainer();
this.formFieldDiv.dispatchEvent(
new CustomEvent("removeNotExistOption", {
bubbles: true,
detail: { variable: this.variable },
})
);
}
});
}
/**
* Supprime le conteneur d'options pour éviter les duplications.
*/
private removeOptionContainer() {
const existingContainer =
this.formFieldDiv.querySelector(".option-container");
if (existingContainer) {
existingContainer.remove();
}
}
/**
* Supprime un pill existant pour éviter les doublons.
* @param type Le type de pill à supprimer (e.g., "any-value" ou "not-exist").
*/
private removePill(type: string) {
const existingPill = this.formFieldDiv.querySelector(
`.option-pill.${type}`
);
if (existingPill) {
existingPill.remove();
}
}
private attachValueChangeListener() {
this.widget.html[0].addEventListener(
"renderWidgetVal",
(e: CustomEvent) => {
console.log("Widget value change detected.");
console.log("Event detail:", e.detail);
// Vérifie si e.detail.value est défini avant de continuer
if (!e.detail || !e.detail.value) {
console.error("e.detail.value is undefined or invalid:", e.detail);
return;
}
// Normalise les nouvelles valeurs en tableau
const newValues = Array.isArray(e.detail.value)
? e.detail.value
: [e.detail.value];
console.log("New values to inject:", newValues);
// Vérifie si newValues contient des objets valides
const validNewValues = newValues.filter(
(val: any) => val && val.label !== undefined
);
console.log("Valid new values:", validNewValues);
if (validNewValues.length === 0) {
console.warn("No valid new values found:", newValues);
return;
}
// Récupère les valeurs existantes (ou initialise un tableau vide)
const existingValues = this.queryLine.values || [];
console.log("Existing values:", existingValues);
// Fusionne les valeurs en évitant les doublons
const mergedValues = [
...existingValues.filter(
(existing: { label: string }) =>
!validNewValues.some(
(newVal: { label: string }) => newVal.label === existing.label
)
),
...validNewValues,
];
// Met à jour les valeurs dans `this.queryLine.values`
this.queryLine.values = mergedValues;
// Affiche les valeurs fusionnées pour débogage
console.log("Updated queryLine.values:", this.queryLine.values);
// Mets à jour la visibilité des options si nécessaire
if (this.anydiv && this.notExistDiv) {
this.updateOptionVisibility();
}
}
);
}
private findBranch(branches: Branch[]): Branch | null {
for (const branch of branches) {
if (branch.line.o === this.variable) return branch;
if (branch.children && branch.children.length > 0) {
const result = this.findBranch(branch.children);
if (result) return result;
}
}
return null;
}
private findBranchParent(branches: Branch[]): Branch | any {
for (const branch of branches) {
if (branch.children && branch.children.length > 0) {
const result = this.findBranch(branch.children);
if (result) return branch;
}
}
return false;
}
public setAnyValueForWidget(variable: string) {
console.log(`Setting "Any value" for variable: ${variable}`);
const adjustOptionalFlags = (
branches: Branch[],
targetVariable: string
) => {
branches.forEach((branch: Branch) => {
const formVariable = branch.line.o;
if (formVariable === targetVariable && branch.optional === true) {
console.log(
`Removing "optional: true" for variable: ${targetVariable}`
);
delete branch.optional;
}
if (branch.children && branch.children.length > 0) {
const childHasTargetVariable = branch.children.some(
(child: Branch) => child.line.o === targetVariable
);
if (childHasTargetVariable && branch.optional === true) {
console.log(
`Removing "optional: true" for parent of variable: ${targetVariable}`
);
delete branch.optional;
}
adjustOptionalFlags(branch.children, targetVariable);
}
});
};
adjustOptionalFlags(this.query.branches, variable);
}
public resetToDefaultValueForWidget(variable: string) {
console.log(`Resetting to default state for variable: ${variable}`);
const restoreInitialState = (
branches: Branch[],
targetVariable: string
) => {
branches.forEach((branch: Branch) => {
if (branch.line && branch.line.o === targetVariable) {
const initialState = this.initialOptionalStates[targetVariable];
if (initialState) {
branch.optional = initialState.optional;
branch.notExists = initialState.notExists;
this.restoreParentOptionalChain(
branch,
initialState.parentOptionalChain
);
}
}
if (branch.children && branch.children.length > 0) {
restoreInitialState(branch.children, targetVariable);
}
});
};
restoreInitialState(this.query.branches, variable);
}
private restoreParentOptionalChain(
branch: Branch,
parentOptionalChain: boolean[]
) {
let currentBranch = branch;
for (let i = parentOptionalChain.length - 1; i >= 0; i--) {
const parentOptional = parentOptionalChain[i];
if (currentBranch) {
currentBranch.optional = parentOptional;
currentBranch = this.findParentBranch(
this.query.branches,
currentBranch.line.o
);
}
}
}
private findParentBranch(
branches: Branch[],
childVariable: string
): Branch | null {
for (const branch of branches) {
if (
branch.children &&
branch.children.some((child: Branch) => child.line.o === childVariable)
) {
return branch;
}
if (branch.children && branch.children.length > 0) {
const foundParent = this.findParentBranch(
branch.children,
childVariable
);
if (foundParent) {
return foundParent;
}
}
}
return null;
}
public setNotExistsForWidget(variable: string) {
console.log(`Setting "notExists" for variable: ${variable}`);
const addNotExistsFlag = (branches: Branch[], targetVariable: string) => {
branches.forEach((branch: Branch) => {
if (branch.line && branch.line.o === targetVariable) {
console.log(
`Adding "notExists: true" for variable: ${targetVariable}`
);
branch.notExists = true;
if (branch.optional === true) {
console.log(
`Removing "optional: true" for variable: ${targetVariable}`
);
delete branch.optional;
}
}
if (branch.children && branch.children.length > 0) {
addNotExistsFlag(branch.children, targetVariable);
}
});
};
const adjustParentOptionalFlags = (
branches: Branch[],
targetVariable: string
) => {
branches.forEach((branch: Branch) => {
const childHasTargetVariable = branch.children.some(
(child: Branch) => child.line.o === targetVariable
);
if (childHasTargetVariable && branch.optional === true) {
console.log(
`Removing "optional: true" for parent of variable: ${targetVariable}`
);
delete branch.optional;
}
if (branch.children && branch.children.length > 0) {
adjustParentOptionalFlags(branch.children, targetVariable);
}
});
};
addNotExistsFlag(this.query.branches, variable);
adjustParentOptionalFlags(this.query.branches, variable);
}
public removeNotExistsForWidget(variable: string) {
console.log(`Removing "notExists" for variable: ${variable}`);
const removeNotExistsFlag = (
branches: Branch[],
targetVariable: string
) => {
branches.forEach((branch: Branch) => {
if (branch.line && branch.line.o === targetVariable) {
delete branch.notExists;
const initialState = this.initialOptionalStates[targetVariable];
if (initialState) {
branch.optional = initialState.optional;
this.restoreParentOptionalChain(
branch,
initialState.parentOptionalChain
);
}
}
if (branch.children && branch.children.length > 0) {
removeNotExistsFlag(branch.children, targetVariable);
}
});
};
removeNotExistsFlag(this.query.branches, variable);
}
}
export default OptionalCriteriaManager;