[BO - Liste signalement] [Front] Gestion des filtres

assets/vue/components/common/HistoAutoComplete.vue → assets/vue/components/common/AppAutoComplete.vue

@@ -32,10 +32,11 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'HistoAutoComplete',
+  name: 'AppAutoComplete',
   emits: ['update:modelValue'],
   props: {
     id: { type: String, default: '' },
+    modelValue: { type: Array, default: () => [] },
     suggestions: {
       type: Array,
       required: true
@@ -56,6 +57,9 @@ export default defineComponent({
   watch: {
     reset () {
       this.resetData()
+    },
+    modelValue (newValue: any) {
+      this.selectedSuggestions = newValue
     }
   },
   data () {
@@ -85,7 +89,7 @@ export default defineComponent({
     updateSearch () {
       if (this.searchText.length < 1) {
         this.suggestionFilteredList = []
-      } else if (this.searchText.length > 2) {
+      } else if (this.searchText.length > 1) {
         this.suggestionFilteredList = (this.suggestions as string[])
           .filter((item: string) =>
             !this.selectedSuggestions.includes(item) &&

assets/vue/components/common/HistoNumber.vue → assets/vue/components/common/AppNumber.vue

@@ -17,7 +17,7 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'HistoNumber',
+  name: 'AppNumber',
   props: {
     id: { type: String, default: '' },
     modelValue: String,

assets/vue/components/common/HistoSearch.vue → assets/vue/components/common/AppSearch.vue

@@ -17,7 +17,7 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'HistoSearch',
+  name: 'AppSearch',
   props: {
     id: { type: String, default: '' },
     modelValue: { type: String, default: '' },

assets/vue/components/signalement-list/TheHistoAppSignalementList.vue → assets/vue/components/signalement-list/TheSignalementAppList.vue

@@ -4,8 +4,8 @@
     <p>{{ messageDeleteConfirmation }}</p>
   </div>
   <div id="histo-app-signalement-list">
-    <TheHistoSignalementListFilter
-        :on-change="handleFilters"
+    <SignalementListFilters
+        @change="handleFilters"
         @changeTerritory="handleTerritoryChange"
         @clickReset="handleClickReset"
     />
@@ -16,13 +16,13 @@
     </section>
     <section v-else class="fr-col-12 fr-background-alt--blue-france fr-mt-0">
         <div class="fr-px-3w">
-          <TheHistoSignalementListHeader
+          <SignalementListHeader
               :total="sharedState.signalements.pagination.total_items"
-              :on-change="handleOrderChange"/>
-          <TheHistoSignalementListCards
+              @change="handleOrderChange"/>
+          <SignalementListCards
               :list="sharedState.signalements.list"
               @deleteSignalementItem="deleteItem" />
-          <TheHistoSignalementListPagination
+          <SignalementListPagination
               :pagination="sharedState.signalements.pagination"
               @changePage="handlePageChange"/>
         </div>
@@ -35,20 +35,20 @@ import { defineComponent } from 'vue'
 import { store } from './store'
 import { requests } from './requests'
 import { SignalementItem } from './interfaces/signalementItem'
-import TheHistoSignalementListFilter from '../signalement-list/TheHistoSignalementListFilter.vue'
-import TheHistoSignalementListHeader from '../signalement-list/TheHistoSignalementListHeader.vue'
-import TheHistoSignalementListCards from '../signalement-list/TheHistoSignalementListCards.vue'
-import TheHistoSignalementListPagination from '../signalement-list/TheHistoSignalementListPagination.vue'
+import SignalementListFilters from './components/SignalementListFilters.vue'
+import SignalementListHeader from './components/SignalementListHeader.vue'
+import SignalementListCards from './components/SignalementListCards.vue'
+import SignalementListPagination from './components/SignalementListPagination.vue'
 import HistoInterfaceSelectOption from '../common/HistoInterfaceSelectOption'
 const initElements:any = document.querySelector('#app-signalement-list')
 
 export default defineComponent({
-  name: 'TheHistoAppSignalementList',
+  name: 'TheSignalementAppList',
   components: {
-    TheHistoSignalementListFilter,
-    TheHistoSignalementListHeader,
-    TheHistoSignalementListCards,
-    TheHistoSignalementListPagination
+    SignalementListHeader,
+    SignalementListFilters,
+    SignalementListCards,
+    SignalementListPagination
   },
   data () {
     return {
@@ -158,7 +158,6 @@ export default defineComponent({
       }
     },
     handleTerritoryChange (value: any) {
-      console.log(value)
       this.sharedState.currentTerritoryId = value.toString()
       requests.getSettings(this.handleSettings)
     },
@@ -204,7 +203,7 @@ export default defineComponent({
       this.sharedState.input.queryParameters = []
 
       for (const [key, value] of Object.entries(this.sharedState.input.filters)) {
-        if (value && value !== null && value !== '') {
+        if (value && value !== null) {
           if (key === 'dateDepot' || key === 'dateDernierSuivi') {
             const [dateDebut, dateFin] = this.handleDateParameter(key, value)
             url.searchParams.set(`${key}Debut`, dateDebut)
@@ -234,7 +233,7 @@ export default defineComponent({
               this.addQueryParameter(`${key}[]`, value)
               url.searchParams.set(`${key}[]`, value)
             }
-          } else {
+          } else if (typeof value === 'string') {
             this.addQueryParameter(key, value)
             url.searchParams.set(key, value)
           }

assets/vue/components/signalement-list/TheHistoSignalementListCards.vue → assets/vue/components/signalement-list/components/SignalementListCards.vue

@@ -39,8 +39,8 @@
                 </p>
                 <p v-if="item.lastSuiviBy !== null">
                   <span class="fr-icon-discuss-line" aria-hidden="true"></span>
-                  Dernier suivi par {{ item.lastSuiviBy}} le {{ formatDate(item.lastSuiviAt) }}
-                  <span :class="getBadgeSuivi(item.lastSuiviBy)">{{ getSuiviLabel(item.lastSuiviBy) }}</span>
+                  Dernier suivi par {{ getSuiviLabel(item.lastSuiviBy) }} le {{ formatDate(item.lastSuiviAt) }}
+                  <span :class="getBadgeSuivi(item.lastSuiviBy)">{{ getSuiviVisibility(item.lastSuiviIsPublic) }}</span>
                 </p>
                 <p v-else>
                   <span class="fr-icon-discuss-line" aria-hidden="true"></span> Aucun suivi effectué
@@ -74,11 +74,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { SignalementItem } from './interfaces/signalementItem'
-import { store } from './store'
+import { SignalementItem } from '../interfaces/signalementItem'
+import { store } from '../store'
 
 export default defineComponent({
-  name: 'TheHistoSignalementListCards',
+  name: 'SignalementListCards',
   props: {
     list: {
       type: Object
@@ -172,19 +172,22 @@ export default defineComponent({
     getBadgeSuivi (label: string): string {
       let className = 'fr-badge fr-badge--sm fr-badge--no-icon'
 
-      if (label === 'OCCUPANT' || label === 'DECLARANT') {
+      if (label === 'OCCUPANT' || label === 'DECLARANT' || label === 'Aucun') {
         className += ' fr-badge--warning'
       }
 
       return className
     },
     getSuiviLabel (label: string): string {
-      let suiviLabel = 'Suivi interne'
-      if (label === 'OCCUPANT' || label === 'DECLARANT') {
-        suiviLabel = 'Suivi ' + label
+      let suiviLabel = label
+      if (label === 'Aucun') {
+        suiviLabel = 'occupant ou déclarant'
       }
       return suiviLabel
     },
+    getSuiviVisibility (label: boolean): string {
+      return label ? 'Visible par l\'usager' : 'Suivi interne'
+    },
     deleteSignalementItem (item: SignalementItem) {
       const confirmation = confirm('Êtes-vous sûr de vouloir supprimer ce signalement ?')
       if (confirmation) {

assets/vue/components/signalement-list/TheHistoSignalementListFilter.vue → assets/vue/components/signalement-list/components/SignalementListFilters.vue

@@ -32,7 +32,7 @@
               />
             </div>
             <div class="fr-col-12 fr-col-lg-6" :class="sharedState.user.isAdmin ? 'fr-col-xl-3' : 'fr-col-xl-4'">
-              <HistoSearch
+              <AppSearch
                   id="filter-search-terms"
                   v-model="sharedState.input.filters.searchTerms"
                   :placeholder="'Taper un nom, référence ou email'"
@@ -41,7 +41,7 @@
               />
             </div>
             <div class="fr-col-12 fr-col-lg-6" :class="sharedState.user.isAdmin ? 'fr-col-xl-2' : 'fr-col-xl-3'">
-              <HistoAutoComplete
+              <AppAutoComplete
                   id="filter-communes"
                   v-model="sharedState.input.filters.communes"
                   :suggestions="sharedState.communes"
@@ -53,7 +53,7 @@
               />
             </div>
             <div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
-              <HistoAutoComplete
+              <AppAutoComplete
                   id="filter-epci"
                   v-model="sharedState.input.filters.epcis"
                   :suggestions="sharedState.epcis"
@@ -185,13 +185,13 @@
               </div>
               <div v-if="sharedState.user.canSeeScore"
                    class="histo-score-range fr-col-12 fr-col-lg-4 fr-col-xl-2 grey-background">
-                <HistoNumber
+                <AppNumber
                     id="filter-score-min"
                     v-model="sharedState.input.filters.criticiteScoreMin"
                     placeholder="Min"
                     @update:modelValue="onChange(false)"
                 />
-                <HistoNumber
+                <AppNumber
                     id="filter-score-max"
                     v-model="sharedState.input.filters.criticiteScoreMax"
                     placeholder="Max"
@@ -259,22 +259,22 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import HistoSelect from '../common/HistoSelect.vue'
-import { store } from './store'
-import HistoDatePicker from '../common/external/HistoDatePicker.vue'
-import HistoSearch from '../common/HistoSearch.vue'
-import HistoMultiSelect from '../common/HistoMultiSelect.vue'
-import HistoAutoComplete from '../common/HistoAutoComplete.vue'
-import HistoNumber from '../common/HistoNumber.vue'
-import { buildBadge } from './services/badgeFilterLabelBuilder'
+import AppAutoComplete from '../../common/AppAutoComplete.vue'
+import AppNumber from '../../common/AppNumber.vue'
+import AppSearch from '../../common/AppSearch.vue'
+import HistoSelect from '../../common/HistoSelect.vue'
+import HistoDatePicker from '../../common/external/HistoDatePicker.vue'
+import HistoMultiSelect from '../../common/HistoMultiSelect.vue'
+import { store } from '../store'
+import { buildBadge } from '../services/badgeFilterLabelBuilder'
 
 export default defineComponent({
-  name: 'TheHistoSignalementListFilter',
+  name: 'SignalementListFilters',
   components: {
-    HistoNumber,
-    HistoAutoComplete,
+    AppNumber,
+    AppAutoComplete,
+    AppSearch,
     HistoMultiSelect,
-    HistoSearch,
     HistoDatePicker,
     HistoSelect
   },
@@ -313,7 +313,7 @@ export default defineComponent({
     toggleIsImported () {
       this.sharedState.input.filters.isImported = this.sharedState.input.filters.isImported !== 'oui'
         ? 'oui'
-        : ''
+        : null
       if (typeof this.onChange === 'function') {
         this.onChange(false)
       }

assets/vue/components/signalement-list/TheHistoSignalementListHeader.vue → assets/vue/components/signalement-list/components/SignalementListHeader.vue

@@ -24,11 +24,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { store } from './store'
-import HistoSelect from '../common/HistoSelect.vue'
+import { store } from '../store'
+import HistoSelect from '../../common/HistoSelect.vue'
 
 export default defineComponent({
-  name: 'TheHistoSignalementListHeader',
+  name: 'SignalementListHeader',
   components: {
     HistoSelect
   },

assets/vue/components/signalement-list/TheHistoSignalementListPagination.vue → assets/vue/components/signalement-list/components/SignalementListPagination.vue

@@ -50,7 +50,7 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'TheHistoSignalementListPagination',
+  name: 'SignalementListPagination',
   props: {
     pagination: {
       type: Object,