Close the banner-picker when cancelling or successfully changing the banner

src/views/Profile/Dialogs/PageInformations/BannerPicker.vue

@@ -18,7 +18,7 @@
   ></v-file-input>
 
   <div class="flex justify-end space-x-4">
-    <v-btn color="black" variant="text">Annuler</v-btn>
+    <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
     <v-btn color="#A6147D" @click="publish">Enregistrer</v-btn>
   </div>
 
@@ -34,6 +34,8 @@ const props = defineProps({
   }
 })
 
+const emits = defineEmits(['closeRequested'])
+
 const selectedFile = ref("")
 const fileUrl = ref(props.creator.storedDataUrls.bannerPictureUrl)
 
@@ -60,9 +62,14 @@ const publish = async () => {
         formData)
 
     props.creator.storedDataUrls.bannerPictureUrl = fileUrl
+    emits('closeRequested')
   } catch (error) {
     console.error(error)
   }
 }
 
+const cancel = () => {
+  emits('closeRequested')
+}
+
 </script>

src/views/Profile/PageInformations.vue

@@ -38,14 +38,31 @@ const componentsMap = {
   ColorMenu
 };
 
-const openModal = (component) => {
+const openDialog = (component) => {
-  currentComponent.value = componentsMap[component];
+  currentComponent.value = componentsMap[component]
-  dialog.value = true;
+  dialog.value = true
-};
+}
+
+const closeDialog = () => {
+  currentComponent.value = null
+  dialog.value = false
+}
 
 </script>
 
 <template>
+  
+  <v-dialog v-model="dialog" max-width="600px">
+    <v-card>
+      <v-card-text>
+        <component :is="currentComponent"
+                   :creator="userStore.creator"
+                   @closeRequested="closeDialog()"
+        ></component>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+  
   <div class="flex flex-col items-center w-full">
     <h1 class="uppercase pb-5 text-2xl">
       <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
@@ -57,14 +74,14 @@ const openModal = (component) => {
       <div class="flex flex-col w-full">
 
         <button
-            @click="openModal('ColorTopBanner')"
+            @click="openDialog('ColorTopBanner')"
             class="flex justify-end h-10 align-center bg-fuchsia-800 text-white px-5 hover:brightness-150">
           <v-icon>mdi-eyedropper-variant</v-icon>
         </button>
 
         <button>
           <img
-              @click="openModal('BannerPicker')"
+              @click="openDialog('BannerPicker')"
               :src="userStore.creator.storedDataUrls.bannerPictureUrl"
               class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
               alt="Tutorial Banner"
@@ -72,14 +89,14 @@ const openModal = (component) => {
         </button>
 
         <button
-            @click="openModal('ColorBottomBanner')"
+            @click="openDialog('ColorBottomBanner')"
             class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5 hover:brightness-150">
           <v-icon>mdi-eyedropper-variant</v-icon>
         </button>
 
         <button class="flex justify-center my-5">
           <img
-              @click="openModal('ProfilePicturePicker')"
+              @click="openDialog('ProfilePicturePicker')"
               class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
               src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
               alt="Profile Image"
@@ -87,7 +104,7 @@ const openModal = (component) => {
         </button>
 
         <button
-            @click="openModal('ColorBorder')"
+            @click="openDialog('ColorBorder')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
           <span class="flex-auto text-left pr-6">Couleur du contour de la photo de profil.</span>
@@ -97,7 +114,7 @@ const openModal = (component) => {
         </button>
 
         <button
-            @click="openModal('ColorMenu')"
+            @click="openDialog('ColorMenu')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
           <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
           <span class="flex-auto text-left pr-6">couleur des entêtes de menus</span>
@@ -113,7 +130,7 @@ const openModal = (component) => {
       <div class="py-5 uppercase ml-4">Réseaux Sociaux</div>
       <div class="flex flex-col w-full">
         <button
-            @click="openModal('ModalFacebook')"
+            @click="openDialog('ModalFacebook')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
           <span class="flex-auto text-left pr-6">Facebook</span>
@@ -123,7 +140,7 @@ const openModal = (component) => {
         </button>
 
         <button
-            @click="openModal('ModalInstagram')"
+            @click="openDialog('ModalInstagram')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
           <span class="flex-auto text-left pr-6">Instagram</span>
@@ -133,7 +150,7 @@ const openModal = (component) => {
         </button>
 
         <button
-            @click="openModal('ModalX')"
+            @click="openDialog('ModalX')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/xblack.png"
                                                                 class="w-5 h-5"></span>
@@ -144,7 +161,7 @@ const openModal = (component) => {
         </button>
 
         <button
-            @click="openModal('ModalLinkedIn')"
+            @click="openDialog('ModalLinkedIn')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
           <span class="flex-auto text-left pr-6">LinkedIn</span>
@@ -154,7 +171,7 @@ const openModal = (component) => {
         </button>
 
         <button
-            @click="openModal('ModalTikTok')"
+            @click="openDialog('ModalTikTok')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/externals/tiktok-black.png"
                                                                 class="w-5 h-5"></span>
@@ -165,7 +182,7 @@ const openModal = (component) => {
         </button>
 
         <button
-            @click="openModal('ModalYoutube')"
+            @click="openDialog('ModalYoutube')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
           <span class="flex-auto text-left pr-6">Youtube</span>
@@ -175,7 +192,7 @@ const openModal = (component) => {
         </button>
 
         <button
-            @click="openModal('ModalReddit')"
+            @click="openDialog('ModalReddit')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
           <span class="flex-auto text-left pr-6">Reddit</span>
@@ -185,7 +202,7 @@ const openModal = (component) => {
         </button>
 
         <button
-            @click="openModal('ModalWebsite')"
+            @click="openDialog('ModalWebsite')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
           <span class="flex-auto text-left pr-6">Site web personnel</span>
@@ -199,25 +216,11 @@ const openModal = (component) => {
     </div>
   </div>
 
-  <!-- Modal -->
-  <v-dialog v-model="dialog" max-width="600px">
-    <v-card>
-      <v-card-text>
-        <component :is="currentComponent" :creator="userStore.creator"></component>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
-
 </template>
 
 <style>
-.HoverBtn:hover {
-  @apply bg-[#A6147D] text-white;
-  @apply hover:opacity-90;
-  /* Réduire l'opacité au survol */
-}
 
-.HoverBtnpicture:hover {
+.HoverBtn:hover {
   @apply bg-[#A6147D] text-white;
   @apply hover:opacity-90;
   /* Réduire l'opacité au survol */