project-booster-vue 9.0.5 → 9.2.0

package/package.json

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

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

@@ -135,10 +135,10 @@
                   <m-radio
                     class="pb-media-upload__preview-document-types-list"
                     name="radio-group"
-                    v-for="type in payload.viewModel.dialog.mediaTypes"
-                    :label="type.label"
-                    :key="type.code"
-                    @click="updateMediaType(type)"
+                    v-for="mediaType in payload.viewModel.dialog.mediaTypes"
+                    :label="mediaType.label"
+                    :key="mediaType.type + '_' + mediaType.subtype"
+                    @click="updateMediaType(mediaType)"
                   />
                 </div>
                 <transition name="pb-media-upload--fade" mode="out-in" @before-leave="beforeLeave">
@@ -209,6 +209,7 @@ import PbStickyFooter from '../../sticky-footer/PbStickyFooter.vue';
 import { isFileTypeValid, MediaValidationErrors, mediaValidator } from './mediaValidator';
 import MEDIA_UPLOAD_PAYLOAD from './media-upload-payload.json';
 import { MediaEventOptions, MediaUploadOptions } from '@/types/pb/Media';
+import { UploadDocumentMediaType } from '@/components/question/upload-document/UploadDocument';
 
 const NAME_MAX_LENGTH = 60;
 const PDF_IMAGE = 'https://storage.googleapis.com/project-booster-media/vad/PDF/visuel_PDF_plan.png';
@@ -269,7 +270,7 @@ export default defineComponent({
       displayAddDialog: false,
       formData: null as FormData | null,
       fileName: null as string | null,
-      selectedType: null as { code: string } | null,
+      selectedType: null as UploadDocumentMediaType | null,
       isRoomPicture: false,
     };
   },
@@ -410,7 +411,8 @@ export default defineComponent({
           formData: this.formData,
           fileName: this.fileName,
           isRoomPicture: this.isRoomPicture,
-          documentType: this.selectedType?.code,
+          documentType: this.selectedType?.type,
+          documentSubtype: this.selectedType?.subtype,
         } as MediaUploadOptions);
       } else {
         this.displayAddDialog = false;
@@ -504,7 +506,7 @@ export default defineComponent({
       return valid;
     },
 
-    updateMediaType(type: { code: string; name: string }) {
+    updateMediaType(type: UploadDocumentMediaType) {
       this.selectedType = type;
     },
   },

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

@@ -1,6 +1,7 @@
 {
   "viewModel": {
     "title": "Ajouter un document",
+    "acceptedFileTypes": "image/jpeg, image/png, image/heif, image/heic, image/heif-sequence, image/heic-sequence, application/pdf",
     "dialog": {
       "hideCross": false,
       "fullscreen": false,
@@ -14,15 +15,18 @@
       "acceptedMediaTypesErrorLabel": "Seuls les formats JPG et PNG, et PDF sont acceptés",
       "mediaTypes": [
         {
-          "code": "HAND_DRAWN_PLAN",
+          "type": "PLAN",
+          "subtype": "HAND_DRAWN_PLAN",
           "label": "Un plan fait moi même"
         },
         {
-          "code": "ARCHITECT_PLAN",
+          "type": "PLAN",
+          "subtype": "ARCHITECT_PLAN",
           "label": "Un plan d’architecte"
         },
         {
-          "code": "KITCHEN_DESIGNER_PLAN",
+          "type": "PLAN",
+          "subtype": "KITCHEN_DESIGNER_PLAN",
           "label": "Un plan d’un autre cuisiniste"
         }
       ]

package/src/components/projects/project-hub/PbProjectHub-Features-Documents&Media.stories.mdx

@@ -54,9 +54,11 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
             store.dispatch('projects/loadProject', '001');
           }
           if (store.getters['media/getCurrentProjectId'] !== '001') {
+            store.dispatch('media/updateContext', { type: 'MEDIA' });
             store.dispatch('media/loadMedia', '001');
           }
           if (store.getters['documents/getCurrentProjectId'] !== '001') {
+            store.dispatch('documents/updateContext', { type: 'DOCUMENTS' });
             store.dispatch('documents/loadMedia', '001');
           }
           next();
@@ -72,6 +74,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
           uploadPayload: MEDIA_UPLOAD_PAYLOAD,
         },
         beforeEnter: async (to, from, next, store) => {
+          store.dispatch('media/updateContext', { type: 'MEDIA' });
           if (store.getters['projects/getCurrentProjectId'] !== '001') {
             store.dispatch('projects/loadProject', '001');
           }
@@ -91,6 +94,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
           uploadPayload: MEDIA_UPLOAD_PAYLOAD,
         },
         beforeEnter: async (to, from, next, store) => {
+          store.dispatch('media/updateContext', { type: 'MEDIA' });
           if (store.getters['projects/getCurrentProjectId'] !== '001') {
             store.dispatch('projects/loadProject', '001');
           }
@@ -114,6 +118,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
           uploadPayload: DOCUMENT_UPLOAD_PAYLOAD,
         },
         beforeEnter: async (to, from, next, store) => {
+          store.dispatch('documents/updateContext', { type: 'DOCUMENTS' });
           if (store.getters['projects/getCurrentProjectId'] !== '001') {
             store.dispatch('projects/loadProject', '001');
           }
@@ -134,6 +139,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
           uploadPayload: DOCUMENT_UPLOAD_PAYLOAD,
         },
         beforeEnter: async (to, from, next, store) => {
+          store.dispatch('documents/updateContext', { type: 'DOCUMENTS' });
           if (store.getters['projects/getCurrentProjectId'] !== '001') {
             store.dispatch('projects/loadProject', '001');
           }
@@ -148,7 +154,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
       },
     ]),
   ]}
-></Meta>
+/>
 
 # 🦠 `PbProjectHub` - Component
 

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

@@ -97,9 +97,11 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
             store.dispatch('estimates/loadEstimates', projectId);
           }
           if (store.getters['media/getCurrentProjectId'] !== projectId) {
+            store.dispatch('media/updateContext', { type: 'MEDIA' });
             store.dispatch('media/loadMedia', projectId);
           }
           if (store.getters['documents/getCurrentProjectId'] !== projectId) {
+            store.dispatch('documents/updateContext', { type: 'DOCUMENTS' });
             store.dispatch('documents/loadMedia', projectId);
           }
           if (store.getters['projects/getCurrentProjectId'] !== projectId) {
@@ -125,6 +127,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
         beforeEnter: async (to, from, next, store) => {
           store.dispatch('media/updateCurrentMedia', null);
           const projectId = to.params.projectId;
+          store.dispatch('media/updateContext', { type: 'MEDIA' });
           if (store.getters['projects/getCurrentProjectId'] !== projectId) {
             store.dispatch('projects/loadProject', projectId);
           }
@@ -141,6 +144,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
         beforeEnter: async (to, from, next, store) => {
           const projectId = to.params.projectId;
           const mediaId = to.params.inspirationId;
+          store.dispatch('media/updateContext', { type: 'MEDIA' });
           if (store.getters['projects/getCurrentProjectId'] !== projectId) {
             store.dispatch('projects/loadProject', projectId);
           }
@@ -164,6 +168,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
           uploadPayload: DOCUMENT_UPLOAD_PAYLOAD,
         },
         beforeEnter: async (to, from, next, store) => {
+          store.dispatch('documents/updateContext', { type: 'DOCUMENTS' });
           store.dispatch('documents/updateCurrentMedia', null);
           const projectId = to.params.projectId;
           if (store.getters['projects/getCurrentProjectId'] !== projectId) {
@@ -188,6 +193,7 @@ import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.
         beforeEnter: async (to, from, next, store) => {
           const projectId = to.params.projectId;
           const mediaId = to.params.documentId;
+          store.dispatch('documents/updateContext', { type: 'DOCUMENTS' });
           if (store.getters['projects/getCurrentProjectId'] !== projectId) {
             store.dispatch('projects/loadProject', projectId);
           }
@@ -245,31 +251,34 @@ The `PbProjectHub` component to access your project.
         rest.get('/api/estimates', getEstimatesByProjectIdResolver),
         rest.post('/api/estimates', successResolver),
         rest.get(
-          '/inhabitant-projects/:inhabitantProjectId/simulations',
+          '/api/inhabitant-projects/:inhabitantProjectId/simulations',
           getConfigurationsWithUpdatedPricesByProjectIdResolver,
         ),
-        rest.get('/simulations', getConfigurationsByProjectIdResolver),
+        rest.get('//apisimulations', getConfigurationsByProjectIdResolver),
         rest.get(
           'https://storage.googleapis.com/pb-dev-adeo-disp-project-tools/:id.json',
           getToolsByProjectTypeResolver,
         ),
-        rest.get('/project-types/:projectTypeId/products-feature-flag', getEnabledProductsFeatureFlagResolver),
-        rest.get('/media', getAllMediaPaginationResolver),
-        rest.get('/media/:mediaId', getMediumByIdResolver),
-        rest.get('/media/:mediaId/thumbnail', getMediaThumbnailResolver),
-        rest.get('/media/:mediaId/file', getMediaFileResolver),
-        rest.post('/media', uploadMediaResolver),
-        rest.patch('/media/:mediaId', getMediumByIdResolver),
-        rest.delete('/media/:mediaId', successResolver),
-        rest.patch('/media/:mediaId', notContentResolver),
-        rest.get('/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
-        rest.get('/inhabitant-projects/:projectId/documents/:documentId', getDocumentByIdResolver),
-        rest.delete('/inhabitant-projects/:projectId/documents/:documentId', successResolver),
-        rest.get('/inhabitant-projects/:projectId/documents/:documentId/thumbnail', getDocumentsImageThumbnailResolver),
-        rest.get('/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
-        rest.post('/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
-        rest.get('/inhabitant-projects/:projectId/attributes', getProjectAttributesByIdResolver),
-        rest.get('/inhabitant-api/users/:buId/:inhabitantId', getInhabitantByIdResolver),
+        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 },
     }}

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

@@ -81,35 +81,61 @@
                 />
               </m-flex>
             </m-flex>
-            <m-flex
-              v-if="isPlannerDisplayed"
-              class="pb-project-hub__section pb-project-hub__planner-section"
-              direction="column"
-              full-width
-            >
-              <pb-tasks-preview
-                v-if="!plannerError"
-                class="pb-project-hub__planner"
-                :tasks="tasks"
-                :tasks-number="3"
-                :read-only="readOnly"
-                @show-task-details="handleShowTaskDetails"
-                @create-task="handleCreateTask"
-                @view-tasks="handleViewTasks"
-                @task-completed="handleCompleteTask"
-              />
-              <m-flex
-                v-else-if="plannerError"
-                class="pb-project-hub__planner--error"
-                direction="column"
-                align-items="center"
-                justify-content="center"
-                gap="2rem"
-                full-width
-              >
-                <div>Une erreur est survenue lors du chargement des étapes</div>
-                <m-button label="Réessayer" @click="$store.dispatch('tasks/reloadPlanner')" />
-              </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>
+              <div class="pb-project-hub__section-content">
+                <m-flex
+                  class="pb-project-hub__section-content--loading"
+                  v-if="isLoadingDocuments"
+                  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>
+                <m-container
+                  class="pb-project-hub__section-content-cards-container"
+                  fluid
+                  v-if="displayedDocuments && displayedDocuments.length > 0"
+                >
+                  <m-flexy class="pb-project-hub__section-content-cards-flexy">
+                    <m-flexy-col
+                      class="pb-project-hub__section-content-card-flexy"
+                      v-for="document in displayedDocuments"
+                      :key="document.id"
+                      width="full"
+                      width-from-m="1of3"
+                    >
+                      <div class="pb-project-hub__section-content-card-container">
+                        <pb-card
+                          @cardClick="handleDocumentClick(document.id)"
+                          class="pb-project-hub__section-content-card"
+                          :image="documentThumbnailUrl.replace('@@PB_MEDIA_ID_FILLER@@', document.id)"
+                          :text="document.title ? document.title : 'Image sans nom'"
+                        />
+                      </div>
+                    </m-flexy-col>
+                  </m-flexy>
+                  <m-link
+                    class="pb-project-hub__section-content-link"
+                    label="Gérer vos documents"
+                    @click="$router.push({ name: 'PbDocuments' })"
+                  />
+                </m-container>
+                <pb-empty-state
+                  v-else
+                  :title="!readOnly ? 'Centraliser vos documents' : ''"
+                  :subtitle="!readOnly ? '' : 'Aucune information renseignée'"
+                  image="https://storage.googleapis.com/project-booster-media/media/empty-media.png"
+                  :button-label="!readOnly ? 'Ajouter des documents' : ''"
+                  @button-click="handleClickDocumentEmptyState"
+                  :disabled="readOnly"
+                />
+              </div>
             </m-flex>
             <m-flex
               v-if="isEstimatesDisplayed"
@@ -360,7 +386,7 @@
                   </m-flexy>
                   <m-link
                     class="pb-project-hub__section-content-link"
-                    label="Voir toutes les inspirations"
+                    label="Gérer vos inspirations"
                     @click="$router.push({ name: 'PbInspirations' })"
                   />
                 </m-container>
@@ -375,63 +401,12 @@
                 />
               </div>
             </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>
-              <div class="pb-project-hub__section-content">
-                <m-flex
-                  class="pb-project-hub__section-content--loading"
-                  v-if="isLoadingDocuments"
-                  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>
-                <m-container
-                  class="pb-project-hub__section-content-cards-container"
-                  fluid
-                  v-if="displayedDocuments && displayedDocuments.length > 0"
-                >
-                  <m-flexy class="pb-project-hub__section-content-cards-flexy">
-                    <m-flexy-col
-                      class="pb-project-hub__section-content-card-flexy"
-                      v-for="document in displayedDocuments"
-                      :key="document.id"
-                      width="full"
-                      width-from-m="1of3"
-                    >
-                      <div class="pb-project-hub__section-content-card-container">
-                        <pb-card
-                          @cardClick="handleDocumentClick(document.id)"
-                          class="pb-project-hub__section-content-card"
-                          :image="documentThumbnailUrl.replace('@@PB_MEDIA_ID_FILLER@@', document.id)"
-                          :text="document.title ? document.title : 'Image sans nom'"
-                        />
-                      </div>
-                    </m-flexy-col>
-                  </m-flexy>
-                  <m-link
-                    class="pb-project-hub__section-content-link"
-                    label="Voir tous les documents"
-                    @click="$router.push({ name: 'PbDocuments' })"
-                  />
-                </m-container>
-                <pb-empty-state
-                  v-else
-                  :title="!readOnly ? 'Centraliser vos documents' : ''"
-                  :subtitle="!readOnly ? '' : 'Aucune information renseignée'"
-                  image="https://storage.googleapis.com/project-booster-media/media/empty-media.png"
-                  :button-label="!readOnly ? 'Ajouter des documents' : ''"
-                  @button-click="handleClickDocumentEmptyState"
-                  :disabled="readOnly"
-                />
-              </div>
-            </m-flex>
-            <m-flex v-if="areProjectAttributesDisplayed" class="pb-project-hub__section" direction="column" full-width>
+            <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 }}
@@ -466,6 +441,36 @@
                 </m-flex>
               </div>
             </m-flex>
+            <m-flex
+              v-if="isPlannerDisplayed"
+              class="pb-project-hub__section pb-project-hub__planner-section"
+              direction="column"
+              full-width
+            >
+              <pb-tasks-preview
+                v-if="!plannerError"
+                class="pb-project-hub__planner"
+                :tasks="tasks"
+                :tasks-number="3"
+                :read-only="readOnly"
+                @show-task-details="handleShowTaskDetails"
+                @create-task="handleCreateTask"
+                @view-tasks="handleViewTasks"
+                @task-completed="handleCompleteTask"
+              />
+              <m-flex
+                v-else-if="plannerError"
+                class="pb-project-hub__planner--error"
+                direction="column"
+                align-items="center"
+                justify-content="center"
+                gap="2rem"
+                full-width
+              >
+                <div>Une erreur est survenue lors du chargement des étapes</div>
+                <m-button label="Réessayer" @click="$store.dispatch('tasks/reloadPlanner')" />
+              </m-flex>
+            </m-flex>
             <m-flex v-if="isMailConsentDisplayed" class="pb-project-hub__section" direction="column" full-width>
               <div class="pb-project-hub__section-header">
                 <div class="pb-project-hub__section-title" ref="pbConsent">Souscription newsletter</div>

package/src/components/question/upload-document/UploadDocument.ts

@@ -19,7 +19,8 @@ export interface UploadDocumentSkippable {
 }
 
 export interface UploadDocumentMediaType {
-  code: string;
+  type: string;
+  subtype: string;
   label: string;
 }
 

package/src/services/api/documentsApi.ts

@@ -22,15 +22,15 @@ const uploadDocument = async (
   formData: FormData,
   inhabitantProjectId: string,
   correlationId: string,
-  subType: string,
   trackProgress: (progressEvent: ProgressEvent) => void,
   fileName: string,
   type: string,
+  subtype: string,
 ) => {
   const [name, file] = formData.entries().next().value;
   const data = new FormData();
   data.append('document', file);
-  data.append('metadata', JSON.stringify({ type: type, correlationId, subType, title: fileName }, null, '\t'));
+  data.append('metadata', JSON.stringify({ type: type, correlationId, subType: subtype, title: fileName }, null, '\t'));
   return await clientApi.post(`/inhabitant-projects/${inhabitantProjectId}/documents`, data, {
     onUploadProgress: trackProgress,
   });

package/src/stores/modules/mediaDocumentsStore.ts

@@ -177,10 +177,10 @@ export const mediaDocumentsUploadStoreOptions = {
             uploadFile.formData,
             state.currentProjectId,
             correlationId,
-            uploadFile.documentType ? uploadFile.documentType : 'ROOM_PHOTO',
             trackProgress,
             uploadFile.fileName,
-            state.context.subType,
+            uploadFile.documentType,
+            uploadFile.documentSubtype,
           );
         }
         const location = response.headers.location;
@@ -436,7 +436,7 @@ export const mediaDocumentsListStoreOptions = {
       commit('setMediaList', []);
       commit('setIsLoadingMedia', false);
       commit('setCurrentMediaPage', 0);
-      commit('setHasStillMedia', true);
+      commit('setHasStillMedia', false);
       commit('setAddedMediaNumber', 0);
       commit('setMediaLoadError', null);
     },
@@ -487,7 +487,7 @@ export const mediaDocumentsListStoreOptions = {
             state.context.subType,
           );
         }
-        commit('addMedia', media.results);
+        commit('addMedia', media.results ? media.results : []);
 
         if (media.total >= 30) {
           commit('setIsAddPhotoDisabled', true);

package/src/types/pb/Media.ts

@@ -16,6 +16,7 @@ export interface MediaUploadOptions {
   fileName: string;
   isRoomPicture: boolean;
   documentType: string;
+  documentSubtype: string;
 }
 
 export interface MediaEventOptions {