project-booster-vue 8.90.4 → 8.91.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.90.4",
+  "version": "8.91.1",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",

package/src/components/configurations/search/PbConfigurationsSearch.vue

@@ -306,10 +306,6 @@ $responsive-breakpoint: 'm';
     & :deep(.m-dialog__body) {
       flex-grow: 1;
     }
-
-    & :deep(.m-dialog__footer) {
-      z-index: 1;
-    }
   }
 
   &__results {
@@ -324,8 +320,6 @@ $responsive-breakpoint: 'm';
   }
 
   &__buttons {
-    @include set-box-shadow('m');
-
     display: flex;
     flex-direction: column-reverse;
     justify-content: center;

package/src/components/inspiration/PbInspiration.stories.mdx

@@ -7,11 +7,9 @@ import {
   mediaFileResolver,
   uploadMediaResolver,
 } from '../../service/api/mocks/mediaMock';
-import { notContentResolver } from '../../service/api/mocks/commonMock';
 import { rest } from 'msw';
+import { notContentResolver } from '../../service/api/mocks/commonMock';
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
-import { vuexfireMutations } from 'vuexfire';
-import PbMediaUpload from '../media/upload/PbMediaUpload';
 
 <Meta
   title="Project Booster/Components/ 🦠 PbInspiration"
@@ -26,16 +24,17 @@ import PbMediaUpload from '../media/upload/PbMediaUpload';
           media: mediaStore,
         },
         mutations: {
-          ...vuexfireMutations,
+          eventBusSendEvent(state, { code, payload }) {
+            console.log('event bus data : ', code, payload);
+          },
         },
-      },
-      [
-        {
-          name: 'PbMediaUpload',
-          path: '/media-upload',
-          component: PbMediaUpload,
+        actions: {
+          sendEventToBus({ commit }, action) {
+            commit('eventBusSendEvent', action);
+          },
         },
-      ],
+      },
+      [],
     ),
   ]}
 />

package/src/components/inspiration/PbInspiration.vue

@@ -15,7 +15,7 @@
         size="s"
       />
       <m-flex v-if="(!isLoadingMedia || mediaList.length > 0) && !mediaLoadError">
-        <pb-media-upload namespace="media" />
+        <pb-media-upload namespace="media" @media-uploaded="handleMediaUploaded" />
       </m-flex>
     </m-flex>
     <m-flex class="pb-inspiration__container">
@@ -177,7 +177,14 @@ export default {
     }),
   },
 
+  created() {
+    this.$store.dispatch('sendEventToBus', { code: 'mediaHubLanded', payload: {} });
+  },
+
   methods: {
+    handleMediaUploaded() {
+      this.$store.dispatch('media/refreshMediaList');
+    },
     handleClickOnDelete(media) {
       this.mediaToDelete = media;
     },
@@ -206,6 +213,12 @@ export default {
         this.mediaToDelete = null;
       }, 1000);
     },
+    beforeRouteLeave(to, from, next) {
+      if (!to.name.startsWith('PbInspiration')) {
+        this.$store.dispatch('sendEventToBus', { code: 'mediaHubExited', payload: {} });
+      }
+      next();
+    },
   },
 };
 </script>

package/src/components/media/detail/PbMediaDetail.vue

@@ -339,11 +339,9 @@ export default {
         this.reset();
         document.getElementsByTagName('html')[0].style.setProperty('overflow', 'hidden', 'important');
         document.getElementsByTagName('body')[0].style.setProperty('overflow', 'hidden', 'important');
-        this.$store.dispatch('sendEventToBus', { code: 'mediaDetailLanded', payload: {} });
       } else {
         document.getElementsByTagName('html')[0].style.overflow = 'auto';
         document.getElementsByTagName('body')[0].style.overflow = 'auto';
-        this.$store.dispatch('sendEventToBus', { code: 'mediaDetailExit', payload: {} });
       }
     },
     isMediaNameSaved(newValue, oldValue) {

package/src/components/media/list/PbMediaList.vue

@@ -69,7 +69,7 @@
       :namespace="namespace"
       :media="currentMedia"
       @click-on-delete="handleClickOnDelete"
-      @click-on-close="currentMedia = null"
+      @click-on-close="handleClickOnClose"
     />
   </m-flex>
 </template>
@@ -142,11 +142,30 @@ export default {
     },
   },
 
+  watch: {
+    currentMedia(newValue, oldValue) {
+      if (oldValue === newValue) {
+        return;
+      }
+      if (!newValue) {
+        this.$store.dispatch('sendEventToBus', { code: 'mediaListLanded', payload: {} });
+      } else {
+        this.$store.dispatch('sendEventToBus', { code: 'mediaDetailLanded', payload: {} });
+      }
+    },
+  },
+
   mounted() {
+    this.$store.dispatch('sendEventToBus', { code: 'mediaListLanded', payload: {} });
     this.showMoreButtonAnimationDelay = 0;
   },
 
   methods: {
+    handleClickOnClose() {
+      this.$store.dispatch('sendEventToBus', { code: 'mediaDetailExit', payload: {} });
+      this.currentMedia = null;
+    },
+
     handleClickOnDelete(media) {
       this.$emit('click-on-delete', media);
     },

package/src/components/media/upload/PbMediaUpload.vue

@@ -117,7 +117,7 @@
                   label="Nom de la photo"
                   v-model="fileName"
                   :error="nameSaveError"
-                  :disabled="isMediaNameSaving"
+                  :disabled="isMediaUploading"
                   required
                   autofocus
                 />
@@ -126,12 +126,13 @@
                     size="s"
                     class="pb-media-upload__preview-room-toggle"
                     name="pb-media-room-toggle"
+                    v-model="isRoomPicture"
                     label="Il s'agit d'une photo de ma pièce"
                   />
                 </div>
                 <transition name="pb-media-upload--fade" mode="out-in" @before-leave="beforeLeave">
                   <m-flex
-                    v-if="isMediaNameSaving"
+                    v-if="isMediaUploading"
                     class="pb-media-upload__preview-actions"
                     justify-content="center"
                     full-width
@@ -221,7 +222,8 @@ export default {
       isMediaUploading: false,
       isMediaUploaded: false,
       mediaUploadError: null,
-      isMediaNameSaving: false,
+      isNameAlreadyUsed: false,
+      isRoomPicture: false,
     };
   },
 
@@ -244,8 +246,6 @@ export default {
         error = `Le nom  doit faire au maximum ${NAME_MAX_LENGTH} caractères`;
       } else if (this.isNameAlreadyUsed) {
         error = 'Ce nom est déjà utilisé dans ce projet';
-      } else if (this.mediaNameSaveError) {
-        error = 'Une erreur est survenue lors de la sauvegarde';
       }
       return error;
     },
@@ -280,20 +280,6 @@ export default {
         }
       }
     },
-
-    isMediaNameSaving(newValue) {
-      if (!newValue && this.isMediaUploaded) {
-        setTimeout(() => {
-          this.$refs.pbMediaUploadPreviewInput.focus();
-        }, 300);
-      }
-    },
-
-    isMediaNameSaved(newValue) {
-      if (newValue) {
-        this.$router.go(-1);
-      }
-    },
   },
 
   mounted() {
@@ -330,6 +316,7 @@ export default {
       this.validationErrors = [];
       this.formData = null;
       this.fileName = null;
+      this.isRoomPicture = false;
       this.$refs?.pbMediaUploadForm?.reset();
       this.$store.dispatch(this.storePrefix + 'resetMediaUploadContext');
     },
@@ -339,7 +326,7 @@ export default {
         this.isMediaUploading = true;
         this.isMediaUploaded = false;
         try {
-          this.$store.dispatch(this.storePrefix + 'uploadFile', this.formData);
+          this.$store.dispatch(this.storePrefix + 'uploadFile', this.formData, this.fileName, this.isRoomPicture);
           this.isMediaUploaded = true;
         } catch (error) {
           this.mediaUploadError = error;
@@ -413,26 +400,6 @@ export default {
 
       return valid;
     },
-
-    saveMediaName() {
-      if (this.isNameValid()) {
-        this.isNameAlreadyUsed = false;
-        this.mediaNameSaveError = null;
-        this.isMediaNameSaving = true;
-        this.isMediaNameSaved = false;
-        try {
-          this.$store.dispatch(this.storePrefix + 'saveMediaName', this.fileName);
-          this.mediaNameSaveError = null;
-          this.isMediaNameSaved = true;
-        } catch (error) {
-          if (error.response?.body?.code === 'NAME_ALREADY_USED') {
-            this.isNameAlreadyUsed = true;
-          }
-          this.mediaNameSaveError = error;
-        }
-        this.isMediaNameSaving = false;
-      }
-    },
   },
 };
 </script>

package/src/components/mozaic/dialog/MDialog.vue

@@ -148,21 +148,8 @@ export default {
   watch: {
     showDialog(newValue) {
       if (newValue) {
-        this.bodyShadowTopOpacity = 0;
-        const intervalId = setInterval(() => {
-          if (this.$refs.pbDialogBody) {
-            clearInterval(intervalId);
-            this.bodyShadowBottomOpacity =
-              Math.min(
-                this.$refs.pbDialogBody.scrollHeight -
-                  this.$refs.pbDialogBody.scrollTop -
-                  this.$refs.pbDialogBody.clientHeight,
-                100,
-              ) / 100;
-          }
-        }, 100);
+        this.initShadows();
       }
-
       this.adjustStyle(newValue);
     },
   },
@@ -170,6 +157,7 @@ export default {
   mounted() {
     this.updateComponentHeight();
     window.addEventListener('resize', this.handleResizeEvent);
+    this.initShadows();
   },
 
   beforeUnmount() {
@@ -216,6 +204,22 @@ export default {
       this.bodyShadowBottomOpacity =
         Math.min(event.srcElement.scrollHeight - event.srcElement.scrollTop - event.srcElement.clientHeight, 100) / 100;
     },
+
+    initShadows() {
+      this.bodyShadowTopOpacity = 0;
+      const intervalId = setInterval(() => {
+        if (this.$refs.pbDialogBody) {
+          clearInterval(intervalId);
+          this.bodyShadowBottomOpacity =
+            Math.min(
+              this.$refs.pbDialogBody.scrollHeight -
+                this.$refs.pbDialogBody.scrollTop -
+                this.$refs.pbDialogBody.clientHeight,
+              100,
+            ) / 100;
+        }
+      }, 100);
+    },
   },
 };
 </script>
@@ -274,6 +278,8 @@ $responsive-breakpoint: 'm';
   }
 
   &__header {
+    background-color: white;
+
     box-sizing: border-box;
     position: relative;
     width: 100%;
@@ -327,6 +333,7 @@ $responsive-breakpoint: 'm';
   }
 
   &__footer {
+    background-color: white;
     box-sizing: border-box;
     width: 100%;
     z-index: 3;

package/src/components/mozaic/layer/MLayer.vue

@@ -155,20 +155,8 @@ export default {
   watch: {
     showLayer(newValue) {
       if (newValue) {
-        const intervalId = setInterval(() => {
-          if (this.$refs.pbLayerBodyContent) {
-            clearInterval(intervalId);
-            this.bodyShadowBottomOpacity =
-              Math.min(
-                this.$refs.pbLayerBodyContent.scrollHeight -
-                  this.$refs.pbLayerBodyContent.scrollTop -
-                  this.$refs.pbLayerBodyContent.clientHeight,
-                100,
-              ) / 100;
-          }
-        }, 100);
+        this.initShadows();
       }
-
       this.adjustStyle(newValue);
     },
   },
@@ -176,6 +164,7 @@ export default {
   mounted() {
     this.updateComponentHeight();
     window.addEventListener('resize', this.handleResizeEvent);
+    this.initShadows();
   },
 
   beforeUnmount() {
@@ -222,6 +211,21 @@ export default {
       this.bodyShadowBottomOpacity =
         Math.min(event.srcElement.scrollHeight - event.srcElement.scrollTop - event.srcElement.clientHeight, 100) / 100;
     },
+
+    initShadows() {
+      const intervalId = setInterval(() => {
+        if (this.$refs.pbLayerBodyContent) {
+          clearInterval(intervalId);
+          this.bodyShadowBottomOpacity =
+            Math.min(
+              this.$refs.pbLayerBodyContent.scrollHeight -
+                this.$refs.pbLayerBodyContent.scrollTop -
+                this.$refs.pbLayerBodyContent.clientHeight,
+              100,
+            ) / 100;
+        }
+      }, 100);
+    },
   },
 };
 </script>
@@ -268,6 +272,7 @@ $responsive-breakpoint: 'm';
   }
 
   &__header {
+    background-color: white;
     position: relative;
     width: 100%;
     z-index: 3;
@@ -321,6 +326,7 @@ $responsive-breakpoint: 'm';
   }
 
   &__footer {
+    background-color: white;
     width: 100%;
     z-index: 3;
   }