From 95df86ef602bbcf63a828e0f161c519b78e99ad5 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Sat, 27 Aug 2022 16:53:52 +0200
Subject: [PATCH] fix [front]: admin one-node page

---
 front/pages/admin/[id]/edition.vue |   7 +-
 front/pages/admin/[id]/index.vue   | 122 +++++++++++++++--------------
 front/pages/admin/index.vue        |  28 ++++---
 front/pages/admin/nouveau.vue      |   6 +-
 4 files changed, 86 insertions(+), 77 deletions(-)

diff --git a/front/pages/admin/[id]/edition.vue b/front/pages/admin/[id]/edition.vue
index 1794fa1..a3add0b 100644
--- a/front/pages/admin/[id]/edition.vue
+++ b/front/pages/admin/[id]/edition.vue
@@ -1,6 +1,8 @@
 <template>
-  <h1 class="title">Modifier la séance du {{ film.projectionDate }}</h1>
-  <AdminForm v-model="film" @save="saveDraft" @publish="publish" />
+  <main>
+    <h1 class="title">Modifier la séance du {{ film.projectionDate }}</h1>
+    <AdminForm v-model="film" @save="saveDraft" @publish="publish" />
+  </main>
 </template>
 
 <script setup lang="ts">
@@ -15,6 +17,7 @@ const id = route.params.id
 const film = reactive<Film>({})
 
 Object.assign(film, (await apiGet(`admin/films/${id}/`)).data.value)
+
 // TODO manage errors
 
 async function save(publish: boolean) {
diff --git a/front/pages/admin/[id]/index.vue b/front/pages/admin/[id]/index.vue
index 3e3db20..d759f6e 100644
--- a/front/pages/admin/[id]/index.vue
+++ b/front/pages/admin/[id]/index.vue
@@ -1,69 +1,71 @@
 <template>
-  <div class="title is-2">
-    <div class="tag is-large">
-      {{ film.isConfirmed ? "Publié" : "Brouillon" }}
+  <main>
+    <div class="title is-2">
+      <div class="tag is-large">
+        {{ film.isConfirmed ? "Publié" : "Brouillon" }}
+      </div>
+      <h1 class="mx-5">
+        {{ film.projectionDate || "À planifier" }} - {{ film.title }}
+        <span class="has-text-grey-lighter">#{{ film.id }}</span>
+      </h1>
+      <nuxt-link :to="`/admin/${id}/edition`" class="button">
+        <span>Éditer</span>
+      </nuxt-link>
     </div>
-    <h1 class="mx-5">
-      {{ film.projectionDate || "À planifier" }} - {{ film.title }}
-      <span class="has-text-grey-lighter">#{{ film.id }}</span>
-    </h1>
-    <nuxt-link :to="`/admin/${id}/edition`" class="button">
-      <span>Éditer</span>
-    </nuxt-link>
-  </div>
-  <div class="field is-grouped is-grouped-multiline">
-    <div v-for="(tag, index) of tags" :key="index" class="control">
-      <div class="tags has-addons are-medium">
-        <span v-if="tag.label" class="tag">{{ tag.label }}</span>
-        <span class="tag is-info">{{ tag.value }}</span>
+    <div class="field is-grouped is-grouped-multiline">
+      <div v-for="(tag, index) of tags" :key="index" class="control">
+        <div class="tags has-addons are-medium">
+          <span v-if="tag.label" class="tag">{{ tag.label }}</span>
+          <span class="tag is-info">{{ tag.value }}</span>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="columns">
-    <div class="column">
-      <h2 class="title is-3">Synopsis</h2>
-      {{ film.synopsis }}
+    <div class="columns">
+      <div class="column">
+        <h2 class="title is-3">Synopsis</h2>
+        {{ film.synopsis }}
+      </div>
+      <div class="column">
+        <h2 class="title is-3">Acteurs</h2>
+        <ul>
+          <li v-for="(actor, index) of film.actors" :key="index">
+            {{ actor }}
+          </li>
+        </ul>
+      </div>
     </div>
-    <div class="column">
-      <h2 class="title is-3">Acteurs</h2>
-      <ul>
-        <li v-for="(actor, index) of film.actors" :key="index">
-          {{ actor }}
-        </li>
-      </ul>
+    <div class="columns">
+      <div class="column">
+        <iframe
+          v-if="film.trailerLink"
+          :src="film.trailerLink"
+          width="560"
+          height="315"
+          frameborder="0"
+          allowfullscreen="allowfullscreen"
+        />
+        <template v-else>Bande annonce non renseignée</template>
+      </div>
+      <div class="column">
+        <img
+          class="alignnone wp-image-1873 size-medium"
+          :src="film.posterLink"
+          alt="affiche du film"
+          width="300"
+          height="300"
+        />
+      </div>
+      <div class="column">
+        <img
+          class="alignnone wp-image-1873 size-medium"
+          :src="film.bannerLink"
+          alt="bannière du film"
+          width="300"
+          height="300"
+        />
+      </div>
     </div>
-  </div>
-  <div class="columns">
-    <div class="column">
-      <iframe
-        v-if="film.trailerLink"
-        :src="film.trailerLink"
-        width="560"
-        height="315"
-        frameborder="0"
-        allowfullscreen="allowfullscreen"
-      />
-      <template v-else>Bande annonce non renseignée</template>
-    </div>
-    <div class="column">
-      <img
-        class="alignnone wp-image-1873 size-medium"
-        :src="film.posterLink"
-        alt="affiche du film"
-        width="300"
-        height="300"
-      />
-    </div>
-    <div class="column">
-      <img
-        class="alignnone wp-image-1873 size-medium"
-        :src="film.bannerLink"
-        alt="bannière du film"
-        width="300"
-        height="300"
-      />
-    </div>
-  </div>
+  </main>
 </template>
 
 <script setup lang="ts">
diff --git a/front/pages/admin/index.vue b/front/pages/admin/index.vue
index f336039..48999cc 100644
--- a/front/pages/admin/index.vue
+++ b/front/pages/admin/index.vue
@@ -1,18 +1,20 @@
 <template>
-  <h1 class="title">Liste des séances</h1>
-  <ul class="list has-visible-pointer-controls">
-    <li v-for="film of films" :key="film.id" class="list-item">
-      <nuxt-link :to="`/admin/${film.id}`" class="list-item-content">
-        {{ film.projectionDate || "À planifier" }} - {{ film.title }}
-        <template v-if="film.director"> de {{ film.director }}</template>
-      </nuxt-link>
-      <div class="list-item-controls">
-        <nuxt-link :to="`/admin/${film.id}/edition`" class="button">
-          <span>Éditer</span>
+  <main>
+    <h1 class="title">Liste des séances</h1>
+    <ul class="list has-visible-pointer-controls">
+      <li v-for="film of films" :key="film.id" class="list-item">
+        <nuxt-link :to="`/admin/${film.id}`" class="list-item-content">
+          {{ film.projectionDate || "À planifier" }} - {{ film.title }}
+          <template v-if="film.director"> de {{ film.director }}</template>
         </nuxt-link>
-      </div>
-    </li>
-  </ul>
+        <div class="list-item-controls">
+          <nuxt-link :to="`/admin/${film.id}/edition`" class="button">
+            <span>Éditer</span>
+          </nuxt-link>
+        </div>
+      </li>
+    </ul>
+  </main>
 </template>
 
 <script setup lang="ts">
diff --git a/front/pages/admin/nouveau.vue b/front/pages/admin/nouveau.vue
index b5e7c03..c820666 100644
--- a/front/pages/admin/nouveau.vue
+++ b/front/pages/admin/nouveau.vue
@@ -1,6 +1,8 @@
 <template>
-  <h1 class="title">Nouvelle séance</h1>
-  <AdminForm v-model="film" @save="post" @publish="publish" />
+  <main>
+    <h1 class="title">Nouvelle séance</h1>
+    <AdminForm v-model="film" @save="post" @publish="publish" />
+  </main>
 </template>
 
 <script setup lang="ts">