project-booster-vue 9.2.3 → 9.3.1

package/package.json

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

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

@@ -137,6 +137,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"
@@ -401,46 +441,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"

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,
         },
       });
     };
@@ -368,7 +372,7 @@ export default defineComponent({
 
         state.value.stepsToResume = requestedStep.stepsToResume!;
 
-        state.value.currentStep = scenarios.get(requestedStep?.step.code)!;
+        state.value.currentStep = requestedStep?.step;
 
         animateDisplayedStep(stepIndex < state.value.history.stepIndex);
         state.value.history.stepIndex = stepIndex;
@@ -395,41 +399,47 @@ 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[]) => {
       let currentPosition = 1;
-      for (let index = originIndex; index--; index >= 0) {
+      for (let index = Math.max(originIndex, 0); index >= 0; index--) {
         if (steps[index]?.step?.type === 'SCENARIO') {
           break;
         }
@@ -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);
         }
       },
     );
@@ -620,7 +637,9 @@ export default defineComponent({
       },
     );
 
-    initScenario('__START__');
+    if (!props.previousState) {
+      initScenario('__START__');
+    }
     onMounted(() => {
       document.getElementsByTagName('body')[0].style.setProperty('overflow-x', 'hidden');
     });

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 {