Skip to content

Commit

Permalink
Merge pull request #2616 from MTES-MCT/fix/2601-ban-event
Browse files Browse the repository at this point in the history 
[Signalement] Modification des événements qui mettent à jour le code Insee de l'adresse des occupants
  • Loading branch information
@hmeneuvrier
hmeneuvrier committed May 31, 2024
2 parents f0368b8 + 2881604 commit 27f0399
Show file tree
Hide file tree
Showing 10 changed files with 120 additions and 128 deletions.
43 changes: 12 additions & 31 deletions assets/controllers/component_search_address.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,9 @@ document.querySelectorAll('[data-fr-adresse-autocomplete]').forEach((inputAdress
attacheAutocompleteAddressEvent(inputAdresse)
})

document.querySelector('#form-edit-address-adresse')?.addEventListener('input', (event) => {
let idForm = event.target.closest('form').id
document.querySelector('#' + idForm + ' [data-autocomplete-manual]').value = 1
});
document.querySelector('#form-edit-address-codepostal')?.addEventListener('input', (event) => addressResetGeoloc(event.target));
document.querySelector('#form-edit-address-ville')?.addEventListener('input', (event) => addressResetGeoloc(event.target));
document.querySelector('#form-edit-address-adresse')?.addEventListener('input', (event) => setManualEdit(event.target, false));
document.querySelector('#form-edit-address-codepostal')?.addEventListener('input', (event) => setManualEdit(event.target, true));
document.querySelector('#form-edit-address-ville')?.addEventListener('input', (event) => setManualEdit(event.target, true));

function attachAutocompleteClickOutsideEvent() {
document.addEventListener('click', function (event) {
Expand Down Expand Up @@ -98,6 +95,9 @@ function attachAddressSuggestionEvent(inputAdresse, suggestion, feature) {
if (document?.querySelector('#' + idForm + ' [data-autocomplete-manual]')) {
document.querySelector('#' + idForm + ' [data-autocomplete-manual]').value = 0
}
if (document?.querySelector('#' + idForm + ' [data-autocomplete-need-reset-insee]')) {
document.querySelector('#' + idForm + ' [data-autocomplete-need-reset-insee]').value = 0
}
if (document?.querySelector('#' + idForm + ' [data-autocomplete-insee]')) {
document.querySelector('#' + idForm + ' [data-autocomplete-insee]').value = feature.properties.citycode
}
Expand All @@ -112,29 +112,10 @@ function attachAddressSuggestionEvent(inputAdresse, suggestion, feature) {
})
}

var idTimeout
function addressResetGeoloc(input) {
clearTimeout(idTimeout)
idTimeout = setTimeout(() => {
const apiAdresse = 'https://api-adresse.data.gouv.fr/search/?q='
let newCodePostal = document.querySelector('#form-edit-address-codepostal')?.value
let newVille = document.querySelector('#form-edit-address-ville')?.value
let idForm = input.closest('form').id
if (newCodePostal !== '' && newVille !== '') {
let query = apiAdresse + newCodePostal + ' ' + newVille
fetch(query)
.then(response => response.json())
.then(json => {
json.features.forEach((feature) => {
if (feature.properties.citycode) {
document.querySelector('#' + idForm + ' [data-autocomplete-ville]').value = feature.properties.city
document.querySelector('#' + idForm + ' [data-autocomplete-manual]').value = 1
document.querySelector('#' + idForm + ' [data-autocomplete-insee]').value = feature.properties.citycode
document.querySelector('#' + idForm + ' [data-autocomplete-geoloclng]').value = feature.geometry.coordinates[0]
document.querySelector('#' + idForm + ' [data-autocomplete-geoloclat]').value = feature.geometry.coordinates[1]
}
})
})
}
}, 1000)
function setManualEdit(input, needResetInsee) {
let idForm = input.closest('form').id
document.querySelector('#' + idForm + ' [data-autocomplete-manual]').value = 1
if (needResetInsee) {
document.querySelector('#' + idForm + ' [data-autocomplete-need-reset-insee]').value = 1
}
}
5 changes: 2 additions & 3 deletions assets/json/Signalement/questions_profile_tous.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,7 @@
"type": "SignalementFormAddress",
"label": "Adresse du logement",
"slug": "adresse_logement_adresse",
"description": "Tapez l'adresse puis sélectionnez-la dans la liste. Si elle n'apparait pas, cliquez sur Saisir une adresse manuellement.",
"isTerritoryToCheck": true
"description": "Tapez l'adresse puis sélectionnez-la dans la liste. Si elle n'apparait pas, cliquez sur Saisir une adresse manuellement."
},
{
"type": "SignalementFormSubscreen",
Expand Down Expand Up @@ -151,7 +150,7 @@
"type": "SignalementFormButton",
"label": "Suivant",
"slug": "adresse_logement_next",
"action": "goto.save:signalement_concerne",
"action": "goto.checkloc:signalement_concerne",
"customCss": "fr-btn--icon-right fr-icon-arrow-right-line"
}
]
Expand Down
61 changes: 59 additions & 2 deletions assets/vue/components/signalement-form/TheSignalementAppForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,12 @@
<button type="submit" class="hidden-submit">Submit</button>
</form>
</div>
<SignalementFormModal
v-model="isTerritoryModalOpen"
id="check_territory_modal"
:label="territoryModalLabel"
:description="territoryModalDescription"
/>
</div>
<SignalementFormModalAlreadyExists
:mailSentEvent="saveAndChangeScreenBySlug"
Expand All @@ -68,6 +74,7 @@ import * as Sentry from '@sentry/browser'
import { profileUpdater } from './services/profileUpdater'
import SignalementFormScreen from './components/SignalementFormScreen.vue'
import SignalementFormBreadCrumbs from './components/SignalementFormBreadCrumbs.vue'
import SignalementFormModal from './components/SignalementFormModal.vue'
import SignalementFormModalAlreadyExists from './components/SignalementFormModalAlreadyExists.vue'
const initElements:any = document.querySelector('#app-signalement-form')
Expand All @@ -76,6 +83,7 @@ export default defineComponent({
components: {
SignalementFormScreen,
SignalementFormBreadCrumbs,
SignalementFormModal,
SignalementFormModalAlreadyExists
},
data () {
Expand All @@ -87,7 +95,10 @@ export default defineComponent({
isLoadingInit: true,
formStore,
dictionaryStore,
sharedProps: formStore.props
sharedProps: formStore.props,
isTerritoryModalOpen: false,
territoryModalLabel: '',
territoryModalDescription: ''
}
},
created () {
Expand Down Expand Up @@ -147,14 +158,24 @@ export default defineComponent({
}
}
},
saveAndChangeScreenBySlug (slug:string, isSaveAndCheck:boolean) {
saveAndChangeScreenBySlug (slug:string, isSaveAndCheck:boolean, isCheckLocation:boolean = false) {
this.nextSlug = slug
if (isSaveAndCheck) {
if (formStore.data.uuidSignalementDraft === '') {
requests.checkIfAlreadyExists(this.showDraftModalOrNot)
} else {
requests.saveSignalementDraft(this.changeScreenBySlug)
}
} else if (isCheckLocation) {
if (formStore.data.adresse_logement_adresse_detail_need_refresh_insee) {
const search = formStore.data.adresse_logement_adresse_detail_code_postal + ' ' + formStore.data.adresse_logement_adresse_detail_commune
requests.validateAddress(search, this.handleValidateAddress)
} else {
this.checkTerritory(
formStore.data.adresse_logement_adresse_detail_code_postal,
formStore.data.adresse_logement_adresse_detail_insee
)
}
} else {
this.changeScreenBySlug(undefined)
}
Expand Down Expand Up @@ -193,6 +214,42 @@ export default defineComponent({
}
}
},
handleValidateAddress (requestResponse: any) {
// Si le code postal / la commune ont été édités à la main, on valide l'ouverture du territoire
if (requestResponse.features !== undefined) {
const suggestions = requestResponse.features
if (suggestions[0] !== undefined) {
formStore.data.adresse_logement_adresse_detail_commune = suggestions[0].properties.city
formStore.data.adresse_logement_adresse_detail_insee = suggestions[0].properties.citycode
formStore.data.adresse_logement_adresse_detail_geoloc_lng = suggestions[0].geometry.coordinates[0]
formStore.data.adresse_logement_adresse_detail_geoloc_lat = suggestions[0].geometry.coordinates[1]
formStore.data.adresse_logement_adresse = formStore.data.adresse_logement_adresse_detail_numero + ' ' + formStore.data.adresse_logement_adresse_detail_code_postal + ' ' + formStore.data.adresse_logement_adresse_detail_commune
formStore.data.adresse_logement_adresse_suggestion = formStore.data.adresse_logement_adresse_detail_numero + ' ' + formStore.data.adresse_logement_adresse_detail_code_postal + ' ' + formStore.data.adresse_logement_adresse_detail_commune
this.checkTerritory(
formStore.data.adresse_logement_adresse_detail_code_postal,
formStore.data.adresse_logement_adresse_detail_insee
)
}
}
},
checkTerritory (postCode: any, cityCode: any) {
requests.checkTerritory(
postCode,
cityCode,
this.handleTerritoryChecked
)
},
handleTerritoryChecked (requestResponse: any) {
formStore.lastButtonClicked = ''
if (requestResponse.success) {
this.changeScreenBySlug(undefined)
} else {
this.territoryModalLabel = requestResponse.label
this.territoryModalDescription = requestResponse.message
this.isTerritoryModalOpen = true
}
},
changeScreenBySlug (requestResponse: any) {
formStore.lastButtonClicked = ''
// si on reçoit un uuid on l'enregistre pour les mises à jour
Expand Down
88 changes: 7 additions & 81 deletions assets/vue/components/signalement-form/components/SignalementFormAddress.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,6 @@
:error="formStore.validationErrors[idSubscreen]"
@update:modelValue="handleSubscreenModelUpdate"
/>

<SignalementFormModal
v-model="isModalOpen"
id="check_territory_modal"
:label="modalLabel"
:description="modalDescription"
/>
</div>
</template>

Expand All @@ -66,15 +59,13 @@ import subscreenData from './../address_subscreen.json'
import SignalementFormTextfield from './SignalementFormTextfield.vue'
import SignalementFormButton from './SignalementFormButton.vue'
import SignalementFormSubscreen from './SignalementFormSubscreen.vue'
import SignalementFormModal from './SignalementFormModal.vue'
export default defineComponent({
name: 'SignalementFormAddress',
components: {
SignalementFormTextfield,
SignalementFormButton,
SignalementFormSubscreen,
SignalementFormModal
SignalementFormSubscreen
},
props: {
id: { type: String, default: null },
Expand All @@ -85,7 +76,6 @@ export default defineComponent({
validate: { type: Object, default: null },
hasError: { type: Boolean, default: false },
error: { type: String, default: '' },
isTerritoryToCheck: { type: Boolean, default: false },
clickEvent: Function
},
data () {
Expand All @@ -102,11 +92,8 @@ export default defineComponent({
screens: { body: updatedSubscreenData },
suggestions: [] as any[],
formStore,
isModalOpen: false,
// Avoids searching when an option is selected in the list
isSearchSkipped: false,
modalLabel: '',
modalDescription: ''
isSearchSkipped: false
}
},
created () {
Expand Down Expand Up @@ -166,45 +153,7 @@ export default defineComponent({
this.$emit('update:modelValue', value)
},
handleAddressFieldsEdited () {
let isUpdateAddress = true
let search = ''
if (formStore.data[this.id + '_detail_code_postal'] === '' || formStore.data[this.id + '_detail_code_postal'] === undefined) {
isUpdateAddress = false
} else {
search = formStore.data[this.id + '_detail_code_postal'] + ' '
}
if (formStore.data[this.id + '_detail_commune'] === '' || formStore.data[this.id + '_detail_commune'] === undefined) {
isUpdateAddress = false
} else {
search += formStore.data[this.id + '_detail_commune']
}
if (isUpdateAddress) {
formStore.data[this.id] = formStore.data[this.id + '_detail_numero'] + ' ' + formStore.data[this.id + '_detail_code_postal'] + ' ' + formStore.data[this.id + '_detail_commune']
this.isTyping = true
clearTimeout(this.idFetchTimeout)
this.idFetchTimeout = setTimeout(() => {
this.isTyping = false
requests.validateAddress(search, this.handleUpdateInsee)
}, 700)
}
},
handleUpdateInsee (requestResponse: any) {
// Si le code postal / la commune ont été édités à la main, on valide l'ouverture du territoire
if (requestResponse.features !== undefined) {
const suggestions = requestResponse.features
if (suggestions[0] !== undefined) {
formStore.data[this.id + '_detail_commune'] = suggestions[0].properties.city
formStore.data[this.id + '_detail_insee'] = suggestions[0].properties.citycode
formStore.data[this.id + '_detail_geoloc_lng'] = suggestions[0].geometry.coordinates[0]
formStore.data[this.id + '_detail_geoloc_lat'] = suggestions[0].geometry.coordinates[1]
this.checkTerritory(
formStore.data[this.id + '_detail_code_postal'],
formStore.data[this.id + '_detail_insee']
)
}
}
formStore.data[this.id + '_detail_need_refresh_insee'] = true
},
handleClickButton (type:string, param:string, slugButton:string) {
this.formStore.data[this.idShow] = 1
Expand All @@ -219,6 +168,7 @@ export default defineComponent({
handleClickSuggestion (index: number) {
this.isSearchSkipped = true
if (this.suggestions) {
this.formStore.data[this.id + '_detail_need_refresh_insee'] = false
this.formStore.data[this.idAddress] = this.suggestions[index].properties.label
this.formStore.data[this.id] = this.suggestions[index].properties.label
this.formStore.data[this.id + '_detail_numero'] = this.suggestions[index].properties.name
Expand All @@ -228,39 +178,15 @@ export default defineComponent({
this.formStore.data[this.id + '_detail_geoloc_lng'] = this.suggestions[index].geometry.coordinates[0]
this.formStore.data[this.id + '_detail_geoloc_lat'] = this.suggestions[index].geometry.coordinates[1]
this.formStore.data[this.id + '_detail_manual'] = 0
if (this.isTerritoryToCheck) {
this.checkTerritory(
this.suggestions[index].properties.postcode,
this.suggestions[index].properties.citycode
)
}
this.suggestions.length = 0
setTimeout(() => {
this.isSearchSkipped = false
}, 200)
}
},
handleAddressFound (requestResponse: any) {
this.suggestions = requestResponse.features
},
handleTerritoryChecked (requestResponse: any) {
// Si on a re-saisi du texte entre-temps, pas la peine de faire cette requête complémentaire
if (this.isTyping) {
return
}
if (!requestResponse.success) {
this.modalLabel = requestResponse.label
this.modalDescription = requestResponse.message
this.isModalOpen = true
this.formStore.data[this.id] = ''
}
this.isSearchSkipped = false
},
checkTerritory (postCode: any, cityCode: any) {
requests.checkTerritory(
postCode,
cityCode,
this.handleTerritoryChecked
)
},
getCodePostalFromQueryParam () {
const queryString = window.location.search
const urlParams = new URLSearchParams(queryString)
Expand Down
13 changes: 6 additions & 7 deletions assets/vue/components/signalement-form/components/SignalementFormScreen.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
:multiple="component.multiple"
:ariaControls="component.ariaControls"
:tagWhenEdit="component.tagWhenEdit"
:isTerritoryToCheck="component.isTerritoryToCheck"
v-model="formStore.data[component.slug]"
:hasError="formStore.validationErrors[component.slug] !== undefined"
:error="formStore.validationErrors[component.slug]"
Expand Down Expand Up @@ -252,7 +251,7 @@ export default defineComponent({
} else if (type === 'archive') {
requests.archiveDraft(formStore.data.uuidSignalementDraft, this.gotoHomepage)
} else if (type.includes('goto')) {
await this.showScreenBySlug(param, param2, type.includes('save'))
await this.showScreenBySlug(param, param2, type.includes('save'), type.includes('checkloc'))
} else if (type.includes('resolve')) {
this.navigateToDisorderScreen(param, param2, type.includes('save'))
}
Expand All @@ -273,10 +272,10 @@ export default defineComponent({
(componentToToggle as HTMLButtonElement).disabled = (isVisible !== '1')
}
},
async showScreenBySlug (slug: string, slugButton:string, isSaveAndCheck:boolean) {
async showScreenBySlug (slug: string, slugButton:string, isSaveAndCheck:boolean, isCheckLocation:boolean) {
formStore.validationErrors = {}
if (isSaveAndCheck) {
if (isSaveAndCheck || isCheckLocation) {
if (this.components && this.components.body) {
this.validateComponents(this.components.body)
if (Object.keys(formStore.validationErrors).length > 0) {
Expand All @@ -289,14 +288,14 @@ export default defineComponent({
// Si pas d'erreur de validation, ou screen précédent (donc pas de validation), on change d'écran
if (this.changeEvent !== undefined) {
formStore.lastButtonClicked = slugButton
await this.changeEvent(slug, isSaveAndCheck)
await this.changeEvent(slug, isSaveAndCheck, isCheckLocation)
}
},
async navigateToDisorderScreen (action: string, slugButton:string, isSaveAndCheck:boolean) {
if (action === 'findNextScreen') {
const index = formStore.data.currentStep.includes('batiment') ? this.currentDisorderIndex.batiment : this.currentDisorderIndex.logement
const { currentCategory, incrementIndex, nextScreenSlug } = findNextScreen(formStore, index, slugButton)
await this.showScreenBySlug(nextScreenSlug, slugButton, isSaveAndCheck)
await this.showScreenBySlug(nextScreenSlug, slugButton, isSaveAndCheck, false)
if (Object.keys(formStore.validationErrors).length === 0) {
this.currentDisorderIndex[currentCategory] = incrementIndex
}
Expand All @@ -305,7 +304,7 @@ export default defineComponent({
if (action === 'findPreviousScreen') {
const index = formStore.data.currentStep.includes('batiment') ? this.currentDisorderIndex.batiment : this.currentDisorderIndex.logement
const { currentCategory, decrementIndex, previousScreenSlug } = findPreviousScreen(formStore, index)
await this.showScreenBySlug(previousScreenSlug, slugButton, isSaveAndCheck)
await this.showScreenBySlug(previousScreenSlug, slugButton, isSaveAndCheck, false)
this.currentDisorderIndex[currentCategory] = decrementIndex < 0 ? 0 : decrementIndex
}
Expand Down
Loading

0 comments on commit 27f0399

Please sign in to comment.