add tabs dashboard ticket

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

-<button class="btn btn-sm btn-success arataka-btn-success" style="width: 100px;">
+<button class="btn btn-sm btn-success arataka-btn-success" style="width: 100px;" (click)="GettingTicketReportCategoryDataAPI()">
   <i class="bi bi-search"></i>
   Search
 </button>
 
 <div class="row">
-  <!-- <div class="col-12 col-sm-12 text-center mt-5" *ngIf="isTicketReportEmpty == true">
-    <p style="font-size:18px;" class="text-muted"><i class="fas fa-table fa-3x"></i> <br> No List of Report</p>
+  <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> No List of Dashboard Ticket
+    </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 text-center mt-5" *ngIf="isTicketReportLoading == true">
-    <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">
+  <div class="col-12 col-sm-12 Table-Background" *ngIf="!isEmpty && !isLoading">
     <div class="table-responsive mt-4">
       <table class="table table-bordered table-striped table-sm">
         <thead>
@@ -22,9 +28,9 @@
           </tr>
         </thead>
         <tbody>
-          <ng-container *ngFor="let data of TicketReportData; let i = index">
+          <ng-container *ngFor="let data of listTicket.item; let i = index">
             <tr>
-              <td>{{((i+1) + ((TicketReportRequest.perpage * TicketReportRequest.page) - TicketReportRequest.perpage))}}.</td>
+              <td scope="row">{{((i+1) + ((request.perpage * request.page) - request.perpage))}}.</td>
               <td>{{data.ticket_no}}</td>
               <td>{{data.ticket_title}}</td>
               <td>{{data.ticket_created_time  | date: 'dd MMMM yyyy HH:mm:ss'}}</td>
@@ -39,7 +45,6 @@
               <td>{{data.customer_mobile_phone}}</td>
               <td>{{data.customer_mobile_phone2}}</td>
               <td>{{data.customer_email}}</td>
-              <td>{{data.penyebab_pengaduan }}</td>
               <td>{{data.ticket_service_name}}</td>
               <td>{{data.ticket_servicesubcategory_name}}</td>
               <td>{{data.ticket_description}}</td>
@@ -60,7 +65,7 @@
   </div>
 </div>
 <br>
-<!-- <div class="row" *ngIf="isTicketReportLoading == false && isTicketReportEmpty == false">
+<div class="row" *ngIf="!isLoading && !isEmpty">
   <div class="col-12">
       <p class="text-center text-muted">
         <small>
@@ -69,13 +74,13 @@
       </p>
   </div>
   <div class="col-6">
-      <h5 class="text-center arataka-paging-arrow mb-5" (click)="PagingArrowLeft()">
+      <h5 class="text-center arataka-paging-arrow mb-5">
           <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()">
+      <h5 class="text-center arataka-paging-arrow mb-5">
           Next <i class="fas fa-chevron-right"></i>
       </h5>
   </div>
-</div> -->
+</div>
\ No newline at end of file

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core';
+import { DashboardService } from '../../../../shared/serviceproxy/service-proxy.service';
+import { ServiceProxyWeb } from '../../../../shared/serviceproxy/service-proxy.service';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-admin-dashboard-ticket',
   templateUrl: './admin-dashboard-ticket.component.html',
   styleUrls: ['./admin-dashboard-ticket.component.css']
 })
-export class AdminDashboardTicketComponent implements OnInit {
+export class AdminDashboardTicketComponent implements OnInit, OnChanges {
+  @Input() requestTicket!: string;
 
   fieldTable: any[] = [
     {name: 'ticket_no', value: false, field: "Ticket No"},
@@ -32,9 +36,47 @@ export class AdminDashboardTicketComponent implements OnInit {
     {name: 'ticket_total_days_resolved', value: false, field: "Day Resolve"}
   ]
 
-  constructor() { }
+  isLoading: boolean = false;
+  isEmpty: boolean = false;
+  PagingDisplay: string = "";
+  request: any = {};
+  listTicket: any = {};
+
+  constructor(
+    private _DashboardService : DashboardService,
+    public _SP : ServiceProxyWeb
+  ) { }
 
   ngOnInit() {
+    this.request.type_id = 1;
+  }
+
+  ngOnChanges(change: SimpleChanges) {
+    this.request = JSON.parse(this.requestTicket);
+    this.request.page = 1;
+    this.request.perpage = 10;
+  }
+
+  GettingTicketReportCategoryDataAPI() {
+    this.isLoading = true;
+    this.isEmpty = false;
+    this._DashboardService.getDashboardTicket(this.request)
+    .subscribe((result: any) => {
+      if(result.values != undefined) {
+        this.listTicket = {...result.values};
+        this.PagingDisplay = "Page "+this.request.page+" from " + Math.ceil(result.values.count / this.request.perpage) + ', Total ' + result.values.count + ' Data';
+        this.isEmpty = false;
+      } else {
+        this.listTicket = {}
+        this.PagingDisplay = "Page "+this.request.page+" from  1, Total 0 Data";
+        this.isEmpty = true;
+      }
+      this.isLoading = false;
+    }, (err: HttpErrorResponse) => {
+      this.isLoading = false;
+      this.isEmpty = false;
+      this.listTicket = {}
+    });
   }
 
 }

src/app/admin/admin-dashboard/admin-dashboard.component.html

@@ -74,7 +74,7 @@
   </p>
 
     <!--Region Report Category-->
-    <!-- <ng-container *ngIf="TicketTabsCategoryData[0].selected">
+    <ng-container *ngIf="TicketTabsCategoryData[0].selected">
       <p *ngIf="isDashboardCardColorsEmpty" style="font-size:18px;" class="text-muted text-center">
         <i class="fas fa-columns fa-3x"></i> <br> 
         There is no Dashboard
@@ -89,16 +89,16 @@
           <span
             class="TabsCustom" 
             [ngClass]="{'active': data.selected, '': !data.selected}"
-            (click)="SelectTicketCategory(i)">
+            (click)="selectedTicket(i, data)">
               {{data.Name}} ({{data.Count}})
           </span>
         </ng-container>
       </p>
-    </ng-container> -->
+    </ng-container>
     <!--End Region Report Category-->
 
   <!--Region Report Category-->
-  <ng-container *ngIf="TicketTabsCategoryData[0].selected">
+  <ng-container *ngIf="TicketTabsCategoryData[1].selected">
     <p *ngIf="isTicketCategoryEmpty == true" style="font-size:18px;" class="text-muted text-center"><i class="fas fa-columns fa-3x"></i> <br> There is no Report category</p>
     <p *ngIf="isTicketCategoryLoading == true" style="font-size:18px;" class="text-muted text-center"><i class="fas fa-spinner fa-spin"></i> Retrieving data</p>
     
@@ -117,7 +117,7 @@
 
    <!--Region Report Category LogBooks-->
   <ng-container *ngIf="RoleID == _SP.PARAM_SERVICEDESK || RoleID == _SP.PARAM_SPV || (TeamID == Env.Team.CsCabangBranchAgent || TeamID == Env.Team.SociomileStaff)">
-    <ng-container *ngIf="TicketTabsCategoryData[1].selected">
+    <ng-container *ngIf="TicketTabsCategoryData[2].selected">
       <p *ngIf="isTicketCategoryLogBookEmpty == true" style="font-size:18px;" class="text-muted text-center"><i class="fas fa-columns fa-3x"></i> <br> There is no Report category</p>
       <p *ngIf="isTicketCategoryLogBookLoading == true" style="font-size:18px;" class="text-muted text-center"><i class="fas fa-spinner fa-spin"></i> Retrieving data</p>
       
@@ -175,18 +175,18 @@
   </ng-container> -->
 
   <!--Region Report Pagination-->
-  <!-- <ng-container *ngIf="TicketTabsCategoryData[0].selected">
-    <app-admin-dashboard-ticket>
-    </app-admin-dashboard-ticket>
-  </ng-container> -->
   <ng-container *ngIf="TicketTabsCategoryData[0].selected">
+    <app-admin-dashboard-ticket [requestTicket] = "requestTicket">
+    </app-admin-dashboard-ticket>
+  </ng-container>
+  <ng-container *ngIf="TicketTabsCategoryData[1].selected">
     <app-admin-dashboard-report 
       #_AdminDashboardReportComponent
       (ChildEvent)="FromChildReportComponent($event)">
     </app-admin-dashboard-report>
   </ng-container>
   <ng-container *ngIf="RoleID == _SP.PARAM_SERVICEDESK || RoleID == _SP.PARAM_SPV || (TeamID == Env.Team.CsCabangBranchAgent || TeamID == Env.Team.SociomileStaff)">
-    <ng-container *ngIf="TicketTabsCategoryData[1].selected">
+    <ng-container *ngIf="TicketTabsCategoryData[2].selected">
       <app-admin-dashboard-logboook
         #_AdminDashboardLogboookComponent
         (ChildEvent)="FromChildReportLogBookComponent($event)"

src/app/admin/admin-dashboard/admin-dashboard.component.ts

@@ -7,7 +7,7 @@ import { FormBuilder, FormGroup  } from '@angular/forms';
 import { DashboardService } from '../../../shared/serviceproxy/service-proxy.service';
 import { ServiceProxyWeb } from '../../../shared/serviceproxy/service-proxy.service';
 
-import { Router } from '@angular/router';
+import { Data, Router } from '@angular/router';
 
 import { ChangeDetectorRef } from '@angular/core';
 
@@ -65,7 +65,7 @@ export class AdminDashboardComponent implements OnInit {
     user_id : null,
     start_date : null,
     end_date : null,
-    isExport: null,
+    type_id: 1
   }
 
   public TicketReportRequest = {
@@ -89,6 +89,8 @@ export class AdminDashboardComponent implements OnInit {
     user_id : this._SP.getUserInformation.values.user_id
   }
 
+  requestTicket: string = "";
+
   //Data
   public DashboardCardColorsData = []
   
@@ -172,11 +174,11 @@ export class AdminDashboardComponent implements OnInit {
   TabsSelection(){
     if(this.RoleID == this._SP.PARAM_SERVICEDESK || this.RoleID == this._SP.PARAM_SPV  || (this.TeamID == this.Env.Team.CsCabangBranchAgent || this.TeamID == this.Env.Team.SociomileStaff)){
       this. TicketTabsCategoryData = [
-        // {
-        //   ID : 0,
-        //   Name : "Dashboard",
-        //   selected : false
-        // },
+        {
+          ID : 0,
+          Name : "Dashboard",
+          selected : false
+        },
         {
           ID : 1,
           Name : "Report",
@@ -228,6 +230,15 @@ export class AdminDashboardComponent implements OnInit {
   
   }
 
+  selectedTicket(i: number, item: Data) {
+    this.DashboardCardColorsData.map((item) => {
+      item.selected = false;
+    })
+    this.DashboardCardColorsData[i].selected = true;
+    this.DashboardCardColorsData[i].type_id = item.TypeId;
+    this.DashboardCountRequest.type_id = item.TypeId;
+    this.requestTicket = JSON.stringify(this.DashboardCountRequest)
+  }
 
   SelectTabsTitle(_i){
     this.TicketTabsCategoryData.map(function(x,index) {
@@ -304,17 +315,15 @@ export class AdminDashboardComponent implements OnInit {
     }else{
       userID = this._SP.getUserInformation.values.user_id
     }
-    this.GettingExcelForDashboardDataAPI({
+    let request = {
       user_id : userID,
       user_name :  this._SP.getUserInformation.values.contact_name,
       start_date : this.DashboardCountRequest.start_date,
       end_date : this.DashboardCountRequest.end_date,
       type_id : this.DashboardCardColorsData[_i].TypeId,
       type_name :  this.DashboardCardColorsData[_i].Name,
-      isExport: true,
-      page: null,
-      perpage: null
-    })
+    }
+    this.GettingExcelForDashboardDataAPI(request)
   }
 
 
@@ -476,6 +485,7 @@ export class AdminDashboardComponent implements OnInit {
   }
 
   GettingTicketReportCategoryDataAPI(_Request){
+    this.requestTicket = JSON.stringify(_Request)
     this.TicketCategory = undefined
     this.isTicketCategoryLoading = true
     this.isTicketCategoryEmpty = false

src/assets/configAPI.json

 {
-    "APIBASEURL"              : "http://innodev.vnetcloud.com/nobucall-api-v2/",
+    "APIBASEURL"              : "http://localhost:9825/",
     "MICROSERVICEURL"         : "hhttp://innodev.vnetcloud.com/nobu-history-login/api/v1/",
     "SITE_NAME"               : "Visionet Helpdesk System",
     "SITE_LOGO"               : "https://i0.wp.com/jogorogo.info/wp-content/uploads/2017/07/logo_visionet.png?fit=879%2C227",

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

@@ -1028,7 +1028,18 @@ export class DashboardService {
 
   }
 
+  getDashboardTicket(_data) {
 
+    const service = this.injector.get(ServiceProxyWeb)
+
+    let headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Authorization' : 'Bearer '+  service.getUserInformation.values.access_token
+    });
+    let options = { headers: headers };
+    return this.http.post(API_URL +'v3/dashboard/ticket', _data, options);
+
+  }
 
   downloadFileExcelDashboard(_data: any) :Observable<any> {