From b3585b5001699da1b9bfe77d91429e02d36554e6 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 15 Jun 2023 12:50:27 +0530
Subject: [PATCH] feat: Attachment view improvements

---
 app/javascript/dashboard/components/Modal.vue |   5 +
 .../widgets/conversation/Message.vue          |  10 +-
 .../conversation/components/GalleryView.vue   | 249 +++++++++++++-----
 3 files changed, 201 insertions(+), 63 deletions(-)

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..b54183ad4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -1,66 +1,104 @@
 <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"
+            size="40px"
           />
-          <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 text-truncate">
+              <span>{{ senderDetails.name }}</span>
+            </h3>
+            <span class="time-stamp">{{ readableTime }}</span>
+          </div>
+        </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>
   </woot-modal>
@@ -74,6 +112,9 @@ import {
   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 +123,10 @@ const ALLOWED_FILE_TYPES = {
 };
 
 export default {
-  mixins: [eventListenerMixins, clickaway],
+  components: {
+    Thumbnail,
+  },
+  mixins: [eventListenerMixins, clickaway, timeMixin],
   props: {
     show: {
       type: Boolean,
@@ -99,11 +143,11 @@ 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,
     };
   },
@@ -111,6 +155,13 @@ export default {
     hasMoreThanOneAttachment() {
       return this.allAttachments.length > 1;
     },
+    readableTime() {
+      if (!this.activeAttachment.created_at) return '';
+      return this.messageTimestamp(
+        this.activeAttachment.created_at,
+        'LLL d yyyy, h:mm a'
+      );
+    },
     isImage() {
       return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
     },
@@ -120,6 +171,14 @@ export default {
     isAudio() {
       return this.activeFileType === ALLOWED_FILE_TYPES.AUDIO;
     },
+    senderDetails() {
+      const { name, available_name: availableName, avatar_url, thumbnail } =
+        this.activeAttachment?.sender || this.attachment?.sender;
+      return {
+        name: name || availableName,
+        avatar: thumbnail || avatar_url,
+      };
+    },
   },
   mounted() {
     this.setImageAndVideoSrc(this.attachment);
@@ -140,7 +199,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,17 +217,83 @@ 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;
+  flex-direction: column;
   align-items: center;
   width: inherit;
   height: inherit;
 
+  .gallery-modal--header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--space-normal) var(--space-medium);
+
+    .header-info--wrap {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      .header-info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        margin-left: var(--space-small);
+
+        .sender-name {
+          display: inline-block;
+          line-height: 1.4;
+          text-transform: capitalize;
+          margin: 0;
+          padding: 0;
+        }
+
+        .time-stamp {
+          color: var(--s-400);
+          font-size: var(--font-size-mini);
+          margin: 0;
+          padding: 0;
+        }
+      }
+    }
+
+    .header-actions {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+      margin-left: auto;
+      gap: var(--space-small);
+    }
+  }
+
+  .gallery-modal--body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 86%;
+  }
+
   .attachments-viewer {
     display: flex;
     flex-direction: column;