screen-edit.vue 1.42 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="0" :label="$t('screen.label.title')" :value="screen.name" required="true" @update="setName" />
      <oa-input id="0" :label="$t('screen.label.titleBo')" :value="screen.nameBo" required="true" @update="setNameBo" />
7
8
9
10
11
      <oa-input
        id="1"
        :label="$t('screen.label.reference.label')"
        :value="screen.reference"
        required="true"
12
        @update="setReference"
13
14
        :helpText="$t('screen.label.reference.helpText')"
      />
15
16
      <oa-textarea id="2" :label="$t('screen.label.description')" :value="screen.description" @update="setDescription" />

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
26
27

      <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>
28
          <screen-item-edit :componentConfiguration="item" @itemEdit="saveItemChange"></screen-item-edit>
29
30
31
32
33
34
        </div>
      </div>
    </section>
  </main>
</template>

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