project-booster-vue 8.120.3 → 8.121.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.120.3",
+  "version": "8.121.0",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",
@@ -80,21 +80,21 @@
     "@mswjs/interceptors": "0.12.7",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
-    "@storybook/addon-a11y": "6.4.13",
-    "@storybook/addon-essentials": "6.4.13",
+    "@storybook/addon-a11y": "6.4.17",
+    "@storybook/addon-essentials": "6.4.17",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-links": "6.4.13",
+    "@storybook/addon-links": "6.4.17",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.13",
-    "@storybook/addon-storyshots-puppeteer": "6.4.13",
-    "@storybook/addon-storysource": "6.4.13",
-    "@storybook/addons": "6.4.13",
-    "@storybook/builder-webpack5": "6.4.13",
-    "@storybook/manager-webpack5": "6.4.13",
-    "@storybook/source-loader": "6.4.13",
+    "@storybook/addon-storyshots": "6.4.17",
+    "@storybook/addon-storyshots-puppeteer": "6.4.17",
+    "@storybook/addon-storysource": "6.4.17",
+    "@storybook/addons": "6.4.17",
+    "@storybook/builder-webpack5": "6.4.17",
+    "@storybook/manager-webpack5": "6.4.17",
+    "@storybook/source-loader": "6.4.17",
     "@storybook/storybook-deployer": "2.8.10",
-    "@storybook/theming": "6.4.13",
-    "@storybook/vue3": "6.4.13",
+    "@storybook/theming": "6.4.17",
+    "@storybook/vue3": "6.4.17",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/vue": "6.4.2",
     "@vue/cli": "5.0.0-beta.7",

package/src/components/projects/project-hub/PbProjectHub.stories.mdx

@@ -1,3 +1,4 @@
+import { ref } from 'vue';
 import { Story, Meta, Canvas } from '@storybook/addon-docs';
 import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
 import { useStore } from 'vuex';
@@ -308,6 +309,152 @@ The `PbProjectHub` component to access your project.
   </Story>
 </Canvas>
 
+## Showcase autoscroll to estimates
+
+<Canvas>
+  <Story
+    name="Showcase autoscroll to estimates"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getAppointmentByIdResolver),
+        rest.get('/api/project-types/:projectTypeId/products-feature-flag', getEnabledProductsFeatureFlagResolver),
+        rest.get('/api/project-types/:projectTypeId/work-kinds', getWorkKindByProjectTypeResolver),
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', getWorkKindsByProjectIdResolver),
+        rest.put('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', saveWorkKindResolver),
+        rest.get('/api/work-kinds/:workKindId/products', getProductsByWorkKindResolver),
+        rest.get('/api/estimates', getEstimatesByProjectIdResolver),
+        rest.post('/api/estimates', successResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/simulations',
+          getConfigurationsWithUpdatedPricesByProjectIdResolver,
+        ),
+        rest.get('/api/simulations', getConfigurationsByProjectIdResolver),
+        rest.get(
+          'https://storage.googleapis.com/pb-dev-adeo-disp-project-tools/:id.json',
+          getToolsByProjectTypeResolver,
+        ),
+        rest.get('/api/project-types/:projectTypeId/products-feature-flag', getEnabledProductsFeatureFlagResolver),
+        rest.get('/api/media', getAllMediaPaginationResolver),
+        rest.get('/api/media/:mediaId', getMediumByIdResolver),
+        rest.get('/api/media/:mediaId/thumbnail', getMediaThumbnailResolver),
+        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
+        rest.post('/api/media', uploadMediaResolver),
+        rest.patch('/api/media/:mediaId', getMediumByIdResolver),
+        rest.delete('/api/media/:mediaId', successResolver),
+        rest.patch('/api/media/:mediaId', notContentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId', getDocumentByIdResolver),
+        rest.delete('/api/inhabitant-projects/:projectId/documents/:documentId', successResolver),
+        rest.get(
+          '/api/inhabitant-projects/:projectId/documents/:documentId/thumbnail',
+          getDocumentsImageThumbnailResolver,
+        ),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
+        rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/attributes', getProjectAttributesByIdResolver),
+        rest.get('/api/inhabitant-api/users/:buId/:inhabitantId', getInhabitantByIdResolver),
+      ],
+      storyshots: { disable: true },
+    }}
+    height="100vh"
+  >
+    {{
+      components: { PbProjectHub },
+      setup() {
+        const pbProjectHub = ref(null);
+        setTimeout(() => {
+          pbProjectHub.value.scrollToEstimatesSection();
+        }, 600);
+        return {
+          pbProjectHub,
+        };
+      },
+      template: `  <div style="margin: 0 auto;min-height: 100vh;width: 100%;max-width: 1024px;">
+                      <router-view v-slot="{ Component }">
+                        <keep-alive include="PbProjectHub">
+                          <component :is="Component" :key="$route.fullPath" ref="pbProjectHub" />
+                        </keep-alive>
+                      </router-view>
+                  </div>`,
+    }}
+  </Story>
+</Canvas>
+
+## Showcase autoscroll to categories
+
+<Canvas>
+  <Story
+    name="Showcase autoscroll to categories"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getAppointmentByIdResolver),
+        rest.get('/api/project-types/:projectTypeId/products-feature-flag', getEnabledProductsFeatureFlagResolver),
+        rest.get('/api/project-types/:projectTypeId/work-kinds', getWorkKindByProjectTypeResolver),
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', getWorkKindsByProjectIdResolver),
+        rest.put('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', saveWorkKindResolver),
+        rest.get('/api/work-kinds/:workKindId/products', getProductsByWorkKindResolver),
+        rest.get('/api/estimates', getEstimatesByProjectIdResolver),
+        rest.post('/api/estimates', successResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/simulations',
+          getConfigurationsWithUpdatedPricesByProjectIdResolver,
+        ),
+        rest.get('/api/simulations', getConfigurationsByProjectIdResolver),
+        rest.get(
+          'https://storage.googleapis.com/pb-dev-adeo-disp-project-tools/:id.json',
+          getToolsByProjectTypeResolver,
+        ),
+        rest.get('/api/project-types/:projectTypeId/products-feature-flag', getEnabledProductsFeatureFlagResolver),
+        rest.get('/api/media', getAllMediaPaginationResolver),
+        rest.get('/api/media/:mediaId', getMediumByIdResolver),
+        rest.get('/api/media/:mediaId/thumbnail', getMediaThumbnailResolver),
+        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
+        rest.post('/api/media', uploadMediaResolver),
+        rest.patch('/api/media/:mediaId', getMediumByIdResolver),
+        rest.delete('/api/media/:mediaId', successResolver),
+        rest.patch('/api/media/:mediaId', notContentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId', getDocumentByIdResolver),
+        rest.delete('/api/inhabitant-projects/:projectId/documents/:documentId', successResolver),
+        rest.get(
+          '/api/inhabitant-projects/:projectId/documents/:documentId/thumbnail',
+          getDocumentsImageThumbnailResolver,
+        ),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
+        rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/attributes', getProjectAttributesByIdResolver),
+        rest.get('/api/inhabitant-api/users/:buId/:inhabitantId', getInhabitantByIdResolver),
+      ],
+      storyshots: { disable: true },
+    }}
+    height="100vh"
+  >
+    {{
+      components: { PbProjectHub },
+      setup() {
+        const pbProjectHub = ref(null);
+        setTimeout(() => {
+          pbProjectHub.value.scrollToCategoriesSection();
+        }, 600);
+        return {
+          pbProjectHub,
+        };
+      },
+      template: `  <div style="margin: 0 auto;min-height: 100vh;width: 100%;max-width: 1024px;">
+                      <router-view v-slot="{ Component }">
+                        <keep-alive include="PbProjectHub">
+                          <component :is="Component" :key="$route.fullPath" ref="pbProjectHub" />
+                        </keep-alive>
+                      </router-view>
+                  </div>`,
+    }}
+  </Story>
+</Canvas>
+
 ## Showcase Company
 
 <Canvas>

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

@@ -111,7 +111,13 @@
                 <m-button label="Réessayer" @click="$store.dispatch('tasks/reloadPlanner')" />
               </m-flex>
             </m-flex>
-            <m-flex v-if="isEstimatesDisplayed" class="pb-project-hub__section" direction="column" full-width>
+            <m-flex
+              v-if="isEstimatesDisplayed"
+              class="pb-project-hub__section"
+              direction="column"
+              full-width
+              ref="PbProjectHubEstimatesSection"
+            >
               <div class="pb-project-hub__section-header">
                 <div class="pb-project-hub__section-title" ref="pbEstimateList">{{ titleEstimation }}</div>
               </div>
@@ -1339,6 +1345,16 @@ export default {
       });
     },
 
+    scrollToEstimatesSection() {
+      const top = this.$refs.PbProjectHubEstimatesSection.$el.offsetTop;
+
+      window.scroll({
+        top,
+        left: 0,
+        behavior: 'smooth',
+      });
+    },
+
     scrollToCategoriesSection() {
       const top = this.$refs.PbProjectHubCategoriesSection.$el.offsetTop;
 

package/src/components/projects/projects/PbProjects.stories.mdx

@@ -1,3 +1,6 @@
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import { Story, Meta, Canvas } from '@storybook/addon-docs';
 import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
 import PbProjects from './PbProjects';
@@ -11,6 +14,7 @@ import {
   getProjectsResolver,
   getProjectByIdResolver,
 } from '../../../services/api/mocks/projectsMock';
+import { getEstimatesByProjectIdResolver } from '../../../services/api/mocks/estimatesMock';
 
 <Meta
   title="Project Booster/Components/Projects/PbProjects 🦠"
@@ -40,7 +44,11 @@ import {
         component: PbProjectHub,
         props: { showBackButton: true },
         beforeEnter: async (to, from, next, store) => {
+          if (store.getters['tasks/getCurrentProjectId'] !== to.params.projectId) {
+            store.dispatch('tasks/loadPlanner', { projectId: to.params.projectId, buId: 'bu-dev-planner' });
+          }
           await store.dispatch('projects/loadProject', to.params.projectId);
+          await store.dispatch('estimates/loadEstimates', to.params.projectId);
           if (store.getters['projects/getProjects']?.length === 0) {
             store.dispatch('sendEventToBus', {
               code: 'projectHubProjectLoaded',
@@ -115,3 +123,74 @@ The `PbProjects` component to access your projects.
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+## Showcase with autoscroll to estimates
+
+<Canvas>
+  <Story
+    name="Showcase autoscroll to estimates"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects', getProjectsResolver),
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/estimates', getEstimatesByProjectIdResolver),
+        rest.delete('/api/inhabitant-projects/:projectId', successResolver),
+      ],
+    }}
+    height="100vh"
+  >
+    {{
+      components: { PbProjects },
+      setup() {
+        const router = useRouter();
+        const pbProjects = ref(null);
+        router.push('/projects/1');
+        setTimeout(() => {
+          pbProjects.value.$refs.displayedComponent.scrollToEstimatesSection();
+        }, 900);
+        return {
+          pbProjects,
+        };
+      },
+      template: `<div style="margin: 0 auto;min-height: 100vh;width: 100%;">
+        <pb-projects ref="pbProjects" />
+      </div>`,
+    }}
+  </Story>
+</Canvas>
+
+## Showcase with project creation loader
+
+<Canvas>
+  <Story
+    name="Showcase project creation loader"
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects', getProjectsResolver),
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/estimates', getEstimatesByProjectIdResolver),
+        rest.delete('/api/inhabitant-projects/:projectId', successResolver),
+      ],
+      controls: { disable: true },
+    }}
+    height="100vh"
+  >
+    {{
+      components: { PbProjects },
+      setup() {
+        const store = useStore();
+        const router = useRouter();
+        const pbProjects = ref(null);
+        router.push('/projects/new');
+        store.dispatch('projects/saveProject', { projectToSave: {}, metaData: {} });
+        return {
+          pbProjects,
+        };
+      },
+      template: `<div style="margin: 0 auto;min-height: 100vh;width: 100%;">
+        <pb-projects ref="pbProjects" />
+      </div>`,
+    }}
+  </Story>
+</Canvas>

package/src/components/projects/projects/PbProjects.vue

@@ -1,11 +1,20 @@
 <template>
   <router-view v-slot="{ Component }">
-    <component :is="Component" :key="$route.fullPath" v-bind="$attrs" />
+    <component :is="Component" :key="$route.fullPath" v-bind="$attrs" ref="displayedComponent" />
   </router-view>
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   name: 'PbProjects',
+
+  setup() {
+    const displayedComponent = ref(null);
+    return {
+      displayedComponent,
+    };
+  },
 };
 </script>