UNOTOPLYS-278 : Mise en place de la condition de comparaison.

src/main/webapp/app/components/forms/autocomplete/autocomplete.component.ts

@@ -29,7 +29,7 @@ export default class Autocomplete extends AbstractEditableComponent {
   constructor() {
     super();
     this.displayList = false;
-    this.search = '';
+    this.search = this.value;
     this.results = [];
     this.arrowCounter = -1;
   }

src/main/webapp/app/components/screen-item/conditions/comparaison-condition/comparaison-condition.component.ts

+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+import Autocomplete from '@/components/forms/autocomplete/autocomplete.vue';
+
+/**
+ * Comparaison de la valeur d'une variable à un nombre. Permet de définir l'opérateur de comparaison.
+ */
+@Component({
+  components: {
+    Autocomplete,
+  },
+})
+export default class ComparaisonCondition extends Vue {
+
+  /**
+   * La condition d'affichage simplifiée de l'item.
+   */
+  @Prop()
+  public condition;
+
+  /**
+   * La variable sélectionnée.
+   */
+  public selectedVariable = {};
+
+  /**
+   * L'opérateur sélectionné.
+   */
+  public selectedOperator = {};
+
+  /**
+   * L'opérateur sélectionné.
+   */
+  public selectedRightOperand = {};
+
+  /**
+   * Liste des opérateurs possibles.
+   */
+  public operators = [
+    {
+      value: 'gte',
+      label: '⩾',
+    },
+    {
+      value: 'gt',
+      label: '>',
+    },
+    {
+      value: 'lte',
+      label: '⩽',
+    },
+    {
+      value: 'lt',
+      label: '<',
+    },
+    {
+      value: 'eq',
+      label: '=',
+    },
+    {
+      value: 'neq',
+      label: '≠',
+    },
+  ];
+
+  /**
+   * Initialisation du composant en prenant en compte la condition déjà présente.
+   */
+  constructor() {
+    super();
+    if (this.condition.operator) {
+      this.selectedOperator = this.condition.operator;
+    }
+    if (this.condition.rightOperand) {
+      this.selectedRightOperand = this.condition.rightOperand;
+    }
+  }
+
+  /**
+   * Récupération de la liste des variables possibles.
+   */
+  public get variables(): any {
+    return this.$store.getters.variables.map(variable => {
+      // On va mettre un valeur au label pour l'affichage de l'autocomplete.
+      variable.label = variable.name;
+      return variable;
+    });
+  }
+
+  /**
+   * Action de sélection d'une variable.
+   *
+   * @param variable La variable sélectionnée.
+   */
+  public selectVariable(variable) {
+    this.selectedVariable = variable;
+    this.condition.reference = variable.reference;
+    this.save();
+  }
+
+  /**
+   * Récupération du libellé de la question sélectionnée pour l'affichage de l'autocomplete.
+   */
+  public get selectedVariableLabel() {
+    if (this.variables && this.variables.length > 0) {
+      let selectedVariable = this.variables.find(variable => variable.reference === this.condition.reference);
+      if (selectedVariable) {
+        this.selectedVariable = selectedVariable;
+        return selectedVariable.label;
+      }
+    }
+    return '';
+  }
+
+  /**
+   * Action de sélection de l'opérateur.
+   *
+   * @param operator L'opérateur.
+   */
+  public selectOperator(operator) {
+    this.condition.operator = this.selectedOperator;
+    this.save();
+  }
+
+  /**
+   * Action de sélection de l'opérateur.
+   *
+   * @param operator L'opérateur.
+   */
+  public selectRightOperand(event) {
+    this.condition.rightOperand = event.target.value;
+    this.save();
+  }
+
+  /**
+   * Sauvegarde de la condition.
+   */
+  public save() {
+    if (this.condition.reference && this.condition.operator && this.condition.rightOperand) {
+      this.$emit('update');
+    }
+  }
+
+}

src/main/webapp/app/components/screen-item/conditions/comparaison-condition/comparaison-condition.vue

+<template>
+  <div>
+    <autocomplete
+      :items="variables"
+      :label="$t('screen.item.conditions.comparison.question.label')"
+      :value="selectedVariableLabel"
+      @selected="selectVariable"
+    />
+
+    <div v-if="selectedVariable.reference" class="pl-6 mb-6">
+      <div class="grid grid-cols-10 gap-x-2 items-center">
+        <div class="col-span-3">
+          <div class="font-bold py-4">La valeur de la variable est…</div>
+        </div>
+        <div class="col-span-1">
+          <select v-model="selectedOperator" @change="selectOperator" class="focus:ring w-full px-6 py-4 text-lg transition bg-white border rounded-md outline-none appearance-none ring-inset">
+            <option v-for="operator in operators" :value="operator.label">{{ operator.label }}</option>
+          </select>
+        </div>
+        <div class="col-span-2">
+          <input :v-model="selectedRightOperand" :value="selectedRightOperand" @change="selectRightOperand" class="w-full px-6 py-4 text-lg transition bg-white border rounded-md outline-none ring-inset focus:ring" type="text" aria-describedby="h0" id="f0" placeholder="1">
+        </div>
+      </div>
+      <p class="mt-1 text-sm italic text-gray-500" id="hundefined">L'élément ne s'affiche que si la valeur de la variable correspond au test ci-dessus</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./comparaison-condition.component.ts" />

src/main/webapp/app/components/screen-item/conditions/value-condition/value-condition.component.ts

-import Component from 'vue-class-component';
-import { mixins } from 'vue-class-component';
-
-import OperatorConditionMixin from '@/components/screen-item/conditions/operator-condition.mixin';
-
-@Component
-export default class ValueCondition extends mixins(OperatorConditionMixin) {}

src/main/webapp/app/components/screen-item/conditions/value-condition/value-condition.vue

-<template>
-  <div>value-condition : {{ condition }}</div>
-</template>
-
-<script lang="ts" src="./value-condition.component.ts" />

src/main/webapp/app/components/screen-item/item-conditions.component.ts

@@ -12,7 +12,7 @@ import AdvancedCondition from '@/components/screen-item/conditions/advanced-cond
 import AnswersCondition from '@/components/screen-item/conditions/answers-condition/answers-condition.vue';
 import HasAnswerCondition from '@/components/screen-item/conditions/hasanswer-condition/hasanswer-condition.vue';
 import HasNoAnswerCondition from '@/components/screen-item/conditions/hasnoanswer-condition/hasnoanswer-condition.vue';
-import ValueCondition from '@/components/screen-item/conditions/value-condition/value-condition.vue';
+import ComparaisonCondition from '@/components/screen-item/conditions/comparaison-condition/comparaison-condition.vue';
 
 @Component({
   components: {
@@ -72,8 +72,8 @@ export default class ItemConditions extends Vue {
       return HasAnswerCondition;
     } else if (type === ConditionTypes.HAS_NO_ANSWER) {
       return HasNoAnswerCondition;
-    } else if (type === ConditionTypes.VALUE) {
-      return ValueCondition;
+    } else if (type === ConditionTypes.COMPARISON) {
+      return ComparaisonCondition;
     } else {
       return null;
     }

src/main/webapp/app/services/conditions.service.ts

@@ -5,7 +5,7 @@ export const ConditionTypes = {
   HAS_ANSWER: 'hasAnswer',
   HAS_NO_ANSWER: 'hasNoAnswer',
   ANSWERS: 'answers',
-  VALUE: 'value',
+  COMPARISON: 'comparison',
   ADVANCED: 'advanced',
 };
 
@@ -50,7 +50,7 @@ export default class ConditionsService {
           displayConditions.push(condition);
         } else if (condition.type === ConditionTypes.HAS_NO_ANSWER) {
           displayConditions.push(condition);
-        } else if (condition.type === ConditionTypes.VALUE) {
+        } else if (condition.type === ConditionTypes.COMPARISON) {
           displayConditions.push(condition);
         } else {
           // Si une des conditions n'est pas gérée, on sort de la boucle en erreur

src/main/webapp/app/shared/config/store/admin/screen-store.ts

@@ -7,12 +7,14 @@ export const screenStore: Module<any, any> = {
   state: {
     screen: {},
     questions: [],
+    variables: [],
   },
   getters: {
     idScreen: state => state.screen.id,
     indexScreen: state => state.screen.index,
     screen: state => state.screen,
     questions: state => state.questions,
+    variables: state => state.variables,
   },
   actions: {
     loadScreen({ commit, dispatch, getters }, screen) {
@@ -28,7 +30,7 @@ export const screenStore: Module<any, any> = {
         .then(res => {
           const questions = conditionsService.loadScreensQuestions(res.screens);
           commit('setQuestions', questions);
-          // TODO load variables
+          commit('setVariables', res.variables);
         })
         .catch(console.error);
     },
@@ -40,5 +42,8 @@ export const screenStore: Module<any, any> = {
     setQuestions(state, questions) {
       state.questions = questions;
     },
+    setVariables(state, variables) {
+      state.variables = variables;
+    },
   },
 };

src/main/webapp/i18n/fr/screen.json

@@ -69,14 +69,14 @@
           "answers": "Condition {{ index }} : Contrôle des réponses à une question",
           "hasAnswer": "Condition {{ index }} : Contrôle si question répondue",
           "notHasAnswer": "Condition {{ index }} : Contrôle si question non répondue",
-          "value": "Condition {{ index }} : Contrôle de la valeur d'une variable"
+          "comparison": "Condition {{ index }} : Comparaison avec la valeur d'une variable"
         },
         "types": {
           "advanced": "Autre cas (saisie manuelle)",
           "answers": "Réponses sélectionnées",
           "hasAnswer": "Question répondue",
           "hasNoAnswer": "Question non répondue",
-          "value": "Valeur d’une variable"
+          "comparison": "Comparaison avec la valeur d’une variable"
         },
         "advanced": {
           "condition": {
@@ -94,7 +94,7 @@
             "helpText": "L'élément ne s'affiche que si l'une des réponses cochées ci-dessus est sélectionnée par l’utilisateur"
           }
         },
-        "value": {
+        "comparison": {
           "question": {
             "label": "Sélectionnez la variable à contrôler et définissez les seuils à partir desquels l'élément doit s'afficher"
           },