project-booster-vue 8.93.5 → 8.94.1

package/package.json

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

package/src/components/inspiration/PbInspiration.vue

@@ -1,5 +1,5 @@
 <template>
-  <m-flex class="pb-inspiration" direction="column" full-width>
+  <m-flex class="pb-inspiration" direction="column" full-width ref="pbInspiration">
     <m-link
       v-if="project"
       :label="project.name"
@@ -14,9 +14,12 @@
         font-weight="semi-bold"
         size="s"
       />
-      <m-flex v-if="(!isLoadingMedia || mediaList.length > 0) && !mediaLoadError">
+      <div
+        class="pb-inspiration__header-upload-button"
+        v-if="(!isLoadingMedia || mediaList.length > 0) && !mediaLoadError"
+      >
         <pb-media-upload namespace="media" @media-uploaded="handleMediaUploaded" ref="pbMediaUpload" />
-      </m-flex>
+      </div>
     </m-flex>
     <m-flex class="pb-inspiration__container">
       <m-flex
@@ -124,19 +127,31 @@
       @link-click="$store.dispatch('media/deleteMedia')"
       @close="resetMediaDeletionError"
     />
+    <pb-sticky-footer
+      class="pb-inspiration__sticky-upload-button"
+      v-if="(!isLoadingMedia || mediaList.length > 0) && !mediaLoadError"
+    >
+      <pb-media-upload
+        class="pb-inspiration__sticky-upload-button-content"
+        namespace="media"
+        @media-uploaded="handleMediaUploaded"
+        ref="pbMediaUpload"
+      />
+    </pb-sticky-footer>
   </m-flex>
 </template>
 
 <script>
 import MButton from '../mozaic/buttons/MButton';
 import MDialog from '../mozaic/dialog/MDialog';
-import MLink from '../mozaic/link/MLink';
+import MFlex from '../mozaic/flex/MFlex';
 import MHeading from '../mozaic/heading/MHeading';
+import MLink from '../mozaic/link/MLink';
+import MNotification from '../mozaic/notifications/MNotification';
 import PbLoader from '../loader/PbLoader';
 import PbMediaList from '../media/list/PbMediaList';
 import PbMediaUpload from '../media/upload/PbMediaUpload';
-import MFlex from '../mozaic/flex/MFlex';
-import MNotification from '../mozaic/notifications/MNotification';
+import PbStickyFooter from '../sticky-footer/PbStickyFooter';
 import { mapGetters } from 'vuex';
 
 const BACK_ICON =
@@ -145,15 +160,16 @@ const BACK_ICON =
 export default {
   name: 'PbInspiration',
   components: {
-    MNotification,
-    PbMediaUpload,
-    PbMediaList,
+    MButton,
+    MDialog,
+    MFlex,
     MHeading,
     MLink,
-    MFlex,
-    MDialog,
-    MButton,
+    MNotification,
     PbLoader,
+    PbMediaList,
+    PbMediaUpload,
+    PbStickyFooter,
   },
 
   data: () => ({
@@ -182,6 +198,10 @@ export default {
     this.$store.dispatch('sendEventToBus', { code: 'mediaHubLanded', payload: {} });
   },
 
+  mounted() {
+    this.scrollToTop();
+  },
+
   methods: {
     handleMediaUploaded() {
       this.$store.dispatch('media/refreshMediaList');
@@ -223,6 +243,16 @@ export default {
       }
       next();
     },
+    scrollToTop() {
+      setTimeout(() => {
+        const top = this.$refs.pbInspiration.$el.offsetTop;
+        window.scroll({
+          top,
+          left: 0,
+          behavior: 'smooth',
+        });
+      }, 200);
+    },
   },
 };
 </script>
@@ -235,25 +265,24 @@ $responsive-breakpoint: 'l';
 .pb-inspiration {
   @include set-font-face('regular');
 
+  box-sizing: border-box;
+  height: 100vh;
+  height: stretch;
   margin: 0 auto;
   max-width: 1024px;
+  padding: 0 $mu100;
   width: 100%;
+
   &__header {
     &-heading {
       flex-grow: 1;
     }
 
-    &-add {
-      z-index: 1;
-
-      &-disabled-text {
-        @include set-font-scale('04', 'm');
+    &-upload-button {
+      display: none;
 
-        color: $color-grey-500;
-        font-style: italic;
-        padding-top: $mu025;
-        text-align: center;
-        width: 100%;
+      @include set-from-screen('m') {
+        display: block;
       }
     }
   }
@@ -278,6 +307,7 @@ $responsive-breakpoint: 'l';
   }
 
   &__container {
+    padding-bottom: $mu100;
     width: 100%;
   }
 
@@ -360,5 +390,18 @@ $responsive-breakpoint: 'l';
   &__notification {
     z-index: 200;
   }
+
+  :deep(.pb-inspiration__sticky-upload-button) {
+    margin: 0 -$mu100;
+    width: calc(100% + 2 * #{$mu100});
+
+    @include set-from-screen('m') {
+      display: none;
+    }
+  }
+
+  &__sticky-upload-button-content {
+    padding: $mu100;
+  }
 }
 </style>

package/src/components/media/upload/PbMediaUpload.stories.mdx

@@ -1,9 +1,13 @@
 import PbMediaUpload from './PbMediaUpload';
 import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
 import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
-import store from '../../../store/store';
+import mediaStore from '../../../store/modules/mediaStore';
 import { rest } from 'msw';
-import { getAllMediaPaginationResolver, uploadMediaResolver } from '../../../service/api/mocks/mediaMock';
+import {
+  getAllMediaPaginationResolver,
+  nameAlreadyUsedResolver,
+  uploadMediaResolver,
+} from '../../../service/api/mocks/mediaMock';
 import { notContentResolver, successResolver } from '../../../service/api/mocks/commonMock';
 
 <Meta
@@ -12,7 +16,26 @@ import { notContentResolver, successResolver } from '../../../service/api/mocks/
   parameters={{
     layout: 'fullscreen',
   }}
-  decorators={[nestedAppDecorator(store, [{ name: 'PbMediaUpload', path: '/media-upload', component: PbMediaUpload }])]}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          media: mediaStore,
+        },
+        mutations: {
+          eventBusSendEvent(state, { code, payload }) {
+            console.log('event bus data : ', code, payload);
+          },
+        },
+        actions: {
+          sendEventToBus({ commit }, action) {
+            commit('eventBusSendEvent', action);
+          },
+        },
+      },
+      [],
+    ),
+  ]}
 />
 
 # 🦠 `PbMediaUpload` - Component
@@ -24,8 +47,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     return { args };
   },
   template: `<pb-media-upload
-    :payload="args.payload"
-    :namespace="namespace"
+    :namespace="args.namespace"
   />`,
 });
 
@@ -51,3 +73,23 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+## Name already used
+
+<Canvas>
+  <Story
+    name="Name already used"
+    parameters={{
+      controls: { disabled: true },
+      msw: [rest.post('/api/media', nameAlreadyUsedResolver)],
+    }}
+    inline={false}
+    height="1024px"
+    args={{
+      acceptedFileTypes: 'image/jpeg, image/png, image/heif, image/heic, image/heif-sequence, image/heic-sequence',
+      namespace: 'media',
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

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

@@ -2,7 +2,7 @@
   <div class="pb-media-upload">
     <form class="pb-media-upload__form" ref="pbMediaUploadForm" enctype="multipart/form-data" novalidate>
       <div
-        class="pb-media-upload__form-button mc-button mc-button--s"
+        class="pb-media-upload__form-button mc-button mc-button--s@from-m"
         :class="{ 'is-disabled': isAddPhotoDisabled }"
         id="pbMediaUploadButton"
         @click="addMedia"
@@ -280,6 +280,9 @@ export default {
         }
       }
     },
+    fileName() {
+      this.isNameAlreadyUsed = false;
+    },
   },
 
   mounted() {
@@ -322,19 +325,23 @@ export default {
       this.$store.dispatch(this.storePrefix + 'resetMediaUploadContext');
     },
 
-    upload() {
+    async upload() {
       if (!this.disabled && !this.isMediaUploaded) {
         this.isMediaUploading = true;
         this.isMediaUploaded = false;
         try {
-          this.$store.dispatch(this.storePrefix + 'uploadFile', {
+          await this.$store.dispatch(this.storePrefix + 'uploadFile', {
             formData: this.formData,
             fileName: this.fileName,
             isRoomPicture: this.isRoomPicture,
           });
           this.isMediaUploaded = true;
         } catch (error) {
-          this.mediaUploadError = error;
+          if (error.response?.body?.code === 'NAME_ALREADY_USED') {
+            this.isNameAlreadyUsed = true;
+          } else {
+            this.mediaUploadError = error;
+          }
         }
         this.isMediaUploading = false;
       } else {
@@ -459,57 +466,20 @@ $responsive-breakpoint: 'l';
   }
 
   :deep(.m-dialog) {
-    height: 100%;
-    max-height: 1100px;
-    min-height: 500px;
-    width: 100%;
-
-    @include set-from-screen('m') {
-      height: 80vh;
-      max-height: 700px;
-      max-width: 900px;
-      min-height: 500px;
-      min-width: 450px;
-      width: 90vw;
-    }
-
-    @include set-from-screen('l') {
-      height: 90vh;
-      max-height: 1100px;
-      max-width: 1000px;
-      min-height: 500px;
-      min-width: 450px;
-      width: 90vw;
-    }
-
-    @include set-from-screen('xl') {
-      height: 90vh;
-      max-height: 700px;
-      max-width: 1300px;
-      min-height: 500px;
-      min-width: 450px;
-      width: 60vw;
-    }
-
-    @include set-from-screen('xxl') {
-      height: 90vh;
-      max-height: 900px;
-      max-width: 1300px;
-      min-height: 500px;
-      min-width: 450px;
-      width: 60vw;
-    }
+    overflow-y: scroll;
   }
 
   :deep(.m-dialog__header) {
-    padding: 0 $mu250;
+    flex-shrink: 0;
   }
 
   :deep(.m-dialog__body) {
-    align-items: center;
-    display: flex;
-    justify-content: center;
+    flex: 0 0 30vh;
     overflow: visible;
+
+    @include set-from-screen($responsive-breakpoint) {
+      flex: 0 0 40vh;
+    }
   }
 
   :deep(.m-dialog__footer) {
@@ -593,6 +563,7 @@ $responsive-breakpoint: 'l';
     }
 
     &-input {
+      margin-bottom: $mu200;
       margin-top: $mu050;
       width: 100%;
       :deep(.mc-textarea.mc-field__input) {

package/src/components/project-item-save/PbProjectItemSaveProjectsList.vue

@@ -75,8 +75,9 @@ export default {
   },
   methods: {
     handleInput(newValue) {
-      this.$store.dispatch('loadProject', newValue);
-      this.$emit('save-in-existing-project', newValue);
+      const selectedProjectCode = Object.entries(newValue).find(([key, value]) => value)[0];
+      this.$store.dispatch('loadProject', selectedProjectCode);
+      this.$emit('save-in-existing-project', selectedProjectCode);
       this.$forceUpdate();
     },
     reloadProjects() {

package/src/components/project-item-save/PbProjectItemSaveStore.js

@@ -197,19 +197,11 @@ const PbProjectItemSaveStore = {
       if (selectedProject) {
         commit('setIsLoadingProject', true);
         commit('setCurrentProjectId', selectedProject.code);
-        const projects = state.projects.map((project) => {
-          const selected = project.code === selectedProject.code;
-          return Object.assign({}, project, { selected: selected });
-        });
-        commit('setProjects', projects);
         commit('setIsLoadingProject', false);
       }
     },
     resetSelectedProjects({ commit, state }) {
       const projects = state.projects.map((project) => {
-        if (project.selected) {
-          return Object.assign({}, project, { selected: false });
-        }
         return project;
       });
       commit('setCurrentProjectId', null);

package/src/components/question/PbQuestion.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="pb-question__container"
-    :style="`padding-bottom: calc(${stickyBottomOffset} + max(${pbQuestionActionsButtons1Size.height},  ${pbQuestionActionsButtons2Size.height}));`"
+    :style="`padding-bottom: calc(${stickyBottomOffset} +  ${pbQuestionActionsButtonsMaxSize}px);`"
   >
     <div class="pb-question">
       <m-flex align-items="center">
@@ -119,7 +119,7 @@
     <div
       v-if="payload.multiSelect"
       class="pb-question__actions-container"
-      :style="`bottom: calc(${stickyBottomOffset} + ${pbQuestionActionsButtons1Size.height});`"
+      :style="`bottom: calc(${stickyBottomOffset} + ${pbQuestionActionsButtons1Size.height}px);`"
     >
       <div class="pb-question__actions">
         <div class="pb-question__actions-buttons-container">
@@ -159,7 +159,7 @@
     <div
       v-if="payload.skippable"
       class="pb-question__actions-container"
-      :style="`bottom: calc(${stickyBottomOffset} + ${pbQuestionActionsButtons2Size.height});`"
+      :style="`bottom: calc(${stickyBottomOffset} + ${pbQuestionActionsButtons2Size.height}px);`"
     >
       <div
         class="pb-question__actions"
@@ -352,8 +352,9 @@ export default {
     pageSize: 8,
     showMoreAnimation: '',
     showAnswerDelay: 0,
-    pbQuestionActionsButtons1Size: { height: '0px' },
-    pbQuestionActionsButtons2Size: { height: '0px' },
+    pbQuestionActionsButtons1Size: { height: 0 },
+    pbQuestionActionsButtons2Size: { height: 0 },
+    pbQuestionActionsButtonsMaxSize: 0,
     BACK_ICON,
     INFO_ICON,
     displayDialog: false,
@@ -648,20 +649,24 @@ export default {
     updatePbQuestionActionsButtonsSizeHeight() {
       setTimeout(() => {
         if (this.$refs.pbQuestionActionsButtons1) {
-          this.pbQuestionActionsButtons1Size.height = `${this.$refs.pbQuestionActionsButtons1.$el.clientHeight}px`;
+          this.pbQuestionActionsButtons1Size.height = `${this.$refs.pbQuestionActionsButtons1.$el.clientHeight}`;
         } else {
           setTimeout(() => {
-            this.pbQuestionActionsButtons1Size.height = '0px';
+            this.pbQuestionActionsButtons1Size.height = 0;
           }, 250);
         }
 
         if (this.$refs.pbQuestionActionsButtons2) {
-          this.pbQuestionActionsButtons2Size.height = `${this.$refs.pbQuestionActionsButtons2.$el.clientHeight}px`;
+          this.pbQuestionActionsButtons2Size.height = `${this.$refs.pbQuestionActionsButtons2.$el.clientHeight}`;
         } else {
           setTimeout(() => {
-            this.pbQuestionActionsButtons2Size.height = '0px';
+            this.pbQuestionActionsButtons2Size.height = 0;
           }, 250);
         }
+        this.pbQuestionActionsButtonsMaxSize = Math.max(
+          this.pbQuestionActionsButtons1Size.height,
+          this.pbQuestionActionsButtons2Size.height,
+        );
       });
     },
     handleLinkClick(answer) {

package/src/components/sticky-footer/PbStickyFooter.stories.mdx

@@ -0,0 +1,32 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import PbStickyFooter from './PbStickyFooter';
+
+<Meta title="Project Booster/Components/ 🦠 PbStickyFooter" component={PbStickyFooter} />
+
+# 🦠 `PbStickyFooter` - Component
+
+---
+
+# `PbStickyFooter` - Component props
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PbStickyFooter },
+  template: `
+  <div style="width: 100%; background-image: url('https://images.unsplash.com/photo-1620995487063-a07efd2a9438?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80');">
+    <div style="height: 150vh;">Content</div>
+    <pb-sticky-footer>
+      <div style="margin: 1rem; padding: 1rem;background-color: #1e5f82;color: white;">Sticky Footer</div>
+    </pb-sticky-footer>
+    <div style="height: 120vh;">Footer</div>
+  </div>
+  `,
+});
+
+<Canvas>
+  <Story name="101 Sandbox" args={{}} parameters={{ layout: 'fullscreen' }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="101 Sandbox" />

package/src/components/sticky-footer/PbStickyFooter.vue

@@ -0,0 +1,79 @@
+<template>
+  <div ref="pbStickyFooter" class="pb-sticky-footer" :class="{ stuck: stuck }" v-bind="$attrs">
+    <div class="pb-sticky-footer__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+
+export default {
+  name: 'PbStickyFooter',
+
+  setup() {
+    const pbStickyFooter = ref(null);
+
+    const stuck = ref(false);
+
+    onMounted(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].intersectionRatio > 0.99) {
+            stuck.value = false;
+          } else if (entries[0].intersectionRatio > 0.9 && entries[0].intersectionRect.top > 4) {
+            stuck.value = true;
+          }
+        },
+        {
+          root: null,
+          threshold: [0.1, 0.99, 1],
+          rootMargin: '0px 0px -1px 0px',
+        },
+      );
+      observer.observe(pbStickyFooter.value);
+    });
+
+    return {
+      stuck,
+      pbStickyFooter,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'variables';
+
+.pb-sticky-footer {
+  bottom: -1px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  position: sticky;
+  width: 100%;
+
+  &::before {
+    background-color: white;
+    bottom: -1px;
+    box-shadow: -#{$mu050} -#{$mu100} $mu150 rgba(0, 0, 0, 0.35);
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: opacity 100ms ease-out;
+    z-index: 1;
+  }
+
+  &__content {
+    z-index: 2;
+  }
+
+  &.stuck::before {
+    opacity: 1;
+  }
+}
+</style>

package/src/service/api/mocks/commonMock.js

@@ -1,3 +1,5 @@
+import { compose, context } from 'msw';
+
 export const successResolver = (req, res, ctx) => {
   return res(ctx.delay(200), ctx.status(200));
 };
@@ -32,9 +34,5 @@ export const serverUnavailableResolver = (req, res, ctx) => {
 
 // use to redirect response;
 export function redirect(destination, statusCode) {
-  return (res) => {
-    res.status = statusCode;
-    res.headers.set('Location', destination);
-    return res;
-  };
+  return compose(context.delay(), context.status(statusCode), context.set('Location', destination));
 }

package/src/store/modules/mediaStore.js

@@ -18,12 +18,7 @@ export default {
     isAddPhotoDisabled: false,
     uploadProgress: 0,
     uploadedMediaId: null,
-    mediaUploadError: null,
     mediaCorrelationId: null,
-    isMediaNameSaving: false,
-    isMediaNameSaved: false,
-    isNameAlreadyUsed: false,
-    mediaNameSaveError: null,
     currentMedia: null,
   },
   getters: {
@@ -72,21 +67,6 @@ export default {
     getMediaCorrelationId(state) {
       return state.mediaCorrelationId;
     },
-    getMediaUploadError(state) {
-      return state.mediaUploadError;
-    },
-    isMediaNameSaving(state) {
-      return state.isMediaNameSaving;
-    },
-    isMediaNameSaved(state) {
-      return state.isMediaNameSaved;
-    },
-    isNameAlreadyUsed(state) {
-      return state.isNameAlreadyUsed;
-    },
-    getMediaNameSaveError(state) {
-      return state.mediaNameSaveError;
-    },
     getCurrentMedia(state) {
       return state.currentMedia;
     },
@@ -128,21 +108,6 @@ export default {
     setMediaCorrelationId(state, mediaCorrelationId) {
       state.mediaCorrelationId = mediaCorrelationId;
     },
-    setMediaUploadError(state, mediaUploadError) {
-      state.mediaUploadError = mediaUploadError;
-    },
-    setIsMediaNameSaving(state, isMediaNameSaving) {
-      state.isMediaNameSaving = isMediaNameSaving;
-    },
-    setIsMediaNameSaved(state, isMediaNameSaved) {
-      state.isMediaNameSaved = isMediaNameSaved;
-    },
-    setIsNameAlreadyUsed(state, isNameAlreadyUsed) {
-      state.isNameAlreadyUsed = isNameAlreadyUsed;
-    },
-    setMediaNameSaveError(state, mediaNameSaveError) {
-      state.mediaNameSaveError = mediaNameSaveError;
-    },
     setCurrentMedia(state, currentMedia) {
       state.currentMedia = currentMedia;
     },
@@ -158,11 +123,6 @@ export default {
     },
     resetMediaUploadContext({ commit }) {
       commit('setUploadProgress', 0);
-      commit('setMediaUploadError', null);
-      commit('setIsMediaNameSaving', false);
-      commit('setIsMediaNameSaved', false);
-      commit('setIsNameAlreadyUsed', false);
-      commit('setMediaNameSaveError', null);
     },
     async loadMedia({ commit, state }) {
       commit('setIsLoadingMedia', true);
@@ -224,21 +184,9 @@ export default {
       media.publicUrl = state.publicMediaUrl;
     },
     async updateMediaName({ commit, dispatch, state }, { id: mediaId, name: mediaName }) {
-      try {
-        await updateMediaName(mediaId, mediaName);
-        commit('setIsMediaNameSaved', true);
-        dispatch('refreshMediaList');
-      } catch (err) {
-        console.log(err);
-        if (err.response?.body?.code === 'NAME_ALREADY_USED') {
-          commit('setIsNameAlreadyUsed', true);
-        } else {
-          commit('setMediaNameSaveError', err);
-        }
-      }
-      commit('setIsMediaNameSaving', false);
+      await updateMediaName(mediaId, mediaName);
+      dispatch('refreshMediaList');
     },
-
     async deleteMedia({ commit, state, dispatch }, mediaToDelete) {
       commit('eventBusSendEvent', { code: 'interactedMedia', payload: {} }, { root: true });
       await deleteMedia(mediaToDelete.id);
@@ -260,21 +208,17 @@ export default {
 
       const correlationId = state.mediaCorrelationId ?? uuidv4();
 
-      try {
-        const response = await uploadMedia(
-          uploadFile.formData,
-          projectId,
-          correlationId,
-          uploadFile.fileName,
-          uploadFile.isRoomPicture,
-          trackProgress,
-        );
-        const location = response.headers.location;
-        const [mediaId] = location.split('/').slice(-1);
-        commit('setUploadedMediaId', mediaId);
-      } catch (e) {
-        commit('setMediaUploadError', e);
-      }
+      const response = await uploadMedia(
+        uploadFile.formData,
+        projectId,
+        correlationId,
+        uploadFile.fileName,
+        uploadFile.isRoomPicture,
+        trackProgress,
+      );
+      const location = response.headers.location;
+      const [mediaId] = location.split('/').slice(-1);
+      commit('setUploadedMediaId', mediaId);
     },
     generateCorrelationId({ commit }) {
       commit('setMediaCorrelationId', uuidv4());