Commit 614e6f9e authored by Julien BOUYER's avatar Julien BOUYER
Browse files

UNOTOPLYS-166 feat(screen) : modifier un écran

parent 9a189dc0
......@@ -2,4 +2,4 @@ import Vue from 'vue';
import Component from 'vue-class-component';
@Component
export default class FormEdit extends Vue {}
export default class ScreenItemEdit extends Vue {}
<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>
</template>
<script lang="ts" src="./screen-item-edit.component.ts" />
import { Authority } from '@/shared/security/authority';
const FormCreationComponent = () => import('@/views/form/form-creation.vue');
const FormEditComponent = () => import('@/views/form/form-edit.vue');
const FormPreviewComponent = () => import('@/views/form/form-preview.vue');
const FormResultsComponent = () => import('@/views/form/form-results.vue');
const FormSettingsComponent = () => import('@/views/form/form-settings.vue');
......@@ -16,12 +15,6 @@ export default [
component: FormCreationComponent,
meta: { authorities: [Authority.ADMIN] },
},
{
path: '/admin/form/:idForm/edit',
name: 'FormEditComponent',
component: FormEditComponent,
meta: { authorities: [Authority.ADMIN] },
},
{
path: '/admin/form/:idForm/preview',
name: 'FormPreviewComponent',
......
<template></template>
<script lang="ts" src="./form-edit.component.ts" />
import Vue from 'vue';
import Component from 'vue-class-component';
import ScreenItemEdit from '@/components/screen-item/screen-item-edit.vue';
import OaButton from '@/components/button/oa-button.vue';
import OaInput from '@/components/forms/input/oa-input.vue';
import StepToolbar from '@/components/step-toolbar/step-toolbar.vue';
@Component({
components: {
ScreenItemEdit,
OaButton,
OaInput,
StepToolbar,
},
})
export default class FormEdit extends Vue {
public items: any = [{}]; // TODO récupérer les items dans le store
beforeRouteEnter(to, from, next) {
next(vm => {
// récupération de l'idScreen et appel du service
});
}
}
<template>
<main>
<section class="max-w-4xl mx-auto p-9">
<h1 class="mb-6 text-3xl">Étape 4</h1>
<oa-input id="0" label="Titre de l’étape" value="Votre profil scolaire" required="true" />
<ul class="flex justify-center border-b-2 mb-8">
<li>
<a class="block p-2 text-blue-500 border-b border-blue-600 py-2" href="#">Contenus</a>
</li>
<li>
<a class="block p-2 text-gray-600 border-b border-transparent py-2" href="#">Conditions d’affichage</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="Enregistrer" />
</div>
</div>
</section>
</main>
</template>
<script lang="ts" src="./screen-edit.component.ts" />
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