cineclub-site/front/pages/admin/index.vue

<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>
        </nuxt-link>
      </div>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ShortFilm } from "~/composables/types"

definePageMeta({
  layout: "admin",
})

const films = reactive<ShortFilm[]>([])

Object.assign(films, (await apiGet("films/")).data.value)
</script>