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

src/main/webapp/app/views/form/form-edit.component.ts → src/main/webapp/app/components/screen-item/screen-item-edit.component.ts

@@ -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 {}

src/main/webapp/app/components/screen-item/screen-item-edit.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" />

src/main/webapp/app/router/admin-form.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',

src/main/webapp/app/views/form/form-edit.vue

-<template></template>
-
-<script lang="ts" src="./form-edit.component.ts" />

src/main/webapp/app/views/screen/screen-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
+    });
+  }
+}

src/main/webapp/app/views/screen/screen-edit.vue

+<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" />