From 4e55f2de89d58da9ebd3a608cd1c4be228c6a33e Mon Sep 17 00:00:00 2001
From: Eryne Kachetel-Langue <eryne.kachetellangue@hotmail.com>
Date: Wed, 20 Nov 2024 11:26:38 +0100
Subject: [PATCH] FEAT ITEM-389-front-adapter-type-file-pour-le-choix-ppn-epn :
      - modification de la mise en forme des boutons dans TypeFile.vue

---
 src/components/Supp/TypeFile.vue | 69 ++++++++++++++++++--------------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/components/Supp/TypeFile.vue b/src/components/Supp/TypeFile.vue
index e7ec2f0..1b7ff03 100644
--- a/src/components/Supp/TypeFile.vue
+++ b/src/components/Supp/TypeFile.vue
@@ -1,30 +1,38 @@
 <template>
-  <v-card flat :loading="isLoading">
-    <v-card-title class="d-flex justify-space-between custom-card-title">
-      <span>Choix du type de fichier</span>
-      <v-btn depressed variant="text" @click="deleted()" prepend-icon="mdi-delete">Supprimer</v-btn>
-    </v-card-title>
-    <v-card-text class="pa-0 ma-0">
-      <v-overlay v-if="isLoading" v-model="overlay" class="justify-center align-center" contained>
-        <v-progress-circular
-          color="info"
-          indeterminate
-        ></v-progress-circular>
-      </v-overlay>
-      <v-hover v-slot="{ isHovering, props }" v-for="type in types" :key="type">
-        <div v-bind="props" :class="`btn-perso elevation-${isHovering ? 6 : 2} pa-5 ma-1 d-flex justify-space-between`" @click="onClick(type)">
-          <v-row class="align-center">
-            <v-col cols="12" sm="3" class="d-flex justify-center">
-              <v-icon size="x-large" dark color="primary"> mdi-file-document-outline  </v-icon>
-            </v-col>
-            <v-col cols="12" sm="9" class="d-flex justify-start">
-              <span class="group large-text">Fichier {{ type }}</span>
-            </v-col>
-          </v-row>
-        </div>
-      </v-hover>
-    </v-card-text>
-  </v-card>
+	<v-card flat :loading="isLoading">
+		<v-card-title class="d-flex justify-space-between custom-card-title">
+			<span>Choix du type de fichier</span>
+			<v-btn depressed variant="text" @click="deleted()" prepend-icon="mdi-delete">Supprimer</v-btn>
+		</v-card-title>
+		<v-card-text class="pa-0 ma-0">
+			<v-overlay v-if="isLoading" v-model="overlay" class="justify-center align-center" contained>
+				<v-progress-circular color="info" indeterminate></v-progress-circular>
+			</v-overlay>
+			<v-row justify="space-between" class="mt-4 mb-4 ml-1 mr-1">
+				<v-hover v-slot="{isHovering, props}" v-for="type in types" :key="type">
+					<div v-if="type.type === 'EPN'" style="width: 10px; border-left: solid 2px #295494"></div>
+					<v-col>
+						<v-row class="pl-1">
+              <span style="font-size: 1.3em; font-weight: 500; color: #326bb1">{{ type.message }}</span>
+						</v-row>
+						<v-row>
+							<v-col v-bind="props" :class="`btn-perso d-flex justify-center elevation-${isHovering ? 6 : 2} pa-5 ma-1 d-flex`" @click="onClick(type)">
+								<v-row class="align-center">
+									<v-col cols="12" sm="3" class="d-flex justify-center">
+										<v-icon size="x-large" dark color="primary"> mdi-file-document-outline </v-icon>
+									</v-col>
+									<v-col cols="12" sm="9" class="d-flex justify-start">
+										<span class="group large-text">Fichier {{ type.type }}</span>
+									</v-col>
+								</v-row>
+							</v-col>
+						</v-row>
+					</v-col>
+					<div v-if="type.type === 'PPN'" style="width: 10px; border-right: solid 2px #295494"></div>
+				</v-hover>
+			</v-row>
+		</v-card-text>
+	</v-card>
 </template>
 <script setup>
 
@@ -37,9 +45,12 @@ const props = defineProps({
     default: false
   }
 })
-const model = defineModel();
-const types = ['PPN','EPN'];
-const overlay = ref(true);
+const model = defineModel()
+const types = [
+	{type: 'PPN', message: 'Numéro de notice'},
+	{type: 'EPN', message: "Numéro d'exemplaire"}
+]
+const overlay = ref(true)
 
 function onClick(type) {
   model.value = type;