Commit 3b649f3d authored by François-Xavier Lebastard's avatar François-Xavier Lebastard
Browse files

fix (MR) : correction remarque de MR

parent 5b4c7e2a
...@@ -32,13 +32,13 @@ export default class Panel extends Vue { ...@@ -32,13 +32,13 @@ export default class Panel extends Vue {
public selectScreen(screen) { public selectScreen(screen) {
if (screen.id != this.idScreen) { if (screen.id != this.idScreen) {
this.$router.push({ this.$router.push({
name: "ScreenEditComponent", name: 'ScreenEditComponent',
params: { params: {
idWorkspace: this.idWorkspace, idWorkspace: this.idWorkspace,
idForm: this.idForm, idForm: this.idForm,
idScreen: screen.id idScreen: screen.id,
} },
}) });
} }
} }
} }
import Vue from 'vue'; import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator'; import { Component, Prop } from 'vue-property-decorator';
import OaInput from '../../forms/input/oa-input.vue'; import OaInput from '../../forms/input/oa-input.vue';
import OaTextarea from '@/components/forms/textarea/oa-textarea.vue'; import OaTextarea from '@/components/forms/textarea/oa-textarea.vue';
...@@ -36,5 +36,4 @@ export default class RadioEdit extends Vue { ...@@ -36,5 +36,4 @@ export default class RadioEdit extends Vue {
public notifyChange() { public notifyChange() {
this.$emit('itemEdit'); this.$emit('itemEdit');
} }
} }
<template> <template>
<main> <main>
<div class="mb-8 border-b-2"> <div class="mb-8 border-b-2">
<oa-input id="0" label="Type" :value="configuration.type" required="true" disabled="true"/> <oa-input id="type" :label="$t('screen.item.message.type')" :value="configuration.type" required="true" disabled="true" />
<oa-textarea id="0" label="Contenu" :value="configuration.content" required="true" @update="setContent"/> <oa-textarea
<oa-input id="0" label="Référence" :value="configuration.reference" required="true" @update="setReference"/> id="content"
<oa-input id="0" label="Condition d'affichage" :value="configuration.displayCondition" required="true" @update="setDisplayCondition"/> :label="$t('screen.item.message.content')"
<oa-input id="0" label="Style" :value="configuration.style" required="true" @update="setStyleAffichage"/> :value="configuration.content"
required="true"
@update="setContent"
/>
<oa-input
id="reference"
:label="$t('screen.item.message.reference')"
:value="configuration.reference"
required="true"
@update="setReference"
/>
<oa-input
id="displayCondition"
:label="$t('screen.item.message.displayCondition')"
:value="configuration.displayCondition"
required="true"
@update="setDisplayCondition"
/>
<oa-input
id="style"
:label="$t('screen.item.message.style')"
:value="configuration.style"
required="true"
@update="setStyleAffichage"
/>
</div> </div>
</main> </main>
</template> </template>
......
...@@ -52,13 +52,13 @@ export default class RadioEdit extends Vue { ...@@ -52,13 +52,13 @@ export default class RadioEdit extends Vue {
} }
public deleteItem(choice) { public deleteItem(choice) {
this.configuration.choices = this.configuration.choices.filter((element) => element !== choice); this.configuration.choices = this.configuration.choices.filter(element => element !== choice);
this.notifyChange(); this.notifyChange();
} }
public updateNewChoiceLabel(editable) { public updateNewChoiceLabel(editable) {
this.newChoiceLabel = editable.target.textContent; this.newChoiceLabel = editable.target.textContent;
}; }
public updateNewChoiceValue(editable) { public updateNewChoiceValue(editable) {
this.newChoiceValue = editable.target.textContent; this.newChoiceValue = editable.target.textContent;
...@@ -72,7 +72,7 @@ export default class RadioEdit extends Vue { ...@@ -72,7 +72,7 @@ export default class RadioEdit extends Vue {
this.configuration.choices.push({ this.configuration.choices.push({
label: this.newChoiceLabel, label: this.newChoiceLabel,
value: this.newChoiceValue, value: this.newChoiceValue,
score: this.newChoiceScore score: this.newChoiceScore,
}); });
this.notifyChange(); this.notifyChange();
} }
......
<template> <template>
<main> <main>
<div class="mb-8 border-b-2"> <div class="mb-8 border-b-2">
<oa-input id="0" label="Type" :value="configuration.type" required="true" disabled="true"/> <oa-input id="type" :label="$t('screen.item.radio.type')" :value="configuration.type" required="true" disabled="true" />
<oa-input id="0" label="Question" :value="configuration.question" required="true" @update="setQuestion"/> <oa-input
<oa-input id="0" label="Référence" :value="configuration.reference" required="true" @update="setReference"/> id="question"
<oa-input id="0" label="Condition d'affichage" :value="configuration.displayCondition" required="true" @update="setDisplayCondition"/> :label="$t('screen.item.radio.question')"
:value="configuration.question"
required="true"
@update="setQuestion"
/>
<oa-input
id="reference"
:label="$t('screen.item.radio.reference')"
:value="configuration.reference"
required="true"
@update="setReference"
/>
<oa-input
id="displayCondition"
:label="$t('screen.item.radio.displayCondition')"
:value="configuration.displayCondition"
required="true"
@update="setDisplayCondition"
/>
<h3 class="text-lg mb-2">Propositions de réponses</h3> <h3 class="text-lg mb-2">Propositions de réponses</h3>
<div class="bg-white border border-gray-200 rounded-md"> <div class="bg-white border border-gray-200 rounded-md">
...@@ -14,35 +31,46 @@ ...@@ -14,35 +31,46 @@
</div> </div>
<table class="w-full bg-white border-t"> <table class="w-full bg-white border-t">
<thead class="font-bold"> <thead class="font-bold">
<tr class="border-b-2"> <tr class="border-b-2">
<th class="p-2 text-left w-1/2">Libellé</th> <th class="p-2 text-left w-1/2">Libellé</th>
<th class="p-2 text-right w-6">Valeur</th> <th class="p-2 text-right w-6">Valeur</th>
<th class="p-2 text-center">Score</th> <th class="p-2 text-center">Score</th>
<th class="p-2 text-center">Actions</th> <th class="p-2 text-center">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(choice, index) in configuration.choices" :key="index" class="text-left align-top border-b"> <tr v-for="(choice, index) in configuration.choices" :key="index" class="text-left align-top border-b">
<td class="p-2 focus:ring" contenteditable="true" @blur="updateChoiceLabel($event, choice)">{{choice.label}}</td> <td class="p-2 focus:ring" contenteditable="true" @blur="updateChoiceLabel($event, choice)">{{ choice.label }}</td>
<td class="p-2 focus:ring" contenteditable="true" @blur="updateChoiceValue($event, choice)">{{choice.value}}</td> <td class="p-2 focus:ring" contenteditable="true" @blur="updateChoiceValue($event, choice)">{{ choice.value }}</td>
<td class="p-2 font-mono text-center focus:ring" contenteditable="true" @blur="updateChoiceScore">{{choice.score}}</td> <td class="p-2 font-mono text-center focus:ring" contenteditable="true" @blur="updateChoiceScore">{{ choice.score }}</td>
<td class="align-middle text-center"> <td class="align-middle text-center">
<button @click="deleteItem(choice)" <button
class="flex items-center p-2 text-red-600 transition hover:bg-red-600 focus:ring hover:text-red-100"> @click="deleteItem(choice)"
<icon name="trash"></icon> class="flex items-center p-2 text-red-600 transition hover:bg-red-600 focus:ring hover:text-red-100"
</button> >
</td> <icon name="trash"></icon>
</tr> </button>
<tr class="text-left align-top border-b text-gray-500"> </td>
<td class="p-2 focus:ring focus:text-gray-900" contenteditable="true" @blur="updateNewChoiceLabel">{{ $t('screen.items.newLabelPlaceholder') }}</td> </tr>
<td class="p-2 focus:ring focus:text-gray-900" contenteditable="true" @blur="updateNewChoiceValue">{{ $t('screen.items.newValuePlaceholder') }}</td> <tr class="text-left align-top border-b text-gray-500">
<td class="p-2 font-mono text-center focus:ring" contenteditable="true" @blur="updateNewChoiceScore">{{ $t('screen.items.newScorePlaceholder') }}</td> <td class="p-2 focus:ring focus:text-gray-900" contenteditable="true" @blur="updateNewChoiceLabel">
<td class="align-middle text-right"> {{ $t('screen.items.newLabelPlaceholder') }}
<button @click="addItem" class="flex items-center p-2 text-blue-600 transition hover:bg-blue-600 focus:ring hover:text-blue-100"> </td>
<icon name="add"></icon> <td class="p-2 focus:ring focus:text-gray-900" contenteditable="true" @blur="updateNewChoiceValue">
</button> {{ $t('screen.items.newValuePlaceholder') }}
</td> </td>
</tr> <td class="p-2 font-mono text-center focus:ring" contenteditable="true" @blur="updateNewChoiceScore">
{{ $t('screen.items.newScorePlaceholder') }}
</td>
<td class="align-middle text-right">
<button
@click="addItem"
class="flex items-center p-2 text-blue-600 transition hover:bg-blue-600 focus:ring hover:text-blue-100"
>
<icon name="add"></icon>
</button>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
......
import Vue from 'vue'; import Vue from 'vue';
import Component from 'vue-class-component'; import Component from 'vue-class-component';
import {Prop} from "vue-property-decorator"; import { Prop } from 'vue-property-decorator';
@Component @Component
export default class ScreenItemEdit extends Vue { export default class ScreenItemEdit extends Vue {
@Prop() @Prop()
public componentConfiguration; public componentConfiguration;
......
...@@ -6,6 +6,8 @@ export interface IScreen { ...@@ -6,6 +6,8 @@ export interface IScreen {
description?: any; description?: any;
defaultNextScreenReference?: any; defaultNextScreenReference?: any;
items?: any; items?: any;
itemsList?: [];
index?: number;
previousName?: string; previousName?: string;
previousId?: number; previousId?: number;
nextId?: number; nextId?: number;
......
import Vue from 'vue'; import Vue from 'vue';
import {Component, Inject} from 'vue-property-decorator'; import { Component, Inject } from 'vue-property-decorator';
import ScreenItemEdit from '@/components/screen-item/screen-item-edit.vue'; import ScreenItemEdit from '@/components/screen-item/screen-item-edit.vue';
import StepToolbar from '@/components/step-toolbar/step-toolbar.vue'; import StepToolbar from '@/components/step-toolbar/step-toolbar.vue';
import OaButton from '@/components/button/oa-button.vue'; import OaButton from '@/components/button/oa-button.vue';
import OaInput from '@/components/forms/input/oa-input.vue'; import OaInput from '@/components/forms/input/oa-input.vue';
import OaTextarea from '@/components/forms/textarea/oa-textarea.vue'; import OaTextarea from '@/components/forms/textarea/oa-textarea.vue';
import {IScreen, Screen, screenValidate} from '@/shared/model/screen.model'; import { IScreen, Screen, screenValidate } from '@/shared/model/screen.model';
import ScreenService from '@/entities/screen/screen.service'; import ScreenService from '@/entities/screen/screen.service';
import Icon from '@/components/icon/icon.vue'; import Icon from '@/components/icon/icon.vue';
...@@ -31,24 +31,24 @@ export default class ScreenEdit extends Vue { ...@@ -31,24 +31,24 @@ export default class ScreenEdit extends Vue {
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
next(vm => { next(vm => {
vm.handleNavigationChange(to); vm.handleNavigationChange(to.params);
}) });
} }
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
this.handleNavigationChange(to); this.handleNavigationChange(to.params);
next(); next();
} }
public handleNavigationChange(to) { public handleNavigationChange({ idWorkspace, idForm, idScreen }) {
this.$store.commit('setIdWorkspace', to.params.idWorkspace); this.$store.commit('setIdWorkspace', idWorkspace);
this.$store.commit('setIdForm', to.params.idForm); this.$store.commit('setIdForm', idForm);
this.$store.commit('setIdScreen', to.params.idScreen); this.$store.commit('setIdScreen', idScreen);
this.$store.dispatch('loadScreens', to.params.idForm); this.$store.dispatch('loadScreens', idForm);
if (to.params.idScreen) { if (idScreen) {
this.retrieveScreen(to.params.idScreen); this.retrieveScreen(idScreen);
} else { } else {
this.retrieveFirstScreenOfForm(to.params.idForm); this.retrieveFirstScreenOfForm(idForm);
} }
} }
...@@ -120,6 +120,6 @@ export default class ScreenEdit extends Vue { ...@@ -120,6 +120,6 @@ export default class ScreenEdit extends Vue {
} }
public addItem() { public addItem() {
this.screen.itemsList.push({type: this.newItemType}); this.screen.itemsList.push({ type: this.newItemType });
} }
} }
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<main> <main>
<section class="max-w-4xl mx-auto p-9"> <section class="max-w-4xl mx-auto p-9">
<h1 class="mb-6 text-3xl">{{ $t('screen.label.step', { num: stepNum }) }}</h1> <h1 class="mb-6 text-3xl">{{ $t('screen.label.step', { num: stepNum }) }}</h1>
<oa-input id="0" :label="$t('screen.label.title')" :value="screen.name" required="true" @update="setName" /> <oa-input id="title" :label="$t('screen.label.title')" :value="screen.name" required="true" @update="setName" />
<oa-input id="0" :label="$t('screen.label.titleBo')" :value="screen.nameBo" required="true" @update="setNameBo" /> <oa-input id="titleBo" :label="$t('screen.label.titleBo')" :value="screen.nameBo" required="true" @update="setNameBo" />
<oa-input <oa-input
id="1" id="reference"
:label="$t('screen.label.reference.label')" :label="$t('screen.label.reference.label')"
:value="screen.reference" :value="screen.reference"
required="true" required="true"
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<div class="mb-8 border-b-2"> <div class="mb-8 border-b-2">
<div v-for="(item, index) in screen.itemsList" :key="index"> <div v-for="(item, index) in screen.itemsList" :key="index">
<div class="bg-blue-100 mb-8 flex w-auto items-center"> <div class="bg-blue-100 mb-8 flex w-auto items-center">
<h2 class="p-2 font-bold uppercase text-blue-600 text-xs">Section {{ index }}</h2> <h2 class="p-2 font-bold uppercase text-blue-600 text-xs">{{ $t('screen.label.section') }} {{ index }}</h2>
</div> </div>
<screen-item-edit :componentConfiguration="item" @itemEdit="saveItemChange"></screen-item-edit> <screen-item-edit :componentConfiguration="item" @itemEdit="saveItemChange"></screen-item-edit>
</div> </div>
......
...@@ -60,4 +60,8 @@ export default class WorkspaceView extends Vue { ...@@ -60,4 +60,8 @@ export default class WorkspaceView extends Vue {
public getFormLink(idForm: string): string { public getFormLink(idForm: string): string {
return `/admin/workspace/${this.idWorkspace}/form/${idForm}/view`; return `/admin/workspace/${this.idWorkspace}/form/${idForm}/view`;
} }
public getWorkspaceLink(): string {
return `/admin/workspace/${this.idWorkspace}/form/creation`;
}
} }
<template> <template>
<main> <main>
<section class="max-w-6xl px-4 mx-auto py-9 xl:px-0"> <section class="max-w-6xl px-4 mx-auto py-9 xl:px-0">
<toolbar <toolbar title="Formulaires" addActionName="Ajouter un formulaire" :actionLink="getWorkspaceLink()"></toolbar>
title="Formulaires"
addActionName="Ajouter un formulaire"
:actionLink="'/admin/workspace/' + idWorkspace + '/form/creation'"
></toolbar>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<card <card
v-for="(form, index) in forms" v-for="(form, index) in forms"
......
...@@ -31,5 +31,40 @@ ...@@ -31,5 +31,40 @@
"reference": "reference du screen pour constituer l&#39;URL" "reference": "reference du screen pour constituer l&#39;URL"
} }
} }
},
"screen": {
"add": "Ajouter un écran",
"label": {
"step": "Étape {{ num }}",
"title": "Titre de l’étape",
"section": "Section",
"titleBo": "Titre de l'étape (seulement pour le backoffice)",
"reference": {
"label": "Référence",
"helpText": "Cette information est utilisée pour définir l'URL de l'étape (ex: https://apply.univ-nantes.fr/form/staps/<strong>ref1</strong>)"
},
"description": "Description",
"newItemType": "Type de l'item à ajouter"
},
"items": {
"newLabelPlaceholder": "Ajouter un libellé ...",
"newValuePlaceholder": "Ma valeur ...",
"newScorePlaceholder": "0"
},
"item": {
"message": {
"type": "Type",
"content": "Contenu",
"reference": "Référence",
"displayCondition": "Condition d'affichage",
"style": "Style"
},
"radio": {
"type": "Type",
"question": "Question",
"reference": "Référence",
"displayCondition": "Condition d'affichage"
}
}
} }
} }
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
"label": { "label": {
"step": "Étape {{ num }}", "step": "Étape {{ num }}",
"title": "Titre de l’étape", "title": "Titre de l’étape",
"section": "Section",
"titleBo": "Titre de l'étape (seulement pour le backoffice)", "titleBo": "Titre de l'étape (seulement pour le backoffice)",
"reference": { "reference": {
"label": "Référence", "label": "Référence",
...@@ -46,9 +47,24 @@ ...@@ -46,9 +47,24 @@
"newItemType": "Type de l'item à ajouter" "newItemType": "Type de l'item à ajouter"
}, },
"items": { "items": {
"newLabelPlaceholder": "Ajouter un libellé ...", "newLabelPlaceholder": "Ajouter un libellé...",
"newValuePlaceholder": "Ma valeur ...", "newValuePlaceholder": "Ma valeur...",
"newScorePlaceholder": "0" "newScorePlaceholder": "0"
},
"item": {
"message": {
"type": "Type",
"content": "Contenu",
"reference": "Référence",
"displayCondition": "Condition d'affichage",
"style": "Style"
},
"radio": {
"type": "Type",
"question": "Question",
"reference": "Référence",
"displayCondition": "Condition d'affichage"
}
} }
} }
} }
...@@ -150,16 +150,11 @@ class NavigationServiceTest { ...@@ -150,16 +150,11 @@ class NavigationServiceTest {
*/ */
@BeforeEach @BeforeEach
void initTest() { void initTest() {
// TODO KRO : Corriger les tests suite à la modification du modèle de données des écrans.
form = new Form().name(FIRST_FORM_TITLE).reference(FIRST_FORM_REFERENCE).description("description").publicationState(FormPublicationState.PUBLISHED); form = new Form().name(FIRST_FORM_TITLE).reference(FIRST_FORM_REFERENCE).description("description").publicationState(FormPublicationState.PUBLISHED);
Set<Screen> screenList = new HashSet<>(); Set<Screen> screenList = new HashSet<>();
firstScreen = new Screen().name(FIRST_SCREEN_TITLE).nameBo(FIRST_SCREEN_TITLE).index(1).reference(FIRST_SCREEN_REFERENCE).description("first screen of the form").defaultNextScreenReference("").items("[]").form(form); firstScreen = new Screen().name(FIRST_SCREEN_TITLE).nameBo(FIRST_SCREEN_TITLE).index(1).reference(FIRST_SCREEN_REFERENCE).description("first screen of the form").defaultNextScreenReference("").items("[]").form(form);
secondScreen = new Screen().name(SECOND_SCREEN_TITLE).nameBo(SECOND_SCREEN_TITLE).index(2).reference(SECOND_SCREEN_REFERENCE).description("second screen of the form").defaultNextScreenReference("").items("[]").form(form); secondScreen = new Screen().name(SECOND_SCREEN_TITLE).nameBo(SECOND_SCREEN_TITLE).index(2).reference(SECOND_SCREEN_REFERENCE).description("second screen of the form").defaultNextScreenReference("").items("[]").form(form);
// .previous(firstScreen);
thirdScreen = new Screen().name(THIRD_SCREEN_TITLE).nameBo(THIRD_SCREEN_TITLE).index(3).reference(THIRD_SCREEN_REFERENCE).description("third screen of the form").defaultNextScreenReference("").items("[]").form(form); thirdScreen = new Screen().name(THIRD_SCREEN_TITLE).nameBo(THIRD_SCREEN_TITLE).index(3).reference(THIRD_SCREEN_REFERENCE).description("third screen of the form").defaultNextScreenReference("").items("[]").form(form);
// .previous(secondScreen);
// firstScreen.setNext(secondScreen);
// secondScreen.setNext(thirdScreen);
screenList.add(firstScreen); screenList.add(firstScreen);
screenList.add(secondScreen); screenList.add(secondScreen);
screenList.add(thirdScreen); screenList.add(thirdScreen);
......
...@@ -77,12 +77,6 @@ class ScreenNavigationServiceTest extends AbstractTest { ...@@ -77,12 +77,6 @@ class ScreenNavigationServiceTest extends AbstractTest {
screen3.setId(3L); screen3.setId(3L);
screen4 = new Screen().name("screen 04").index(4).reference("S04").items(readTestResource("screen04Item.json")).form(form); screen4 = new Screen().name("screen 04").index(4).reference("S04").items(readTestResource("screen04Item.json")).form(form);
screen4.setId(4L); screen4.setId(4L);
// screen1.next(screen2);
// screen2.previous(screen1);
// screen2.next(screen3);
// screen3.previous(screen2);
// screen3.next(screen4);
// screen4.previous(screen3);
final ServiceConverter serviceConverter = new ServiceConverter(); final ServiceConverter serviceConverter = new ServiceConverter();
screenMapper = new ScreenMapperImpl(new FormMapperImpl(), new NextScreenExpressionDTOMapperImpl()); screenMapper = new ScreenMapperImpl(new FormMapperImpl(), new NextScreenExpressionDTOMapperImpl());
screenMapper.setServiceConverter(serviceConverter); screenMapper.setServiceConverter(serviceConverter);
......
...@@ -159,9 +159,6 @@ public class FormApiDelegateImplIT { ...@@ -159,9 +159,6 @@ public class FormApiDelegateImplIT {
secondScreen = new Screen().name(SECOND_SCREEN_TITLE).nameBo(SECOND_SCREEN_TITLE).index(2).reference(SECOND_SCREEN_REFERENCE).description("second screen of the form").defaultNextScreenReference("").items("[]").form(form); secondScreen = new Screen().name(SECOND_SCREEN_TITLE).nameBo(SECOND_SCREEN_TITLE).index(2).reference(SECOND_SCREEN_REFERENCE).description("second screen of the form").defaultNextScreenReference("").items("[]").form(form);
// .previous(firstScreen); // .previous(firstScreen);
thirdScreen = new Screen().name(THIRD_SCREEN_TITLE).nameBo(THIRD_SCREEN_TITLE).index(3).reference(THIRD_SCREEN_REFERENCE).description("third screen of the form").defaultNextScreenReference("").items("[]").form(form); thirdScreen = new Screen().name(THIRD_SCREEN_TITLE).nameBo(THIRD_SCREEN_TITLE).index(3).reference(THIRD_SCREEN_REFERENCE).description("third screen of the form").defaultNextScreenReference("").items("[]").form(form);