Commit 2ddf71be authored by Kevin Robert's avatar Kevin Robert
Browse files

Divers correctifs ainsi que les tickets UNOTOPLYS-291, UNOTOPLYS-288, UNOTOPLYS-289, UNOTOPLYS-290.

parent 47735f23
......@@ -144,7 +144,7 @@ public class VariableResource {
.build();
}
// TODO : Fonctionnement avec la gestion des expressions. Réactiver dès que ce sera pris en charge.
//// TODO : Fonctionnement avec la gestion des expressions. Réactiver dès que ce sera pris en charge.
// /**
// * Récupération d'une variable.
// *
......
......@@ -18,6 +18,9 @@ export default class Autocomplete extends AbstractEditableComponent {
@Prop()
public items: any;
@Prop()
public specifiqueClass;
public displayList: boolean;
public search: string;
......
<template>
<div :class="['mb-8 relative', disabled ? 'opacity-40' : '']">
<div :class="specifiqueClass ? specifiqueClass : ['mb-8 relative', disabled ? 'opacity-40' : '']">
<oa-label :id="id" :label="label" :required="required" v-if="label" />
<div class="relative w-full text-lg transition bg-white border rounded-md outline-none ring-inset focus:ring">
<input
......@@ -19,12 +19,13 @@
@keydown.down="onArrowDown"
@keydown.up="onArrowUp"
@keydown.enter="onEnter"
@focus="toggleResults"
/>
<button class="absolute top-0 bottom-0 flex items-center text-gray-400 border-l pl-4 pr-5 right-0" @click="toggleResults">
<icon name="select" />
</button>
</div>
<ul v-show="displayList" class="absolute pb-2 bg-white border rounded-md w-full overflow-y-auto max-h-80">
<ul v-show="displayList" class="absolute pb-2 bg-white border rounded-md w-full overflow-y-auto max-h-80 z-20">
<li
v-for="(result, key) in results"
:key="key"
......
import { mixins } from 'vue-class-component';
import { Component } from 'vue-property-decorator';
import QuestionConditionMixin from '@/components/screen-item/conditions/question-condition.mixin';
@Component
export default class AnswerConditionMixin extends mixins(QuestionConditionMixin) {
public selectQuestion(selection: any) {
this.selectedQuestion = selection;
if (this.selectedQuestion) {
const validCondition = {
reference: this.selectedQuestion.id,
};
this.updateCondition(validCondition);
}
}
}
......@@ -76,13 +76,16 @@ export default class AnswersCondition extends Vue {
* Mise en forme des questions pour l'autocomplete.
*/
public get questions(): any {
return this.$store.getters.questions.map((item: any) => {
let questions = this.$store.getters.questions.map((item: any) => {
return {
id: `${item.screenReference}_${item.reference}`,
label: `${item.idxScreen}. ${item.question}`,
value: item,
screenIndex: item.idxScreen,
};
});
questions.sort((firstItem, secondItem) => firstItem.screenIndex - secondItem.screenIndex);
return questions;
}
/**
......
......@@ -2,6 +2,8 @@ import Vue from 'vue';
import Component from 'vue-class-component';
import {Prop} from 'vue-property-decorator';
import Autocomplete from '@/components/forms/autocomplete/autocomplete.vue';
import OaLabel from '@/components/forms/label/oa-label.vue';
import HelpText from '@/components/forms/help-text/help-text.vue';
/**
* Comparaison de la valeur d'une variable à un nombre. Permet de définir l'opérateur de comparaison.
......@@ -9,6 +11,8 @@ import Autocomplete from '@/components/forms/autocomplete/autocomplete.vue';
@Component({
components: {
Autocomplete,
OaLabel,
HelpText,
},
})
export default class ComparisonCondition extends Vue {
......@@ -32,7 +36,7 @@ export default class ComparisonCondition extends Vue {
/**
* L'opérateur sélectionné.
*/
public selectedRightOperand;
public selectedRightOperand = '';
/**
* Liste des opérateurs possibles.
......
<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.value">{{ operator.label }}</option>
</select>
</div>
<div class="col-span-2">
<input v-model="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" placeholder="1">
<oa-label :label="$t('screen.item.conditions.comparison.question.label')" class="block mb-2 font-bold" />
<div class="grid grid-cols-8 gap-x-2 items-center">
<div class="col-span-6">
<div class="relative">
<autocomplete
:items="variables"
:value="selectedVariableLabel"
@selected="selectVariable"
specifiqueClass=" "
/>
</div>
</div>
<p class="mt-1 text-sm italic text-gray-500">L'élément ne s'affiche que si la valeur de la variable correspond au test ci-dessus</p>
<div class="col-span-1">
<select v-model="selectedOperator" @change="selectOperator" class="focus:ring w-full px-6 py-4 text-lg text-center transition bg-white border rounded-md outline-none truncate appearance-none ring-inset">
<option v-for="operator in operators" :value="operator.value">{{ operator.label }}</option>
</select>
</div>
<div class="col-span-1">
<input v-model="selectedRightOperand" @change="selectRightOperand" class="w-20 px-0 py-4 text-lg transition font-mono text-center border rounded-md outline-none ring-inset focus:ring" type="text" placeholder="1">
</div>
</div>
<help-text :text="$t('screen.item.conditions.comparison.question.helpText')" />
</div>
</template>
<script lang="ts" src="./comparison-condition.component.ts" />
import Vue from 'vue';
import { Component, Prop, Emit } from 'vue-property-decorator';
@Component
export default class ConditionMixin extends Vue {
@Prop()
public condition: any;
public updateCondition(validCondition: any) {
if (validCondition) {
Object.assign(this.condition, validCondition);
this.save();
}
}
@Emit('update')
public save() {}
}
......@@ -21,13 +21,16 @@ export default class HasAnswerCondition extends Vue {
* Mise en forme des questions pour l'autocomplete.
*/
public get questions(): any {
return this.$store.getters.questions.map((item: any) => {
let questions = this.$store.getters.questions.map((item: any) => {
return {
id: `${item.screenReference}_${item.reference}`,
label: `${item.idxScreen}. ${item.question}`,
value: item,
screenIndex: item.idxScreen,
};
});
questions.sort((firstItem, secondItem) => firstItem.screenIndex - secondItem.screenIndex);
return questions;
}
/**
......
......@@ -20,13 +20,16 @@ export default class HasNoAnswerCondition extends Vue {
* Mise en forme des questions pour l'autocomplete.
*/
public get questions(): any {
return this.$store.getters.questions.map((item: any) => {
let questions = this.$store.getters.questions.map((item: any) => {
return {
id: `${item.screenReference}_${item.reference}`,
label: `${item.idxScreen}. ${item.question}`,
value: item,
screenIndex: item.idxScreen,
};
});
questions.sort((firstItem, secondItem) => firstItem.screenIndex - secondItem.screenIndex);
return questions;
}
/**
......
<template>
<autocomplete
:items="questions"
:label="$t('screen.item.conditions.answers.question.label')"
:helpText="$t('screen.item.conditions.answers.question.helpText')"
:label="$t('screen.item.conditions.answers.hasNoAnswer.label')"
:helpText="$t('screen.item.conditions.answers.hasNoAnswer.helpText')"
:value="selectedQuestionLabel"
@selected="selectQuestion"
/>
......
import { mixins } from 'vue-class-component';
import { Component } from 'vue-property-decorator';
import QuestionConditionMixin from '@/components/screen-item/conditions/question-condition.mixin';
@Component
export default class OperatorConditionMixin extends mixins(QuestionConditionMixin) {
public leftOperatorValue: string;
public leftOptions: any;
public rightOperatorValue: string;
public rightOptions: any;
constructor() {
super();
this.leftOperatorValue = 'gte';
this.leftOptions = [
{
value: 'gte',
label: '',
},
{
value: 'gt',
label: '>',
},
{
value: 'lte',
label: '',
},
{
value: 'lt',
label: '<',
},
{
value: 'eq',
label: '=',
},
{
value: 'neq',
label: '',
},
];
this.rightOperatorValue = 'lte';
this.rightOptions = [
{
value: 'lte',
label: '',
},
{
value: 'lt',
label: '<',
},
];
}
}
import { mixins } from 'vue-class-component';
import { Component } from 'vue-property-decorator';
import ConditionMixin from '@/components/screen-item/conditions/condition.mixin';
import Autocomplete from '@/components/forms/autocomplete/autocomplete.vue';
@Component({
components: {
Autocomplete,
},
})
export default class QuestionConditionMixin extends mixins(ConditionMixin) {
public selectedQuestion: any;
constructor() {
super();
this.selectedQuestion = '';
}
public get questions(): any {
return this.$store.getters.questions.map((item: any) => {
return {
id: `${item.screenReference}__${item.reference}`,
label: `${item.idxScreen}. ${item.question}`,
value: item,
};
});
}
public get selectedQuestionLabel() {
if (!this.selectedQuestion) {
return null;
} else if (!this.condition) {
this.selectedQuestion = this.questions.find(element => element.id === this.condition.reference);
}
return this.selectedQuestion.label;
}
public get selectedQuestionReference() {
if (!this.selectedQuestion) {
return null;
}else if (!this.condition) {
this.selectedQuestion = this.questions.find(element => element.id === this.condition.reference);
}
return this.selectedQuestion.id;
}
}
......@@ -2,6 +2,8 @@ import Vue from 'vue';
import Component from 'vue-class-component';
import {Prop} from 'vue-property-decorator';
import Autocomplete from '@/components/forms/autocomplete/autocomplete.vue';
import OaLabel from '@/components/forms/label/oa-label.vue';
import HelpText from '@/components/forms/help-text/help-text.vue';
/**
* Comparaison de la valeur d'une variable à un nombre. Permet de définir l'opérateur de comparaison.
......@@ -9,6 +11,8 @@ import Autocomplete from '@/components/forms/autocomplete/autocomplete.vue';
@Component({
components: {
Autocomplete,
OaLabel,
HelpText,
},
})
export default class RangeCondition extends Vue {
......@@ -37,12 +41,12 @@ export default class RangeCondition extends Vue {
/**
* L'opérateur gauche sélectionné.
*/
public selectedLeftBoundary;
public selectedLeftBoundary = '';
/**
* L'opérateur droit sélectionné.
*/
public selectedRightBoundary;
public selectedRightBoundary = '';
/**
* Liste des opérateurs de gauche possibles.
......
<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="selectedLeftOperator" @change="selectLeftOperator" 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="leftOperator in leftOperators" :value="leftOperator.value">{{ leftOperator.label }}</option>
</select>
</div>
<div class="col-span-2">
<input v-model="selectedLeftBoundary" @change="selectLeftBoundary" class="w-full px-6 py-4 text-lg transition bg-white border rounded-md outline-none ring-inset focus:ring" type="text" placeholder="1">
</div>
<div class="col-span-1 justify-self-end flex items-center">
<div class="font-bold p-4">et </div>
</div>
<div class="col-span-1">
<select v-model="selectedRightOperator" @change="selectRightOperator" 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="rightOperator in rightOperators" :value="rightOperator.value">{{ rightOperator.label }}</option>
</select>
</div>
<div class="col-span-2">
<input v-model="selectedRightBoundary" @change="selectRightBoundary" class="w-full px-6 py-4 text-lg transition bg-white border rounded-md outline-none ring-inset focus:ring" type="text" placeholder="20">
<oa-label :label="$t('screen.item.conditions.comparison.question.label')" class="block mb-2 font-bold" />
<div class="grid grid-cols-8 gap-x-2 items-center">
<div class="col-span-6">
<div class="relative">
<autocomplete
:items="variables"
:value="selectedVariableLabel"
@selected="selectVariable"
specifiqueClass=" "
/>
</div>
</div>
<p class="mt-1 text-sm italic text-gray-500">L'élément ne s'affiche que si la valeur de la variable correspond au test ci-dessus</p>
<div class="col-span-1">
<select v-model="selectedLeftOperator" @change="selectLeftOperator" class="focus:ring w-full px-6 py-4 text-lg text-center transition bg-white border rounded-md outline-none truncate appearance-none ring-inset">
<option v-for="leftOperator in leftOperators" :value="leftOperator.value">{{ leftOperator.label }}</option>
</select>
</div>
<div class="col-span-1">
<input v-model="selectedLeftBoundary" @change="selectLeftBoundary" class="w-20 px-0 py-4 text-lg transition font-mono text-center border rounded-md outline-none ring-inset focus:ring" type="text" placeholder="1">
</div>
<div class="col-span-6 justify-self-end flex items-center">
<div class="font-bold p-4">et </div>
</div>
<div class="col-span-1">
<select v-model="selectedRightOperator" @change="selectRightOperator" class="focus:ring w-full px-6 py-4 text-lg text-center transition bg-white border rounded-md outline-none truncate appearance-none ring-inset">
<option v-for="rightOperator in rightOperators" :value="rightOperator.value">{{ rightOperator.label }}</option>
</select>
</div>
<div class="col-span-1">
<input v-model="selectedRightBoundary" @change="selectRightBoundary" class="w-20 px-0 py-4 text-lg transition font-mono text-center border rounded-md outline-none ring-inset focus:ring" type="text" placeholder="20">
</div>
</div>
<help-text :text="$t('screen.item.conditions.comparison.question.helpText')" />
</div>
</template>
......
......@@ -91,6 +91,10 @@
"label": "Sélectionnez la question à contrôler",
"helpText": "L'élément ne s'affiche que si la question a reçu une réponse de l’utilisateur"
},
"hasNoAnswer": {
"label": "Sélectionnez la question à contrôler",
"helpText": "L'élément ne s'affiche que si la question n'a pas reçu de réponse de l’utilisateur"
},
"answers": {
"label": "Sélectionnez la ou les réponses pour lesquelles l'élément doit s'afficher",
"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"
......@@ -98,7 +102,8 @@
},
"comparison": {
"question": {
"label": "Sélectionnez la variable à contrôler et définissez les seuils à partir desquels l'élément doit s'afficher"
"label": "Sélectionnez la variable à contrôler et définissez les seuils à partir desquels l'élément doit s'afficher",
"helpText": "L'élément ne s'affiche que si la valeur de la variable correspond au test ci-dessus"
},
"range": {
"label": "La valeur de la variable est&mldr;",
......
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