project-booster-vue 9.2.4 → 9.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.2.4",
+  "version": "9.4.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -81,21 +81,21 @@
     "@mswjs/interceptors": "0.12.7",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
-    "@storybook/addon-a11y": "6.4.21",
-    "@storybook/addon-essentials": "6.4.21",
+    "@storybook/addon-a11y": "6.4.22",
+    "@storybook/addon-essentials": "6.4.22",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-links": "6.4.21",
+    "@storybook/addon-links": "6.4.22",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.21",
-    "@storybook/addon-storyshots-puppeteer": "6.4.21",
-    "@storybook/addon-storysource": "6.4.21",
-    "@storybook/addons": "6.4.21",
-    "@storybook/builder-webpack5": "6.4.21",
-    "@storybook/manager-webpack5": "6.4.21",
-    "@storybook/source-loader": "6.4.21",
+    "@storybook/addon-storyshots": "6.4.22",
+    "@storybook/addon-storyshots-puppeteer": "6.4.22",
+    "@storybook/addon-storysource": "6.4.22",
+    "@storybook/addons": "6.4.22",
+    "@storybook/builder-webpack5": "6.4.22",
+    "@storybook/manager-webpack5": "6.4.22",
+    "@storybook/source-loader": "6.4.22",
     "@storybook/storybook-deployer": "2.8.11",
-    "@storybook/theming": "6.4.21",
-    "@storybook/vue3": "6.4.21",
+    "@storybook/theming": "6.4.22",
+    "@storybook/vue3": "6.4.22",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/vue": "6.5.1",
     "@types/axios": "0.14.0",
@@ -147,7 +147,7 @@
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-mdx": "1.16.0",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-storybook": "0.5.8",
+    "eslint-plugin-storybook": "0.5.10",
     "eslint-plugin-vue": "7.11.1",
     "fluent-json-schema": "3.0.1",
     "husky": "6.0.0",

package/src/components/media/upload/document-upload-payload.json

@@ -25,9 +25,14 @@
           "label": "Un plan d’architecte"
         },
         {
-          "type": "PLAN",
-          "subtype": "KITCHEN_DESIGNER_PLAN",
-          "label": "Un plan d’un autre cuisiniste"
+          "type": "PHOTO",
+          "subtype": "ANY",
+          "label": "Une photo"
+        },
+        {
+          "type": "OTHER",
+          "subtype": "ANY",
+          "label": "Autre"
         }
       ]
     }

package/src/components/projects/project-hub/PbProjectHub.vue

@@ -83,7 +83,17 @@
             </m-flex>
             <m-flex v-if="isDocumentsDisplayed" class="pb-project-hub__section" direction="column" full-width>
               <div class="pb-project-hub__section-header">
-                <div class="pb-project-hub__section-title">{{ titleDocument }}</div>
+                <div class="pb-project-hub__section-title-container">
+                  <div class="pb-project-hub__section-title">{{ titleDocument }}</div>
+                  <pb-media-upload
+                    v-if="displayedDocuments && displayedDocuments.length > 0"
+                    storeModuleName="documents"
+                    :payload="DOCUMENT_UPLOAD_PAYLOAD"
+                    acceptedFileTypes="image jpeg, image png, image heif, image heic, image/heif-sequence, image/heic-sequence, application
+                pdf"
+                    @media-uploaded="handleDocumentUploaded"
+                  />
+                </div>
               </div>
               <div class="pb-project-hub__section-content">
                 <m-flex
@@ -137,6 +147,46 @@
                 />
               </div>
             </m-flex>
+            <m-flex
+              v-if="areProjectAttributesDisplayed && projectAttributes && Object.keys(projectAttributes).length > 0"
+              class="pb-project-hub__section"
+              direction="column"
+              full-width
+            >
+              <div class="pb-project-hub__section-header">
+                <div class="pb-project-hub__section-title" ref="pbProjectAttributeList">
+                  {{ titleProjectAttribute }}
+                </div>
+              </div>
+              <div class="pb-project-hub__section-content">
+                <m-flex
+                  class="pb-project-hub__section-content--loading"
+                  v-if="isLoadingProjectAttributes && !projectAttributesLoadError"
+                  direction="column"
+                  align-items="center"
+                  justify-content="center"
+                  align-content="center"
+                >
+                  <pb-animable-loader class="pb-project-hub__section-content--loading-loader" />
+                  <div class="pb-project-hub__section-content--loading-label">Chargement...</div>
+                </m-flex>
+                <pb-empty-state
+                  v-else-if="project && Object.values(projectAttributes).length === 0 && !projectAttributesLoadError"
+                  subtitle="Aucune information renseignée"
+                  disabled
+                />
+                <m-container
+                  class="pb-project-hub__section-content-cards-container"
+                  fluid
+                  v-else-if="project && projectAttributes && !projectAttributesLoadError"
+                >
+                  <pb-project-attributes :project-attributes="projectAttributes" />
+                </m-container>
+                <m-flex v-else-if="projectAttributesLoadError" direction="column" align-items="center">
+                  <div>Une erreur est survenue</div>
+                </m-flex>
+              </div>
+            </m-flex>
             <m-flex
               v-if="isEstimatesDisplayed"
               class="pb-project-hub__section"
@@ -343,7 +393,15 @@
             </m-flex>
             <m-flex v-if="isMediaDisplayed" class="pb-project-hub__section" direction="column" full-width>
               <div class="pb-project-hub__section-header">
-                <div class="pb-project-hub__section-title">{{ titlePhotoInspiration }}</div>
+                <div class="pb-project-hub__section-title-container">
+                  <div class="pb-project-hub__section-title">{{ titlePhotoInspiration }}</div>
+                  <pb-media-upload
+                    v-if="displayedInspirations && displayedInspirations.length > 0"
+                    storeModuleName="documents"
+                    :payload="MEDIA_UPLOAD_PAYLOAD"
+                    @media-uploaded="handleMediaUploaded"
+                  />
+                </div>
               </div>
               <div class="pb-project-hub__section-content">
                 <m-flex
@@ -401,46 +459,6 @@
                 />
               </div>
             </m-flex>
-            <m-flex
-              v-if="areProjectAttributesDisplayed && projectAttributes && Object.keys(projectAttributes).length > 0"
-              class="pb-project-hub__section"
-              direction="column"
-              full-width
-            >
-              <div class="pb-project-hub__section-header">
-                <div class="pb-project-hub__section-title" ref="pbProjectAttributeList">
-                  {{ titleProjectAttribute }}
-                </div>
-              </div>
-              <div class="pb-project-hub__section-content">
-                <m-flex
-                  class="pb-project-hub__section-content--loading"
-                  v-if="isLoadingProjectAttributes && !projectAttributesLoadError"
-                  direction="column"
-                  align-items="center"
-                  justify-content="center"
-                  align-content="center"
-                >
-                  <pb-animable-loader class="pb-project-hub__section-content--loading-loader" />
-                  <div class="pb-project-hub__section-content--loading-label">Chargement...</div>
-                </m-flex>
-                <pb-empty-state
-                  v-else-if="project && Object.values(projectAttributes).length === 0 && !projectAttributesLoadError"
-                  subtitle="Aucune information renseignée"
-                  disabled
-                />
-                <m-container
-                  class="pb-project-hub__section-content-cards-container"
-                  fluid
-                  v-else-if="project && projectAttributes && !projectAttributesLoadError"
-                >
-                  <pb-project-attributes :project-attributes="projectAttributes" />
-                </m-container>
-                <m-flex v-else-if="projectAttributesLoadError" direction="column" align-items="center">
-                  <div>Une erreur est survenue</div>
-                </m-flex>
-              </div>
-            </m-flex>
             <m-flex
               v-if="isPlannerDisplayed"
               class="pb-project-hub__section pb-project-hub__planner-section"
@@ -789,6 +807,9 @@ import { Tool } from '@/types/pb/Tool';
 import { Configuration } from '@/types/pb/Configuration';
 import { Estimate } from '@/types/pb/Estimate';
 import { Task } from '@/types/pb/Task';
+import PbMediaUpload from '@/components/media/upload/PbMediaUpload.vue';
+import DOCUMENT_UPLOAD_PAYLOAD from '@/components/media/upload/document-upload-payload.json';
+import MEDIA_UPLOAD_PAYLOAD from '@/components/media/upload/media-upload-payload.json';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -830,6 +851,7 @@ export default defineComponent({
   name: 'PbProjectHub',
 
   components: {
+    PbMediaUpload,
     MAccordion,
     MButton,
     MContainer,
@@ -917,6 +939,8 @@ export default defineComponent({
     showMoreButtonAnimationDelay: 0,
     BACK_ICON,
     TASK_MODEL,
+    DOCUMENT_UPLOAD_PAYLOAD,
+    MEDIA_UPLOAD_PAYLOAD,
     displayCategoriesDialog: false,
   }),
 
@@ -1338,6 +1362,14 @@ export default defineComponent({
         behavior: 'smooth',
       });
     },
+
+    handleDocumentUploaded() {
+      this.$store.dispatch('documents/refreshMediaList');
+    },
+
+    handleMediaUploaded() {
+      this.$store.dispatch('media/refreshMediaList');
+    },
   },
 });
 </script>
@@ -1403,6 +1435,11 @@ $appear-duration: 100ms;
 
     &-header {
       padding-bottom: $mu150;
+      width: 100%;
+    }
+
+    &-title-container {
+      display: flex;
     }
 
     &-title {
@@ -1410,6 +1447,7 @@ $appear-duration: 100ms;
       @include set-font-scale('07', 'm');
 
       color: $color-grey-800;
+      flex-grow: 1;
     }
 
     &-subtitle {

package/src/components/question/PbQuestion.vue

@@ -427,8 +427,8 @@ export default defineComponent({
         this.pageSize = this.payload.viewModel.showMore.itemsPerPage;
       }
 
+      const answerValues = this.answers?.get(this.stepName ?? '') ?? [];
       for (const { code: answerCode } of Object.values(Object.fromEntries(this.questionPossibleAnswers))) {
-        const answerValues = this.answers?.get(this.stepName ?? '') ?? [];
         const questionPossibleAnswer = this.questionPossibleAnswers.get(answerCode);
         if (
           questionPossibleAnswer &&

package/src/components/scenario/PbScenario.vue

@@ -195,7 +195,10 @@ export default defineComponent({
       remainingSteps: 0,
     });
     const reverseAnimation = ref(false);
+    const forceRefresh = ref(false);
     const noPointerEvents = ref(false);
+    const stepAnimationTimeoutId = ref<ReturnType<typeof setTimeout>>();
+    const progressUpdateTimeoutId = ref<ReturnType<typeof setTimeout>>();
 
     const initScenario = (currentScenarioCode: string, stepToResume: ScenarioStep | undefined = undefined) => {
       if (currentScenarioCode === '__START__') {
@@ -312,6 +315,7 @@ export default defineComponent({
           currentStep: state.value.currentStep,
           stepIndex: state.value.history.stepIndex,
           stepHistory: state.value.history.steps,
+          stepsToResume: state.value.stepsToResume,
         },
       });
     };
@@ -395,36 +399,42 @@ export default defineComponent({
       }
     };
     const updateProgressInScenario = () => {
-      if (state.value.stepsToResume.slice(-1)[0]?.trackProgress) {
-        // Use current step props
-        setTimeout(() => {
-          progress.value = {
-            ...progress.value,
-            ...trackProgress(state.value.history.stepIndex - 1, state.value.history.steps!),
-          };
-
-          progress.value.progress =
-            (100 * (progress.value.currentPosition - 1)) /
-            (progress.value.currentPosition + progress.value.remainingSteps);
-        }, 450);
-      } else if (state.value.stepsToResume.slice(-2, -1)[0]?.trackProgress) {
-        // Use current last progress tracked scenario step props for first step of nested scenario
-        setTimeout(() => {
-          const currentProgress = trackProgress(state.value.history.stepIndex - 1, state.value.history.steps!);
-
-          if (currentProgress.currentPosition === 1) {
-            const previousProgress = trackProgress(state.value.history.stepIndex - 3, state.value.history.steps!);
-            previousProgress.currentPosition++;
-            previousProgress.remainingSteps--;
+      if (state.value.stepsToResume) {
+        if (progressUpdateTimeoutId.value) {
+          clearTimeout(progressUpdateTimeoutId.value);
+        }
+
+        if (state.value.stepsToResume.slice(-1)[0]?.trackProgress) {
+          // Use current step props
+          progressUpdateTimeoutId.value = setTimeout(() => {
             progress.value = {
               ...progress.value,
-              ...previousProgress,
+              ...trackProgress(state.value.history.stepIndex - 1, state.value.history.steps!),
             };
+
             progress.value.progress =
               (100 * (progress.value.currentPosition - 1)) /
               (progress.value.currentPosition + progress.value.remainingSteps);
-          }
-        }, 450);
+          }, 450);
+        } else if (state.value.stepsToResume.slice(-2, -1)[0]?.trackProgress) {
+          // Use current last progress tracked scenario step props for first step of nested scenario
+          progressUpdateTimeoutId.value = setTimeout(() => {
+            const currentProgress = trackProgress(state.value.history.stepIndex - 1, state.value.history.steps!);
+
+            if (currentProgress.currentPosition === 1) {
+              const previousProgress = trackProgress(state.value.history.stepIndex - 3, state.value.history.steps!);
+              previousProgress.currentPosition++;
+              previousProgress.remainingSteps--;
+              progress.value = {
+                ...progress.value,
+                ...previousProgress,
+              };
+              progress.value.progress =
+                (100 * (progress.value.currentPosition - 1)) /
+                (progress.value.currentPosition + progress.value.remainingSteps);
+            }
+          }, 450);
+        }
       }
     };
     const trackProgress = (originIndex: number, steps: ScenarioHistoryItem[]) => {
@@ -469,7 +479,11 @@ export default defineComponent({
     const animateDisplayedStep = (reversed = false) => {
       reverseAnimation.value = reversed;
 
-      setTimeout(() => {
+      if (stepAnimationTimeoutId.value) {
+        clearTimeout(stepAnimationTimeoutId.value);
+      }
+
+      stepAnimationTimeoutId.value = setTimeout(() => {
         nextTick(() => {
           state.value.displayedStep = state.value.currentStep;
           setTimeout(() => {
@@ -580,7 +594,8 @@ export default defineComponent({
     watch(route, () => {
       const requestedStepIndex = route.params?.stepCode as string;
 
-      if (requestedStepIndex && requestedStepIndex !== `${state.value.history.stepIndex}`) {
+      if ((requestedStepIndex && requestedStepIndex !== `${state.value.history.stepIndex}`) || forceRefresh.value) {
+        forceRefresh.value = false;
         goToStep(parseInt(requestedStepIndex));
       }
     });
@@ -609,7 +624,9 @@ export default defineComponent({
           if (state.value.answers && !(state.value.answers instanceof Map)) {
             state.value.answers = new Map<string, ScenarioStepAnswer[]>(Object.entries(state.value.answers));
           }
-          goToStep(state.value.history.stepIndex);
+          const newRoute = `/steps/${state.value.history.stepIndex}/previous/${uuidv4()}`;
+          forceRefresh.value = true;
+          router.replace(newRoute);
         }
       },
     );

package/src/types/pb/Scenario.ts

@@ -147,7 +147,6 @@ export interface ScenarioState {
   currentStep: ScenarioStep | undefined;
   displayedStep: ScenarioStep | undefined;
   history: ScenarioHistory;
-  refreshSteps: boolean;
 }
 
 export interface ScenarioStepAnswerData {