project-booster-vue 9.26.0 → 9.28.1

package/package.json

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

package/src/components/cards/PbCard.vue

@@ -5,9 +5,9 @@
       disabled ? 'pb-card--disabled' : ''
     }${flattened ? 'pb-card--no-pointer-events' : ''} ${
       cardMinRatio && cardMinRatio !== 'auto' ? 'm-ratio-container--' + cardMinRatio : ''
-    }`"
+    }${borderTop ? 'pb-card--border-top' : ''}`"
     :role="!buttonLabel ? 'button' : 'article'"
-    :style="`min-height: ${cardMinHeight}`"
+    :style="`min-height: ${cardMinHeight}; border-color:${borderTop ? borderTop : null}`"
     @click="handleCardClick"
   >
     <m-flex
@@ -309,6 +309,13 @@ export default defineComponent({
       type: [Boolean, String],
       default: false,
     },
+    /**
+     * Definies if the card has a border top
+     */
+    borderTop: {
+      type: String,
+      default: null,
+    },
   },
 
   computed: {
@@ -361,6 +368,11 @@ $responsive-breakpoint: 's';
   overflow: hidden;
   position: relative;
 
+  &--border-top {
+    border-top-style: solid !important;
+    border-top-width: 4px !important;
+  }
+
   &__items-container:empty ~ &__image-container {
     height: 100%;
 

package/src/components/media/PbMedia.stories.mdx

@@ -1,12 +1,6 @@
 import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import PbMedia from './PbMedia';
-import mediaDocumentsStore from '../../stores/modules/mediaDocumentsStore';
-import {
-  getAllMediaPaginationResolver,
-  getMediaThumbnailResolver,
-  getMediaFileResolver,
-  uploadMediaResolver,
-} from '../../services/api/mocks/mediaMock';
+import documentsStore from '../../stores/modules/documentsStore';
 import {
   getDocumentsByInhabitantProjectIdResolver,
   getDocumentsImageThumbnailResolver,
@@ -32,8 +26,7 @@ import { useStore } from 'vuex';
     nestedAppDecorator(
       {
         modules: {
-          documents: cloneDeep(mediaDocumentsStore),
-          media: cloneDeep(mediaDocumentsStore),
+          documents: cloneDeep(documentsStore),
         },
         getters: {
           getProject(state) {
@@ -64,8 +57,6 @@ export const TemplateSandbox = (args, { argTypes }) => {
     components: { PbMedia },
     setup() {
       const store = useStore();
-      store.dispatch('documents/updateContext', { type: 'DOCUMENT' });
-      store.dispatch('media/updateContext', { type: 'MEDIA' });
     },
     template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
       <pb-media />
@@ -73,37 +64,6 @@ export const TemplateSandbox = (args, { argTypes }) => {
   };
 };
 
-# `EmptyState`
-
-<Canvas>
-  <Story
-    name="Empty State"
-    parameters={{
-      controls: { disabled: true },
-      msw: [
-        rest.patch('/api/media/:mediaId', notContentResolver),
-        rest.post('/api/events/media', acceptedResolver),
-        rest.post('/api/media', uploadMediaResolver),
-        rest.get('/api/media/:mediaId/thumbnail', getMediaThumbnailResolver),
-        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
-        rest.get('/api/media', getAllMediaPaginationResolver),
-      ],
-    }}
-    height="512px"
-  >
-    {{
-      components: { PbMedia },
-      created() {
-        this.$store.dispatch('media/updateContext', { type: 'MEDIA' });
-        this.$store.dispatch('media/resetMediaListContext');
-      },
-      template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
-        <pb-media />
-    </div>`,
-    }}
-  </Story>
-</Canvas>
-
 # `EmptyState Document`
 
 <Canvas>
@@ -127,7 +87,6 @@ export const TemplateSandbox = (args, { argTypes }) => {
     {{
       components: { PbMedia },
       created() {
-        this.$store.dispatch('documents/updateContext', { type: 'DOCUMENT' });
         this.$store.dispatch('documents/resetMediaListContext');
       },
       data: () => ({
@@ -138,7 +97,6 @@ export const TemplateSandbox = (args, { argTypes }) => {
       template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
       <pb-media
         section-title="Mes documents"
-        store-module-name="documents"
         :list-payload="DOCUMENTS_LIST_PAYLOAD"
         :detail-payload="DOCUMENT_DETAIL_PAYLOAD"
         :upload-payload="DOCUMENT_UPLOAD_PAYLOAD"
@@ -156,12 +114,15 @@ export const TemplateSandbox = (args, { argTypes }) => {
     parameters={{
       controls: { disabled: true },
       msw: [
-        rest.patch('/api/media/:mediaId', notContentResolver),
-        rest.get('/api/media', getAllMediaPaginationResolver),
-        rest.get('/api/media/:mediaId/thumbnail', getMediaThumbnailResolver),
-        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
-        rest.post('/api/media', uploadMediaResolver),
-        rest.delete('/api/media/:mediaId', notContentResolver),
+        rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        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.delete('/api/inhabitant-projects/:projectId/documents/:documentId', notContentResolver),
       ],
     }}
     height="512px"
@@ -169,8 +130,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
     {{
       components: { PbMedia },
       created() {
-        this.$store.dispatch('media/updateContext', { type: 'MEDIA' });
-        this.$store.dispatch('media/loadMedia');
+        this.$store.dispatch('documents/loadMedia', '001');
       },
       template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
         <pb-media />
@@ -187,9 +147,12 @@ export const TemplateSandbox = (args, { argTypes }) => {
     parameters={{
       controls: { disabled: true },
       msw: [
-        rest.patch('/api/media/:mediaId', notContentResolver),
-        rest.get('/api/media/:mediaId/thumbnail', getMediaThumbnailResolver),
-        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
+        rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
+        rest.get(
+          '/api/inhabitant-projects/:projectId/documents/:documentId/thumbnail',
+          getDocumentsImageThumbnailResolver,
+        ),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
       ],
     }}
     height="512px"
@@ -197,8 +160,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
     {{
       components: { PbMedia },
       created() {
-        this.$store.dispatch('media/updateContext', { type: 'MEDIA' });
-        this.$store.dispatch('media/resetMediaListContext');
+        this.$store.dispatch('documents/resetMediaListContext');
       },
       template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
         <pb-media read-only />
@@ -207,7 +169,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
   </Story>
 </Canvas>
 
-# `With Media`
+# `With Media` read only
 
 <Canvas>
   <Story
@@ -215,11 +177,14 @@ export const TemplateSandbox = (args, { argTypes }) => {
     parameters={{
       controls: { disabled: true },
       msw: [
-        rest.patch('/api/media/:mediaId', notContentResolver),
-        rest.get('/api/media', getAllMediaPaginationResolver),
-        rest.get('/api/media/:mediaId/thumbnail', getMediaThumbnailResolver),
-        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
-        rest.post('/api/media', uploadMediaResolver),
+        rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        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.delete('/api/media/:mediaId', notContentResolver),
       ],
     }}
@@ -228,8 +193,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
     {{
       components: { PbMedia },
       created() {
-        this.$store.dispatch('media/updateContext', { type: 'MEDIA' });
-        this.$store.dispatch('media/loadMedia');
+        this.$store.dispatch('documents/loadMedia', '001');
       },
       template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
         <pb-media read-only />

package/src/components/media/PbMedia.vue

@@ -12,7 +12,6 @@
       <div class="pb-media__header-upload-button" v-if="(!isLoadingMedia || mediaList.length > 0) && !mediaLoadError">
         <pb-media-upload
           v-if="!readOnly"
-          :store-module-name="storeModuleName"
           :payload="uploadPayload"
           @media-uploaded="handleMediaUploaded"
           ref="pbMediaUpload"
@@ -38,13 +37,12 @@
           subtitle-error="Voulez-vous relancer le chargement des photos"
           retry-button-label="Réessayer"
           :state="mediaLoadError ? 'error' : 'loading'"
-          @loader-click="$store.dispatch(storeModuleName + '/loadMedia')"
+          @loader-click="$store.dispatch('documents/loadMedia', $route.params.projectId)"
         />
       </m-flex>
       <pb-media-list
         v-else
         ref="pbMediaList"
-        :store-module-name="storeModuleName"
         :media-list="mediaList"
         :has-still-media="hasStillMedia"
         :is-loading-media="isLoadingMedia"
@@ -53,7 +51,7 @@
         :read-only="readOnly"
         @add-media="addMedia"
         @click-on-delete="handleClickOnDelete"
-        @click-load-more="$store.dispatch(storeModuleName + '/loadMoreMedia')"
+        @click-load-more="$store.dispatch('documents/loadMoreMedia')"
       />
     </m-flex>
     <m-notification
@@ -126,7 +124,7 @@
       } » n'a pas pu être supprimée.`"
       closable
       :link-label="mediaDeletionError ? 'Réessayer' : null"
-      @link-click="$store.dispatch(storeModuleName + '/deleteMedia', currentMedia)"
+      @link-click="$store.dispatch('documents/deleteMedia', currentMedia)"
       @close="resetMediaDeletionError"
     />
     <pb-sticky-footer
@@ -137,7 +135,6 @@
       <pb-media-upload
         ref="pbMediaUploadSticky"
         class="pb-media__sticky-upload-button-content"
-        :store-module-name="storeModuleName"
         :payload="uploadPayload"
         @media-uploaded="handleMediaUploaded"
         :read-only="readOnly"
@@ -161,9 +158,9 @@ import PbLoader from '../loader/PbLoader.vue';
 import PbMediaList from '../media/list/PbMediaList.vue';
 import PbMediaUpload from '../media/upload/PbMediaUpload.vue';
 import PbStickyFooter from '../sticky-footer/PbStickyFooter.vue';
-import MEDIA_LIST_PAYLOAD from './list/media-list-payload.json';
-import MEDIA_DETAIL_PAYLOAD from './detail/media-detail-payload.json';
-import MEDIA_UPLOAD_PAYLOAD from './upload/media-upload-payload.json';
+import DOCUMENTS_LIST_PAYLOAD from './list/documents-list-payload.json';
+import DOCUMENT_DETAIL_PAYLOAD from './detail/document-detail-payload.json';
+import DOCUMENT_UPLOAD_PAYLOAD from './upload/document-upload-payload.json';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -190,35 +187,28 @@ export default defineComponent({
      */
     sectionTitle: {
       type: String,
-      default: 'Mes inspirations',
-    },
-    /**
-     * The store module name
-     */
-    storeModuleName: {
-      type: String,
-      default: 'media',
+      default: 'Mes documents',
     },
     /**
      * The detail component payload
      */
     detailPayload: {
       type: Object,
-      default: () => MEDIA_DETAIL_PAYLOAD,
+      default: () => DOCUMENT_DETAIL_PAYLOAD,
     },
     /**
      * The list component payload
      */
     listPayload: {
       type: Object,
-      default: () => MEDIA_LIST_PAYLOAD,
+      default: () => DOCUMENTS_LIST_PAYLOAD,
     },
     /**
      * The upload component payload
      */
     uploadPayload: {
       type: Object,
-      default: () => MEDIA_UPLOAD_PAYLOAD,
+      default: () => DOCUMENT_UPLOAD_PAYLOAD,
     },
     /**
      * Indicates whether the UI is read only
@@ -244,16 +234,16 @@ export default defineComponent({
     const isDeletingMedia = ref(false);
     const isMediaDeletionSuccess = ref(false);
 
-    const isLoadingMedia = computed(() => store.getters[props.storeModuleName + '/isLoadingMedia']);
-    const hasStillMedia = computed(() => store.getters[props.storeModuleName + '/hasStillMedia']);
-    const mediaList = computed(() => store.getters[props.storeModuleName + '/getMediaList']);
-    const mediaLoadError = computed(() => store.getters[props.storeModuleName + '/getMediaLoadError']);
-    const isAddPhotoDisabled = computed(() => store.getters[props.storeModuleName + '/isAddPhotoDisabled']);
-    const currentMedia = computed(() => store.getters[props.storeModuleName + '/getCurrentMedia']);
+    const isLoadingMedia = computed(() => store.getters['documents/isLoadingMedia']);
+    const hasStillMedia = computed(() => store.getters['documents/hasStillMedia']);
+    const mediaList = computed(() => store.getters['documents/getMediaList']);
+    const mediaLoadError = computed(() => store.getters['documents/getMediaLoadError']);
+    const isAddPhotoDisabled = computed(() => store.getters['documents/isAddPhotoDisabled']);
+    const currentMedia = computed(() => store.getters['documents/getCurrentMedia']);
     const project = computed(() => store.getters['projects/getProject']);
 
     const handleMediaUploaded = () => {
-      store.dispatch(props.storeModuleName + '/refreshMediaList');
+      store.dispatch('documents/refreshMediaList');
     };
     const handleClickOnDelete = (media: Media) => {
       mediaToDelete.value = media;
@@ -279,10 +269,10 @@ export default defineComponent({
       mediaDeletionError.value = null;
       isDeletingMedia.value = true;
       try {
-        await store.dispatch(props.storeModuleName + '/deleteMedia', mediaToDelete.value);
+        await store.dispatch('documents/deleteMedia', mediaToDelete.value);
         isMediaDeletionSuccess.value = true;
         if (currentMedia.value && currentMedia.value.id === mediaToDelete.value?.id) {
-          store.dispatch(props.storeModuleName + '/updateCurrentMedia', null);
+          store.dispatch('documents/updateCurrentMedia', null);
         }
         setTimeout(() => {
           isMediaDeletionSuccess.value = false;

package/src/components/media/detail/PbMediaDetail.stories.mdx

@@ -1,17 +1,11 @@
 import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
 import PbMediaDetail from './PbMediaDetail.vue';
-import mediaDocumentsStore from '../../../stores/modules/mediaDocumentsStore';
+import documentsStore from '../../../stores/modules/documentsStore';
 import { rest } from 'msw';
 import { internalServerErrorResolver, notContentResolver } from '../../../services/api/mocks/commonMock';
-import {
-  getAllMediaPaginationResolver,
-  getMediaFileResolver,
-  nameAlreadyUsedResolver,
-} from '../../../services/api/mocks/mediaMock';
 import {
   getDocumentsByInhabitantProjectIdResolver,
-  getDocumentsImageThumbnailResolver,
   getDocumentsPdfThumbnailResolver,
   getDocumentsImageFileResolver,
   getDocumentsPdfFileResolver,
@@ -30,8 +24,7 @@ import { useStore } from 'vuex';
     nestedAppDecorator(
       {
         modules: {
-          media: cloneDeep(mediaDocumentsStore),
-          documents: cloneDeep(mediaDocumentsStore),
+          documents: cloneDeep(documentsStore),
         },
       },
       [],
@@ -47,13 +40,10 @@ export const TemplateSandbox = (args, { argTypes }) => {
     components: { PbMediaDetail },
     setup() {
       const store = useStore();
-      store.dispatch('media/updateContext', { type: 'MEDIA' });
-      store.dispatch('documents/updateContext', { type: 'DOCUMENT' });
       return { args };
     },
     template: `<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: center;min-height: 100vh;width: 100%;">
       <pb-media-detail
-        :store-module-name="args.storeModuleName"
         :read-only="args.readOnly"
         :payload="args.payload"
         :media="args.media"
@@ -70,21 +60,15 @@ export const TemplateSandbox = (args, { argTypes }) => {
     parameters={{
       controls: { disabled: true },
       msw: [
-        rest.patch('/api/media/:mediaId', notContentResolver),
-        rest.get('/api/media', getAllMediaPaginationResolver),
-        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
+        rest.patch('/api/inhabitant-projects/:projectId/documents/:documentId', notContentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
       ],
     }}
     inline={false}
     height="1024px"
     args={{
-      media: {
-        id: '123456',
-        title: 'My office',
-        public: false,
-        verificationResult: { accepted: true },
-      },
-      storeModuleName: 'media',
+      media: imageDocument,
     }}
   >
     {TemplateSandbox.bind({})}
@@ -98,19 +82,13 @@ export const TemplateSandbox = (args, { argTypes }) => {
     name="Showcase Media - Verification refused"
     parameters={{
       controls: { disabled: true },
-      msw: [rest.get('/api/media/:mediaId/file', getMediaFileResolver)],
+      msw: [rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver)],
       storyshots: { disable: true },
     }}
     inline={false}
     height="1024px"
     args={{
-      media: {
-        id: '123456',
-        title: 'My office',
-        public: false,
-        verificationResult: { accepted: false },
-      },
-      storeModuleName: 'media',
+      media: imageDocument,
     }}
   >
     {TemplateSandbox.bind({})}
@@ -125,50 +103,15 @@ export const TemplateSandbox = (args, { argTypes }) => {
     parameters={{
       controls: { disabled: true },
       msw: [
-        rest.patch('/api/media/:mediaId', internalServerErrorResolver),
-        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
-      ],
-      storyshots: { disable: true },
-    }}
-    inline={false}
-    height="1024px"
-    args={{
-      media: {
-        id: '123456',
-        title: 'My office',
-        public: false,
-        verificationResult: { accepted: true },
-      },
-      storeModuleName: 'media',
-    }}
-  >
-    {TemplateSandbox.bind({})}
-  </Story>
-</Canvas>
-
-## **Save media with same name** action
-
-<Canvas>
-  <Story
-    name="Showcase Media - With same name"
-    parameters={{
-      controls: { disabled: true },
-      msw: [
-        rest.patch('/api/media/:mediaId', nameAlreadyUsedResolver),
-        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
+        rest.patch('/api/inhabitant-projects/:projectId/documents/:documentId', internalServerErrorResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
       ],
       storyshots: { disable: true },
     }}
     inline={false}
     height="1024px"
     args={{
-      media: {
-        id: '123456',
-        title: 'My office',
-        public: false,
-        verificationResult: { accepted: true },
-      },
-      storeModuleName: 'media',
+      media: imageDocument,
     }}
   >
     {TemplateSandbox.bind({})}
@@ -209,7 +152,6 @@ export const imageDocument = {
     height="1024px"
     args={{
       media: imageDocument,
-      storeModuleName: 'documents',
       payload: DOCUMENT_DETAIL_PAYLOAD,
     }}
   >
@@ -254,7 +196,6 @@ export const pdfDocument = {
     height="1024px"
     args={{
       media: pdfDocument,
-      storeModuleName: 'documents',
       payload: DOCUMENT_DETAIL_PAYLOAD,
     }}
   >
@@ -282,7 +223,6 @@ export const pdfDocument = {
     height="1024px"
     args={{
       media: pdfDocument,
-      storeModuleName: 'documents',
       payload: DOCUMENT_DETAIL_PAYLOAD,
       readOnly: true,
     }}