Merge branch 'redmine-issue/14427' into 'develop'

REDMINE_ISSUE-14427 | Listes de valeurs pré-enregistrées et auto-complétion à la saisie d'un signalement

See merge request geocontrib/geocontrib-frontend!479

src/components/Feature/Edit/FeatureExtraForm.vue

@@ -50,6 +50,67 @@
       </li>
     </ul>
   </div>
+
+  <div
+    v-else-if="field && field.field_type === 'pre_recorded_list'"
+  >
+    <label
+      v-if="displayLabels"
+      :for="field.name"
+      :class="{ required: field.is_mandatory }"
+    >
+      {{ field.label }}
+    </label>
+    <Multiselect
+      v-model="selectedPrerecordedValue"
+      :options="selectedPrerecordedListValues"
+      :options-limit="10"
+      :allow-empty="!field.is_mandatory"
+      track-by="label"
+      label="label"
+      :reset-after="false"
+      select-label=""
+      selected-label=""
+      deselect-label=""
+      :searchable="true"
+      :placeholder="'Recherchez une valeur de la liste pré-définie ...'"
+      :show-no-results="true"
+      :loading="loadingPrerecordedListValues"
+      :clear-on-select="false"
+      :preserve-search="false"
+      @search-change="search"
+      @select="selectPrerecordedValue"
+    >
+      <template slot="clear">
+        <div
+          v-if="selectedPrerecordedValue"
+          class="multiselect__clear"
+          @click.prevent.stop="clear"
+        >
+          <i
+            class="close icon"
+            aria-hidden="true"
+          />
+        </div>
+      </template>
+      <span slot="noResult">
+        Aucun résultat.
+      </span>
+      <span slot="noOptions">
+        Saisissez les premiers caractères ...
+      </span>
+    </Multiselect>
+    <ul
+      v-if="field.is_mandatory && error"
+      :id="`errorlist-extra-form-${field.name}`"
+      class="errorlist"
+    >
+      <li>
+        {{ error }}
+      </li>
+    </ul>
+  </div>
+
   <div v-else-if="field && field.field_type === 'integer'">
     <label
       v-if="displayLabels"
@@ -177,12 +238,16 @@
 
 <script>
 import Dropdown from '@/components/Dropdown.vue';
+import Multiselect from 'vue-multiselect';
+
+import { mapState, mapMutations, mapActions } from 'vuex';
 
 export default {
   name: 'FeatureExtraForm',
 
   components: {
     Dropdown,
+    Multiselect
   },
 
   props: {
@@ -194,11 +259,18 @@ export default {
 
   data() {
     return {
-      error: null
+      error: null,
+      prerecordedListSearchQuery: null,
+      loadingPrerecordedListValues: false,
+      selectedPrerecordedValue: null
     };
   },
 
   computed: {
+    ...mapState('feature-type', [
+      'selectedPrerecordedListValues'
+    ]),
+
     selected_extra_form_list: {
       get() {
         return this.field.value || '';
@@ -221,10 +293,41 @@ export default {
       if (newValue) {
         this.error = null;
       }
+    },
+    prerecordedListSearchQuery(newValue) {
+      if (newValue) {
+        this.loadingPrerecordedListValues = true;
+        this.GET_SELECTED_PRERECORDED_LIST_VALUES({
+          name: this.field.options[0],
+          pattern: newValue
+        })
+          .then(() => {
+            this.loadingPrerecordedListValues = false;
+          })
+          .catch(() => {
+            this.loadingPrerecordedListValues = false;
+          });
+      } else {
+        this.SET_SELECTED_PRERECORDED_LIST_VALUES([]);
+      }
+    }
+  },
+
+  created() {
+    console.log(this.field.value);
+    if (this.field.value) {
+      this.selectedPrerecordedValue = { label: this.field.value };
     }
   },
 
   methods: {
+    ...mapMutations('feature-type', [
+      'SET_SELECTED_PRERECORDED_LIST_VALUES'
+    ]),
+    ...mapActions('feature-type', [
+      'GET_SELECTED_PRERECORDED_LIST_VALUES'
+    ]),
+
     updateStore_extra_form(evt) {
       const newExtraForm = this.field;
       if (this.field.field_type === 'boolean') {
@@ -244,6 +347,21 @@ export default {
         this.error = null;
       }
       return isValid;
+    },
+
+    search(text) {
+      this.prerecordedListSearchQuery = text;
+    },
+
+    selectPrerecordedValue(e) {
+      this.selectedPrerecordedValue = e.label;
+      this.prerecordedListSearchQuery = null;
+      this.updateStore_extra_form({ target: { value:  this.selectedPrerecordedValue } });
+    },
+
+    clear() {
+      this.selectedPrerecordedValue = null;
+      this.prerecordedListSearchQuery = null;
     }
   },
 };

src/components/FeatureType/FeatureTypeCustomForm.vue

@@ -167,13 +167,38 @@
             </li>
           </ul>
         </div>
+
+        <div
+          v-if="selectedFieldType === 'Liste de valeurs pré-enregistrées'"
+          class="field required"
+        >
+          <label>{{
+            form.options.label
+          }}</label>
+          <Dropdown
+            :options="preRecordedLists"
+            :selected="arrayOption"
+            :selection.sync="arrayOption"
+          />
+          <ul
+            id="errorlist"
+            class="errorlist"
+          >
+            <li
+              v-for="error in form.options.errors"
+              :key="error"
+            >
+              {{ error }}
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 
 import Dropdown from '@/components/Dropdown.vue';
 
@@ -202,6 +227,7 @@ export default {
         { name: 'Chaîne de caractères', value: 'char' },
         { name: 'Date', value: 'date' },
         { name: 'Liste de valeurs', value: 'list' },
+        { name: 'Liste de valeurs pré-enregistrées', value: 'pre_recorded_list' },
         { name: 'Nombre entier', value: 'integer' },
         { name: 'Nombre décimal', value: 'decimal' },
         { name: 'Texte multiligne', value: 'text' },
@@ -268,12 +294,14 @@ export default {
           value: [],
         },
       },
+      selectedPrerecordedList: null
     };
   },
 
   computed: {
     ...mapState('feature-type', [
-      'customForms'
+      'customForms',
+      'preRecordedLists'
     ]),
     selectedFieldType: {
       // getter
@@ -288,6 +316,9 @@ export default {
       },
       // setter
       set(newValue) {
+        if (newValue.value === 'pre_recorded_list') {
+          this.GET_PRERECORDED_LISTS();
+        }
         this.form.field_type.value = newValue.value;
         this.form = { ...this.form }; // ! quick & dirty fix for getter not updating because of Vue caveat https://vuejs.org/v2/guide/reactivity.html#For-Objects
         // Vue.set(this.form.field_type, "value", newValue.value); // ? vue.set didn't work, maybe should flatten form ?
@@ -314,6 +345,9 @@ export default {
   },
 
   methods: {
+    ...mapActions('feature-type', [
+      'GET_PRERECORDED_LISTS'
+    ]),
 
     setIsFieldMandatory(e) {
       this.form.isFieldMandatory = e.target.checked;
@@ -389,8 +423,13 @@ export default {
     },
 
     checkListOptions() {
-      if (this.form.field_type.value !== 'list') return true;
-      return this.form.options.value.length >= 2 && !this.form.options.value.includes('');
+      if (!['list', 'pre_recorded_list'].includes(this.form.field_type.value)) return true;
+      if (this.form.field_type.value === 'list') {
+        return this.form.options.value.length >= 2 && !this.form.options.value.includes('');
+      }
+      if (this.form.field_type.value === 'pre_recorded_list') {
+        return this.form.options.value.length === 1;
+      }
     },
 
     checkCustomForm() {

src/services/featureType-api.js

 import axios from '@/axios-client.js';
-import store from '../store';
+import store from '@/store';
 
 const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
 

src/store/modules/feature-type.store.js

@@ -30,6 +30,8 @@ const feature_type = {
     feature_types: [],
     fileToImport: null,
     importFeatureTypeData: [],
+    preRecordedLists: [],
+    selectedPrerecordedListValues: []
   },
 
   getters: {
@@ -83,6 +85,12 @@ const feature_type = {
     SET_FILE_TO_IMPORT(state, payload) {
       state.fileToImport = payload;
     },
+    SET_PRERECORDED_LISTS(state, payload) {
+      state.preRecordedLists = payload;
+    },
+    SET_SELECTED_PRERECORDED_LIST_VALUES(state, payload) {
+      state.selectedPrerecordedListValues = payload.slice(0, 10).map(el => { return { label: el };});
+    }
   },
 
   actions: {
@@ -100,6 +108,32 @@ const feature_type = {
         });
     },
 
+    async GET_PRERECORDED_LISTS({ commit }) {
+      try {
+        const response = await axios.get(
+          `${this.state.configuration.VUE_APP_DJANGO_API_BASE}prerecorded-list-values/`
+        );
+        if (response.status === 200) {
+          commit('SET_PRERECORDED_LISTS', response.data.map(el => el.name));
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    },
+
+    async GET_SELECTED_PRERECORDED_LIST_VALUES({ commit }, { name, pattern }) {
+      try {
+        const response = await axios.get(
+          `${this.state.configuration.VUE_APP_DJANGO_API_BASE}prerecorded-list-values/${name}/?pattern=${pattern}`
+        );
+        if (response.status === 200) {
+          commit('SET_SELECTED_PRERECORDED_LIST_VALUES', response.data);
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    },
+
     async SEND_FEATURE_TYPE({ state, getters, rootState }, requestType) {
       const data = {
         title: state.form.title.value,