feat [front]: admin page titles

front/layouts/admin.vue

@@ -11,6 +11,10 @@
 import { useAuthStore } from "~/stores/authStore"
 
 const authStore = useAuthStore()
+useHead({
+  titleTemplate: (pageTitle) =>
+    (pageTitle ? `${pageTitle} | ` : "") + "Admin | Ciné-club ENS Ulm",
+})
 </script>
 
 <style scoped lang="sass"></style>

front/nuxt.config.ts

@@ -3,7 +3,6 @@
 export default defineNuxtConfig({
   app: {
     head: {
-      title: "front",
       htmlAttrs: {
         lang: "fr",
       },

front/pages/admin/[id]/edition.vue

@@ -13,17 +13,15 @@
 <script setup lang="ts">
 import { Film } from "~/composables/types"
 
-definePageMeta({
-  layout: "admin",
-})
+definePageMeta({ layout: "admin" })
 const route = useRoute()
 const id = route.params.id
 
 const film = reactive<Film>({})
 
 Object.assign(film, (await apiGet(`admin/films/${id}/`)).data.value)
-
 // TODO manage errors
+useHead({ title: `Édition de ${film.title}` })
 
 async function save(publish: boolean) {
   const { data } = await apiPatch(`admin/films/${id}/`, {

front/pages/admin/[id]/index.vue

@@ -5,8 +5,11 @@
         {{ film.isConfirmed ? "Publié" : "Brouillon" }}
       </div>
       <h1 class="mx-5">
-        <time v-if="film.projectionDate" :datetime="film.projectionDate">{{ new Date(film.projectionDate).toLocaleString()}}</time>
-        <template v-else>À planifier</template> -
+        <time v-if="film.projectionDate" :datetime="film.projectionDate"
+          >{{ new Date(film.projectionDate).toLocaleString() }}
+        </time>
+        <template v-else>À planifier</template>
+        -
         {{ film.title }}
         <span class="has-text-grey-lighter">#{{ film.id }}</span>
       </h1>
@@ -73,15 +76,14 @@
 <script setup lang="ts">
 import { Film } from "~/composables/types"
 
-definePageMeta({
-  layout: "admin",
-})
+definePageMeta({ layout: "admin" })
 const route = useRoute()
 const id = route.params.id
 
 const film = reactive<Film>({})
 
 Object.assign(film, (await apiGet(`admin/films/${id}/`)).data.value)
+useHead({ title: `Consultation de ${film.title}` })
 
 const tags = computed(() => {
   const base = [

front/pages/admin/config.vue

@@ -1,5 +1,7 @@
 <template></template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  definePageMeta({ layout: "admin" })
+</script>
 
 <style scoped lang="sass"></style>

front/pages/admin/index.vue

@@ -23,9 +23,8 @@
 <script setup lang="ts">
 import { ShortFilm } from "~/composables/types"
 
-definePageMeta({
-  layout: "admin",
-})
+definePageMeta({ layout: "admin" })
+useHead({ title: "Liste des séances" })
 
 const films = reactive<ShortFilm[]>([])
 

front/pages/admin/login.vue

@@ -54,9 +54,8 @@
 <script setup lang="ts">
 import { useAuthStore } from "~/stores/authStore"
 
-definePageMeta({
-  layout: "admin",
-})
+definePageMeta({ layout: "admin" })
+useHead({ title: "Connexion" })
 
 const authStore = useAuthStore()
 const login = ref({ username: "", password: "" })

front/pages/admin/nouveau.vue

@@ -8,9 +8,8 @@
 <script setup lang="ts">
 import { Film } from "~/composables/types"
 
-definePageMeta({
-  layout: "admin",
-})
+definePageMeta({ layout: "admin" })
+useHead({ title: "Nouvelle séance" })
 
 const film = reactive<Film>({})
 const { $api } = useNuxtApp()