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

UNOTOPLYS-174 : Mise en place de la modification d'un élément radio button...

UNOTOPLYS-174 : Mise en place de la modification d'un élément radio button dans l'édition des écrans.
parent 290785e4
......@@ -6,13 +6,6 @@ import com.unantes.orientactive.service.UserService;
import com.unantes.orientactive.service.dto.ScreenDTO;
import com.unantes.orientactive.service.dto.ScreenPanelDTO;
import com.unantes.orientactive.web.rest.errors.BadRequestAlertException;
import java.net.URI;
import java.net.URISyntaxException;
import java.security.Principal;
import java.util.LinkedList;
import java.util.List;
import java.util.Optional;
import javax.validation.Valid;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
......@@ -25,11 +18,18 @@ import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import tech.jhipster.web.util.HeaderUtil;
import tech.jhipster.web.util.ResponseUtil;
import javax.servlet.http.HttpServletRequest;
import javax.validation.Valid;
import java.net.URI;
import java.net.URISyntaxException;
import java.security.Principal;
import java.util.List;
import java.util.Optional;
/**
* REST controller for managing {@link com.unantes.orientactive.domain.Screen}.
*/
......@@ -90,7 +90,7 @@ public class ScreenResource {
* @throws URISyntaxException if the Location URI syntax is incorrect.
*/
@PutMapping("/screens")
public ResponseEntity<ScreenDTO> updateScreen(@Valid @RequestBody ScreenDTO screenDTO) throws URISyntaxException {
public ResponseEntity<ScreenDTO> updateScreen(@Valid @RequestBody ScreenDTO screenDTO, final HttpServletRequest request) throws URISyntaxException {
log.debug("REST request to update Screen : {}", screenDTO);
if (screenDTO.getId() == null) {
throw new BadRequestAlertException("Invalid id", ENTITY_NAME, "idnull");
......
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import OaInput from '../../forms/input/oa-input.vue';
import Icon from '@/components/icon/icon.vue';
@Component({
components: {
OaInput,
Icon,
},
})
export default class RadioEdit extends Vue {
@Prop()
public configuration;
public setQuestion(question) {
this.configuration.question = question;
this.notifyChange();
}
public setReference(reference) {
this.configuration.reference = reference;
this.notifyChange();
}
public updateChoiceLabel(editable, choice) {
choice.label = editable.target.textContent;
this.notifyChange();
}
public updateChoiceValue(editable, choice) {
choice.value = editable.target.textContent;
this.notifyChange();
}
public updateChoiceScore(editable, choice) {
choice.score = editable.target.textContent;
this.notifyChange();
}
public notifyChange() {
this.$emit('itemEdit');
}
}
<template>
<main>
<div class="mb-8 border-b-2">
<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
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>
</div>
</main>
</template>
<script lang="ts" src="./radio-edit.component.ts"></script>
import Vue from 'vue';
import Component from 'vue-class-component';
import {Prop} from "vue-property-decorator";
@Component
export default class ScreenItemEdit extends Vue {}
export default class ScreenItemEdit extends Vue {
@Prop()
public componentConfiguration;
public get componentForItem() {
return () => import(`./${this.componentConfiguration.type}/${this.componentConfiguration.type}-edit.vue`);
}
public itemEdit() {
this.$emit('itemEdit');
}
}
<template>
<div class="mb-8 border-b-2">
<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 1</h2>
<button class="flex items-center p-2 text-blue-600 transition hover:bg-blue-600 focus:ring hover:text-blue-100">
<svg class="icon" viewbox="0 0 24 24">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
</svg>
</button>
<button class="flex items-center p-2 text-blue-600 transition hover:bg-blue-600 focus:ring hover:text-blue-100">
<svg class="icon" viewbox="0 0 24 24">
<path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"></path>
</svg>
</button>
<button class="flex items-center p-2 text-red-600 transition ml-auto hover:bg-red-600 focus:ring hover:text-red-100">
<svg class="icon" viewbox="0 0 24 24">
<path
fill="currentColor"
d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z"
></path>
</svg>
</button>
</div>
<!-- Code très partiel, tout n’est pas géré :/, message complémentaire par exemple (aria-describedby…)-->
<div class="mb-8">
<label class="block mb-2 font-bold" for="f0">Titre de la section</label>
<input
class="w-full px-6 py-4 text-lg transition bg-white border rounded-md outline-none ring-inset focus:ring"
type="text"
value=""
aria-describedby="h0"
id="f0"
placeholder="Quelle est la couleur du cheval blanc d’Henry VI ?"
/>
<p class="mt-1 text-sm italic text-gray-500" id="h0"></p>
</div>
<div class="mb-8">
<h3 class="text-lg mb-2">Propositions de réponses</h3>
<div class="bg-white border border-gray-200 rounded-md overflow-hidden mb-8">
<!-- Ces onglets sont les mêmes que ce proposés dans l’écran-->
<ul class="flex justify-center mb-1 border-b">
<li>
<button class="p-2 text-blue-600 border-b border-blue-600 py-2">Par import CSV</button>
</li>
<li>
<button class="p-2 text-gray-500 border-b border-transparent py-2">Saisie manuelle</button>
</li>
</ul>
<div class="p-4 rounded-sm text-sm">
<p class="mb-4">
Vous pouvez importer une liste de propositions au format CSV,
<a href="#" class="text-blue-600 underline">télécharger un modèle de fichier</a> à importer
</p>
<input class="bg-blue-50 p-2 rounded-md w-full text-gray-800" type="file" />
</div>
</div>
<!-- Code très partiel, tout n’est pas géré :/, message complémentaire par exemple (aria-describedby…)-->
<div class="mb-8">
<label class="block mb-2 font-bold" for="f0">Variable</label>
<input
class="w-full px-6 py-4 text-lg transition bg-white border rounded-md outline-none ring-inset font-mono text-purple-600 focus:ring"
type="text"
value="$nom_variable"
aria-describedby="h0"
id="f0"
placeholder=""
/>
<p class="mt-1 text-sm italic text-gray-500" id="h0"></p>
</div>
</div>
</div>
<component :is="componentForItem" :configuration="componentConfiguration" @itemEdit="itemEdit"/>
</template>
<script lang="ts" src="./screen-item-edit.component.ts" />
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 StepToolbar from '@/components/step-toolbar/step-toolbar.vue';
import OaButton from '@/components/button/oa-button.vue';
import OaInput from '@/components/forms/input/oa-input.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';
@Component({
......@@ -71,4 +71,9 @@ export default class ScreenEdit extends Vue {
// TODO message d'erreur de validation
}
}
public saveChange() {
this.screen.items = JSON.stringify(this.screen.itemsList);
this.save();
}
}
......@@ -20,15 +20,17 @@
<a class="block p-2 text-gray-600 border-b border-transparent py-2" href="#">Conditions daffichage</a>
</li>
</ul>
<screen-item-edit v-for="(item, key) in items" :key="key" />
<step-toolbar />
<div class="flex items-center">
<div class="text-right flex-grow">
<oa-button type="submit" variant="primary" :label="$t('button.save')" @click="save" />
<div class="mb-8 border-b-2">
<div v-for="(item, index) in screen.itemsList" :key="index">
<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>
</div>
<screen-item-edit :componentConfiguration="item" @itemEdit="saveChange"></screen-item-edit>
</div>
</div>
</section>
</main>
</template>
<script lang="ts" src="./screen-edit.component.ts" />
<script lang="ts" src="./screen-edit.component.ts"></script>
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