project-booster-vue 9.31.0 → 9.31.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.31.0",
+  "version": "9.31.3",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/media/PbMedia.vue

@@ -12,6 +12,7 @@
       <div class="pb-media__header-upload-button" v-if="(!isLoadingMedia || mediaList.length > 0) && !mediaLoadError">
         <pb-media-upload
           v-if="!readOnly"
+          :store-module-name="storeModuleName"
           :payload="uploadPayload"
           @media-uploaded="handleMediaUploaded"
           ref="pbMediaUpload"
@@ -37,12 +38,13 @@
           subtitle-error="Voulez-vous relancer le chargement des photos"
           retry-button-label="Réessayer"
           :state="mediaLoadError ? 'error' : 'loading'"
-          @loader-click="$store.dispatch('documents/loadMedia', $route.params.projectId)"
+          @loader-click="$store.dispatch(storeModuleName + '/loadMedia')"
         />
       </m-flex>
       <pb-media-list
         v-else
         ref="pbMediaList"
+        :store-module-name="storeModuleName"
         :media-list="mediaList"
         :has-still-media="hasStillMedia"
         :is-loading-media="isLoadingMedia"
@@ -51,7 +53,7 @@
         :read-only="readOnly"
         @add-media="addMedia"
         @click-on-delete="handleClickOnDelete"
-        @click-load-more="$store.dispatch('documents/loadMoreMedia')"
+        @click-load-more="$store.dispatch(storeModuleName + '/loadMoreMedia')"
       />
     </m-flex>
     <m-notification
@@ -124,7 +126,7 @@
       } » n'a pas pu être supprimée.`"
       closable
       :link-label="mediaDeletionError ? 'Réessayer' : null"
-      @link-click="$store.dispatch('documents/deleteMedia', currentMedia)"
+      @link-click="$store.dispatch(storeModuleName + '/deleteMedia', currentMedia)"
       @close="resetMediaDeletionError"
     />
     <pb-sticky-footer
@@ -135,6 +137,7 @@
       <pb-media-upload
         ref="pbMediaUploadSticky"
         class="pb-media__sticky-upload-button-content"
+        :store-module-name="storeModuleName"
         :payload="uploadPayload"
         @media-uploaded="handleMediaUploaded"
         :read-only="readOnly"
@@ -189,6 +192,13 @@ export default defineComponent({
       type: String,
       default: 'Mes documents',
     },
+    /**
+     * The store module name
+     */
+    storeModuleName: {
+      type: String,
+      default: 'documents',
+    },
     /**
      * The detail component payload
      */
@@ -234,16 +244,16 @@ export default defineComponent({
     const isDeletingMedia = ref(false);
     const isMediaDeletionSuccess = ref(false);
 
-    const isLoadingMedia = computed(() => store.getters['documents/isLoadingMedia']);
-    const hasStillMedia = computed(() => store.getters['documents/hasStillMedia']);
-    const mediaList = computed(() => store.getters['documents/getMediaList']);
-    const mediaLoadError = computed(() => store.getters['documents/getMediaLoadError']);
-    const isAddPhotoDisabled = computed(() => store.getters['documents/isAddPhotoDisabled']);
-    const currentMedia = computed(() => store.getters['documents/getCurrentMedia']);
+    const isLoadingMedia = computed(() => store.getters[props.storeModuleName + '/isLoadingMedia']);
+    const hasStillMedia = computed(() => store.getters[props.storeModuleName + '/hasStillMedia']);
+    const mediaList = computed(() => store.getters[props.storeModuleName + '/getMediaList']);
+    const mediaLoadError = computed(() => store.getters[props.storeModuleName + '/getMediaLoadError']);
+    const isAddPhotoDisabled = computed(() => store.getters[props.storeModuleName + '/isAddPhotoDisabled']);
+    const currentMedia = computed(() => store.getters[props.storeModuleName + '/getCurrentMedia']);
     const project = computed(() => store.getters['projects/getProject']);
 
     const handleMediaUploaded = () => {
-      store.dispatch('documents/refreshMediaList');
+      store.dispatch(props.storeModuleName + '/refreshMediaList');
     };
     const handleClickOnDelete = (media: Media) => {
       mediaToDelete.value = media;
@@ -269,10 +279,10 @@ export default defineComponent({
       mediaDeletionError.value = null;
       isDeletingMedia.value = true;
       try {
-        await store.dispatch('documents/deleteMedia', mediaToDelete.value);
+        await store.dispatch(props.storeModuleName + '/deleteMedia', mediaToDelete.value);
         isMediaDeletionSuccess.value = true;
         if (currentMedia.value && currentMedia.value.id === mediaToDelete.value?.id) {
-          store.dispatch('documents/updateCurrentMedia', null);
+          store.dispatch(props.storeModuleName + '/updateCurrentMedia', null);
         }
         setTimeout(() => {
           isMediaDeletionSuccess.value = false;

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

@@ -16,7 +16,10 @@
           <pb-media-loader class="hidden-on-mobile" />
         </m-flex>
         <div class="pb-media-detail__image" :style="`background-image: url(${mediaUrl});`" />
-        <div v-if="media.fileType && media.fileType === 'PDF'" class="pb-media-detail__image-download">
+        <div
+          v-if="storeModuleName === 'documents' && media.fileType && media.fileType === 'PDF'"
+          class="pb-media-detail__image-download"
+        >
           <m-button
             label="Visualiser le PDF"
             right-icon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Display_ExternalLink_24px.svg"
@@ -222,6 +225,13 @@ export default defineComponent({
       type: Object,
       default: null,
     },
+    /**
+     * The store module name to contextualize the store.
+     */
+    storeModuleName: {
+      type: String,
+      default: 'documents',
+    },
     /**
      * Indicates whether the UI is read only
      */
@@ -275,18 +285,22 @@ export default defineComponent({
       }
       return error;
     },
+    storePrefix() {
+      return this.storeModuleName ? this.storeModuleName + '/' : '';
+    },
     mediaUrl() {
       let mediaUrl;
       // If document, check if pdf or image
       if (this.media?.fileType === 'PDF') {
-        mediaUrl = this.$store.getters['documents/getThumbnailUrl'].replace('@@PB_MEDIA_ID_FILLER@@', this.media.id);
-      } else {
-        mediaUrl = this.$store.getters['documents/getMediaUrl'].replace('@@PB_MEDIA_ID_FILLER@@', this.media.id);
+        mediaUrl = this.$store.getters[this.storePrefix + 'getThumbnailUrl'].replace(
+          '@@PB_MEDIA_ID_FILLER@@',
+          this.media.id,
+        );
       }
       return mediaUrl;
     },
     pdfUrl() {
-      return this.$store.getters['documents/getMediaUrl'].replace('@@PB_MEDIA_ID_FILLER@@', this.media.id);
+      return this.$store.getters[this.storePrefix + 'getMediaUrl'].replace('@@PB_MEDIA_ID_FILLER@@', this.media.id);
     },
   },
 
@@ -411,7 +425,7 @@ export default defineComponent({
         this.mediaNameSaveError = false;
         this.isMediaNameSaved = false;
         try {
-          await this.$store.dispatch('documents/updateMediaName', { id: this.media.id, name: this.mediaName });
+          await this.$store.dispatch(this.storePrefix + 'updateMediaName', { id: this.media.id, name: this.mediaName });
           this.$emit('media-name-updated', this.mediaName);
           this.isMediaNameSaved = true;
         } catch (err: any) {

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

@@ -67,6 +67,7 @@
     </m-flex>
     <pb-media-detail
       v-if="currentMedia"
+      :store-module-name="storeModuleName"
       :payload="detailPayload"
       :media="currentMedia"
       :read-only="readOnly"
@@ -118,6 +119,13 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    /**
+     * The store module name to contextualize the store.
+     */
+    storeModuleName: {
+      type: String,
+      default: 'documents',
+    },
     /**
      * Indicates wheteher pagination controllers are active.
      */
@@ -162,14 +170,17 @@ export default defineComponent({
   }),
 
   computed: {
+    storePrefix() {
+      return this.storeModuleName ? this.storeModuleName + '/' : '';
+    },
     thumbnailUrl() {
-      return this.$store.getters['documents/getThumbnailUrl'];
+      return this.$store.getters[this.storePrefix + 'getThumbnailUrl'];
     },
     addedMediaNumber() {
-      return this.$store.getters['documents/getAddedMediaNumber'];
+      return this.$store.getters[this.storePrefix + 'getAddedMediaNumber'];
     },
     currentMedia() {
-      return this.$store.getters['documents/getCurrentMedia'];
+      return this.$store.getters[this.storePrefix + 'getCurrentMedia'];
     },
   },
 
@@ -198,7 +209,7 @@ export default defineComponent({
 
     handleClickOnClose() {
       this.$store.dispatch('sendEventToBus', { code: 'mediaDetailExit', payload: {} });
-      this.$store.dispatch('documents/updateCurrentMedia', null);
+      this.$store.dispatch(this.storePrefix + 'updateCurrentMedia', null);
       this.$router.back();
     },
 

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

@@ -238,6 +238,13 @@ export default defineComponent({
       type: String,
       default: 'image/jpeg, image/png, image/heif, image/heic, image/heif-sequence, image/heic-sequence',
     },
+    /**
+     * The store module name to contextualize the store.
+     */
+    storeModuleName: {
+      type: String,
+      default: 'documents',
+    },
     /**
      * Defines the payload
      */
@@ -269,32 +276,36 @@ export default defineComponent({
   },
 
   computed: {
+    storePrefix() {
+      return this.storeModuleName ? this.storeModuleName + '/' : '';
+    },
+
     isAddPhotoDisabled() {
-      return this.$store.getters['documents/isAddPhotoDisabled'];
+      return this.$store.getters[this.storePrefix + 'isAddPhotoDisabled'];
     },
 
     isMediaUploaded() {
-      return this.$store.getters['documents/isUploaded'];
+      return this.$store.getters[this.storePrefix + 'isUploaded'];
     },
 
     isMediaUploading() {
-      return this.$store.getters['documents/isUploading'];
+      return this.$store.getters[this.storePrefix + 'isUploading'];
     },
 
     mediaUploadError() {
-      return this.$store.getters['documents/getUploadError'];
+      return this.$store.getters[this.storePrefix + 'getUploadError'];
     },
 
     uploadedMediaId() {
-      return this.$store.getters['documents/getUploadedId'];
+      return this.$store.getters[this.storePrefix + 'getUploadedId'];
     },
 
     isNameAlreadyUsed() {
-      return this.$store.getters['documents/isNameAlreadyUsed'];
+      return this.$store.getters[this.storePrefix + 'isNameAlreadyUsed'];
     },
 
     uploadProgress() {
-      return this.$store.getters['documents/getUploadProgress'];
+      return this.$store.getters[this.storePrefix + 'getUploadProgress'];
     },
 
     nameSaveError() {
@@ -349,7 +360,7 @@ export default defineComponent({
       }
     },
     fileName() {
-      this.$store.dispatch('documents/nameChanged');
+      this.$store.dispatch(this.storePrefix + 'nameChanged');
     },
   },
 
@@ -391,7 +402,7 @@ export default defineComponent({
       this.isRoomPicture = false;
       this.selectedType = null;
       this.$refs?.pbMediaUploadForm?.reset();
-      this.$store.dispatch('documents/resetMediaUploadContext');
+      this.$store.dispatch(this.storePrefix + 'resetMediaUploadContext');
     },
 
     async upload() {
@@ -399,7 +410,7 @@ export default defineComponent({
         if (this.selectedType === null) {
           this.selectedType = this.payload.viewModel.dialog.defaultMediaType;
         }
-        await this.$store.dispatch('documents/uploadFile', {
+        await this.$store.dispatch(this.storePrefix + 'uploadFile', {
           formData: this.formData,
           fileName: this.fileName,
           isRoomPicture: this.isRoomPicture,
@@ -421,7 +432,7 @@ export default defineComponent({
     async fileChange(event: Event) {
       const fieldName: string = (event.target as HTMLInputElement).name;
       const filesList = (event.target as HTMLInputElement).files;
-      this.$store.dispatch('documents/generateCorrelationId');
+      this.$store.dispatch(this.storePrefix + 'generateCorrelationId');
       this.formData = new FormData();
 
       if (!filesList?.length) {
@@ -433,7 +444,7 @@ export default defineComponent({
       if (file['type'].split('/')[0] === 'image') {
         const validationData = await this.validateMedia(file);
         this.$store.dispatch('sendEventToBus', { code: 'documentUploadValidation', payload: validationData });
-        this.$store.dispatch('documents/validateFileData', validationData);
+        this.$store.dispatch(this.storePrefix + 'validateFileData', validationData);
         this.validationErrors = validationData.validation;
         this.updateMediaPreviewUrl(file);
       } else {
@@ -444,7 +455,7 @@ export default defineComponent({
         this.mediaPreviewUrl = PDF_IMAGE;
         this.displayAddDialog = true;
       }
-      this.$store.dispatch('documents/sendEvent', {
+      this.$store.dispatch(this.storePrefix + 'sendEvent', {
         eventName: 'qualify-by-the-front',
         file: file,
       } as MediaEventOptions);

package/src/components/pedagogy/PbPedagogy.stories.mdx

@@ -5,7 +5,7 @@ import PbPedagogy from './PbPedagogy';
 import store from '../../stores/store';
 
 <Meta
-  title="Project Booster/Components/Pedagogy/ PbPedagogy 🦠"
+  title="Project Booster/Components/Pedagogy/PbPedagogy 🦠"
   component={PbPedagogy}
   argTypes={{
     payload: {

package/src/components/pedagogy/default-payload.json

@@ -15,17 +15,6 @@
     }
   },
   "cards": [
-    {
-      "code": "CARD-1",
-      "viewModel": {
-        "url": "https://www.leroymerlin.fr/produits/cuisine/cuisine-equipee-delinia-id/",
-        "image": "https://media.leroymerlin.fr/Capture/37/bc/a121f7e74212ad2d356fd3cf2c8a/estimer-mon-budget-cuisine5e5d20ae063b330009a4a372.jpg?width=500&auto=webp&crop=16:9",
-        "title": "Estimer votre budget cuisine en quelques clics",
-        "width": "full",
-        "widthFromM": "1of3",
-        "widthFromL": "1of3"
-      }
-    },
     {
       "code": "CARD-2",
       "viewModel": {

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -265,15 +265,17 @@ $responsive-breakpoint: 'm';
     @include set-font-scale('07', 's');
 
     color: $color-grey-700;
+    margin-bottom: 10px;
     max-width: 100%;
     padding: 0 0 0 0;
+    text-align: center;
     width: 384px;
 
     @include set-from-screen($responsive-breakpoint) {
       @include set-font-scale('08', 'm');
 
+      margin-bottom: 0;
       padding: $mu250 $mu100 $mu100 $mu100;
-      text-align: center;
       width: auto;
     }
   }

package/src/components/question/upload-document/PbUploadDocument.vue

@@ -129,6 +129,7 @@
     </pb-sticky-footer>
     <pb-media-upload
       :payload="payload.viewModel.mediaPayload"
+      :store-module-name="storeModuleName"
       @display-dialog="handleDisplayDialogEvent"
       @media-uploaded="handleMediaUploaded"
       ref="pbMediaUpload"
@@ -237,6 +238,7 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const store = useStore();
+    let storeModuleName = ref(props.payload.viewModel.mediaPayload.viewModel.type);
 
     const pbMediaUpload = ref<ComponentCustomProperties>();
 
@@ -247,12 +249,12 @@ export default defineComponent({
     const pageSize = ref(8);
     const showMoreAnimation = ref('');
     const showMoreButtonDisplayed = computed(
-      () => store.getters['documents/hasStillMedia'] && props.payload.viewModel.showMore,
+      () => store.getters[storeModuleName.value + '/hasStillMedia'] && props.payload.viewModel.showMore,
     );
-    const selectedDocuments = computed(() => store.getters['documents/getMediaList']);
-    const thumbnailUrl = computed(() => store.getters['documents/getThumbnailUrl']);
+    const selectedDocuments = computed(() => store.getters[storeModuleName.value + '/getMediaList']);
+    const thumbnailUrl = computed(() => store.getters[storeModuleName.value + '/getThumbnailUrl']);
     onMounted(() => {
-      store.dispatch('documents/sendEvent', { eventName: 'start', file: null });
+      store.dispatch(storeModuleName.value + '/sendEvent', { eventName: 'start', file: null });
       if (props.payload.viewModel.startOpened) {
         pbMediaUpload.value?.$refs.pbMediaUploadFormInput.click();
       }
@@ -295,12 +297,12 @@ export default defineComponent({
     };
 
     const handleMediaUploaded = () => {
-      store.dispatch('documents/refreshMediaList');
+      store.dispatch(storeModuleName.value + '/refreshMediaList');
     };
 
     const handleShowMoreClick = () => {
-      store.dispatch('documents/updateMediaPerPageCount', 4);
-      store.dispatch('documents/loadMoreMedia');
+      store.dispatch(storeModuleName.value + '/updateMediaPerPageCount', 4);
+      store.dispatch(storeModuleName.value + '/loadMoreMedia');
       showMoreAnimation.value = 'pb-upload-document__answers-animation';
     };
 
@@ -309,6 +311,7 @@ export default defineComponent({
       BACK_ICON,
       INFO_ICON,
       pbMediaUpload,
+      storeModuleName,
       lastItemIndex,
       pageSize,
       showMoreAnimation,