Commit e2942f47 authored by Kevin Robert's avatar Kevin Robert
Browse files

UNOTOPLYS-175 : Ajout d'items.

parent 25f091b1
......@@ -13,6 +13,10 @@ export default class RadioEdit extends Vue {
@Prop()
public configuration;
private newChoiceLabel: string;
private newChoiceValue: string;
private newChoiceScore: string;
public setQuestion(question) {
this.configuration.question = question;
this.notifyChange();
......@@ -23,6 +27,11 @@ export default class RadioEdit extends Vue {
this.notifyChange();
}
public setDisplayCondition(displayCondition) {
this.configuration.displayCondition = displayCondition;
this.notifyChange();
}
public updateChoiceLabel(editable, choice) {
choice.label = editable.target.textContent;
this.notifyChange();
......@@ -46,4 +55,25 @@ export default class RadioEdit extends Vue {
this.configuration.choices = this.configuration.choices.filter((element) => element !== choice);
this.notifyChange();
}
public updateNewChoiceLabel(editable) {
this.newChoiceLabel = editable.target.textContent;
};
public updateNewChoiceValue(editable) {
this.newChoiceValue = editable.target.textContent;
}
public updateNewChoiceScore(editable) {
this.newChoiceScore = editable.target.textContent;
}
public addItem() {
this.configuration.choices.push({
label: this.newChoiceLabel,
value: this.newChoiceValue,
score: this.newChoiceScore
});
this.notifyChange();
}
}
<template>
<main>
<div class="mb-8 border-b-2">
<oa-input id="0" label="Type" :value="configuration.type" required="true" disabled="true"/>
<oa-input id="0" label="Question" :value="configuration.question" required="true" @update="setQuestion"/>
<oa-input id="0" label="Référence" :value="configuration.reference" required="true" @update="setReference"/>
<table class="w-full bg-white border-t">
<thead class="font-bold">
<tr class="border-b-2">
<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-center">Score</th>
<th class="p-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<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="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="align-middle text-center">
<button @click="deleteItem(choice)"
class="flex items-center p-2 text-red-600 transition hover:bg-red-600 focus:ring hover:text-red-100">
<icon name="trash"></icon>
</button>
</td>
</tr>
</tbody>
</table>
<oa-input id="0" label="Condition d'affichage" :value="configuration.displayCondition" required="true" @update="setDisplayCondition"/>
<h3 class="text-lg mb-2">Propositions de réponses</h3>
<div class="bg-white border border-gray-200 rounded-md">
<div class="p-4 rounded-sm text-sm">
<p class="text-sm italic text-gray-500">Les données du tableau sont directement modifiables.</p>
</div>
<table class="w-full bg-white border-t">
<thead class="font-bold">
<tr class="border-b-2">
<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-center">Score</th>
<th class="p-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<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="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="align-middle text-center">
<button @click="deleteItem(choice)"
class="flex items-center p-2 text-red-600 transition hover:bg-red-600 focus:ring hover:text-red-100">
<icon name="trash"></icon>
</button>
</td>
</tr>
<tr class="text-left align-top border-b text-gray-500">
<td class="p-2 focus:ring focus:text-gray-900" contenteditable="true" @blur="updateNewChoiceLabel">{{ $t('screen.items.newLabelPlaceholder') }}</td>
<td class="p-2 focus:ring focus:text-gray-900" contenteditable="true" @blur="updateNewChoiceValue">{{ $t('screen.items.newValuePlaceholder') }}</td>
<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>
</table>
</div>
</div>
</main>
</template>
......
......@@ -43,6 +43,11 @@
"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"
},
"items": {
"newLabelPlaceholder": "Ajouter un libellé ...",
"newValuePlaceholder": "Ma valeur ...",
"newScorePlaceholder": "0"
}
}
}
Markdown is supported
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