create menu ticket escalatation

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

@@ -9,6 +9,8 @@ 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 { AdminTicketEscalationComponent } from './admin-ticket-escalation/admin-ticket-escalation.component';
+import { AdminTicketEscalationDetailComponent } from './admin-ticket-escalation/admin-ticket-escalation-detail/admin-ticket-escalation-detail.component';
 
 const routes: Routes = [
   {
@@ -35,6 +37,14 @@ const routes: Routes = [
     path: 'ticket-onpic',
     component: AdminTicketOnpicComponent
   },
+  {
+    path: 'ticket-onescalation',
+    component: AdminTicketEscalationComponent
+  },
+  {
+    path: 'ticket-onescalation/detail/:id',
+    component: AdminTicketEscalationDetailComponent,
+  },
   {
     path: 'ticket-onpic/detail/:id',
     component: AdminTicketOnpicDetailComponent,

src/app/admin/admin-ticket-escalation/admin-ticket-escalation-detail/admin-ticket-escalation-detail.component.css

+.TabsCustom{
+    background: transparent;
+    margin: 2px;
+    color: #222;
+    padding: 10px 30px;
+    border-bottom: 3px solid #ebe9e9;
+    cursor: pointer;
+    word-wrap: break-word;
+    display: inline-block;
+    font-size: 13px;
+    text-transform: uppercase;
+}
+
+    .TabsCustom:hover{
+        color: #222;
+        border-bottom: 3px solid #d18b5d;
+    }
+
+    .TabsCustom.active{
+        color: #222;
+        border-bottom: 3px solid #e67e22;
+    }
+
+.divider-custom{
+    padding: 10px;
+    border-radius:3px;
+    cursor: pointer;
+}
+
+    .divider-custom:hover{
+        background : #F5F5F5;
+    }
+.fileEmailLogs{
+    background: #EEEEEE;
+    font-size: 11px;
+    color: #000;
+    padding: 5px 5px;
+    border-radius: 3px;
+    border: 1px solid #BDBDBD;
+    margin: 3px 2px;
+    word-wrap: break-word;
+    display: inline-block;
+}
+
+
+.fileEmailLogsDetail{
+    background: #EEEEEE;
+    font-size: 11px;
+    color: #000;
+    padding: 5px 5px;
+    border-radius: 3px;
+    border: 1px solid #BDBDBD;
+    margin: 3px 2px;
+    word-wrap: break-word;
+    display: inline-block;
+    cursor: pointer;
+}
+
+
+.fileEmailLogsDetail:hover{
+    background: #FFB74D;
+}

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

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

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

+<div class="container">
+  <div class="row">
+    <div class="col-sm-10 mb-3">
+      <h6 class="text-muted"><i class="fas fa-ticket-alt"></i> Ticket On Escalation</h6>
+    </div>
+    <div class="col-sm-2 mb-3">
+        <!-- <button class="btn btn-sm btn-block arataka-btn-primary" (click)="AddNewClick()"><i class="fas fa-plus-circle"></i> Add New</button> -->
+    </div> 
+  </div>
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-4 col-lg-3 mb-3">
+      <label class="text-muted"><small>Filter Status</small></label>
+      <select type="text" 
+        class="form-control form-control-sm select-style" 
+        [(ngModel)]="dropdownStatus"
+        (change)="requestData()">
+          <option value="assigned,escalated_ttr">All Status</option>
+          <option value="assigned">Assigned</option>
+          <option value="escalated_ttr">Escalated TTR</option>
+          <option value="resolved">Resolved</option>
+      </select>
+    </div>
+    <div class="col-12 col-sm-12 col-md-4 col-lg-3 mb-3">
+    </div>
+    <div class="col-12 col-sm-12 col-md-4 col-lg-3 mb-3">
+        <label class="text-muted"><small>Search</small></label>
+        <input type="text" class="form-control form-control-sm" placeholder="Type.." maxlength="100" [(ngModel)]="search" (keyup.enter)="requestData()">
+    </div>
+    <div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-3">
+      <label><small></small></label>
+      <button class="btn btn-sm btn-success arataka-btn-success" style="margin-top: 29px; width: 100px;" (click)="requestData()">
+        <i class="bi bi-search"></i> Search
+    </button>
+    </div>
+  </div>
+  <div class="row">
+      <div class="col-12 col-sm-12 text-center mt-5" *ngIf="isEmpty">
+        <p style="font-size:18px;" class="text-muted"><i class="fas fa-table fa-3x"></i> <br> Empty Data</p>
+      </div>
+      <div class="col-12 col-sm-12 text-center mt-5" *ngIf="isLoading">
+        <p style="font-size:18px;" class="text-muted"><i class="fas fa-spinner fa-spin"></i> Retrieving data</p>
+      </div>
+      <div class="col-12 col-sm-12 Table-Background" *ngIf="!isLoading && !isEmpty">
+        <div class="table-responsive">
+          <table class="table table-striped table-hover table-bordered table-sm">
+            <thead>
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col" width="15%">Ref</th>
+                <th scope="col">Title</th>
+                <th scope="col">Time Start</th>
+                <th scope="col">Caller</th>
+                <th scope="col">Team</th>
+                <th scope="col">Agent</th>        
+                <th class="text-center" scope="col" style="width: 8%; text-align: center;">Take Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              <ng-container *ngFor="let data of listData.tickets; let i = index">
+                <tr>
+                  <td scope="row">{{((i+1) + ((perPage * page) - perPage))}}.</td>
+                  <td>
+                    {{data.ref}} &nbsp;
+                    <span style="font-size: 12px;" class="badge badge-pill badge-dark" *ngIf="data.status == 'rejected'">{{data.status}}</span>
+                    <span style="font-size: 12px;" class="badge badge-pill badge-info" *ngIf="data.status == 'assigned'">{{data.status}}</span>
+                    <span style="font-size: 12px;" class="badge badge-pill badge-success" *ngIf="data.status == 'closed'">{{data.status}}</span>
+                    <span style="font-size: 12px;" class="badge badge-pill badge-secondary" *ngIf="data.status == 'resolved'">{{data.status}}</span>
+                    <span style="font-size: 12px;" class="badge badge-pill badge-warning" *ngIf="data.status == 'new'">{{data.status}}</span>
+                    <span style="font-size: 12px;" class="badge badge-pill badge-danger" *ngIf="data.status == 'escalated_tto'">{{data.status}}</span>
+                    <span style="font-size: 12px;" class="badge badge-pill badge-danger" *ngIf="data.status == 'escalated_ttr'">{{data.status}}</span>
+                    <span style="font-size: 12px;" class="badge badge-pill badge-danger" *ngIf="data.status == 'dispatched'">{{data.status}}</span>
+                    <span style="font-size: 12px;" class="badge badge-pill badge-primary" *ngIf="data.status == 'redispatched'">{{data.status}}</span>
+                  </td>
+                  <td>{{data.title}}</td>
+                  <td>{{data.start_date  | date: 'dd MMMM yyyy'}}</td>
+                  <td>{{data.ticket_contact_name}}</td>
+                  <td>{{data.team_name}}</td>
+                  <td>{{data.agent_name}} &nbsp; <span style="font-size: 12px;" class="badge badge-pill badge-warning" *ngIf="data.caller_email == ''">No E-mail</span></td>
+                  <td style="width: 8%; text-align: center;">
+                    <button 
+                      class="btn btn-sm btn-block arataka-btn-default"
+                      routerLink="/admin/ticket-onescalation/detail/{{data.id}}"><i class="far fa-eye"></i> Detail</button>
+                  </td>
+                </tr>
+              </ng-container>
+            </tbody>
+          </table>
+        </div>
+      </div>
+  </div>
+  <br>
+  <div class="row" *ngIf="!isLoading && !isEmpty">
+      <div class="col-12">
+          <p class="text-center text-muted">
+            <small>
+              {{listData.textPagging}}
+            </small>
+          </p>
+      </div>
+      <div class="col-6">
+          <h5 class="text-center arataka-paging-arrow mb-5" (click)="PagingArrowLeft()">
+              <i class="fas fa-chevron-left"></i> Previous
+          </h5>
+      </div>
+      <div class="col-6">
+          <h5 class="text-center arataka-paging-arrow mb-5" (click)="PagingArrowRight()">
+              Next <i class="fas fa-chevron-right"></i>
+          </h5>
+      </div>
+  </div>
+</div>
+  

src/app/admin/admin-ticket-escalation/admin-ticket-escalation.component.spec.ts

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

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

+import { Component, OnInit,Injector, ViewChildren, ViewChild } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+
+import { FormBuilder, FormGroup  } from '@angular/forms';
+
+import { TicketService } from '../../../shared/serviceproxy/service-proxy.service';
+import { ServiceProxyWeb } from '../../../shared/serviceproxy/service-proxy.service';
+
+import { Router } from '@angular/router';
+
+import * as $ from 'jquery';
+declare const AratakaConfig : any;
+
+
+import { environment } from '../../../environments/environment.prod';
+@Component({
+  selector: 'app-admin-ticket-escalation',
+  templateUrl: './admin-ticket-escalation.component.html',
+  styleUrls: ['./admin-ticket-escalation.component.css']
+})
+export class AdminTicketEscalationComponent implements OnInit {
+
+  dropdownStatus: string = "assigned,escalated_ttr";
+  search: string = "";
+  isEmpty: boolean = false;
+  isLoading: boolean = false;
+  page: number = 1;
+  perPage: number = 10;
+  listData: any = [];
+
+  constructor(
+    injector: Injector,
+    private router: Router,
+    private FormBuilder : FormBuilder, 
+    private _TicketService : TicketService,
+    private _SP : ServiceProxyWeb
+    ) 
+    { }
+
+  ngOnInit() {
+    this.requestData();
+  }
+
+  PagingArrowLeft() {
+    if(this.page != 1){
+      this.page = this.page -= 1;
+      this.listData.textPagging = "Page "+this.page+" from " + Math.ceil(this.listData.count / this.perPage) + ', Total ' + this.listData.count + ' Data';
+      this.requestData();
+    }
+  }
+
+  PagingArrowRight() {
+    if(this.page < Math.ceil(this.listData.count / this.perPage)){
+      this.page = this.page += 1;
+      this.listData.textPagging = "Page "+this.page+" from " + Math.ceil(this.listData.count / this.perPage) + ', Total ' + this.listData.count + ' Data';
+      this.requestData();
+    }
+  }
+
+  requestData() {
+    const ListRequest = {
+      Page: this.page,
+      PerPage: this.perPage,
+      Search : this.search,
+      FilterTicket : this.dropdownStatus
+    }
+    this.isLoading = true
+    this.isEmpty = false
+    console.log(ListRequest)
+
+    this._TicketService.ListOnEscalation(ListRequest)
+      .subscribe((result: any) => {
+        if(result.values != undefined){
+          const value = result.values;
+          this.listData = {...value};
+          this.listData.count = result.values.ticketCount;
+          this.listData.textPagging = "Page "+this.page+" from " + Math.ceil(this.listData.count / this.perPage) + ', Total ' + this.listData.count + ' Data';
+    
+          this.isEmpty = false
+          console.log(result)
+        }else{
+          this.listData.textPagging = "Page "+this.page+" from  1, Total 0 Data"
+          this.isEmpty = true
+        }
+        this.isLoading = false
+      },
+      (err: HttpErrorResponse) => {
+        console.log(JSON.stringify(err.error))
+        this.isLoading = false
+        this.isEmpty = true
+      });
+  }
+
+}

src/app/admin/admin-ticket/admin-ticket-customer-md/admin-ticket-customer-md.component.ts

@@ -356,7 +356,7 @@ export class AdminTicketCustomerMdComponent implements OnInit {
         MobileNumber : this.MobileNumber,
         IdentityIDNumber : this.IdentityIDNumber
       }
-
+      console.log(this.CustomerDataLocal)
       this.ChildEvent.next(this.CustomerDataLocal)
 
     }else{

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

@@ -300,6 +300,15 @@ export class AdminTicketDetailComponent implements OnInit {
       }]
       
     // }else if(_data.status == 'assigned' || _data.status == 'escalated_ttr'){
+    }else if(_data.status == 'assigned' && this.RoleID == this.Env.PARAM_SUPPORT){
+      this.SubmitAsData = [{
+        ID : "assign",
+        Name : "Assigned"
+      },
+      {
+        ID : "resolve",
+        Name : "Resolved"
+      }]
     }else if(_data.status == 'assigned'){
       this.SubmitAsData = [{
         ID : "assign",
@@ -950,7 +959,16 @@ export class AdminTicketDetailComponent implements OnInit {
 
     if(this.RoleID == this._SP.PARAM_SUPPORT){
       AllowedTeam = [
-        this.Env.Team.ServiceDesk
+        this.Env.Team.ServiceDesk,
+        this.Env.Team.EChanelSupportCardOpr,
+        this.Env.Team.EChanelSupportCardOpr2,
+        this.Env.Team.AtmPaymentSettlement,
+        this.Env.Team.ITOprPolicyAndQA,
+        this.Env.Team.ProductAndProcessConsumer,
+        this.Env.Team.PortofolioAndMonitoringCollectio,
+        this.Env.Team.MerchantProcessing,
+        this.Env.Team.BarcodeQRIS,
+        this.Env.Team.ITSolution,
       ]
     }
 
@@ -1083,7 +1101,16 @@ export class AdminTicketDetailComponent implements OnInit {
 
     if(this.RoleID == this._SP.PARAM_SUPPORT){
       AllowedTeam = [
-        this.Env.Team.ServiceDesk
+        this.Env.Team.ServiceDesk,
+        this.Env.Team.EChanelSupportCardOpr,
+        this.Env.Team.EChanelSupportCardOpr2,
+        this.Env.Team.AtmPaymentSettlement,
+        this.Env.Team.ITOprPolicyAndQA,
+        this.Env.Team.ProductAndProcessConsumer,
+        this.Env.Team.PortofolioAndMonitoringCollectio,
+        this.Env.Team.MerchantProcessing,
+        this.Env.Team.BarcodeQRIS,
+        this.Env.Team.ITSolution,
       ]
     }
 
@@ -1139,17 +1166,12 @@ export class AdminTicketDetailComponent implements OnInit {
                 })
               }
             }
-
-           
-
-
           }else{
             this.AssigneeTeamDestionationData.push({
               ID: "",
               Name: "Data is empty!"
             })  
           }
-
         }else{
           AratakaConfig.Alert.showAlert('Internal Server Error!','alert-danger',2000)
         }

src/app/admin/admin.module.ts

@@ -23,6 +23,8 @@ 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 { AdminTicketEscalationComponent } from './admin-ticket-escalation/admin-ticket-escalation.component';
+import { AdminTicketEscalationDetailComponent } from './admin-ticket-escalation/admin-ticket-escalation-detail/admin-ticket-escalation-detail.component';
 /*import { PipeSha256 } from '../pipe/pipe-global.pipe';
 import { PipeEncryptoJs } from '../pipe/pipe-global.pipe';
 import { PipeDencryptoJs } from '../pipe/pipe-global.pipe';
@@ -49,6 +51,8 @@ import { PipeDencryptoJs } from '../pipe/pipe-global.pipe';
     AdminLdTicketbystatusComponent,
     AdminLdTop10ticketbycategoryComponent,
     AdminLdTop10usercreateticketComponent,
+    AdminTicketEscalationComponent,
+    AdminTicketEscalationDetailComponent,
   ],
   imports: [
     PipeglobalModule,

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

@@ -17,6 +17,7 @@ export class SideBarMenuComponent implements OnInit {
   public Env = environment;
 
   public TeamID = this._SP.getUserInformation.values.team_id
+  public RoleID = this._SP.getUserInformation.values.roles[0].id
 
   //from appcomponent to child component
   @Input('AppSendLogo') public appLogo;
@@ -85,6 +86,20 @@ export class SideBarMenuComponent implements OnInit {
       )
     }
 
+    if(this.RoleID == this.Env.PARAM_SUPPORT){
+      this.MenuSideBarCollapseItem.push(
+        {
+          RouteName : 'Ticket On Escalation',
+          OriginalName : 'TicketOnEscalation',
+          RouteIcon : 'far fa-file-alt',
+          RouteAddress : '/admin/ticket-onescalation',
+          RouteActive : '',
+          Show : true,
+          Child : []
+        }
+      )
+    }
+
     for(var i = 0; i < this.MenuSideBarCollapseItem.length; i++){
       
       if(this.MenuSideBarCollapseItem[i].RouteAddress == this.route){

src/shared/serviceproxy/service-proxy.service.ts

@@ -227,6 +227,24 @@ export class TicketService {
   
   }
   
+  ListOnEscalation(_data) { 
+
+    const service = this.injector.get(ServiceProxyWeb)
+    let data = _data; 
+    let headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Authorization' : 'Bearer '+  service.getUserInformation.values.access_token
+    });
+    let options = { headers: headers };
+
+    if(data.Search != ""){
+      return this.http.get(API_URL +'v3/ticket-on-escalation/0/'+data.FilterTicket+'/'+data.Page+'/'+data.PerPage+'?search=' + data.Search, options);
+    }else{
+      return this.http.get(API_URL +'v3/ticket-on-escalation/0/'+data.FilterTicket+'/'+data.Page+'/'+data.PerPage+'', options);
+    }
+  
+  }
+
   Detail(_data) {
     const service = this.injector.get(ServiceProxyWeb)
     let data = _data;