project-booster-vue 9.57.4 → 9.58.0

package/package.json

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

package/src/components/rework/question/upload-document/MPbUploadDocument-Features-ShowMore.stories.json

@@ -0,0 +1,70 @@
+{
+  "viewModel": {
+    "label": "Vos plans de cuisine",
+    "answersComponent": "PbCard",
+    "showMore": {
+      "itemsPerPage": 4,
+      "label": "Voir plus"
+    },
+    "startOpened": false,
+    "mediaPayload": {
+      "viewModel": {
+        "type": "documentsPlans",
+        "acceptedFileTypes": "image/jpeg, image/png, image/heif, image/heic, image/heif-sequence, image/heic-sequence, application/pdf",
+        "dialog": {
+          "hideCross": false,
+          "fullscreen": false,
+          "title": "Ajouter un plan",
+          "successUpload": "Votre plan a bien été ajouté",
+          "chooseAnotherMediaLabel": "Choisir un autre plan",
+          "uploadProgressTitle": "Chargement de votre plan",
+          "errorUploadTitle": "Une erreur est survenue lors de l'envoi de votre plan ",
+          "uploadPreviewTitle": "Nom de plan ",
+          "documentTypeTitle": "De quel type de plan s’agit il ?",
+          "acceptedMediaTypesErrorLabel": "Seuls les formats JPG et PNG, et PDF sont acceptés",
+          "mediaTypes": [
+            {
+              "type": "PLAN",
+              "subtype": "HAND_DRAWN_PLAN",
+              "code": "HAND_DRAWN_PLAN",
+              "label": "Un plan fait moi-même"
+            },
+            {
+              "type": "PLAN",
+              "subtype": "ARCHITECT_PLAN",
+              "code": "ARCHITECT_PLAN",
+              "label": "Un plan d’architecte"
+            },
+            {
+              "type": "PLAN",
+              "subtype": "KITCHEN_DESIGNER_PLAN",
+              "code": "KITCHEN_DESIGNER_PLAN",
+              "label": "Un plan d’un autre cuisiniste"
+            }
+          ]
+        }
+      }
+    }
+  },
+  "skippable": [
+    {
+      "label": "Ajouter un plan plus tard",
+      "theme": "text-primary",
+      "width": "full",
+      "widthFromM": "fit",
+      "nextStep": {
+        "code": "LMFR_QUESTION_ADD_PLAN_LATER"
+      }
+    }
+  ],
+  "multiSelect": {
+    "actions": {
+      "VALIDATE": {
+        "label": "Continuer",
+        "nextStep": {
+          "code": "__END__"
+        }
+      }
+    }
+  }
+}

package/src/components/rework/question/upload-document/MPbUploadDocument-Features-ShowMore.stories.mdx

@@ -0,0 +1,93 @@
+import { nestedAppDecorator } from '../../../../../.storybook/nested-app-decorator';
+import { Anchor, Story, Meta, Source, Canvas } from '@storybook/addon-docs';
+import DEFAULT_PAYLOAD from './MPbUploadDocument-Features-ShowMore.stories.json';
+import { TemplateSandbox } from './MPbUploadDocument.stories.mdx';
+import documentsStore from '../../../../stores/modules/documentsStore';
+import { acceptedResolver } from '../../../../services/api/mocks/commonMock';
+import { rest } from 'msw';
+import {
+  getDocumentsByInhabitantProjectIdResolver,
+  getDocumentsPdfThumbnailResolver,
+  uploadDocumentResolver,
+} from '../../../../services/api/mocks/documentsMock';
+import cloneDeep from 'lodash.clonedeep';
+import MPbUploadDocument from './MPbUploadDocument';
+import PbScenario from '../../../../components/scenario/PbScenario';
+
+<Meta
+  title="Project Booster/Rework/Questions/MPbUploadDocument 🦠/Feature"
+  component={MPbUploadDocument}
+  argTypes={{
+    payload: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    onStepCompleted: {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          documents: cloneDeep(documentsStore),
+          documentsPlans: cloneDeep(documentsStore),
+          documentsPictures: cloneDeep(documentsStore),
+        },
+        mutations: {
+          eventBusSendEvent(state, { code, payload }) {
+            console.log('event bus data : ', code, payload);
+          },
+        },
+        getters: {
+          summary(state) {
+            return state.summary;
+          },
+        },
+        actions: {
+          sendEventToBus({}, payload) {
+            console.log('Event sent to bus', payload);
+          },
+        },
+      },
+      [{ path: '/steps/:stepCode/previous/:answers', component: PbScenario }],
+    ),
+  ]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+<Anchor storyId="project-booster-scenario-pbscenario-features--show-more-documents" />
+
+## Show more documents
+
+<Canvas>
+  <Story
+    name="show more documents"
+    inline={false}
+    height="758px"
+    args={{ payload: DEFAULT_PAYLOAD }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.post('/api/events/documents', acceptedResolver),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/documents', uploadDocumentResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/documents/:documentId/thumbnail',
+          getDocumentsPdfThumbnailResolver,
+        ),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/rework/question/upload-document/MPbUploadDocument-Features-StartOpen.stories.json

@@ -0,0 +1,67 @@
+{
+  "viewModel": {
+    "label": "Vos plans de cuisine",
+    "answersComponent": "PbCard",
+    "startOpened": true,
+    "mediaPayload": {
+      "viewModel": {
+        "type": "documentsPlans",
+        "acceptedFileTypes": "image/jpeg, image/png, image/heif, image/heic, image/heif-sequence, image/heic-sequence, application/pdf",
+        "dialog": {
+          "hideCross": false,
+          "fullscreen": false,
+          "title": "Ajouter un plan",
+          "roomToggle": true,
+          "successUpload": "Votre plan a bien été ajouté",
+          "chooseAnotherMediaLabel": "Choisir un autre plan",
+          "uploadProgressTitle": "Chargement de votre plan",
+          "errorUploadTitle": "Une erreur est survenue lors de l'envoi de votre plan ",
+          "uploadPreviewTitle": "Nom de plan ",
+          "documentTypeTitle": "De quel type de plan s’agit il ?",
+          "acceptedMediaTypesErrorLabel": "Seuls les formats JPG et PNG, et PDF sont acceptés",
+          "mediaTypes": [
+            {
+              "type": "PLAN",
+              "subtype": "HAND_DRAWN_PLAN",
+              "code": "HAND_DRAWN_PLAN",
+              "label": "Un plan fait moi-même"
+            },
+            {
+              "type": "PLAN",
+              "subtype": "ARCHITECT_PLAN",
+              "code": "ARCHITECT_PLAN",
+              "label": "Un plan d’architecte"
+            },
+            {
+              "type": "PLAN",
+              "subtype": "KITCHEN_DESIGNER_PLAN",
+              "code": "KITCHEN_DESIGNER_PLAN",
+              "label": "Un plan d’un autre cuisiniste"
+            }
+          ]
+        }
+      }
+    }
+  },
+  "skippable": [
+    {
+      "label": "Ajouter un plan plus tard",
+      "theme": "text-primary",
+      "width": "full",
+      "widthFromM": "fit",
+      "nextStep": {
+        "code": "LMFR_QUESTION_ADD_PLAN_LATER"
+      }
+    }
+  ],
+  "multiSelect": {
+    "actions": {
+      "VALIDATE": {
+        "label": "Continuer",
+        "nextStep": {
+          "code": "__END__"
+        }
+      }
+    }
+  }
+}

package/src/components/rework/question/upload-document/MPbUploadDocument-Features-StartOpen.stories.mdx

@@ -0,0 +1,93 @@
+import { nestedAppDecorator } from '../../../../../.storybook/nested-app-decorator';
+import { Anchor, Story, Meta, Source, Canvas } from '@storybook/addon-docs';
+import MPbUploadDocument from './MPbUploadDocument';
+import PbScenario from '../../../../components/scenario/PbScenario';
+import DEFAULT_PAYLOAD from './MPbUploadDocument-Features-StartOpen.stories.json';
+import { TemplateSandbox } from './MPbUploadDocument.stories.mdx';
+import documentsStore from '../../../../stores/modules/documentsStore';
+import { acceptedResolver } from '../../../../services/api/mocks/commonMock';
+import { rest } from 'msw';
+import {
+  getDocumentsByInhabitantProjectIdResolver,
+  getDocumentsPdfThumbnailResolver,
+  uploadDocumentResolver,
+} from '../../../../services/api/mocks/documentsMock';
+import cloneDeep from 'lodash.clonedeep';
+
+<Meta
+  title="Project Booster/Rework/Questions/MPbUploadDocument 🦠/Feature"
+  component={MPbUploadDocument}
+  argTypes={{
+    payload: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    onStepCompleted: {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          documents: cloneDeep(documentsStore),
+          documentsPlans: cloneDeep(documentsStore),
+          documentsPictures: cloneDeep(documentsStore),
+        },
+        mutations: {
+          eventBusSendEvent(state, { code, payload }) {
+            console.log('event bus data : ', code, payload);
+          },
+        },
+        getters: {
+          summary(state) {
+            return state.summary;
+          },
+        },
+        actions: {
+          sendEventToBus({}, payload) {
+            console.log('Event sent to bus', payload);
+          },
+        },
+      },
+      [{ path: '/steps/:stepCode/previous/:answers', component: MPbUploadDocument }],
+    ),
+  ]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+<Anchor storyId="project-booster-scenario-pbscenario-features--start-open" />
+
+## Start open
+
+<Canvas>
+  <Story
+    name="start open"
+    inline={false}
+    height="758px"
+    args={{ payload: DEFAULT_PAYLOAD }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.post('/api/events/documents', acceptedResolver),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/documents', uploadDocumentResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/documents/:documentId/thumbnail',
+          getDocumentsPdfThumbnailResolver,
+        ),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/rework/question/upload-document/MPbUploadDocument.stories.mdx

@@ -0,0 +1,157 @@
+import { nestedAppDecorator } from '../../../../../.storybook/nested-app-decorator';
+import { Story, Meta, ArgsTable, Canvas } from '@storybook/addon-docs';
+import MPbUploadDocument from './MPbUploadDocument';
+import PbScenario from '../../../../components/scenario/PbScenario';
+import DEFAULT_PAYLOAD from './default-payload.json';
+import PICTURES_PAYLOAD from './pictures-payload.json';
+import documentsStore from '../../../../stores/modules/documentsStore';
+import appointmentQualificationStore from '../../../../stores/modules/appointmentQualificationStore';
+import PbMediaUpload from '../../../media/upload/PbMediaUpload';
+import { rest } from 'msw';
+import { acceptedResolver } from '../../../../services/api/mocks/commonMock';
+import {
+  getDocumentsByInhabitantProjectIdResolver,
+  uploadDocumentResolver,
+  getDocumentsPdfThumbnailResolver,
+  getDocumentsImageThumbnailResolver,
+} from '../../../../services/api/mocks/documentsMock';
+import { useStore } from 'vuex';
+import cloneDeep from 'lodash.clonedeep';
+
+<Meta
+  title="Project Booster/Rework/Questions/MPbUploadDocument 🦠"
+  component={MPbUploadDocument}
+  argTypes={{
+    payload: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    onStepCompleted: {
+      action: 'Step completed',
+      table: { disable: true },
+    },
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          documents: cloneDeep(documentsStore),
+          documentsPlans: cloneDeep(documentsStore),
+          documentsPictures: cloneDeep(documentsStore),
+          appointmentQualification: appointmentQualificationStore,
+        },
+        mutations: {
+          eventBusSendEvent(state, { code, payload }) {
+            console.log('event bus data : ', code, payload);
+          },
+        },
+        actions: {
+          sendEventToBus({ commit }, action) {
+            commit('eventBusSendEvent', action);
+          },
+        },
+      },
+      [
+        { path: '/steps/:stepCode/previous/:answers', component: PbScenario },
+        {
+          name: 'PbMediaUpload',
+          path: '/document-upload',
+          component: PbMediaUpload,
+        },
+      ],
+    ),
+  ]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+# 🦠 `MPbUploadDocument` - Components
+
+[![alt text](https://storage.googleapis.com/project-booster-media/project-booster-vue/project-booster-sources.svg 'Project booster component source code')](https://github.com/adeo/project-booster-vue/tree/master/src/components/question)
+
+---
+
+The `MPbUploadDocument` allows to upload files. It
+is customizable through the payload property. It has the same
+behaviour as the `PbQuestion` component and is designed to work in scenario.
+
+# `MPbUploadDocument` - Component props
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbUploadDocument },
+  setup() {
+    const store = useStore();
+    store.dispatch('documentsPlans/updateContext', { type: 'DOCUMENT', subType: 'PLAN' });
+    store.dispatch('documentsPictures/updateContext', { type: 'DOCUMENT', subType: 'PHOTO' });
+    store.dispatch('documentsPlans/updateMediaPerPageCount', 3);
+    store.dispatch('documentsPlans/updateMediaPerPageCount', 3);
+    store.dispatch('documents/updateMediaPerPageCount', 3);
+    return { args };
+  },
+  template: `<m-pb-upload-document
+    :payload="args.payload"
+    :show-back-button="args.showBackButton"
+    :answers="args.answers"
+    :runtime-options="args.runtimeOptions"
+    :completed-event-name="args.completedEventName"
+    :sticky-bottom-offset="args.stickyBottomOffset"
+    @step-completed="args.onStepCompleted"
+  />`,
+});
+
+<Canvas>
+  <Story
+    inline={false}
+    height="862px"
+    name="101 Sandbox"
+    args={{ payload: DEFAULT_PAYLOAD }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.post('/api/events/documents', acceptedResolver),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/documents', uploadDocumentResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/documents/:documentId/thumbnail',
+          getDocumentsPdfThumbnailResolver,
+        ),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="101 Sandbox" />
+
+## Pictures variant
+
+<Canvas>
+  <Story
+    name="Pictures"
+    inline={false}
+    height="862px"
+    args={{ payload: PICTURES_PAYLOAD }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.post('/api/events/documents', acceptedResolver),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/documents', uploadDocumentResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/documents/:documentId/thumbnail',
+          getDocumentsImageThumbnailResolver,
+        ),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>