screen-edit.vue 1.92 KB
Newer Older
1
2
3
<template>
  <main>
    <section class="max-w-4xl mx-auto p-9">
4
      <h1 class="mb-6 text-3xl">{{ $t('screen.label.step', { num: stepNum }) }}</h1>
5
6
      <oa-input id="title" :label="$t('screen.label.title')" :value="screen.name" required="true" @update="setName" />
      <oa-input id="titleBo" :label="$t('screen.label.titleBo')" :value="screen.nameBo" required="true" @update="setNameBo" />
7
      <oa-input
8
        id="reference"
9
10
11
        :label="$t('screen.label.reference.label')"
        :value="screen.reference"
        required="true"
12
        @update="setReference"
13
14
        :helpText="$t('screen.label.reference.helpText')"
      />
15
      <oa-textarea id="description" :label="$t('screen.label.description')" :value="screen.description" @update="setDescription" />
16

17
18
19
20
21
      <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>
      </ul>
22
23
24
25

      <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">
26
            <h2 class="p-2 font-bold uppercase text-blue-600 text-xs">{{ $t('screen.label.section') }} {{ index }}</h2>
27
          </div>
28
          <screen-item-edit :componentConfiguration="item" @itemEdit="saveItemChange"></screen-item-edit>
29
        </div>
30
        <div class="p-2 bg-blue-100">
31
32
33
34
35
36
37
          <oa-input
            id="newItemType"
            :label="$t('screen.label.newItemType')"
            :value="newItemType"
            required="true"
            @update="setNewItemType"
          />
38
39
40
41
          <button @click="addItem" class="flex items-center p-2 text-red-600 transition hover:bg-red-600 focus:ring hover:text-red-100">
            <icon name="add"></icon>
          </button>
        </div>
42
43
44
45
46
      </div>
    </section>
  </main>
</template>

47
<script lang="ts" src="./screen-edit.component.ts"></script>