Fix/exclude investigations filter

_config.yml

@@ -37,7 +37,6 @@ include: [
   ".well-known"
 ]
 exclude: [
-  "content/templates",
   "README.md",
   "CONTRIBUTING.md",
   "lib",

_includes/startups-filters.html

@@ -37,4 +37,11 @@
       <p class="fr-hint-text" id="{{include.prefix}}toggle-hint-text">Ces services sont déployés à l'ensemble du territoire national et ont atteint un seuil d'impact significatif.</p>
     </div>
   </div>
+  <div class="fr-grid-row">
+    <div class="fr-col fr-toggle">
+      <input type="checkbox" class="fr-toggle__input exclude-investigations" aria-describedby="exclude-investigations-toggle-hint-text" id="exclude-investigations-toggle" />
+      <label class="fr-toggle__label" for="exclude-investigations-toggle" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Exclure les investigations</label>
+      <p class="fr-hint-text" id="exclude-investigations-toggle-hint-text">Les investigations sont des services numériques en devenir. À ce stade, l'équipe est souvent réduite.</p>
+    </div>
+  </div>
 </div>

_layouts/startups.html

@@ -14,7 +14,7 @@
           {% assign incubator = incubators | where:'id', incubator_id | first %}
           { "id"        : "{{ startup.id | remove: '/startups/' }}"
           , "type"      : "startup"
-          , "phase": "{{ status }}"
+          , "phase": "{{ phase.status }}"
           , "incubator_id" : "{{startup.incubator}}"
           , "incubator_title": "{{ incubator.title }}"
           , "sponsors": [{% for sponsorId in startup.sponsors %}
@@ -171,25 +171,34 @@ <h3><span class="phase-counter">{{ counter }}</span> <span class="phase-label">{
 <script src="/assets/additional/js/search-startup.js" type="text/javascript"></script>
 <script>
   var urlParams = new URLSearchParams(window.location.search);
-  var incubatorValue = urlParams.get("incubateur");
-  var usertypesValue = urlParams.get("usertypes");
-  var thematiquesValue = urlParams.get("thematiques");
-  var nationalImpactValue = urlParams.get("national_impact");
-  data = generateDataWithHtmlCards(data);
-
-  document.querySelectorAll(".select-operateur").forEach((selectElement) => {
-    createIncubatorSelect(selectElement, data, incubators, incubatorValue);
+
+ const filters = {
+     excludeInvestigations: urlParams.get("exclude-investigations") == "true",
+     incubator: urlParams.get("incubateur"),
+     usertypes: urlParams.get("usertypes"),
+     thematiques: urlParams.get("thematiques"),
+     is_national_impact: urlParams.get("national_impact") == "true",
+ };
+
+ data = generateDataWithHtmlCards(data);
+
+ document.querySelectorAll(".select-operateur").forEach((selectElement) => {
+     createIncubatorSelect(selectElement, data, incubators);
   });
 
   document.querySelectorAll(".select-usertypes").forEach((selectElement) => {
-    createUsertypesSelect(selectElement, data, usertypesValue);
+    createUsertypesSelect(selectElement, data);
   });
 
   document.querySelectorAll(".select-thematiques").forEach((selectElement) => {
-    createThematiquesSelect(selectElement, data, thematiquesValue);
+    createThematiquesSelect(selectElement, data);
   });
 
-  document.querySelectorAll(".select-impact").forEach((selectElement) => {
-    createNationalImpactSelect(selectElement, data, nationalImpactValue);
+ document.querySelectorAll(".select-impact").forEach((selectElement) => {
+    createNationalImpactSelect(selectElement, data);
   });
+
+ setupExcludeInvestigations();
+
+ updateCards(data);
 </script>

assets/additional/js/search-startup.js

@@ -36,7 +36,13 @@ const THEMATIQUES = [
   "Travail / Emploi",
 ];
 
-const filters = [];
+function setLocationParam(param, value) {
+  const url = new URL(window.location);
+
+  url.searchParams.set(param, value);
+
+  history.replaceState(null, null, url);
+}
 
 const createStartupCard = (startup) => {
   const card = document.createElement("div");
@@ -116,9 +122,15 @@ const filterCards = (startups) => {
     )
     .filter((startup) =>
       filters.is_national_impact ? startupHasNationalImpact(startup) : true,
+    )
+    .filter((startup) =>
+      filters.excludeInvestigations ? startupIsNotInvestigation(startup) : true,
     );
 };
 
+const startupIsNotInvestigation = (startup) =>
+  startup.phase !== "investigation";
+
 const startupHasNationalImpact = (startup) =>
   startup.events.find((event) => event.name === "national_impact");
 
@@ -210,81 +222,62 @@ const updateCards = (data) => {
   }
 };
 
-const createIncubatorSelect = (selectElement, data, incubators, initValue) => {
+const createIncubatorSelect = (selectElement, data, incubators) => {
   const optionFragment = document.createDocumentFragment();
-  for (let i = 0; i < incubators.length; i++) {
-    const incubator = incubators[i];
+
+  for (const incubator of incubators) {
     const option = document.createElement("option");
     option.innerText = incubator.title;
     option.value = incubator.id;
     optionFragment.appendChild(option);
   }
+
   selectElement.appendChild(optionFragment);
+
   const onIncubatorChange = (value) => {
     filters.incubator = value;
-    const incubatorElements =
-      document.getElementsByClassName("incubator-header");
-    for (let i = 0; i < incubatorElements.length; i++) {
-      const incubatorElement = incubatorElements[i];
+
+    for (const incubatorElement of document.getElementsByClassName(
+      "incubator-header",
+    )) {
       if (incubatorElement.id !== value) {
         incubatorElement.style.display = "none";
       } else {
         incubatorElement.style.display = "block";
       }
     }
+
     updateCards(data);
   };
-  if (initValue) {
-    selectElement.value = initValue;
-    onIncubatorChange(initValue);
-  }
-  selectElement.addEventListener("change", (e) => {
-    const value = e.target.value;
-    onIncubatorChange(value);
-    const urlParams = new URLSearchParams(window.location.search);
-    urlParams.set("incubateur", value);
-    history.replaceState(
-      null,
-      null,
-      `${window.location.origin + window.location.pathname}?${urlParams}`,
-    );
-  });
+
+  if (filters.incubator) selectElement.value = filters.incubator;
+
+  selectElement.addEventListener("change", ({ target: { value } }) =>
+    updateFilters("incubator", "incubateur", value),
+  );
 };
 
-const createUsertypesSelect = (selectElement, data, initValue) => {
+const createUsertypesSelect = (selectElement, data) => {
   const optionFragment = document.createDocumentFragment();
   const usertypes = Object.keys(USERTYPES);
-  for (let i = 0; i < usertypes.length; i++) {
-    const usertypeKey = usertypes[i];
-    const usertypeLabel = USERTYPES[usertypeKey];
+
+  for (const [value, label] of Object.entries(USERTYPES)) {
     const option = document.createElement("option");
-    option.innerText = usertypeLabel;
-    option.value = usertypeKey;
+    option.innerText = label;
+    option.value = value;
     optionFragment.appendChild(option);
   }
+
   selectElement.appendChild(optionFragment);
-  const onUsertypesChange = (value) => {
-    filters.usertypes = value;
-    updateCards(data);
-  };
-  if (initValue) {
-    selectElement.value = initValue;
-    onUsertypesChange(initValue);
-  }
-  selectElement.addEventListener("change", (e) => {
-    const value = e.target.value;
-    onUsertypesChange(value);
-    const urlParams = new URLSearchParams(window.location.search);
-    urlParams.set("usertypes", value);
-    history.replaceState(
-      null,
-      null,
-      `${window.location.origin + window.location.pathname}?${urlParams}`,
-    );
-  });
+
+  if (filters.usertypes) selectElement.value = filters.usertypes;
+
+  selectElement.addEventListener("change", ({ target: { value } }) =>
+    updateFilters("usertypes", "usertypes", value),
+  );
 };
 
-const createThematiquesSelect = (selectElement, data, initValue) => {
+const createThematiquesSelect = (selectElement, data) => {
   const optionFragment = document.createDocumentFragment();
   for (const thematique of THEMATIQUES) {
     const option = document.createElement("option");
@@ -295,47 +288,35 @@ const createThematiquesSelect = (selectElement, data, initValue) => {
 
   selectElement.appendChild(optionFragment);
 
-  const onThematiquesChange = (value) => {
-    filters.thematiques = value;
-    updateCards(data);
-  };
-  if (initValue) {
-    selectElement.value = initValue;
-    onThematiquesChange(initValue);
-  }
-  selectElement.addEventListener("change", (e) => {
-    const value = e.target.value;
-    onThematiquesChange(value);
-    const urlParams = new URLSearchParams(window.location.search);
-    urlParams.set("thematiques", value);
-    history.replaceState(
-      null,
-      null,
-      `${window.location.origin + window.location.pathname}?${urlParams}`,
-    );
-  });
+  if (filters.thematiques) selectElement.value = filters.thematiques;
+
+  selectElement.addEventListener("change", ({ target: { value } }) =>
+    updateFilters("thematiques", "thematiques", value),
+  );
 };
 
-const createNationalImpactSelect = (selectElement, data, initValue) => {
-  const onNationalImpactChange = (value) => {
-    filters.is_national_impact = value;
-    updateCards(data);
-  };
-  if (initValue === "true") {
-    setTimeout(() => {
-      selectElement.checked = true;
-    }, 1000);
-    onNationalImpactChange(true);
-  }
-  selectElement.addEventListener("change", (e) => {
-    const value = selectElement.checked;
-    onNationalImpactChange(value);
-    const urlParams = new URLSearchParams(window.location.search);
-    urlParams.set("national_impact", value);
-    history.replaceState(
-      null,
-      null,
-      `${window.location.origin + window.location.pathname}?${urlParams}`,
-    );
-  });
+const createNationalImpactSelect = (selectElement, data) => {
+  selectElement.checked = filters.is_national_impact;
+
+  selectElement.addEventListener("change", ({ target: { checked: value } }) =>
+    updateFilters("is_national_impact", "national_impact", value),
+  );
 };
+
+function setupExcludeInvestigations() {
+  const toggle = document.getElementById("exclude-investigations-toggle");
+
+  toggle.checked = filters.excludeInvestigations;
+
+  toggle.addEventListener("change", ({ target: { checked: value } }) =>
+    updateFilters("excludeInvestigations", "exclude-investigations", value),
+  );
+}
+
+function updateFilters(filterName, paramName, value) {
+  filters[filterName] = value;
+
+  setLocationParam(paramName, value);
+
+  updateCards(data);
+}