PATCH: Feature/add visa preview (#512)

* add file preview on visa tab * fix backToParent for visas tab * use file_name instead of name for BIMDataFileIcon in VisaSummary * fix fileType in DocumentViewer * closeSidePanel when changeView tab into project board * add file_name to visas
bimdata · Feb 5, 2025 · d2278f0 · d2278f0
1 parent e38beb0
commit d2278f0
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 22 deletions.
diff --git a/src/components/specific/files/document-viewer/DocumentViewer.vue b/src/components/specific/files/document-viewer/DocumentViewer.vue
@@ -25,7 +25,7 @@
         <BIMDataTextbox :text="currentDocument?.name" />
       </div>
 
-      <div class="btn-box">
+      <div class="btn-box" v-if="selectedFileTab.id !== 'visas'">
         <BIMDataButton
           width="40px"
           height="40px"
@@ -71,7 +71,7 @@
         </div>
       </template>
 
-      <div class="btn-box">
+      <div class="btn-box" v-if="selectedFileTab.id !== 'visas'">
         <BIMDataButton
           width="40px"
           height="40px"
@@ -156,6 +156,9 @@ watch(
 
 const currentDocument = computed(() => {
   if (!documents.value || documents.value.length === 0) return null;
+  if(props.selectedFileTab.id === "visas") {
+    return props.document;
+  }
   return isVisas.value ? documents.value[index.value].document : documents.value[index.value];
 });
 

diff --git a/src/components/specific/files/files-manager/FilesManager.vue b/src/components/specific/files/files-manager/FilesManager.vue
@@ -144,6 +144,7 @@
             :project="project"
             :document="fileToManage"
             :visa="currentVisa"
+            @preview-visa="onFileSelected"
             @close="closeVisaManager"
             @create-visa="goVisasView"
             @fetch-visas="fetchVisas"
@@ -365,8 +366,9 @@ export default {
 
     const backToParent = (file) => {
       const parentFolder = handler.parent(file);
+
       currentFolder.value = handler.deserialize(parentFolder);
-      if (file.visas) {
+      if (selectedFileTab.value.id === "visas") {
         selectedFileTab.value = filesTabs[0];
       }
     };

diff --git a/src/components/specific/files/visas-table/VisasTable.vue b/src/components/specific/files/visas-table/VisasTable.vue
@@ -27,7 +27,7 @@
       <BIMDataFileIcon :fileName="visa.document.name" :size="21.5" />
     </template>
     <template #cell-file="{ row: visa }">
-      <span class="visas-table__file-name" @click="$emit('file-clicked', visa)">
+      <span class="visas-table__file-name" @click="$emit('file-clicked', visa.document)">
         <BIMDataTextbox :text="visa.document.name" width="auto" maxWidth="100%" />
       </span>
     </template>
@@ -100,6 +100,7 @@ import { useI18n } from "vue-i18n";
 import { useStandardBreakpoints } from "../../../../composables/responsive.js";
 import { VISA_STATUS, VALIDATION_STATUS } from "../../../../config/visa.js";
 import { enhanceVisa } from "../../../../utils/visas.js";
+import { useFiles } from "../../../../state/files.js";
 import { useUser } from "../../../../state/user.js";
 import { fullName } from "../../../../utils/users.js";
 import columnsDef, { columnsLG, columnsXL, columnsXXL } from "./columns.js";
@@ -132,8 +133,12 @@ export default {
     const { user } = useUser();
     const { isLG, isXL, isXXL } = useStandardBreakpoints();
 
+    const {
+      fileStructureHandler: handler,
+    } = useFiles();
+
     const enhancedVisas = computed(() =>
-      props.visas.map((visa) => enhanceVisa(visa, user.value, t))
+      props.visas.map((visa) => enhanceVisa(visa, user.value, t, handler))
     );
 
     const columns = computed(() => {

diff --git a/src/components/specific/visa/visa-main/VisaMain.vue b/src/components/specific/visa/visa-main/VisaMain.vue
@@ -12,6 +12,7 @@
       <VisaSummary
         :project="project"
         :visa="currentVisa"
+        @preview-visa="$emit('preview-visa', $event)"
         @close-visa="$emit('close')"
         @reach-file="$emit('reach-file', $event)"
         @fetch-visas="$emit('fetch-visas')"
@@ -47,7 +48,7 @@ export default {
       required: false
     },
   },
-  emits: ["create-visa", "fetch-visas", "close", "reach-file"],
+  emits: ["create-visa", "fetch-visas", "close", "preview-visa", "reach-file"],
   setup(props, { emit }) {
     const { fetchVisa } = useVisa();
 

diff --git a/src/components/specific/visa/visa-summary/VisaSummary.scss b/src/components/specific/visa/visa-summary/VisaSummary.scss
@@ -25,7 +25,7 @@
         margin: auto 0;
 
         span {
-          margin: auto 0 auto calc(var(--spacing-unit) * 1.4);
+          margin: auto 0 auto calc(var(--spacing-unit) / 2);
           color: var(--color-primary);
           font-weight: bold;
         }
@@ -124,6 +124,7 @@
         &__name {
           margin-left: var(--spacing-unit);
           color: var(--color-primary);
+          cursor: pointer;
         }
       }
 

diff --git a/src/components/specific/visa/visa-summary/VisaSummary.vue b/src/components/specific/visa/visa-summary/VisaSummary.vue
@@ -51,15 +51,10 @@
               color="silver-light"
               :disabled="false"
             >
-            <BIMDataButton
-              ghost
-              rounded
-              icon
-              @click="confirmEdit"
-            >
-              <BIMDataIconValidate size="xxs" fill color="granite-light" />
-            </BIMDataButton>
-          </BIMDataTooltip>
+              <BIMDataButton ghost rounded icon @click="confirmEdit">
+                <BIMDataIconValidate size="xxs" fill color="granite-light" />
+              </BIMDataButton>
+            </BIMDataTooltip>
             <BIMDataButton ghost rounded icon @click="onClose">
               <BIMDataIconClose size="xxs" fill color="granite-light" />
             </BIMDataButton>
@@ -157,10 +152,11 @@
         </div>
         <div class="visa-summary__shell__file">
           <div class="visa-summary__shell__file__content">
-            <BIMDataFileIcon :fileName="formatedVisa.document.file_name" :size="20" />
+            <BIMDataFileIcon :fileName="formatedVisa.document.file.file_name" :size="20" />
             <BIMDataTextbox
               class="visa-summary__shell__file__content__name"
               :text="formatedVisa.document.name"
+              @click="$emit('preview-visa', formatedVisa.document.file)"
               width="calc(100% - 20px - 12px * 3)"
             />
           </div>
@@ -227,6 +223,7 @@
 import { ref, computed, onMounted, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { VISA_STATUS, VALIDATION_STATUS } from "../../../../config/visa.js";
+import { useFiles } from "../../../../state/files.js";
 import { useProjects } from "../../../../state/projects.js";
 import { useUser } from "../../../../state/user.js";
 import { useVisa } from "../../../../state/visa.js";
@@ -256,7 +253,7 @@ export default {
       required: true,
     },
   },
-  emits: ["close-visa", "fetch-visas", "reach-file"],
+  emits: ["close-visa", "fetch-visas", "preview-visa", "reach-file"],
   setup(props, { emit }) {
     const { t } = useI18n();
     const { isSelf } = useUser();
@@ -273,6 +270,10 @@ export default {
       updateVisa,
     } = useVisa();
 
+    const {
+      fileStructureHandler: handler,
+    } = useFiles();
+
     const isClosed = ref(false);
     const isEditing = ref(false);
     const formatedVisa = ref(null);
@@ -296,6 +297,10 @@ export default {
         ...visa.creator,
         fullName: visa.creator ? fullName(visa.creator) : t("Visa.summary.deletedUser"),
       },
+      document: {
+        ...visa.document,
+        file: handler.get({ id: visa.document.id, nature: "Document" }),
+      },
       validations: visa.validations
         .map((validation) => ({
           ...validation,
@@ -339,8 +344,8 @@ export default {
         isAuthor.value = true;
       }
       if (!isAuthor.value) {
-        validationUserId.value = props.visa.validations.find(
-          ({ validator }) => isSelf(validator)
+        validationUserId.value = props.visa.validations.find(({ validator }) =>
+          isSelf(validator)
         ).id;
       }
       isClosed.value = props.visa.status === VISA_STATUS.CLOSE;

diff --git a/src/utils/file-structure.js b/src/utils/file-structure.js
@@ -9,7 +9,11 @@ import { FILE_TYPE } from "../config/files.js";
  * @returns {String}
  */
 function uuid(file) {
-  return `${file.nature}-${file.id}`;
+  let nature = file.nature;
+  if(file.nature !== FILE_TYPE.FOLDER) {
+    nature = FILE_TYPE.DOCUMENT;
+  }
+  return `${nature}-${file.id}`;
 }
 
 /**

diff --git a/src/utils/visas.js b/src/utils/visas.js
@@ -1,7 +1,7 @@
 import { fullName } from "./users.js";
 import { VISA_STATUS, VALIDATION_STATUS } from "../config/visa.js";
 
-export const enhanceVisa = (visa, user, t) => {
+export const enhanceVisa = (visa, user, t, handler) => {
   const validationType = () => {
     if (visa.status === VISA_STATUS.CLOSE) {
       return t("Visa.view.visaClosed");
@@ -37,10 +37,19 @@ export const enhanceVisa = (visa, user, t) => {
     return emailValidators;
   };
 
+  const document = handler.get({ id: visa.document.id, nature: "Document" });
+
   return {
     ...visa,
     validationType: validationType(),
     statutType: statutType(),
     validators: getUniqueValidators(),
+    document: {
+      ...visa.document,
+      file: document.file,
+      file_name: document.file_name,
+      model_id: document.model_id,
+      model_type: document.model_type,
+    },
   };
 };
diff --git a/src/views/project-board/ProjectBoard.vue b/src/views/project-board/ProjectBoard.vue
@@ -60,6 +60,7 @@ import { useRoute } from "vue-router";
 import { useInterval } from "../../composables/interval.js";
 import { useStandardBreakpoints } from "../../composables/responsive.js";
 import { useSession } from "../../composables/session.js";
+import { useAppSidePanel } from "../../components/specific/app/app-side-panel/app-side-panel.js";
 import { IS_SUBSCRIPTION_ENABLED } from "../../config/subscription.js";
 import { DEFAULT_PROJECT_VIEW } from "../../config/projects.js";
 import { useProjects } from "../../state/projects.js";
@@ -121,6 +122,8 @@ export default {
     const { currentProject, loadProjectUsers, loadProjectInvitations } = useProjects();
     const { projectView } = useSession();
 
+    const { closeSidePanel } = useAppSidePanel();
+
     const shouldSubscribe = computed(
       () =>
         isFreeSpace(currentSpace.value) &&
@@ -138,6 +141,7 @@ export default {
 
       currentTab.value = { id: viewKey };
       currentView.value = PROJECT_VIEWS[viewKey];
+      closeSidePanel();
     };
 
     onBeforeMount(() => {
@@ -170,6 +174,7 @@ export default {
       // Methods
       changeView,
       isSpaceAdmin,
+      closeSidePanel,
       // Responsive breakpoints
       ...useStandardBreakpoints()
     };