From 7d38d68271eaa6a8bf1f5a07559b76de27dec505 Mon Sep 17 00:00:00 2001
From: AmericaSO <treerayuth.o@absolute.co.th>
Date: Thu, 9 Dec 2021 14:43:33 +0700
Subject: [PATCH] =?UTF-8?q?[UI]=20=E0=B8=96=E0=B9=89=E0=B8=B2=E0=B8=AA?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87=E0=B8=A3=E0=B8=B9=E0=B8=9B=E0=B9=83=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=8D=E0=B9=88=E0=B8=A1=E0=B8=B2=E0=B8=81=20Chat=20UI=20?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20Chat=20=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B0=20=E0=B8=9E=E0=B8=B1=E0=B8=87=20#381?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main.internal/StoryPage.component.ts      |  1 -
 .../shares/chat/ChatMessage.component.html    |  6 ++++--
 .../shares/chat/ChatMessage.component.ts      | 19 +++++++++++++++++++
 .../components/shares/chat/ChatMessage.scss   | 14 ++++++++++++++
 4 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/web-spanboon/src/app/components/pages/main.internal/StoryPage.component.ts b/web-spanboon/src/app/components/pages/main.internal/StoryPage.component.ts
index c89b17780..12808d594 100644
--- a/web-spanboon/src/app/components/pages/main.internal/StoryPage.component.ts
+++ b/web-spanboon/src/app/components/pages/main.internal/StoryPage.component.ts
@@ -197,7 +197,6 @@ export class StoryPage extends AbstractPage implements OnInit {
   }
 
   public clickToUser(data: any) {
-    console.log('data', data);
     window.open('/page/' + data._id, '_blank');
   }
 
diff --git a/web-spanboon/src/app/components/shares/chat/ChatMessage.component.html b/web-spanboon/src/app/components/shares/chat/ChatMessage.component.html
index 993735ffb..8423386f4 100644
--- a/web-spanboon/src/app/components/shares/chat/ChatMessage.component.html
+++ b/web-spanboon/src/app/components/shares/chat/ChatMessage.component.html
@@ -30,7 +30,8 @@
                 *ngIf="((item.senderType === 'PAGE' && (asPage !== undefined && asPage !== null && asPage !== '')) || (item.senderType === 'USER' && (asPage === undefined || asPage === null || asPage === ''))); else elseSenderType">
                 <div class="page-message">
                     <div class="talking-m">
-                        <div [class.hide]="item.chatMessage.messageType !== 'INFO' && item.chatMessage.messageType !== 'FULFILLMENT_CASE_CONFIRM'" class="talking-time">
+                        <div [class.hide]="item.chatMessage.messageType !== 'INFO' && item.chatMessage.messageType !== 'FULFILLMENT_CASE_CONFIRM'"
+                            class="talking-time">
                             <span class="material-icons" *ngIf="item.chatMessage.isRead">
                                 done
                             </span>
@@ -101,7 +102,8 @@
                     <ng-template #elseChatMessage>
                         <ng-container
                             *ngIf="((item.chatMessage.filePath !== null && item.chatMessage.filePath !== undefined) && (item.chatMessage.videoURL === null || item.chatMessage.videoURL === undefined)); else elseChatMedia">
-                            <div class="talking-media">
+                            <div class="talking-media"
+                                (click)="showDialogGallery(apiBaseURL+item.chatMessage.filePath+'/image')">
                                 <img src="{{apiBaseURL+item.chatMessage.filePath+'/image'}}">
                             </div>
                         </ng-container>
diff --git a/web-spanboon/src/app/components/shares/chat/ChatMessage.component.ts b/web-spanboon/src/app/components/shares/chat/ChatMessage.component.ts
index 159cb9ba4..2560f929b 100644
--- a/web-spanboon/src/app/components/shares/chat/ChatMessage.component.ts
+++ b/web-spanboon/src/app/components/shares/chat/ChatMessage.component.ts
@@ -18,6 +18,7 @@ import { ValidBase64ImageUtil } from '../../../utils/ValidBase64ImageUtil';
 import { environment } from '../../../../environments/environment';
 import { AbstractPage } from '../../pages/AbstractPage';
 import { TooltipProfile } from '../tooltip/TooltipProfile.component';
+import Glightbox from 'glightbox';
 
 const PAGE_NAME: string = 'ChatMessage';
 const REFRESH_LIST_CASE = 'authen.listcase';
@@ -207,6 +208,24 @@ export class ChatMessage extends AbstractPage implements OnInit {
     this.chatMessage.nativeElement.value = '';
   }
 
+  public showDialogGallery(imageGallery) {
+    console.log('imageGallery', imageGallery);
+    var lightbox = Glightbox();
+    let arrayImage = []
+    arrayImage.push({
+      href: imageGallery,
+      type: 'image' // Type is only required if GlIghtbox fails to know what kind of content should display
+    })
+
+    lightbox.setElements(arrayImage);
+    lightbox.openAt(0);
+    lightbox.on('open', (target) => {
+    });
+    lightbox.on('close', (target) => {
+      lightbox.destroy();
+    });
+  }
+
   public onFileSelected(event) {
     let files = event.target.files;
 
diff --git a/web-spanboon/src/styles/components/shares/chat/ChatMessage.scss b/web-spanboon/src/styles/components/shares/chat/ChatMessage.scss
index 3b210513c..bff394e9b 100644
--- a/web-spanboon/src/styles/components/shares/chat/ChatMessage.scss
+++ b/web-spanboon/src/styles/components/shares/chat/ChatMessage.scss
@@ -103,6 +103,13 @@
             // img {
             //     width: 200px;
             // }
+            .talking-media {
+                width: 250px;
+                cursor: zoom-in;
+                > img {
+                    width: 100%;
+                }
+            }
 
             a {
                 > .donator {
@@ -188,6 +195,13 @@
                     flex-direction: row;
                     justify-content: flex-end;
                     // margin: 15px 15px 20px 20px;
+                    .talking-media {
+                        width: 250px;
+                        cursor: zoom-in;
+                        > img {
+                            width: 100%;
+                        }
+                    }
 
                     > .talking-time {
                         flex: 0 0 auto;