@hortonstudio/main 1.2.5 → 1.2.7

package/attributes-master/packages/list/src/filter/dynamic/conditions.ts

@@ -0,0 +1,639 @@
+import {
+  addListener,
+  cloneNode,
+  extractCommaSeparatedValues,
+  type FormField,
+  type FormFieldType,
+  isFormField,
+  isHTMLSelectElement,
+  setFormFieldValue,
+  simulateEvent,
+} from '@finsweet/attributes-utils';
+import { effect, watch } from '@vue/reactivity';
+import debounce from 'just-debounce';
+
+import type { List } from '../../components';
+import { ALLOWED_DYNAMIC_FIELD_TYPES, SETTINGS } from '../../utils/constants';
+import {
+  CUSTOM_VALUE_ATTRIBUTE,
+  getAttribute,
+  getElementSelector,
+  queryAllElements,
+  queryElement,
+} from '../../utils/selectors';
+import type { AllFieldsData, FilterOperator, FiltersCondition } from '../types';
+import { type ConditionGroup, getFiltersGroup } from './groups';
+import { getFilterMatchValue, parseOperatorValue } from './utils';
+
+export type Condition = {
+  id: string;
+  element: HTMLElement;
+  conditionGroup: ConditionGroup;
+  cleanup: () => void;
+};
+
+/**
+ * Inits the conditions matching selector for a dynamic filters setup.
+ * @param list
+ * @param element
+ * @param conditionGroup
+ */
+export const initConditionsMatch = (list: List, element: HTMLSelectElement, conditionGroup: ConditionGroup) => {
+  // TODO: support fs-list-filteron
+  const inputCleanup = addListener(element, 'change', () => {
+    const filtersGroup = getFiltersGroup(list, conditionGroup);
+    if (!filtersGroup) return;
+
+    const conditionsMatch = getFilterMatchValue(element);
+
+    filtersGroup.conditionsMatch = conditionsMatch;
+  });
+
+  const disabledClass = getAttribute(element, 'dynamicdisabledclass');
+
+  const runner = effect(() => {
+    const disabled = conditionGroup.conditions.value.length <= 1;
+
+    element.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    element.classList.toggle(disabledClass, disabled);
+  });
+
+  return () => {
+    inputCleanup();
+    runner.effect.stop();
+  };
+};
+
+/**
+ * Inits the condition add button of a condition group.
+ * @param list
+ * @param element
+ * @param conditionTemplate
+ * @param conditionGroup
+ * @returns A cleanup function
+ */
+export const initConditionAdd = (
+  list: List,
+  element: HTMLElement,
+  conditionTemplate: HTMLElement,
+  conditionGroup: ConditionGroup
+) => {
+  const cleanup = addListener(element, 'click', () => {
+    const conditionClone = cloneNode(conditionTemplate);
+
+    const condition = initCondition(list, conditionClone, conditionGroup);
+    if (!condition) return;
+
+    const $conditions = conditionGroup.conditions.value;
+    const previousCondition = $conditions[$conditions.length - 2];
+
+    if (previousCondition) {
+      previousCondition.element.after(condition.element);
+    } else {
+      conditionGroup.element.append(condition.element);
+    }
+  });
+
+  return cleanup;
+};
+
+/**
+ * Inits the condition remove button of a condition.
+ * @param element
+ * @param condition
+ * @param conditionGroup
+ * @returns A cleanup function
+ */
+const initConditionRemove = (element: HTMLElement, condition: Condition, conditionGroup: ConditionGroup) => {
+  const clickCleanup = addListener(element, 'click', () => {
+    if (conditionGroup.conditions.value.length <= 1) return;
+
+    condition.cleanup();
+  });
+
+  const disabledClass = getAttribute(element, 'dynamicdisabledclass');
+
+  const runner = effect(() => {
+    const disabled = conditionGroup.conditions.value.length <= 1;
+
+    element.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    element.classList.toggle(disabledClass, disabled);
+  });
+
+  return () => {
+    clickCleanup();
+    runner.effect.stop();
+  };
+};
+
+/**
+ * Inits the condition field key select of a condition.
+ * @param list
+ * @param element
+ * @param condition
+ * @returns A cleanup function
+ */
+const initConditionFieldKeySelect = (list: List, element: HTMLSelectElement, condition: Condition) => {
+  const changeCleanup = addListener(element, 'change', () => {
+    const filtersCondition = getFiltersCondition(list, condition);
+    if (!filtersCondition) return;
+
+    filtersCondition.fieldKey = element.value;
+  });
+
+  const fieldsRunner = effect(() => {
+    let invalidSelectedOption = false;
+
+    for (const option of element.options) {
+      const isValid = !!list.allFieldsData.value[option.value];
+
+      option.style.display = isValid ? '' : 'none';
+      option.disabled = !isValid;
+
+      if (!isValid && option.selected) {
+        option.selected = false;
+        invalidSelectedOption = true;
+      }
+    }
+
+    if (invalidSelectedOption) {
+      simulateEvent(element, ['input', 'change']);
+    }
+  });
+
+  return () => {
+    changeCleanup();
+    fieldsRunner.effect.stop();
+  };
+};
+
+/**
+ * Inits the condition operator select of a condition.
+ * The options are dynamically displayed depending on the selected field key.
+ * The logic for displaying options is defined in {@link ALLOWED_DYNAMIC_FIELD_TYPES}.
+ * @param list
+ * @param element
+ * @param condition
+ * @returns A cleanup function
+ */
+const initConditionOperatorSelect = (list: List, element: HTMLSelectElement, condition: Condition) => {
+  // Change listener
+  const changeCleanup = addListener(element, 'change', () => {
+    const filtersCondition = getFiltersCondition(list, condition);
+    if (!filtersCondition) return;
+
+    const { op, fieldMatch = SETTINGS.fieldmatch.defaultValue } = parseOperatorValue(element.value);
+
+    Object.assign(filtersCondition, { op, fieldMatch });
+  });
+
+  // Options display logic
+  const optionsHandler = ([fieldKey, allFieldsData]: [FiltersCondition['fieldKey'], AllFieldsData]) => {
+    const fieldData = fieldKey ? allFieldsData[fieldKey] : undefined;
+    const allFieldKeys = Object.keys(allFieldsData);
+
+    let invalidSelectedOption = false;
+
+    // Collect all options data
+    type OptionData = { option: HTMLOptionElement } & ReturnType<typeof parseOperatorValue>;
+
+    const { optionsData, optionsDataByOp, optionsToHide, optionsToDisplay } = [...element.options].reduce<{
+      optionsData: OptionData[];
+      optionsDataByOp: Map<FilterOperator, OptionData[]>;
+      optionsToHide: HTMLOptionElement[];
+      optionsToDisplay: HTMLOptionElement[];
+    }>(
+      (acc, option) => {
+        const invalid = () => {
+          acc.optionsToHide.push(option);
+          return acc;
+        };
+
+        if (!option.value) return invalid();
+        if (!fieldData) return invalid();
+
+        const operatorData = parseOperatorValue(option.value);
+        if (!operatorData.op) return invalid();
+
+        let isFieldKeyValid = !operatorData.fieldKey;
+
+        if (operatorData.fieldKey) {
+          const fieldKeys =
+            operatorData.fieldKey === '*' ? allFieldKeys : extractCommaSeparatedValues(operatorData.fieldKey);
+
+          isFieldKeyValid = fieldKeys.some((key) => key === fieldKey);
+        }
+
+        if (!isFieldKeyValid) return invalid();
+
+        const isValid = !!ALLOWED_DYNAMIC_FIELD_TYPES[fieldData.type]?.[fieldData.valueType]?.[operatorData.op];
+        if (!isValid) return invalid();
+
+        const optionData: OptionData = { option, ...operatorData };
+
+        acc.optionsData.push(optionData);
+        acc.optionsDataByOp.set(operatorData.op, [...(acc.optionsDataByOp.get(operatorData.op) || []), optionData]);
+
+        return acc;
+      },
+      {
+        optionsData: [],
+        optionsDataByOp: new Map(),
+        optionsToHide: [],
+        optionsToDisplay: [],
+      }
+    );
+
+    const isMultiFieldValue = fieldData?.valueType === 'multiple';
+
+    for (const { op, option, fieldMatch = SETTINGS.fieldmatch.defaultValue } of optionsData) {
+      const opOptionsData = optionsDataByOp.get(op!) || [];
+
+      let optionWithPreference;
+
+      if (isMultiFieldValue) {
+        optionWithPreference =
+          opOptionsData.find((other) => other.fieldMatch === fieldMatch) ||
+          opOptionsData.find((other) => other.fieldMatch) ||
+          opOptionsData.find((other) => !other.fieldMatch);
+      } else {
+        optionWithPreference = opOptionsData.find((other) => !other.fieldMatch);
+      }
+
+      const otherOptionHasPreference = optionWithPreference?.option !== option;
+      if (otherOptionHasPreference) {
+        optionsToHide.push(option);
+      } else {
+        optionsToDisplay.push(option);
+      }
+    }
+
+    for (const option of optionsToDisplay) {
+      option.style.display = '';
+      option.disabled = false;
+    }
+
+    for (const option of optionsToHide) {
+      option.style.display = 'none';
+      option.disabled = true;
+
+      if (option.selected) {
+        option.selected = false;
+        invalidSelectedOption = true;
+      }
+    }
+
+    // If the selected option has changed, trigger an event
+    if (invalidSelectedOption) {
+      simulateEvent(element, ['input', 'change']);
+    }
+  };
+
+  const optionsCleanup = watch(
+    [() => getFiltersCondition(list, condition)?.fieldKey, list.allFieldsData],
+    debounce(optionsHandler, 0),
+    { immediate: true }
+  );
+
+  return () => {
+    changeCleanup();
+    optionsCleanup();
+  };
+};
+
+/**
+ * Initializes the condition value form fields.
+ * @param list
+ * @param initialFormField
+ * @param conditionElement
+ * @param condition
+ * @returns A cleanup function
+ */
+const initConditionValueField = (
+  list: List,
+  initialFormField: FormField,
+  conditionElement: HTMLElement,
+  condition: Condition
+) => {
+  const conditionValueFieldAnchor = new Comment();
+  initialFormField.after(conditionValueFieldAnchor);
+
+  const { instance } = list;
+  const conditionSelector = getElementSelector('condition', { instance });
+  const conditionValueSelector = getElementSelector('condition-value', { instance });
+  const externalConditionValueSelector = `:is(${conditionValueSelector}):not(:is(${conditionSelector}) :is(${conditionValueSelector}))`;
+
+  const internalConditionValueFormFields = queryAllElements('condition-value', { scope: conditionElement });
+  const externalConditionValueFormFields = document.querySelectorAll<HTMLElement>(externalConditionValueSelector);
+
+  const allConditionValueFormFields = new Map<FormFieldType, FormField>();
+
+  for (const internalConditionValueFormField of internalConditionValueFormFields) {
+    if (!isFormField(internalConditionValueFormField)) continue;
+
+    const type = internalConditionValueFormField.type as FormFieldType;
+    if (allConditionValueFormFields.has(type)) continue;
+
+    allConditionValueFormFields.set(type, internalConditionValueFormField);
+  }
+
+  for (const externalConditionValueFormField of externalConditionValueFormFields) {
+    if (!isFormField(externalConditionValueFormField)) continue;
+
+    const type = externalConditionValueFormField.type as FormFieldType;
+    if (allConditionValueFormFields.has(type)) continue;
+
+    const clone = cloneNode(externalConditionValueFormField);
+    allConditionValueFormFields.set(type, clone);
+  }
+
+  let activeFormFieldType: FormFieldType | undefined;
+
+  const changeHandler = () => {
+    if (list.settingFilters) return;
+    if (!activeFormFieldType) return;
+
+    const filtersCondition = getFiltersCondition(list, condition);
+    if (!filtersCondition) return;
+
+    list.readingFilters = true;
+
+    const activeFormField = allConditionValueFormFields.get(activeFormFieldType)!;
+
+    const value = getConditionValue(activeFormField);
+    const fuzzyThreshold = getAttribute(activeFormField, 'fuzzy');
+
+    Object.assign(filtersCondition, {
+      value,
+      fuzzyThreshold,
+      type: activeFormFieldType,
+    });
+
+    list.readingFilters = false;
+  };
+
+  const changeCleanups = [...allConditionValueFormFields].map(([, formField]) => {
+    const event = getAttribute(formField, 'filteron', { filterInvalid: true });
+    const debouncing = getAttribute(formField, 'debounce');
+
+    const target = event === 'submit' ? formField.form : formField;
+    const handler = debouncing ? debounce(changeHandler, debouncing) : changeHandler;
+
+    return addListener(target, event, handler);
+  });
+
+  const formFieldsHandler = ([fieldKey, op, allFieldsData]: [
+    FiltersCondition['fieldKey'],
+    FiltersCondition['op'],
+    AllFieldsData,
+  ]) => {
+    const fieldData = fieldKey ? allFieldsData[fieldKey] : undefined;
+
+    let allowedFormFields: FormFieldType[] = [];
+
+    if (fieldData && op) {
+      allowedFormFields = ALLOWED_DYNAMIC_FIELD_TYPES[fieldData.type]?.[fieldData.valueType]?.[op] || [];
+    }
+
+    const previouslyActiveFormFieldType = activeFormFieldType;
+
+    activeFormFieldType = allowedFormFields.find((type) => allConditionValueFormFields.has(type));
+
+    for (const [type, formField] of allConditionValueFormFields) {
+      if (type === activeFormFieldType) {
+        conditionValueFieldAnchor.after(formField);
+      } else {
+        formField.remove();
+      }
+    }
+
+    if (activeFormFieldType && previouslyActiveFormFieldType !== activeFormFieldType) {
+      const activeFormField = allConditionValueFormFields.get(activeFormFieldType)!;
+
+      if (isHTMLSelectElement(activeFormField)) {
+        activeFormField.selectedIndex = 0;
+      } else {
+        activeFormField.value = '';
+      }
+
+      simulateEvent(activeFormField, ['input', 'change']);
+    }
+  };
+
+  const optionsHandler = ([fieldKey, allFieldsData]: [FiltersCondition['fieldKey'], AllFieldsData]) => {
+    const selectElements = [...allConditionValueFormFields.values()].filter(isHTMLSelectElement);
+    if (!selectElements.length) return;
+
+    const activeSelect = activeFormFieldType ? allConditionValueFormFields.get(activeFormFieldType) : undefined;
+
+    const fieldData = fieldKey ? allFieldsData[fieldKey] : undefined;
+    const rawValues = fieldData?.rawValues || new Set<string>();
+
+    const sortedValues = [...rawValues].sort((a, b) => a.localeCompare(b));
+
+    for (const selectElement of selectElements) {
+      const invalidSelectedOption = selectElement.value !== '' && !rawValues.has(selectElement.value);
+
+      for (const option of [...selectElement.options]) {
+        if (option.value !== '') {
+          option.remove();
+        }
+      }
+
+      for (const value of sortedValues) {
+        const option = document.createElement('option');
+        option.value = value;
+        option.textContent = value;
+
+        selectElement.append(option);
+      }
+
+      if (selectElement === activeSelect && invalidSelectedOption) {
+        simulateEvent(selectElement, ['input', 'change']);
+      }
+    }
+  };
+
+  const formFieldsCleanup = watch(
+    [
+      () => getFiltersCondition(list, condition)?.fieldKey,
+      () => getFiltersCondition(list, condition)?.op,
+      list.allFieldsData,
+    ],
+    debounce(formFieldsHandler, 0),
+    { immediate: true }
+  );
+
+  const optionsCleanup = watch(
+    [() => getFiltersCondition(list, condition)?.fieldKey, list.allFieldsData],
+    debounce(optionsHandler, 0),
+    { immediate: true }
+  );
+
+  const twoWayBindingCleanup = watch(
+    () => getFiltersCondition(list, condition)?.value,
+    (value) => {
+      if (list.readingFilters) return;
+
+      for (const formField of allConditionValueFormFields.values()) {
+        setFormFieldValue(formField, value, CUSTOM_VALUE_ATTRIBUTE);
+      }
+    }
+  );
+
+  return () => {
+    for (const cleanup of changeCleanups) {
+      cleanup();
+    }
+
+    formFieldsCleanup();
+    optionsCleanup();
+    twoWayBindingCleanup();
+  };
+};
+
+/**
+ * Retrieves the value from a condition value field.
+ * @param conditionValueField
+ */
+const getConditionValue = (conditionValueField: FormField) => {
+  const type = conditionValueField.type as FormFieldType;
+
+  let value: string | string[];
+
+  switch (type) {
+    // Select multiple
+    case 'select-multiple': {
+      value = [...(conditionValueField as HTMLSelectElement).selectedOptions]
+        .map((option) => option.value)
+        .filter(Boolean);
+      break;
+    }
+
+    // Dates
+    case 'date':
+    case 'month':
+    case 'week':
+    case 'time': {
+      const { valueAsDate, value: _value } = conditionValueField as HTMLInputElement;
+
+      value = valueAsDate ? valueAsDate.toISOString() : _value;
+      break;
+    }
+
+    // Default - Text
+    default: {
+      value = conditionValueField.value;
+    }
+  }
+
+  return value;
+};
+
+const getFiltersCondition = (list: List, condition: Condition) => {
+  const group = getFiltersGroup(list, condition.conditionGroup);
+  if (!group) return;
+
+  return group.conditions.find((c) => c.id === condition.id);
+};
+
+/**
+ * Inits a condition
+ * @param list
+ * @param element
+ * @param conditionGroup
+ * @returns A cleanup function
+ */
+export const initCondition = (list: List, element: HTMLElement, conditionGroup: ConditionGroup) => {
+  const conditionFieldKeySelect = queryElement('condition-field', { scope: element });
+  if (!isHTMLSelectElement(conditionFieldKeySelect)) return;
+
+  const conditionOperatorSelect = queryElement('condition-operator', { scope: element });
+  if (!isHTMLSelectElement(conditionOperatorSelect)) return;
+
+  const initialConditionValueFormField = queryElement('condition-value', { scope: element });
+  if (!isFormField(initialConditionValueFormField)) return;
+
+  // Store the condition
+  const id = crypto.randomUUID();
+  const cleanups = new Set<() => void>();
+
+  const condition: Condition = {
+    id,
+    element,
+    conditionGroup,
+
+    cleanup: () => {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+
+      cleanups.clear();
+      element.remove();
+
+      conditionGroup.conditions.value = conditionGroup.conditions.value.filter((condition) => condition.id !== id);
+
+      const filtersGroup = getFiltersGroup(list, conditionGroup);
+      if (!filtersGroup) return;
+
+      const conditionIndex = filtersGroup.conditions.findIndex((condition) => condition.id === id);
+      if (conditionIndex === -1) return;
+
+      filtersGroup.conditions.splice(conditionIndex, 1);
+    },
+  };
+
+  // Store the condition
+  const fieldKey = conditionFieldKeySelect.value;
+  const type = initialConditionValueFormField.type as FormFieldType;
+
+  const value = getConditionValue(initialConditionValueFormField);
+  const fuzzyThreshold = getAttribute(initialConditionValueFormField, 'fuzzy');
+  const { op, fieldMatch } = parseOperatorValue(conditionOperatorSelect.value);
+
+  conditionGroup.conditions.value = [...conditionGroup.conditions.value, condition];
+
+  const filtersGroup = getFiltersGroup(list, conditionGroup);
+  if (!filtersGroup) return;
+
+  filtersGroup.conditions.push({
+    id,
+    type,
+    fieldKey,
+    op,
+    value,
+    fuzzyThreshold,
+    fieldMatch,
+    showTag: true,
+    interacted: true,
+  });
+
+  // Handle remove button
+  const conditionRemoveButton = queryElement('condition-remove', { scope: element });
+  if (conditionRemoveButton) {
+    const cleanup = initConditionRemove(conditionRemoveButton, condition, conditionGroup);
+    cleanups.add(cleanup);
+  }
+
+  const conditionFieldKeySelectCleanup = initConditionFieldKeySelect(list, conditionFieldKeySelect, condition);
+  cleanups.add(conditionFieldKeySelectCleanup);
+
+  const conditionOperatorSelectCleanup = initConditionOperatorSelect(list, conditionOperatorSelect, condition);
+  cleanups.add(conditionOperatorSelectCleanup);
+
+  const conditionValueFieldCleanup = initConditionValueField(list, initialConditionValueFormField, element, condition);
+  cleanups.add(conditionValueFieldCleanup);
+
+  const autoCleanup = watch(
+    () => getFiltersCondition(list, condition),
+    (filtersCondition) => {
+      if (!filtersCondition) {
+        condition.cleanup();
+      }
+    }
+  );
+
+  cleanups.add(autoCleanup);
+
+  return condition;
+};