diff --git a/jinja2/layout/turbo.html b/jinja2/layout/turbo.html
new file mode 100644
index 00000000..2aeee071
--- /dev/null
+++ b/jinja2/layout/turbo.html
@@ -0,0 +1,2 @@
+{% block content %}
+{% endblock content %}
diff --git a/jinja2/qfdmo/adresses.html b/jinja2/qfdmo/adresses.html
deleted file mode 100644
index 059d570a..00000000
--- a/jinja2/qfdmo/adresses.html
+++ /dev/null
@@ -1,61 +0,0 @@
-{% extends 'layout/base.html' %}
-
-{% block content %}
-
- {# Controleur général de gestion de la navigation et du formulaire #}
-
-
-
-
-
- {% include 'qfdmo/reparacteur_modale.html' %}
-{% endblock %}
diff --git a/jinja2/qfdmo/carte.html b/jinja2/qfdmo/carte.html
new file mode 100644
index 00000000..aac54c65
--- /dev/null
+++ b/jinja2/qfdmo/carte.html
@@ -0,0 +1,51 @@
+{% extends base_template %}
+
+{% block content %}
+
+ {# Controleur général de gestion de la navigation et du formulaire #}
+
+
+
+
+ {% include 'qfdmo/reparacteur_modale.html' %}
+{% endblock %}
diff --git a/jinja2/qfdmo/formulaire.html b/jinja2/qfdmo/formulaire.html
new file mode 100644
index 00000000..1c326dfd
--- /dev/null
+++ b/jinja2/qfdmo/formulaire.html
@@ -0,0 +1,41 @@
+{% extends 'layout/base.html' %}
+
+{% block content %}
+
+ {# Controleur général de gestion de la navigation et du formulaire #}
+
+
+
+
+ {% include 'qfdmo/reparacteur_modale.html' %}
+{% endblock %}
diff --git a/qfdmo/forms.py b/qfdmo/forms.py
index 6b3d027b..06fb5080 100644
--- a/qfdmo/forms.py
+++ b/qfdmo/forms.py
@@ -231,7 +231,7 @@ def load_choices(self, request: HttpRequest, **kwargs) -> None:
)
-class IframeAddressesForm(AddressesForm):
+class FormulaireForm(AddressesForm):
def load_choices(self, request: HttpRequest, **kwargs) -> None:
# The kwargs in function signature prevents type error.
# TODO : refacto forms : if AddressesForm and CarteAddressesForm
@@ -259,7 +259,7 @@ def load_choices(self, request: HttpRequest, **kwargs) -> None:
)
-class CarteAddressesForm(AddressesForm):
+class CarteForm(AddressesForm):
def load_choices(
self,
request: HttpRequest,
diff --git a/qfdmo/views/adresses.py b/qfdmo/views/adresses.py
index f8878494..affcb725 100644
--- a/qfdmo/views/adresses.py
+++ b/qfdmo/views/adresses.py
@@ -19,7 +19,7 @@
from django.views.generic.edit import FormView
from core.utils import get_direction
-from qfdmo.forms import CarteAddressesForm, IframeAddressesForm
+from qfdmo.forms import CarteForm, FormulaireForm
from qfdmo.geo_api import bbox_from_list_of_geojson, retrieve_epci_geojson
from qfdmo.leaflet import (
center_from_leaflet_bbox,
@@ -47,8 +47,24 @@
BAN_API_URL = "https://api-adresse.data.gouv.fr/search/?q={}"
-class AddressesView(FormView):
- template_name = "qfdmo/adresses.html"
+class TurboFormView(FormView):
+ def setup(self, request, *args, **kwargs):
+ super().setup(request, *args, **kwargs)
+ self.turbo = request.headers.get("Turbo-Frame")
+
+ def get_context_data(self, **kwargs):
+ context = super().get_context_data(**kwargs)
+ if self.turbo:
+ context.update(turbo=self.turbo)
+ context.update(base_template="layout/turbo.html")
+ else:
+ context.update(base_template="layout/base.html")
+
+ return context
+
+
+class AddressesView(TurboFormView):
+ template_name = "qfdmo/carte.html"
def get_initial(self):
initial = super().get_initial()
@@ -106,9 +122,10 @@ def setup(self, request, *args, **kwargs):
self.is_carte = request.GET.get("carte") is not None
if self.is_carte:
- self.form_class = CarteAddressesForm
+ self.form_class = CarteForm
else:
- self.form_class = IframeAddressesForm
+ self.form_class = FormulaireForm
+ self.template_name = "qfdmo/formulaire.html"
def get_form(self, form_class=None):
if self.request.GET & self.get_form_class().base_fields.keys():
diff --git a/static/to_compile/src/map_controller.ts b/static/to_compile/src/map_controller.ts
index cb619f06..3c0cc35a 100644
--- a/static/to_compile/src/map_controller.ts
+++ b/static/to_compile/src/map_controller.ts
@@ -62,15 +62,6 @@ export default class extends Controller {
mapChanged(event: CustomEvent) {
this.dispatch("updateBbox", { detail: event.detail })
- this.displaySearchInZoneButton()
- }
-
- displaySearchInZoneButton() {
- this.searchInZoneButtonTarget.classList.remove("qfdmo-hidden")
- }
-
- hideSearchInZoneButton() {
- this.searchInZoneButtonTarget.classList.add("qfdmo-hidden")
}
displayActorDetail(identifiantUnique: string) {
diff --git a/static/to_compile/src/search_solution_form_controller.ts b/static/to_compile/src/search_solution_form_controller.ts
index d2946a25..1bbdf62b 100644
--- a/static/to_compile/src/search_solution_form_controller.ts
+++ b/static/to_compile/src/search_solution_form_controller.ts
@@ -2,546 +2,535 @@ import { Controller } from "@hotwired/stimulus"
import { clearActivePinpoints } from "./map_helpers"
export default class extends Controller {
- #selectedOption: string = ""
- static targets = [
- "jai",
- "jecherche",
- "direction",
- "latitudeInput",
- "longitudeInput",
- "actionList",
- "searchForm",
- "reparerInput",
- "groupedActionInput",
-
- "bbox",
+ #selectedOption: string = ""
+ static targets = [
+ "jai",
+ "jecherche",
+ "direction",
+ "latitudeInput",
+ "longitudeInput",
+ "actionList",
+ "searchForm",
+ "reparerInput",
+ "groupedActionInput",
+
+ "bbox",
- "searchFormPanel",
- "addressesPanel",
- "backToSearchPanel",
- "detailsAddressPanel",
- "srcDetailsAddress",
- "proposeAddressPanel",
- "headerAddressPanel",
+ "searchFormPanel",
+ "addressesPanel",
+ "backToSearchPanel",
+ "detailsAddressPanel",
+ "srcDetailsAddress",
+ "proposeAddressPanel",
+ "headerAddressPanel",
- "expandDetailsButton",
- "collapseDetailsButton",
+ "expandDetailsButton",
+ "collapseDetailsButton",
- "sousCategoryObjetGroup",
- "sousCategoryObjetID",
- "sousCategoryObjetError",
+ "sousCategoryObjetGroup",
+ "sousCategoryObjetID",
+ "sousCategoryObjetError",
- "adresseGroup",
- "adresseError",
+ "adresseGroup",
+ "adresseError",
+
+ "advancedFiltersMainPanel",
+ "advancedFiltersSaveButton",
+ "advancedFiltersSaveAndSubmitButton",
+
+ "legendMainPanel",
+ "legendFormPanel",
+
+ "aProposMainPanel",
+ "aProposFormPanel",
+
+ "reparerFilter",
+
+ "carte",
+
+ //FIXME: should be renamed
+ "loadingSolutions",
+ "addressMissing",
+ "NoLocalSolution",
+ ]
+
+ declare readonly jaiTarget: HTMLElement
+ declare readonly jechercheTarget: HTMLElement
+ declare readonly directionTarget: HTMLElement
+ declare readonly latitudeInputTarget: HTMLInputElement
+ declare readonly longitudeInputTarget: HTMLInputElement
+ declare readonly actionListTarget: HTMLInputElement
+ declare readonly searchFormTarget: HTMLFormElement
+ declare readonly reparerInputTarget: HTMLInputElement
+ declare readonly groupedActionInputTargets: HTMLInputElement[]
+
+ declare readonly bboxTarget: HTMLInputElement
+
+ declare readonly hasDirectionTarget: boolean
+ declare readonly hasBboxTarget: boolean
+
+ declare readonly searchFormPanelTarget: HTMLElement
+ declare readonly addressesPanelTarget: HTMLElement
+ declare readonly backToSearchPanelTarget: HTMLElement
+ declare readonly detailsAddressPanelTarget: HTMLElement
+ declare readonly srcDetailsAddressTarget: HTMLElement
+ declare readonly proposeAddressPanelTarget: HTMLElement
+ declare readonly headerAddressPanelTarget: HTMLElement
+
+ declare readonly hasProposeAddressPanelTarget: boolean
+ declare readonly hasHeaderAddressPanelTarget: boolean
+
+ declare readonly expandDetailsButtonTarget: HTMLElement
+ declare readonly collapseDetailsButtonTarget: HTMLElement
+
+ declare readonly sousCategoryObjetGroupTarget: HTMLElement
+ declare readonly sousCategoryObjetIDTarget: HTMLInputElement
+ declare readonly sousCategoryObjetErrorTarget: HTMLElement
+
+ declare readonly adresseGroupTarget: HTMLElement
+ declare readonly adresseErrorTarget: HTMLElement
+
+ declare readonly advancedFiltersMainPanelTarget: HTMLElement
+ declare readonly advancedFiltersSaveButtonTarget: HTMLElement
+ declare readonly advancedFiltersSaveAndSubmitButtonTarget: HTMLElement
+
+ declare readonly legendMainPanelTarget: HTMLElement
+ declare readonly legendFormPanelTarget: HTMLElement
+ declare readonly hasLegendFormPanelTarget: boolean
+
+ declare readonly aProposMainPanelTarget: HTMLElement
+ declare readonly aProposFormPanelTarget: HTMLElement
+
+ declare readonly reparerFilterTargets: HTMLInputElement[]
+
+ declare readonly hasCarteTarget: boolean
- "advancedFiltersMainPanel",
- "advancedFiltersSaveButton",
- "advancedFiltersSaveAndSubmitButton",
+ declare readonly loadingSolutionsTarget: HTMLElement
+ declare readonly addressMissingTarget: HTMLElement
+ declare readonly NoLocalSolutionTarget: HTMLElement
- "legendMainPanel",
- "legendFormPanel",
+ static values = { isIframe: Boolean }
+ declare readonly isIframeValue: boolean
- "aProposMainPanel",
- "aProposFormPanel",
+ connect() {
+ this.displayActionList()
- "reparerFilter",
-
- "carte",
-
- //FIXME: should be renamed
- "loadingSolutions",
- "addressMissing",
- "NoLocalSolution",
- ]
-
- declare readonly jaiTarget: HTMLElement
- declare readonly jechercheTarget: HTMLElement
- declare readonly directionTarget: HTMLElement
- declare readonly latitudeInputTarget: HTMLInputElement
- declare readonly longitudeInputTarget: HTMLInputElement
- declare readonly actionListTarget: HTMLInputElement
- declare readonly searchFormTarget: HTMLFormElement
- declare readonly reparerInputTarget: HTMLInputElement
- declare readonly groupedActionInputTargets: HTMLInputElement[]
-
- declare readonly bboxTarget: HTMLInputElement
-
- declare readonly hasDirectionTarget: boolean
- declare readonly hasBboxTarget: boolean
-
- declare readonly searchFormPanelTarget: HTMLElement
- declare readonly addressesPanelTarget: HTMLElement
- declare readonly backToSearchPanelTarget: HTMLElement
- declare readonly detailsAddressPanelTarget: HTMLElement
- declare readonly srcDetailsAddressTarget: HTMLElement
- declare readonly proposeAddressPanelTarget: HTMLElement
- declare readonly headerAddressPanelTarget: HTMLElement
-
- declare readonly hasProposeAddressPanelTarget: boolean
- declare readonly hasHeaderAddressPanelTarget: boolean
-
- declare readonly expandDetailsButtonTarget: HTMLElement
- declare readonly collapseDetailsButtonTarget: HTMLElement
-
- declare readonly sousCategoryObjetGroupTarget: HTMLElement
- declare readonly sousCategoryObjetIDTarget: HTMLInputElement
- declare readonly sousCategoryObjetErrorTarget: HTMLElement
-
- declare readonly adresseGroupTarget: HTMLElement
- declare readonly adresseErrorTarget: HTMLElement
-
- declare readonly advancedFiltersMainPanelTarget: HTMLElement
- declare readonly advancedFiltersSaveButtonTarget: HTMLElement
- declare readonly advancedFiltersSaveAndSubmitButtonTarget: HTMLElement
-
- declare readonly legendMainPanelTarget: HTMLElement
- declare readonly legendFormPanelTarget: HTMLElement
- declare readonly hasLegendFormPanelTarget: boolean
-
- declare readonly aProposMainPanelTarget: HTMLElement
- declare readonly aProposFormPanelTarget: HTMLElement
-
- declare readonly reparerFilterTargets: HTMLInputElement[]
-
- declare readonly hasCarteTarget: boolean
-
- declare readonly loadingSolutionsTarget: HTMLElement
- declare readonly addressMissingTarget: HTMLElement
- declare readonly NoLocalSolutionTarget: HTMLElement
-
- static values = { isIframe: Boolean }
- declare readonly isIframeValue: boolean
-
- connect() {
- this.displayActionList()
-
- if (!this.isIframeValue) {
- this.scrollToContent()
- }
- }
-
- activeReparerFilters(activate: boolean = true) {
- // Carte mode
- this.activeReparerFiltersCarte()
-
- // Form mode
- this.activeReparerFiltersForm()
- }
-
- activeReparerFiltersForm() {
- if (this.groupedActionInputTargets.length == 0) {
- if (this.#selectedOption == "jai") {
- if (this.reparerInputTarget.checked) {
- this.reparerFilterTargets.forEach((element: HTMLInputElement) => {
- element.disabled = false
- })
- return
- }
- }
- this.reparerFilterTargets.forEach((element: HTMLInputElement) => {
- element.disabled = true
- })
- }
- }
-
- activeReparerFiltersCarte() {
- if (this.groupedActionInputTargets.length > 0) {
- let reparerFilterIsDisplayed = false
- this.groupedActionInputTargets.forEach((groupedActionInput) => {
- if (groupedActionInput.value == "reparer") {
- reparerFilterIsDisplayed = true
- this.reparerFilterTargets.forEach((element: HTMLInputElement) => {
- element.disabled = !groupedActionInput.checked
- })
- }
- return reparerFilterIsDisplayed
- })
- if (!reparerFilterIsDisplayed) {
- this.reparerFilterTargets.forEach((element: HTMLInputElement) => {
- element.disabled = true
- })
- }
- }
+ if (!this.isIframeValue) {
+ this.scrollToContent()
}
+ }
- scrollToContent() {
- this.searchFormTarget.scrollIntoView()
- }
-
- #hideAddressesPanel() {
- this.backToSearchPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
- this.addressesPanelTarget.dataset.visible = "false"
- }
-
- #showAddressesPanel() {
- this.addressesPanelTarget.dataset.visible = "true"
- }
-
- backToSearch() {
- this.hideDetails()
- this.#showSearchFormPanel()
- this.#hideAddressesPanel()
- this.scrollToContent()
- }
-
- displayDetails() {
- // mobile
- this.detailsAddressPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
- this.detailsAddressPanelTarget.classList.remove("qfdmo-h-full")
- this.detailsAddressPanelTarget.classList.add("qfdmo-h-1/2")
- if (this.hasProposeAddressPanelTarget) {
- this.proposeAddressPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
- }
- if (this.hasHeaderAddressPanelTarget)
- this.headerAddressPanelTarget.classList.remove(
- "qfdmo-h-0",
- "qfdmo-invisible",
- )
- this.collapseDetailsButtonTarget.classList.add("qfdmo-hidden")
- this.expandDetailsButtonTarget.classList.remove("qfdmo-hidden")
- // desktop
- this.detailsAddressPanelTarget.classList.add("sm:qfdmo-w-[480]")
- this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-full")
- this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-0")
-
- setTimeout(() => {
- this.detailsAddressPanelTarget.focus()
- }, 100)
- }
-
- updateBboxInput(event) {
- this.bboxTarget.value = JSON.stringify(event.detail)
- }
-
- hideDetails() {
- document
- .querySelector("[aria-controls=detailsAddressPanel][aria-expanded=true]")
- ?.setAttribute("aria-expanded", "false")
-
- // mobile
- this.detailsAddressPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
- this.detailsAddressPanelTarget.classList.remove("qfdmo-h-full")
- this.detailsAddressPanelTarget.classList.remove("qfdmo-h-1/2")
- if (this.hasProposeAddressPanelTarget) {
- this.proposeAddressPanelTarget.classList.remove(
- "qfdmo-h-0",
- "qfdmo-invisible",
- )
- }
- if (this.hasHeaderAddressPanelTarget)
- this.headerAddressPanelTarget.classList.remove(
- "qfdmo-h-0",
- "qfdmo-invisible",
- )
- // desktop
- this.detailsAddressPanelTarget.classList.add("sm:qfdmo-w-0")
- this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-full")
- this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-[480]")
- clearActivePinpoints()
- }
+ activeReparerFilters(activate: boolean = true) {
+ // Carte mode
+ this.activeReparerFiltersCarte()
- displayFullDetails() {
- // mobile
- this.detailsAddressPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
- this.detailsAddressPanelTarget.classList.remove("qfdmo-h-1/2")
- this.detailsAddressPanelTarget.classList.add("qfdmo-h-full")
- if (this.hasProposeAddressPanelTarget) {
- this.proposeAddressPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
- }
- if (this.hasHeaderAddressPanelTarget)
- this.headerAddressPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
- this.collapseDetailsButtonTarget.classList.remove("qfdmo-hidden")
- this.expandDetailsButtonTarget.classList.add("qfdmo-hidden")
- // desktop
- this.detailsAddressPanelTarget.classList.add("sm:qfdmo-w-full")
- this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-0")
- this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-[480]")
- }
-
- displayActeurDetails(event) {
- const identifiantUnique = event.currentTarget.dataset.identifiantUnique
- document
- .querySelector(
- "[aria-controls='detailsAddressPanel'][aria-expanded='true']",
- )
- ?.setAttribute("aria-expanded", "false")
- event.currentTarget.setAttribute("aria-expanded", "true")
-
- this.setSrcDetailsAddress({ detail: { identifiantUnique } })
- this.displayDetails()
- }
- setSrcDetailsAddress({ detail: { identifiantUnique } }) {
- const latitude = this.latitudeInputTarget.value
- const longitude = this.longitudeInputTarget.value
-
- const params = new URLSearchParams()
- params.set("direction", this.#selectedOption)
- params.set("latitude", latitude)
- params.set("longitude", longitude)
- if (this.hasCarteTarget) {
- params.set("carte", "1")
- }
- const srcDetailsAddress = `/adresse/${identifiantUnique}?${params.toString()}`
-
- this.srcDetailsAddressTarget.setAttribute("src", srcDetailsAddress)
- }
-
- displayActionList() {
- if (!this.hasDirectionTarget) {
- return
- }
- const direction = this.directionTarget
- // In "La Carte" mode, the direction is a hidden input
- if (direction instanceof HTMLInputElement) {
- this.#selectedOption = direction.value
- return
- }
- // In form mode, the direction is a fieldset
- const options = direction.getElementsByTagName("input")
- for (let i = 0; i < options.length; i++) {
- if (options[i].checked && options[i].value == "jai") {
- this.#selectedOption = "jai"
- this.jechercheTarget.hidden = true
- this.jaiTarget.hidden = false
- }
- if (options[i].checked && options[i].value == "jecherche") {
- this.#selectedOption = "jecherche"
- this.jechercheTarget.hidden = false
- this.jaiTarget.hidden = true
- }
- }
- this.activeReparerFilters()
- }
-
- apply() {
- const direction = this.directionTarget
- const options = direction.getElementsByTagName("input")
- for (let i = 0; i < options.length; i++) {
- options[i].checked = options[i].value == this.#selectedOption
- }
+ // Form mode
+ this.activeReparerFiltersForm()
+ }
- let actionList: string[] = []
- if (this.#selectedOption == "jai" || this.#selectedOption == "jecherche") {
- const target =
- this.#selectedOption == "jai" ? this.jaiTarget : this.jechercheTarget
- actionList = this.#setActionList(target)
- }
- this.actionListTarget.value = actionList.join("|")
- }
-
- #setActionList(target: HTMLElement): string[] {
- const actionInput = target.getElementsByTagName("input")
- let actionList: string[] = []
- for (let i = 0; i < actionInput.length; i++) {
- if (actionInput[i].checked) {
- const name = actionInput[i].getAttribute("name")
- if (name) {
- actionList.push(name)
- }
- }
- }
- return actionList
- }
-
- applyLegendGroupedAction(event: Event) {
- const eventTarget = event.target as HTMLInputElement
- this.groupedActionInputTargets.forEach((groupedActionInput) => {
- if (groupedActionInput.value === eventTarget.value) {
- groupedActionInput.checked = eventTarget.checked
- }
- })
- // Mode Carte
- this.activeReparerFiltersCarte()
- this.advancedSubmit(event)
- }
-
- changeDirection() {
- this.actionListTarget.value = ""
- this.displayActionList()
- this.apply()
- }
-
- checkSsCatObjetErrorForm(): boolean {
- let errorExists = false
- if (!this.sousCategoryObjetIDTarget.value) {
- this.sousCategoryObjetGroupTarget.classList.add("fr-input-group--error")
- this.sousCategoryObjetErrorTarget.classList.remove("qfdmo-hidden")
- errorExists = true
- } else {
- this.sousCategoryObjetGroupTarget.classList.remove("fr-input-group--error")
- this.sousCategoryObjetErrorTarget.classList.add("qfdmo-hidden")
- }
- return errorExists
- }
-
- checkAdresseErrorForm(): boolean {
- let errorExists = false
- if (!this.latitudeInputTarget.value || !this.longitudeInputTarget.value) {
- this.adresseGroupTarget.classList.add("fr-input-group--error")
- this.adresseErrorTarget.classList.remove("qfdmo-hidden")
- errorExists = true
- } else {
- this.adresseGroupTarget.classList.remove("fr-input-group--error")
- this.adresseErrorTarget.classList.add("qfdmo-hidden")
- }
- return errorExists
- }
-
- #checkErrorForm(): boolean {
- let errorExists = false
- if (this.checkSsCatObjetErrorForm()) errorExists ||= true
- if (this.checkAdresseErrorForm()) errorExists ||= true
- return errorExists
- }
-
- toggleAdvancedFiltersWithSubmitButton() {
- this.advancedFiltersSaveAndSubmitButtonTarget.classList.remove("qfdmo-hidden")
- this.advancedFiltersSaveButtonTarget.classList.add("qfdmo-hidden")
- this.#toggleAdvancedFilters()
- }
-
- toggleAdvancedFiltersWithoutSubmitButton() {
- this.advancedFiltersSaveAndSubmitButtonTarget.classList.add("qfdmo-hidden")
- this.advancedFiltersSaveButtonTarget.classList.remove("qfdmo-hidden")
- this.#toggleAdvancedFilters()
- }
-
- #toggleAdvancedFilters() {
- if (this.advancedFiltersMainPanelTarget.dataset.visible === "false") {
- this.#showAdvancedFilters()
- } else {
- this.#hideAdvancedFilters()
- }
- this.scrollToContent()
- }
-
- #showAdvancedFilters() {
- this.advancedFiltersMainPanelTarget.dataset.visible = "true"
- this.advancedFiltersMainPanelTarget.addEventListener(
- "animationend",
- () => {
- this.advancedFiltersMainPanelTarget.focus()
- },
- { once: true },
- )
- }
-
- #hideAdvancedFilters() {
- if (this.advancedFiltersMainPanelTarget.dataset.visible == "false") {
+ activeReparerFiltersForm() {
+ if (this.groupedActionInputTargets.length == 0) {
+ if (this.#selectedOption == "jai") {
+ if (this.reparerInputTarget.checked) {
+ this.reparerFilterTargets.forEach((element: HTMLInputElement) => {
+ element.disabled = false
+ })
return
}
-
- this.advancedFiltersMainPanelTarget.dataset.visible = "exit"
- this.advancedFiltersMainPanelTarget.addEventListener(
- "animationend",
- () => {
- this.advancedFiltersMainPanelTarget.dataset.visible = "false"
- },
- { once: true },
- )
- }
-
- toggleLegend() {
- if (this.legendMainPanelTarget.classList.contains("qfdmo-hidden")) {
- this.#showLegend()
- } else {
- this.#hideLegend()
- }
- this.scrollToContent()
- }
-
- #showLegend() {
- this.legendMainPanelTarget.classList.remove("qfdmo-hidden")
- setTimeout(() => {
- this.legendFormPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
- this.legendFormPanelTarget.classList.add("qfdmo-h-[95%]")
- }, 100)
- }
-
- #hideLegend() {
- if (this.hasLegendFormPanelTarget) {
- this.legendFormPanelTarget.classList.remove("qfdmo-h-[95%]")
- this.legendFormPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
- setTimeout(() => {
- this.legendMainPanelTarget.classList.add("qfdmo-hidden")
- }, 300)
- }
- }
-
- #showSearchFormPanel() {
- this.searchFormPanelTarget.classList.add("qfdmo-flex-grow")
- this.searchFormPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
- }
-
- #hideSearchFormPanel() {
- this.searchFormPanelTarget.dataset.visible = "false"
- this.searchFormPanelTarget.classList.remove("qfdmo-flex-grow")
- this.searchFormPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
- }
-
- advancedSubmit(event: Event) {
- const withControls =
- (event.target as HTMLElement).dataset.withControls?.toLowerCase() === "true"
- if (withControls) {
- if (this.#checkErrorForm()) return
+ }
+ this.reparerFilterTargets.forEach((element: HTMLInputElement) => {
+ element.disabled = true
+ })
+ }
+ }
+
+ activeReparerFiltersCarte() {
+ if (this.groupedActionInputTargets.length > 0) {
+ let reparerFilterIsDisplayed = false
+ this.groupedActionInputTargets.forEach((groupedActionInput) => {
+ if (groupedActionInput.value == "reparer") {
+ reparerFilterIsDisplayed = true
+ this.reparerFilterTargets.forEach((element: HTMLInputElement) => {
+ element.disabled = !groupedActionInput.checked
+ })
}
-
- const withoutZone =
- (event.target as HTMLElement).dataset.withoutZone?.toLowerCase() === "true"
- if (withoutZone) {
- if (this.hasBboxTarget) {
- this.bboxTarget.value = ""
- }
- }
-
- const withDynamicFormPanel =
- (
- event.target as HTMLElement
- ).dataset.withDynamicFormPanel?.toLowerCase() === "true"
- if (withDynamicFormPanel) {
- this.#hideSearchFormPanel()
- this.backToSearchPanelTarget.classList.remove(
- "qfdmo-h-0",
- "qfdmo-invisible",
- )
- this.#showAddressesPanel()
- this.scrollToContent()
- }
-
- this.loadingSolutionsTarget.classList.remove("qfdmo-hidden")
- this.addressMissingTarget.classList.add("qfdmo-hidden")
- this.NoLocalSolutionTarget.classList.add("qfdmo-hidden")
- this.#hideAdvancedFilters()
- this.#hideLegend()
-
- let submitEvent = new Event("submit", { bubbles: true, cancelable: true })
- setTimeout(() => {
- this.searchFormTarget.dispatchEvent(submitEvent)
- }, 300)
- }
-
- toggleAPropos() {
- if (this.aProposMainPanelTarget.classList.contains("qfdmo-hidden")) {
- this.#showAPropos()
- } else {
- this.#hideAPropos()
+ return reparerFilterIsDisplayed
+ })
+ if (!reparerFilterIsDisplayed) {
+ this.reparerFilterTargets.forEach((element: HTMLInputElement) => {
+ element.disabled = true
+ })
+ }
+ }
+ }
+
+ scrollToContent() {
+ this.searchFormTarget.scrollIntoView()
+ }
+
+ #hideAddressesPanel() {
+ this.backToSearchPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
+ this.addressesPanelTarget.dataset.visible = "false"
+ }
+
+ #showAddressesPanel() {
+ this.addressesPanelTarget.dataset.visible = "true"
+ }
+
+ backToSearch() {
+ this.hideDetails()
+ this.#showSearchFormPanel()
+ this.#hideAddressesPanel()
+ this.scrollToContent()
+ }
+
+ displayDetails() {
+ // mobile
+ this.detailsAddressPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
+ this.detailsAddressPanelTarget.classList.remove("qfdmo-h-full")
+ this.detailsAddressPanelTarget.classList.add("qfdmo-h-1/2")
+ if (this.hasProposeAddressPanelTarget) {
+ this.proposeAddressPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
+ }
+ if (this.hasHeaderAddressPanelTarget)
+ this.headerAddressPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
+ this.collapseDetailsButtonTarget.classList.add("qfdmo-hidden")
+ this.expandDetailsButtonTarget.classList.remove("qfdmo-hidden")
+ // desktop
+ this.detailsAddressPanelTarget.classList.add("sm:qfdmo-w-[480]")
+ this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-full")
+ this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-0")
+
+ setTimeout(() => {
+ this.detailsAddressPanelTarget.focus()
+ }, 100)
+ }
+
+ updateBboxInput(event) {
+ this.bboxTarget.value = JSON.stringify(event.detail)
+ this.#submit()
+ }
+
+ hideDetails() {
+ document
+ .querySelector("[aria-controls=detailsAddressPanel][aria-expanded=true]")
+ ?.setAttribute("aria-expanded", "false")
+
+ // mobile
+ this.detailsAddressPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
+ this.detailsAddressPanelTarget.classList.remove("qfdmo-h-full")
+ this.detailsAddressPanelTarget.classList.remove("qfdmo-h-1/2")
+ if (this.hasProposeAddressPanelTarget) {
+ this.proposeAddressPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
+ }
+ if (this.hasHeaderAddressPanelTarget)
+ this.headerAddressPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
+ // desktop
+ this.detailsAddressPanelTarget.classList.add("sm:qfdmo-w-0")
+ this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-full")
+ this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-[480]")
+ clearActivePinpoints()
+ }
+
+ displayFullDetails() {
+ // mobile
+ this.detailsAddressPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
+ this.detailsAddressPanelTarget.classList.remove("qfdmo-h-1/2")
+ this.detailsAddressPanelTarget.classList.add("qfdmo-h-full")
+ if (this.hasProposeAddressPanelTarget) {
+ this.proposeAddressPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
+ }
+ if (this.hasHeaderAddressPanelTarget)
+ this.headerAddressPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
+ this.collapseDetailsButtonTarget.classList.remove("qfdmo-hidden")
+ this.expandDetailsButtonTarget.classList.add("qfdmo-hidden")
+ // desktop
+ this.detailsAddressPanelTarget.classList.add("sm:qfdmo-w-full")
+ this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-0")
+ this.detailsAddressPanelTarget.classList.remove("sm:qfdmo-w-[480]")
+ }
+
+ displayActeurDetails(event) {
+ const identifiantUnique = event.currentTarget.dataset.identifiantUnique
+ document
+ .querySelector("[aria-controls='detailsAddressPanel'][aria-expanded='true']")
+ ?.setAttribute("aria-expanded", "false")
+ event.currentTarget.setAttribute("aria-expanded", "true")
+
+ this.setSrcDetailsAddress({ detail: { identifiantUnique } })
+ this.displayDetails()
+ }
+ setSrcDetailsAddress({ detail: { identifiantUnique } }) {
+ const latitude = this.latitudeInputTarget.value
+ const longitude = this.longitudeInputTarget.value
+
+ const params = new URLSearchParams()
+ params.set("direction", this.#selectedOption)
+ params.set("latitude", latitude)
+ params.set("longitude", longitude)
+ if (this.hasCarteTarget) {
+ params.set("carte", "1")
+ }
+ const srcDetailsAddress = `/adresse/${identifiantUnique}?${params.toString()}`
+
+ this.srcDetailsAddressTarget.setAttribute("src", srcDetailsAddress)
+ }
+
+ displayActionList() {
+ if (!this.hasDirectionTarget) {
+ return
+ }
+ const direction = this.directionTarget
+ // In "La Carte" mode, the direction is a hidden input
+ if (direction instanceof HTMLInputElement) {
+ this.#selectedOption = direction.value
+ return
+ }
+ // In form mode, the direction is a fieldset
+ const options = direction.getElementsByTagName("input")
+ for (let i = 0; i < options.length; i++) {
+ if (options[i].checked && options[i].value == "jai") {
+ this.#selectedOption = "jai"
+ this.jechercheTarget.hidden = true
+ this.jaiTarget.hidden = false
+ }
+ if (options[i].checked && options[i].value == "jecherche") {
+ this.#selectedOption = "jecherche"
+ this.jechercheTarget.hidden = false
+ this.jaiTarget.hidden = true
+ }
+ }
+ this.activeReparerFilters()
+ }
+
+ apply() {
+ const direction = this.directionTarget
+ const options = direction.getElementsByTagName("input")
+ for (let i = 0; i < options.length; i++) {
+ options[i].checked = options[i].value == this.#selectedOption
+ }
+
+ let actionList: string[] = []
+ if (this.#selectedOption == "jai" || this.#selectedOption == "jecherche") {
+ const target =
+ this.#selectedOption == "jai" ? this.jaiTarget : this.jechercheTarget
+ actionList = this.#setActionList(target)
+ }
+ this.actionListTarget.value = actionList.join("|")
+ }
+
+ #setActionList(target: HTMLElement): string[] {
+ const actionInput = target.getElementsByTagName("input")
+ let actionList: string[] = []
+ for (let i = 0; i < actionInput.length; i++) {
+ if (actionInput[i].checked) {
+ const name = actionInput[i].getAttribute("name")
+ if (name) {
+ actionList.push(name)
}
- this.scrollToContent()
- }
-
- #showAPropos() {
- this.aProposMainPanelTarget.classList.remove("qfdmo-hidden")
- setTimeout(() => {
- this.aProposFormPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
- this.aProposFormPanelTarget.classList.add("qfdmo-h-[95%]")
- }, 100)
- }
-
- #hideAPropos() {
- this.aProposFormPanelTarget.classList.remove("qfdmo-h-[95%]")
- this.aProposFormPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
- setTimeout(() => {
- this.aProposMainPanelTarget.classList.add("qfdmo-hidden")
- }, 300)
- }
+ }
+ }
+ return actionList
+ }
+
+ applyLegendGroupedAction(event: Event) {
+ const eventTarget = event.target as HTMLInputElement
+ this.groupedActionInputTargets.forEach((groupedActionInput) => {
+ if (groupedActionInput.value === eventTarget.value) {
+ groupedActionInput.checked = eventTarget.checked
+ }
+ })
+ // Mode Carte
+ this.activeReparerFiltersCarte()
+ this.advancedSubmit(event)
+ }
+
+ changeDirection() {
+ this.actionListTarget.value = ""
+ this.displayActionList()
+ this.apply()
+ }
+
+ checkSsCatObjetErrorForm(): boolean {
+ let errorExists = false
+ if (!this.sousCategoryObjetIDTarget.value) {
+ this.sousCategoryObjetGroupTarget.classList.add("fr-input-group--error")
+ this.sousCategoryObjetErrorTarget.classList.remove("qfdmo-hidden")
+ errorExists = true
+ } else {
+ this.sousCategoryObjetGroupTarget.classList.remove("fr-input-group--error")
+ this.sousCategoryObjetErrorTarget.classList.add("qfdmo-hidden")
+ }
+ return errorExists
+ }
+
+ checkAdresseErrorForm(): boolean {
+ let errorExists = false
+ if (!this.latitudeInputTarget.value || !this.longitudeInputTarget.value) {
+ this.adresseGroupTarget.classList.add("fr-input-group--error")
+ this.adresseErrorTarget.classList.remove("qfdmo-hidden")
+ errorExists = true
+ } else {
+ this.adresseGroupTarget.classList.remove("fr-input-group--error")
+ this.adresseErrorTarget.classList.add("qfdmo-hidden")
+ }
+ return errorExists
+ }
+
+ #checkErrorForm(): boolean {
+ let errorExists = false
+ if (this.checkSsCatObjetErrorForm()) errorExists ||= true
+ if (this.checkAdresseErrorForm()) errorExists ||= true
+ return errorExists
+ }
+
+ toggleAdvancedFiltersWithSubmitButton() {
+ this.advancedFiltersSaveAndSubmitButtonTarget.classList.remove("qfdmo-hidden")
+ this.advancedFiltersSaveButtonTarget.classList.add("qfdmo-hidden")
+ this.#toggleAdvancedFilters()
+ }
+
+ toggleAdvancedFiltersWithoutSubmitButton() {
+ this.advancedFiltersSaveAndSubmitButtonTarget.classList.add("qfdmo-hidden")
+ this.advancedFiltersSaveButtonTarget.classList.remove("qfdmo-hidden")
+ this.#toggleAdvancedFilters()
+ }
+
+ #toggleAdvancedFilters() {
+ if (this.advancedFiltersMainPanelTarget.dataset.visible === "false") {
+ this.#showAdvancedFilters()
+ } else {
+ this.#hideAdvancedFilters()
+ }
+ this.scrollToContent()
+ }
+
+ #showAdvancedFilters() {
+ this.advancedFiltersMainPanelTarget.dataset.visible = "true"
+ this.advancedFiltersMainPanelTarget.addEventListener(
+ "animationend",
+ () => {
+ this.advancedFiltersMainPanelTarget.focus()
+ },
+ { once: true },
+ )
+ }
+
+ #hideAdvancedFilters() {
+ if (this.advancedFiltersMainPanelTarget.dataset.visible == "false") {
+ return
+ }
+
+ this.advancedFiltersMainPanelTarget.dataset.visible = "exit"
+ this.advancedFiltersMainPanelTarget.addEventListener(
+ "animationend",
+ () => {
+ this.advancedFiltersMainPanelTarget.dataset.visible = "false"
+ },
+ { once: true },
+ )
+ }
+
+ toggleLegend() {
+ if (this.legendMainPanelTarget.classList.contains("qfdmo-hidden")) {
+ this.#showLegend()
+ } else {
+ this.#hideLegend()
+ }
+ this.scrollToContent()
+ }
+
+ #showLegend() {
+ this.legendMainPanelTarget.classList.remove("qfdmo-hidden")
+ setTimeout(() => {
+ this.legendFormPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
+ this.legendFormPanelTarget.classList.add("qfdmo-h-[95%]")
+ }, 100)
+ }
+
+ #hideLegend() {
+ if (this.hasLegendFormPanelTarget) {
+ this.legendFormPanelTarget.classList.remove("qfdmo-h-[95%]")
+ this.legendFormPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
+ setTimeout(() => {
+ this.legendMainPanelTarget.classList.add("qfdmo-hidden")
+ }, 300)
+ }
+ }
+
+ #showSearchFormPanel() {
+ this.searchFormPanelTarget.classList.add("qfdmo-flex-grow")
+ this.searchFormPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
+ }
+
+ #hideSearchFormPanel() {
+ this.searchFormPanelTarget.dataset.visible = "false"
+ this.searchFormPanelTarget.classList.remove("qfdmo-flex-grow")
+ this.searchFormPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
+ }
+
+ advancedSubmit(event: Event) {
+ const withControls =
+ (event.target as HTMLElement).dataset.withControls?.toLowerCase() === "true"
+ if (withControls) {
+ if (this.#checkErrorForm()) return
+ }
+
+ const withoutZone =
+ (event.target as HTMLElement).dataset.withoutZone?.toLowerCase() === "true"
+ if (withoutZone) {
+ if (this.hasBboxTarget) {
+ this.bboxTarget.value = ""
+ }
+ }
+
+ const withDynamicFormPanel =
+ (event.target as HTMLElement).dataset.withDynamicFormPanel?.toLowerCase() ===
+ "true"
+ if (withDynamicFormPanel) {
+ this.#hideSearchFormPanel()
+ this.backToSearchPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
+ this.#showAddressesPanel()
+ this.scrollToContent()
+ }
+
+ this.loadingSolutionsTarget.classList.remove("qfdmo-hidden")
+ this.addressMissingTarget.classList.add("qfdmo-hidden")
+ this.NoLocalSolutionTarget.classList.add("qfdmo-hidden")
+ this.#hideAdvancedFilters()
+ this.#hideLegend()
+ this.#submit()
+ }
+
+ #submit() {
+ let submitEvent = new Event("submit", { bubbles: true, cancelable: true })
+ setTimeout(() => {
+ this.searchFormTarget.dispatchEvent(submitEvent)
+ }, 300)
+ }
+
+ toggleAPropos() {
+ if (this.aProposMainPanelTarget.classList.contains("qfdmo-hidden")) {
+ this.#showAPropos()
+ } else {
+ this.#hideAPropos()
+ }
+ this.scrollToContent()
+ }
+
+ #showAPropos() {
+ this.aProposMainPanelTarget.classList.remove("qfdmo-hidden")
+ setTimeout(() => {
+ this.aProposFormPanelTarget.classList.remove("qfdmo-h-0", "qfdmo-invisible")
+ this.aProposFormPanelTarget.classList.add("qfdmo-h-[95%]")
+ }, 100)
+ }
+
+ #hideAPropos() {
+ this.aProposFormPanelTarget.classList.remove("qfdmo-h-[95%]")
+ this.aProposFormPanelTarget.classList.add("qfdmo-h-0", "qfdmo-invisible")
+ setTimeout(() => {
+ this.aProposMainPanelTarget.classList.add("qfdmo-hidden")
+ }, 300)
+ }
}