General source code refactoring

src/features/preferences/view.js

@@ -0,0 +1,165 @@
+function createPreferencesView({
+  DEFAULT_OPPTY_PRODUCTS_CACHE_HOURS,
+  MODAL_ID,
+  OPPORTUNITY_TYPE_OPTIONS,
+  OPPORTUNITY_TYPE_PREFERENCES_STORAGE_KEY,
+  OPPTY_PRODUCTS_CACHE_OPTIONS,
+  PERIOD_OPTIONS,
+  PREFERENCES_MODAL_ID,
+  createCloseIcon,
+  getSavedOpportunityTypeValues,
+  getSavedOpptyProductsCacheHours,
+  preferencesState,
+  requestOpportunitiesForPeriod,
+  environment
+}) {
+  const { document } = environment;
+  const getLocalStorage = () => environment.localStorage;
+  function openPreferencesModal() {
+    const overlay = document.getElementById(MODAL_ID);
+
+    if (!overlay) {
+      return;
+    }
+
+    const existingModal = document.getElementById(PREFERENCES_MODAL_ID);
+
+    if (existingModal) {
+      const savedValues = new Set(getSavedOpportunityTypeValues());
+      existingModal.querySelectorAll("input[name='opportunityTypeView']").forEach((checkbox) => {
+        checkbox.checked = savedValues.has(checkbox.value);
+      });
+      const cacheSelect = existingModal.querySelector("select[name='opptyProductsCacheHours']");
+
+      if (cacheSelect) {
+        cacheSelect.value = String(getSavedOpptyProductsCacheHours());
+      }
+
+      existingModal.hidden = false;
+      existingModal.querySelector("input")?.focus();
+      return;
+    }
+
+    const preferencesModal = document.createElement("section");
+    preferencesModal.id = PREFERENCES_MODAL_ID;
+    preferencesModal.className = "opportunities-extension-preferences-modal";
+    preferencesModal.setAttribute("role", "dialog");
+    preferencesModal.setAttribute("aria-modal", "true");
+    preferencesModal.setAttribute("aria-labelledby", "opportunities-extension-preferences-title");
+
+    const dialog = document.createElement("div");
+    dialog.className = "opportunities-extension-preferences-dialog";
+
+    const header = document.createElement("header");
+    header.className = "opportunities-extension-preferences-header";
+
+    const title = document.createElement("h2");
+    title.id = "opportunities-extension-preferences-title";
+    title.textContent = "Preferences";
+
+    const closeButton = document.createElement("button");
+    closeButton.type = "button";
+    closeButton.className = "opportunities-extension-icon-button";
+    closeButton.setAttribute("aria-label", "Fechar preferências");
+    closeButton.title = "Close";
+    closeButton.append(createCloseIcon());
+    closeButton.addEventListener("click", closePreferencesModal);
+    header.append(title, closeButton);
+
+    const content = document.createElement("div");
+    content.className = "opportunities-extension-preferences-content";
+
+    const fieldset = document.createElement("fieldset");
+    fieldset.className = "opportunities-extension-preferences-fieldset";
+
+    const legend = document.createElement("legend");
+    legend.textContent = "Opportunity Type View";
+    fieldset.append(legend);
+
+    const selectedValues = new Set(getSavedOpportunityTypeValues());
+    const options = document.createElement("div");
+    options.className = "opportunities-extension-preferences-options";
+
+    OPPORTUNITY_TYPE_OPTIONS.forEach((option) => {
+      const label = document.createElement("label");
+      label.className = "opportunities-extension-preferences-option";
+
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.name = "opportunityTypeView";
+      checkbox.value = option.value;
+      checkbox.checked = selectedValues.has(option.value);
+
+      const text = document.createElement("span");
+      text.textContent = option.label;
+      label.append(checkbox, text);
+      options.append(label);
+    });
+
+    fieldset.append(options);
+
+    const cacheField = document.createElement("label");
+    cacheField.className = "opportunities-extension-preferences-cache-field";
+
+    const cacheLabel = document.createElement("span");
+    cacheLabel.textContent = "Product cache duration";
+
+    const cacheSelect = document.createElement("select");
+    cacheSelect.name = "opptyProductsCacheHours";
+    cacheSelect.setAttribute("aria-label", "Product cache duration");
+    OPPTY_PRODUCTS_CACHE_OPTIONS.forEach((option) => {
+      const optionElement = document.createElement("option");
+      optionElement.value = String(option.value);
+      optionElement.textContent = option.label;
+      optionElement.selected = option.value === getSavedOpptyProductsCacheHours();
+      cacheSelect.append(optionElement);
+    });
+    cacheField.append(cacheLabel, cacheSelect);
+    content.append(fieldset, cacheField);
+
+    const footer = document.createElement("footer");
+    footer.className = "opportunities-extension-preferences-footer";
+
+    const saveButton = document.createElement("button");
+    saveButton.type = "button";
+    saveButton.className = "opportunities-extension-button opportunities-extension-button-primary";
+    saveButton.textContent = "Save";
+    saveButton.addEventListener("click", () => {
+      const selectedValues = Array.from(preferencesModal.querySelectorAll("input[name='opportunityTypeView']:checked"), (checkbox) => checkbox.value);
+      const selectedCacheHours = Number(preferencesModal.querySelector("select[name='opptyProductsCacheHours']")?.value);
+      preferencesState.selectedOpportunityTypeValues = new Set(selectedValues);
+      preferencesState.opptyProductsCacheHours = OPPTY_PRODUCTS_CACHE_OPTIONS.some((option) => option.value === selectedCacheHours)
+        ? selectedCacheHours
+        : DEFAULT_OPPTY_PRODUCTS_CACHE_HOURS;
+
+      try {
+        getLocalStorage().setItem(OPPORTUNITY_TYPE_PREFERENCES_STORAGE_KEY, JSON.stringify({
+          opportunityTypeValues: selectedValues,
+          opptyProductsCacheHours: preferencesState.opptyProductsCacheHours
+        }));
+      } catch (error) {
+        // Continue with the saved selection for the active modal when storage is unavailable.
+      }
+
+      closePreferencesModal();
+      const periodSelect = overlay.querySelector("select[name='opportunityPeriod']");
+      requestOpportunitiesForPeriod(periodSelect?.value || PERIOD_OPTIONS[0]);
+    });
+
+    footer.append(saveButton);
+    dialog.append(header, content, footer);
+    preferencesModal.append(dialog);
+    overlay.append(preferencesModal);
+    preferencesModal.querySelector("input")?.focus();
+  }
+
+  function closePreferencesModal() {
+    const preferencesModal = document.getElementById(PREFERENCES_MODAL_ID);
+
+    if (preferencesModal) {
+      preferencesModal.hidden = true;
+    }
+  }
+
+  return { openPreferencesModal, closePreferencesModal };
+}