Commit 49ea7639 authored by Kevin Robert's avatar Kevin Robert
Browse files

Merge branch 'feature/expression_items' into 'develop'

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

See merge request !87
parents 4303f90f a563088b
......@@ -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;
}
......
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');
}
}
}
<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" />
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) {}
<template>
<div>value-condition : {{ condition }}</div>
</template>
<script lang="ts" src="./value-condition.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;
}
......
......@@ -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
......
......@@ -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;
},
},
};
......@@ -69,14 +69,14 @@
"answers": "Condition {{ index }} : Contrôle des réponses à une question",
"hasAnswer": "Condition {{ index }} : Contrôle si question répondue",
"hasNoAnswer": "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"
},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment