init project live chat

src/app/admin/admin-routing.module.ts

@@ -9,6 +9,7 @@ import { AdminTicketOnpicComponent } from './admin-ticket-onpic/admin-ticket-onp
 import { AdminTicketOnpicDetailComponent } from './admin-ticket-onpic/admin-ticket-onpic-detail/admin-ticket-onpic-detail.component';
 import { AdminMacroComponent } from './admin-macro/admin-macro.component';
 import { AdminLivedashboardComponent } from './admin-livedashboard/admin-livedashboard.component';
+import { LiveChatComponent } from './live-chat/live-chat.component';
 
 const routes: Routes = [
   {
@@ -43,6 +44,10 @@ const routes: Routes = [
     path: 'macro',
     component: AdminMacroComponent,
   },
+  {
+    path: 'live-chat',
+    component: LiveChatComponent,
+  },
 
 ];
 

src/app/admin/admin-ticket/admin-ticket-detail/admin-ticket-detail.component.html

@@ -468,9 +468,14 @@
             <div class="card-body" style="max-height: 610px;overflow-y: scroll;">
               <p *ngIf="InternalNote.length == 0" class="text-center"><b>No Data Found</b></p>
               <!-- Unescape -->
-              <ng-container *ngFor="let data of InternalNote; let i = index">
-                <p><b>{{data.user_login}}</b> at <b>{{data.date  | date: 'dd MMMM yyyy HH:mm'}}</b>  said :</p>
-                <div [innerHTML]="data.message_html | safeHtml"></div>
+              <ng-container *ngFor="let data of InternalNoteChat; let i = index">
+                <p><b>{{data.channel}} </b> <b>{{data.updatedAt  | date: 'dd MMMM yyyy HH:mm'}} </b>at  {{data.direction == 'INBOUND' ? data.from : 'Agent'}} :</p>
+                <div [innerHTML]="data.content.text ? data.content.text : data.content.url | safeHtml"></div>
+                <hr>
+              </ng-container>
+              <ng-container *ngFor="let item of InternalNote; let i = index">
+                <p><b>{{item.user_login}} </b> <b>{{item.date  | date: 'dd MMMM yyyy HH:mm'}} </b>at Said :</p>
+                <div [innerHTML]="item.message_html | safeHtml"></div>
                 <hr>
               </ng-container>
             </div>

src/app/admin/admin-ticket/admin-ticket-detail/admin-ticket-detail.component.ts

@@ -113,7 +113,8 @@ export class AdminTicketDetailComponent implements OnInit {
   public TicketTeamID = null
   public TicketSolution = null
   public PublicConversation = []
-  public InternalNote = []
+  public InternalNoteChat: any[] = [];
+  public InternalNote: any[] = []
   public Description : string = ""
   public CsCabang : string = ""
   public SupervisorBOH : string = ""
@@ -797,7 +798,7 @@ export class AdminTicketDetailComponent implements OnInit {
       .subscribe((result: any) => {
         if(result != null){
 
-          //console.log(JSON.stringify(result))
+          console.table(result)
           
           if(result.values != null){
             
@@ -811,8 +812,22 @@ export class AdminTicketDetailComponent implements OnInit {
             this.IsFormComplaintmentDisabled = true
 
             var ObjKey = Object.keys(result.values.objects)
-            var data = result.values.objects[ObjKey[0]]    
-
+            var data = result.values.objects[ObjKey[0]]
+            this.InternalNote = []
+            for (let i=0; i<data.fields.private_log.entries.length; i++) {
+              if (data.fields.private_log.entries[i].user_id != "1") {
+                this.InternalNote.push(data.fields.private_log.entries[i]);
+              } else {
+                let json = data.fields.private_log.entries.length > 0 ? JSON.parse(data.fields.private_log.entries[0].message) : null
+                this.InternalNoteChat = json;
+                for (let i=0; i<this.InternalNoteChat.length; i++) {
+                  if (!this.InternalNoteChat[i].content.text && this.InternalNoteChat[i].contentType == "DOCUMENT") {
+                    this.InternalNoteChat[i].content.url = `<a style="color: blue; font-style: italic;text-decoration: underline;" href="${this.InternalNoteChat[i].content.url}">download_file</>`;
+                  }
+                }
+              }
+            }
+            console.log(this.InternalNoteChat)
             this.CallerID = data.fields.caller_id
             this.TickectContactID = data.fields.ticket_contact_id
             this.RefNumber = data.fields.ref
@@ -824,7 +839,7 @@ export class AdminTicketDetailComponent implements OnInit {
             this.TicketTeamID = data.fields.team_id
             this.TicketSolution = data.fields.solution 
             this.PublicConversation =  data.fields.public_log.entries.reverse()
-            this.InternalNote = data.fields.private_log.entries.reverse()  
+            // this.InternalNote = data.fields.private_log.entries.reverse()  
             this.Description = data.fields.description 
             this.CsCabang = data.fields.cscabang
             this.SupervisorBOH = data.fields.supervisor

src/app/admin/admin.module.ts

@@ -23,6 +23,7 @@ import { AdminLdTicketbyservicefamilyComponent } from './admin-livedashboard/adm
 import { AdminLdTicketbystatusComponent } from './admin-livedashboard/admin-ld-ticketbystatus/admin-ld-ticketbystatus.component';
 import { AdminLdTop10ticketbycategoryComponent } from './admin-livedashboard/admin-ld-top10ticketbycategory/admin-ld-top10ticketbycategory.component';
 import { AdminLdTop10usercreateticketComponent } from './admin-livedashboard/admin-ld-top10usercreateticket/admin-ld-top10usercreateticket.component';
+import { LiveChatComponent } from './live-chat/live-chat.component';
 /*import { PipeSha256 } from '../pipe/pipe-global.pipe';
 import { PipeEncryptoJs } from '../pipe/pipe-global.pipe';
 import { PipeDencryptoJs } from '../pipe/pipe-global.pipe';
@@ -49,6 +50,7 @@ import { PipeDencryptoJs } from '../pipe/pipe-global.pipe';
     AdminLdTicketbystatusComponent,
     AdminLdTop10ticketbycategoryComponent,
     AdminLdTop10usercreateticketComponent,
+    LiveChatComponent,
   ],
   imports: [
     PipeglobalModule,

src/app/admin/live-chat/live-chat.component.html

+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <iframe 
+      [src]="URLIFrame | SrcSafe"
+      [ngClass]="{'d-none': !isIframeLoad, 'd-block': isIframeLoad }" 
+      frameborder="0"
+      style="border-radius: 10px;"
+      height="600px" width="100%" 
+      (load)="Iframe_onLoad()"
+      #Iframe
+      class="scroller"></iframe> 
+      
+      <p *ngIf="!isIframeLoad" class="text-center">PLEASE WAIT, FRAME IS LOADING</p>
+
+    </div>
+  </div>
+</div>

src/app/admin/live-chat/live-chat.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LiveChatComponent } from './live-chat.component';
+
+describe('LiveChatComponent', () => {
+  let component: LiveChatComponent;
+  let fixture: ComponentFixture<LiveChatComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LiveChatComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LiveChatComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/live-chat/live-chat.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, UrlSerializer } from '@angular/router';
+import { ServiceProxyWeb } from '../../../shared/serviceproxy/service-proxy.service';
+
+@Component({
+  selector: 'app-live-chat',
+  templateUrl: './live-chat.component.html',
+  styleUrls: ['./live-chat.component.css']
+})
+
+export class LiveChatComponent implements OnInit {
+
+  public URLIFrame = "";
+  
+  public isIframeLoad = false
+  public reloadCount = 1;
+
+  constructor(
+    private route: Router, 
+    private serializer: UrlSerializer,
+    private global: ServiceProxyWeb
+    ) { }
+
+  ngOnInit() {
+    this.isIframeLoad = false;
+    this.reloadCount = 1;
+    const item = this.global.getUserInformation.values;
+    this.URLIFrame = `http://localhost:4200/chat?access_token=${item.access_token}&team_id=${item.team_id}&user_id=${item.user_id}&login_id=${item.login_id}&org_id=${item.org_id}&email=${item.email}&contact_name=${item.contact_name}`;
+  }
+
+  Iframe_onLoad() {
+    this.isIframeLoad = true;
+  }
+
+}

src/app/shared/side-bar-menu/side-bar-menu.component.ts

@@ -124,7 +124,8 @@ export class SideBarMenuComponent implements OnInit {
     AratakaConfig.CloseSideBarFromItem()
   }
   liveChat(){
-    let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=900,height=1000`;
-    window.open(this.urlLiveChat,'live-chat', params)
+    // let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=900,height=1000`;
+    // window.open(this.urlLiveChat,'live-chat', params)
+    this.router.navigate(['/admin/live-chat'])
   }
 }