From 35dfff0a5b5df08ef416fefa0b5fb832ad19fdcf Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 19 Jun 2023 11:16:28 +0530
Subject: [PATCH] feat: Attachment view improvements (#7314)

---
 .../scss/widgets/_conversation-view.scss      |   8 +-
 app/javascript/dashboard/components/Modal.vue |   5 +
 .../widgets/conversation/Message.vue          |  10 +-
 .../conversation/components/GalleryView.vue   | 317 ++++++++++++++----
 4 files changed, 263 insertions(+), 77 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index f95ee8a65..795c8c1c1 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -29,13 +29,13 @@
     }
 
     .modal-image {
-      max-height: 80vh;
-      max-width: 80vw;
+      max-height: 76vh;
+      max-width: 76vw;
     }
 
     .modal-video {
-      max-height: 80vh;
-      max-width: 80vw;
+      max-height: 76vh;
+      max-width: 76vw;
     }
 
     &::before {
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 8b762c60c..e7740cc35 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -8,6 +8,7 @@
     >
       <div :class="modalContainerClassName" @click.stop>
         <woot-button
+          v-if="showCloseButton"
           color-scheme="secondary"
           icon="dismiss"
           variant="clear"
@@ -28,6 +29,10 @@ export default {
       default: true,
     },
     show: Boolean,
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
     onClose: {
       type: Function,
       required: true,
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 4df910cde..1bca46bdc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -52,7 +52,7 @@
           {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
         </span>
         <div v-if="!isPending && hasAttachments">
-          <div v-for="attachment in data.attachments" :key="attachment.id">
+          <div v-for="attachment in attachments" :key="attachment.id">
             <bubble-image-audio-video
               v-if="isAttachmentImageVideoAudio(attachment.file_type)"
               :attachment="attachment"
@@ -199,6 +199,14 @@ export default {
     };
   },
   computed: {
+    attachments() {
+      // Here it is used to get sender and created_at for each attachment
+      return this.data?.attachments.map(attachment => ({
+        ...attachment,
+        sender: this.data.sender || {},
+        created_at: this.data.created_at || '',
+      }));
+    },
     shouldRenderMessage() {
       return (
         this.hasAttachments ||
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index 0f04c1d07..509c0c7e4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -1,79 +1,131 @@
 <template>
-  <woot-modal full-width :show.sync="show" :on-close="onClose">
+  <woot-modal
+    full-width
+    :show.sync="show"
+    :show-close-button="false"
+    :on-close="onClose"
+  >
     <div v-on-clickaway="onClose" class="gallery-modal--wrap" @click="onClose">
-      <div class="attachment-toggle--button">
-        <woot-button
-          v-if="hasMoreThanOneAttachment"
-          size="large"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="chevron-left"
-          :disabled="activeImageIndex === 0"
-          @click.stop="
-            onClickChangeAttachment(
-              allAttachments[activeImageIndex - 1],
-              activeImageIndex - 1
-            )
-          "
-        />
-      </div>
-      <div class="attachments-viewer">
-        <div class="attachment-view">
-          <img
-            v-if="isImage"
-            :key="attachmentSrc"
-            :src="attachmentSrc"
-            class="modal-image skip-context-menu"
-            @click.stop
+      <div class="gallery-modal--header">
+        <div class="header-info--wrap" @click.stop>
+          <thumbnail
+            :username="senderDetails.name"
+            :src="senderDetails.avatar"
           />
-          <video
-            v-if="isVideo"
-            :key="attachmentSrc"
-            :src="attachmentSrc"
-            controls
-            playsInline
-            class="modal-video skip-context-menu"
-            @click.stop
+          <div class="header-info">
+            <h3 class="sub-block-title sender-name">
+              <span class="text-truncate">{{ senderDetails.name }}</span>
+            </h3>
+            <span class="time-stamp text-truncate">{{ readableTime }}</span>
+          </div>
+        </div>
+        <div class="file-name--header text-block-title">
+          <span class="text-truncate">
+            {{ fileNameFromDataUrl }}
+          </span>
+        </div>
+        <div class="header-actions" @click.stop>
+          <woot-button
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-download"
+            @click="onClickDownload"
+          />
+          <woot-button
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="dismiss"
+            @click="onClose"
           />
-          <audio
-            v-if="isAudio"
-            :key="attachmentSrc"
-            controls
-            class="skip-context-menu"
-            @click.stop
-          >
-            <source :src="`${attachmentSrc}?t=${Date.now()}`" />
-          </audio>
         </div>
       </div>
-      <div class="attachment-toggle--button">
-        <woot-button
-          v-if="hasMoreThanOneAttachment"
-          size="large"
-          variant="smooth"
-          color-scheme="secondary"
-          :disabled="activeImageIndex === allAttachments.length - 1"
-          icon="chevron-right"
-          @click.stop="
-            onClickChangeAttachment(
-              allAttachments[activeImageIndex + 1],
-              activeImageIndex + 1
-            )
-          "
-        />
+      <div class="gallery-modal--body">
+        <div class="attachment-toggle--button">
+          <woot-button
+            v-if="hasMoreThanOneAttachment"
+            size="large"
+            variant="smooth"
+            color-scheme="primary"
+            icon="chevron-left"
+            :disabled="activeImageIndex === 0"
+            @click.stop="
+              onClickChangeAttachment(
+                allAttachments[activeImageIndex - 1],
+                activeImageIndex - 1
+              )
+            "
+          />
+        </div>
+        <div class="attachments-viewer">
+          <div class="attachment-view">
+            <img
+              v-if="isImage"
+              :key="activeAttachment.message_id"
+              :src="activeAttachment.data_url"
+              class="modal-image skip-context-menu"
+              @click.stop
+            />
+            <video
+              v-if="isVideo"
+              :key="activeAttachment.message_id"
+              :src="activeAttachment.data_url"
+              controls
+              playsInline
+              class="modal-video skip-context-menu"
+              @click.stop
+            />
+            <audio
+              v-if="isAudio"
+              :key="activeAttachment.message_id"
+              controls
+              class="skip-context-menu"
+              @click.stop
+            >
+              <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
+            </audio>
+          </div>
+        </div>
+        <div class="attachment-toggle--button">
+          <woot-button
+            v-if="hasMoreThanOneAttachment"
+            size="large"
+            variant="smooth"
+            color-scheme="primary"
+            :disabled="activeImageIndex === allAttachments.length - 1"
+            icon="chevron-right"
+            @click.stop="
+              onClickChangeAttachment(
+                allAttachments[activeImageIndex + 1],
+                activeImageIndex + 1
+              )
+            "
+          />
+        </div>
+      </div>
+      <div class="gallery-modal--footer">
+        <div class="header-count text-block-title">
+          <span class="count">
+            {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
+          </span>
+        </div>
       </div>
     </div>
   </woot-modal>
 </template>
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
-
+import { mapGetters } from 'vuex';
 import {
   isEscape,
   hasPressedArrowLeftKey,
   hasPressedArrowRightKey,
 } from 'shared/helpers/KeyboardHelpers';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import timeMixin from 'dashboard/mixins/time';
+
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 
 const ALLOWED_FILE_TYPES = {
   IMAGE: 'image',
@@ -82,7 +134,10 @@ const ALLOWED_FILE_TYPES = {
 };
 
 export default {
-  mixins: [eventListenerMixins, clickaway],
+  components: {
+    Thumbnail,
+  },
+  mixins: [eventListenerMixins, clickaway, timeMixin],
   props: {
     show: {
       type: Boolean,
@@ -99,18 +154,29 @@ export default {
   },
   data() {
     return {
-      attachmentSrc: '',
+      activeAttachment: {},
       activeFileType: '',
       activeImageIndex:
         this.allAttachments.findIndex(
-          attachment => attachment.id === this.attachment.id
+          attachment => attachment.message_id === this.attachment.message_id
         ) || 0,
     };
   },
   computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+    }),
     hasMoreThanOneAttachment() {
       return this.allAttachments.length > 1;
     },
+    readableTime() {
+      if (!this.activeAttachment.created_at) return '';
+      const time = this.messageTimestamp(
+        this.activeAttachment.created_at,
+        'LLL d yyyy, h:mm a'
+      );
+      return time || '';
+    },
     isImage() {
       return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
     },
@@ -120,6 +186,21 @@ export default {
     isAudio() {
       return this.activeFileType === ALLOWED_FILE_TYPES.AUDIO;
     },
+    senderDetails() {
+      const { name, available_name: availableName, avatar_url, thumbnail, id } =
+        this.activeAttachment?.sender || this.attachment?.sender;
+      const currentUserID = this.currentUser?.id;
+      return {
+        name: currentUserID === id ? 'You' : name || availableName || '',
+        avatar: thumbnail || avatar_url || '',
+      };
+    },
+    fileNameFromDataUrl() {
+      const { data_url: dataUrl } = this.activeAttachment;
+      if (!dataUrl) return '';
+      const fileName = dataUrl?.split('/').pop();
+      return fileName || '';
+    },
   },
   mounted() {
     this.setImageAndVideoSrc(this.attachment);
@@ -140,7 +221,7 @@ export default {
       if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
         return;
       }
-      this.attachmentSrc = attachment.data_url;
+      this.activeAttachment = attachment;
       this.activeFileType = type;
     },
     onKeyDownHandler(e) {
@@ -158,29 +239,121 @@ export default {
         );
       }
     },
+    onClickDownload() {
+      const { file_type: type, data_url: url } = this.activeAttachment;
+      if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
+        return;
+      }
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `attachment.${type}`;
+      link.click();
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
 .gallery-modal--wrap {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: inherit;
+  flex-direction: column;
   height: inherit;
+  width: inherit;
+
+  .gallery-modal--header {
+    align-items: center;
+    display: flex;
+    height: var(--space-jumbo);
+    justify-content: space-between;
+    padding: var(--space-small) var(--space-medium);
+    width: 100%;
+
+    .header-info--wrap {
+      align-items: center;
+      display: flex;
+      justify-content: flex-start;
+      min-width: var(--space-giga);
+
+      .header-info {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: var(--space-small);
+
+        .sender-name {
+          display: inline-block;
+          line-height: 1.4;
+          margin: 0;
+          padding: 0;
+          text-transform: capitalize;
+        }
+
+        .time-stamp {
+          color: var(--s-400);
+          font-size: var(--font-size-mini);
+          margin: 0;
+          padding: 0;
+        }
+      }
+    }
+
+    .file-name--header {
+      align-items: center;
+      color: var(--s-700);
+      display: flex;
+      font-weight: var(--font-weight-bold);
+      justify-content: flex-start;
+      min-width: 0;
+      padding: var(--space-smaller);
+      width: auto;
+    }
+
+    .header-actions {
+      align-items: center;
+      display: flex;
+      gap: var(--space-small);
+      justify-content: flex-end;
+      min-width: var(--space-giga);
+    }
+  }
+
+  .gallery-modal--body {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .gallery-modal--footer {
+    align-items: center;
+    display: flex;
+    height: var(--space-jumbo);
+    justify-content: center;
+    padding: var(--space-small) var(--space-medium);
+    width: 100%;
+
+    .header-count {
+      align-items: center;
+      border-radius: var(--border-radius-small);
+      background-color: var(--s-25);
+      color: var(--s-600);
+      display: flex;
+      font-weight: var(--font-weight-bold);
+      justify-content: center;
+      min-width: 8rem;
+      padding: var(--space-smaller);
+    }
+  }
 
   .attachments-viewer {
     display: flex;
     flex-direction: column;
+    height: 100%;
     justify-content: center;
     width: 100%;
-    height: 100%;
 
     .attachment-view {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
       img {
         margin: 0 auto;
       }
@@ -192,10 +365,10 @@ export default {
   }
 
   .attachment-toggle--button {
-    width: var(--space-mega);
-    min-width: var(--space-mega);
     display: flex;
     justify-content: center;
+    min-width: var(--space-mega);
+    width: var(--space-mega);
   }
 }
 </style>