II. Utilisation du router et gestion des parcours
<aside> 💡
Exercice 8 : Mettre en place l’écran de la liste des UEs avec son DAO, ajouter le lien au routeur et à la navbar.
</aside>
Vous devriez avoir un écran similaire :
Pour la création d’une UE, on va se baser fortement sur le formulaire de création d’un parcours, cependant, cette fois nous aurons la relation entre les ues et les parcours à gérer. Nous verrons par la suite pour modifier la gestion des parcours afin de gérer les UES d’un parcours directement sur l’affichage d’un parcours.
Dans notre formulaire de parcours, nous avons mis en place un système de modal/dialog/pop-up, on va en faire un composant pour pouvoir le réutiliser sur notre formulaire d’UE. Créer le composant components/modals/CustomModal.vue.
<script setup lang="ts">
import { defineProps } from 'vue';
defineProps({
isOpen: {
type: Object as () => bool,
required: true
},
width: {
type: Object as () => string | null,
required: false,
default: null,
},
});
</script>
<template>
<div v-if="isOpen" class="custom-modal">
<div class="card new-parcours" :style="{ 'width': width ?? 'auto' }">
<div class="card-header" style="background: #273656">
<slot name="title"></slot>
</div>
<div class="card-body">
<slot name="body"></slot>
</div>
</div>
</div>
</template>
<style scoped>
.custom-modal {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(87, 86, 86, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.card-header {
background: #273656;
color: white;
text-align: left;
}
</style>
Et on va devoir modifier ParcoursForm.vue pour qu’il utilise cette CustomModal, voici les étapes :