fix bug change date and target blank

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

-import { Component, OnInit,Injector, ViewChildren, ViewChild } from '@angular/core';
+import { Component, OnInit,Injector, ViewChildren, ViewChild, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
 
 import { FormBuilder, FormGroup  } from '@angular/forms';
@@ -24,8 +24,9 @@ declare const AratakaConfig : any;
   templateUrl: './admin-dashboard-logboook.component.html',
   styleUrls: ['./admin-dashboard-logboook.component.css']
 })
-export class AdminDashboardLogboookComponent implements OnInit {
-
+export class AdminDashboardLogboookComponent implements OnInit, OnChanges {
+  @Input() startDate!: string;
+  @Input() endDate!: string;
   public TeamID = this._SP.getUserInformation.values.team_id
   public RoleID = this._SP.getUserInformation.values.roles[0].id
 
@@ -77,6 +78,10 @@ export class AdminDashboardLogboookComponent implements OnInit {
     console.log(JSON.stringify(this._SP.getUserInformation.values.user_id))
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    console.log(this.startDate, this.endDate, "===on changes====")
+  }
+
   ngOnInitAfter(_RequestList, _Model){
     this.TicketReportRequest =_RequestList
     this.ModelReportCategoryLogBook =_Model
@@ -142,8 +147,12 @@ export class AdminDashboardLogboookComponent implements OnInit {
     this.TicketReportData = undefined
     this.isTicketReportLoading = true
     this.isTicketReportEmpty = false
-    console.log("Report Request", _Request)
-    //console.log("loading...")
+
+    if (this.startDate != '' || this.endDate != '') {
+      _Request.start_date = this.startDate;
+      _Request.end_date = this.endDate;
+    }
+    
     this.Subscribtion = this._DashboardService.ReportTicketLogBook(_Request)
       .subscribe((result: any) => {
         console.log("Report Response nih", result)
@@ -176,7 +185,12 @@ export class AdminDashboardLogboookComponent implements OnInit {
   }
 
   GettingExcelForReportDataAPI(_Request){
-    console.log("Request Ticket Report", JSON.stringify(_Request))
+    
+    if (this.startDate != '' || this.endDate != '') {
+      _Request.start_date = this.startDate;
+      _Request.end_date = this.endDate;
+    }
+
     AratakaConfig.LoadingPage.showLoading('Please wait.., perparing excel.')
     this.Subscribtion = this._DashboardService.downloadFileExcelReportLogBook(_Request)
       .subscribe((result: any) => {

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

@@ -15,7 +15,7 @@
           <div class="input-group date" id="StartDate" data-target-input="nearest">
           <input type="text"
             class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
-            data-target="#StartDate" />
+            data-target="#StartDate" (blur)="onChangeDate()"/>
           <div class="input-group-append" data-target="#StartDate" data-toggle="datetimepicker">
             <div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
           </div>
@@ -28,7 +28,7 @@
         <div class="input-group date" id="EndDate" data-target-input="nearest">
           <input type="text"
             class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
-            data-target="#EndDate" />
+            data-target="#EndDate" (blur)="onChangeDate()"/>
           <div class="input-group-append" data-target="#EndDate" data-toggle="datetimepicker">
             <div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
           </div>
@@ -111,6 +111,45 @@
   </ng-container>
   <!--End 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[2].selected">
+      <p *ngIf="isemptyTop" style="font-size:18px;" class="text-muted text-center">
+        <i class="fas fa-columns fa-3x"></i> 
+        <br> 
+        There is no TOp category
+      </p>
+      <p *ngIf="isLoadingTop" style="font-size:18px;" class="text-muted text-center">
+        <i class="fas fa-spinner fa-spin"></i>
+        Retrieving data
+      </p>
+      
+      <div class="row" *ngIf="!isLoadingTop && !isemptyTop">
+        <div class="col-12 col-sm-12 Table-Background">
+          <div class="table-responsive mt-4">
+            <table class="table table-bordered table-striped table-sm">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Name</th>
+                  <th>Count</th>
+                </tr>
+              </thead>
+              <tbody>
+                <ng-container *ngFor="let data of topCategory; let i = index">
+                  <tr>
+                    <td>{{i+1}}.</td>
+                    <td>{{data.name}}</td>
+                    <td>{{data.count}}</td>
+                  </tr>
+                </ng-container>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+  </ng-container> -->
+
   <!--Region Report Pagination-->
   <ng-container *ngIf="TicketTabsCategoryData[0].selected">
     <app-admin-dashboard-report 
@@ -122,7 +161,8 @@
     <ng-container *ngIf="TicketTabsCategoryData[1].selected">
       <app-admin-dashboard-logboook
         #_AdminDashboardLogboookComponent
-        (ChildEvent)="FromChildReportLogBookComponent($event)">
+        (ChildEvent)="FromChildReportLogBookComponent($event)"
+        [startDate]="startDate" [endDate]="endDate">
       </app-admin-dashboard-logboook>
     </ng-container>
   </ng-container>

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

@@ -92,6 +92,7 @@ export class AdminDashboardComponent implements OnInit {
   public DashboardCardColorsData = []
   
   public TicketTabsCategoryData = []
+  topCategory: any = [];
   public TicketCategory = undefined
   public TicketCategoryLogBook = undefined
 
@@ -108,6 +109,11 @@ export class AdminDashboardComponent implements OnInit {
   public isTicketCategoryLogBookLoading = false
   public isTicketCategoryLogBookEmpty = true
 
+  isemptyTop: boolean = false;
+  isLoadingTop: boolean = false;
+
+  startDate: string = "";
+  endDate: string = "";
 
   constructor(injector: Injector,
     private _cRef: ChangeDetectorRef,
@@ -148,7 +154,6 @@ export class AdminDashboardComponent implements OnInit {
     this.DashboardCountRequest.end_date = AratakaConfig.GetDateBDTP({ ID: '#EndDate', isGet: true, isGetFormat: 'YYYY-MM-DD' }) //(this.TeamID == this.Env.Team.ServiceDesk)? AratakaConfig.GetDateBDTP({ ID: '#EndDate', isGet: true, isGetFormat: 'YYYY-MM-DD' }) : null;
     this.GettingDashboardCardColorsDataAPI(this.DashboardCountRequest)
 
-
     this.ChartDateTimePickerChange();
 
     this.TabsSelection();
@@ -175,7 +180,12 @@ export class AdminDashboardComponent implements OnInit {
           ID : 2,
           Name : "Log Books",
           selected : false
-        }
+        },
+        // {
+        //   ID : 3,
+        //   Name : "Top Category",
+        //   selected : false
+        // }
       ]
     }
     else{
@@ -197,6 +207,7 @@ export class AdminDashboardComponent implements OnInit {
 
       that.GettingDashboardCardColorsDataAPI(that.DashboardCountRequest)
       that.GettingTicketReportCategoryDataAPI(that.DashboardCountRequest)
+      that.requestTopCategory();
       that._cRef.detectChanges();
     })
     AratakaConfig.BootstrapDateChangePicker('#EndDate', function(e){
@@ -204,6 +215,7 @@ export class AdminDashboardComponent implements OnInit {
     
       that.GettingDashboardCardColorsDataAPI(that.DashboardCountRequest)
       that.GettingTicketReportCategoryDataAPI(that.DashboardCountRequest)
+      that.requestTopCategory();
       that._cRef.detectChanges();
     })
 
@@ -212,15 +224,16 @@ export class AdminDashboardComponent implements OnInit {
 
 
   SelectTabsTitle(_i){
-
-    this.TicketTabsCategoryData.map(function(x,index){
+    this.TicketTabsCategoryData.map(function(x,index) {
       x.selected = false;
     })
     this.TicketTabsCategoryData[_i].selected = true
     
-    if(this.TicketTabsCategoryData[_i].ID == 1){
+    if (this.TicketTabsCategoryData[_i].ID == 1) {
       this.GettingTicketReportCategoryDataAPI(this.DashboardCountRequest)
-    }else{
+    } else if (this.TicketTabsCategoryData[_i].ID == 3) {
+      this.requestTopCategory()
+    } else {
       this.GettingTicketReportCateogryLogBookDataAPI()
     }
     
@@ -255,9 +268,14 @@ export class AdminDashboardComponent implements OnInit {
     this.TicketReportLogBookRequest.servicefamily_id = this.TicketCategoryLogBook[_i].id
     this.TicketReportLogBookRequest.servicefamily_name = this.TicketCategoryLogBook[_i].name
     this.SelectReportLogBookComponentClick(this.TicketReportLogBookRequest, this.ModelReportCategoryLogBook)
+    this.requestTopCategory()
 
   }
 
+  onChangeDate() {
+    this.startDate =  AratakaConfig.BootstrapDateCustomPicker({ ID: '#StartDate', isGet: true, isGetFormat: 'YYYY-MM-DD'});
+    this.endDate = AratakaConfig.BootstrapDateCustomPicker({ ID: '#EndDate', isGet: true, isGetFormat: 'YYYY-MM-DD' });
+  }
 
   RandomColorPicker(){
     const color = [
@@ -275,14 +293,6 @@ export class AdminDashboardComponent implements OnInit {
     }else{
       userID = this._SP.getUserInformation.values.user_id
     }
-    console.log({
-      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
-    })
     this.GettingExcelForDashboardDataAPI({
       user_id : userID,
       user_name :  this._SP.getUserInformation.values.contact_name,
@@ -298,17 +308,36 @@ export class AdminDashboardComponent implements OnInit {
     this._AdminDashboardReportComponent.ngOnInitAfter(_RequestList,_Model);
   }
   FromChildReportComponent(_data) {
-
   }
 
   SelectReportLogBookComponentClick(_RequestList,_Model) {
     this._AdminDashboardLogboookComponent.ngOnInitAfter(_RequestList,_Model);
   }
   FromChildReportLogBookComponent(_data) {
-
   }
 
 
+  requestTopCategory() {
+    this.topCategory = [];
+    this.isLoadingTop = true
+    this._DashboardService.topCategory(this.DashboardCountRequest.start_date, this.DashboardCountRequest.end_date)
+    .subscribe((response: any) => {
+      if (response.values.length > 0 || response.values) {
+        this.topCategory = response.values;
+        this.isemptyTop = false;
+        this.isLoadingTop = false;
+      } else {
+        this.isemptyTop = true;
+        this.isLoadingTop = false;
+      }
+      this._cRef.detectChanges();
+    }, (err: HttpErrorResponse) => {
+      this.isLoadingTop = false;
+      this.isemptyTop = true;
+      this._cRef.detectChanges();
+    })
+  }
+
   //Funtion Engine to API---------------------------------------------------------------------------------------
 
   // GettingMetabaseDataAPI(){
@@ -345,10 +374,9 @@ export class AdminDashboardComponent implements OnInit {
     this.isDashboardCardColorsLoading = true
     this.isDashboardCardColorsEmpty = false
     //console.log("Request", JSON.stringify(_Request))
-
+    // this._AdminDashboardLogboookComponent.onChange(_Request)
     this.Subscribtion = this._DashboardService.Counting(_Request)
       .subscribe((result: any) => {
-        console.log("Response count", result)
 
         if(result.values != undefined){
 
@@ -367,7 +395,6 @@ export class AdminDashboardComponent implements OnInit {
         this._cRef.detectChanges();
       },
       (err: HttpErrorResponse) => {
-        console.log(JSON.stringify(err.error))
         //AratakaConfig.Alert.showAlert(err.error.detail,'alert-danger',2000)
 
         this.isDashboardCardColorsLoading = false
@@ -424,7 +451,6 @@ export class AdminDashboardComponent implements OnInit {
         this._cRef.detectChanges();
       },
       (err: HttpErrorResponse) => {
-        console.log(JSON.stringify(err.error))
         //AratakaConfig.Alert.showAlert(err.error.detail,'alert-danger',2000)
 
         this.isTicketCategoryLogBookLoading = false
@@ -493,7 +519,6 @@ export class AdminDashboardComponent implements OnInit {
         this._cRef.detectChanges();
       },
       (err: HttpErrorResponse) => {
-        console.log(JSON.stringify(err.error))
         //AratakaConfig.Alert.showAlert(err.error.detail,'alert-danger',2000)
 
         this.isTicketCategoryLoading = false
@@ -505,7 +530,6 @@ export class AdminDashboardComponent implements OnInit {
 
   //Excel
   GettingExcelForDashboardDataAPI(_Request){
-    console.log("Request Nih", _Request)
     AratakaConfig.LoadingPage.showLoading('Please wait.., perparing excel.')
     this.Subscribtion = this._DashboardService.downloadFileExcelDashboard(_Request)
       .subscribe((result: any) => {

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

@@ -182,7 +182,7 @@
                 <p *ngIf="isTicketHistoryListLoading == true" class="text-center"><small><b>Retrieving Data.. </b></small></p>
                 <p *ngIf="isTicketHistoryListEmpty == true" class="text-center"><small><b>There is no Ticket history </b></small></p>
                 <ng-container *ngFor="let data of TicketListData; let i = index">
-                  <p class="m-1"><a href="javascript:;" routerLink="/admin/ticket/detail/{{data.id.toString() | PipeEncryptoJs}}" class="text-info">{{data.ref}}</a></p>
+                  <p class="m-1"><a href="javascript:;" routerLink="/admin/ticket/detail/{{data.id.toString()}}" target="_blank" class="text-info">{{data.ref}}</a></p>
                   <span *ngIf="data.status == 'rejected'" class='badge badge-pill badge-dark'>REJECTED</span>
                   <span *ngIf="data.status == 'new'" class='badge badge-pill badge-warning'>NEW</span>
                   <span *ngIf="data.status == 'resolved'" class='badge badge-pill badge-secondary'>SOLVED</span>

src/assets/configAPI.json

+{
+    "APIBASEURL"              : "http://crm.nobubank.com/nobucall-api-v2/",
+    "MICROSERVICEURL"         : "http://crm.nobubank.com/nobucall-api-v2/",
+    "SITE_NAME"               : "Visionet Helpdesk System",
+    "SITE_LOGO"               : "https://i0.wp.com/jogorogo.info/wp-content/uploads/2017/07/logo_visionet.png?fit=879%2C227",
+    "COMPANY_NAME"            : "PT. Visionet Data Internasional",
+    "PARAM_AGENTROLEID"       : 2,
+    "PARAM_AGENTSPVROLEID"    : 1,
+    "PARAM_SPV"               : "1",  
+    "PARAM_AGENT"             : "2",
+    "PARAM_SERVICEDESK"       : "4",
+    "PARAM_SUPPORT"           : "5",
+    "ZENDESK_API_URL"         : "https://ovo1552295957.zendesk.com/",
+    "ZENDESK_API_USER"        : "xxx",
+    "ZENDESK_API_PASS"        : "xxx",
+    "API_CRON_USER"           : "admin",
+    "API_CRON_PASS"           : "Superm@n123",
+    "Topic" : {
+      "Informasi" : 1,
+      "Keluhan" : 2,
+      "PermintaanKeServiceDesk" : 4,
+      "PermintaanKeNobuCall" : 5,
+      "TelponTerputus" : 7
+    },
+    "Team" : {
+      "EChanelSupportCardOpr" : 26,
+      "EChanelSupportCardOpr2" : 42451,
+      "AtmPaymentSettlement" : 27,
+      "ITOprPolicyAndQA" : 32,
+      "ProductAndProcessConsumer" : 42452,
+      "PortofolioAndMonitoringCollectio" : 42453,
+      "MerchantProcessing" : 42454,
+      "BarcodeQRIS" : 42455,
+      "ITSolution" : 42456,
+      "DigitalBussinessSupport" : 31,
+      "ConsumerLoan" : 34,
+      "SBAndFinancialPlanning" : 37,
+      "ServiceDesk" : 39,
+      "CsCabangBranchAgent" : 40,
+      "AgentCallCenter" : 41,
+      "OvoCSTeam" : 229,
+      "SKNRTGS" : 455,
+      "SociomileStaff" : 10895,
+      "ProductInovationAndBusinessSupport" : 30397,
+      "ITRM" : 30393,
+      "SupervisorNobu" : 42931,
+      "MerchantBusiness": 66798
+    },
+    "Agent" : {
+      "NobuCall" : 42,
+      "ServiceDesk" : 43
+    },
+    "ckeConfig" : {
+      "extraPlugins":"easyimage, bidi, blockquote, clipboard button, panelbutton, panel, floatpanel, menu indentblock, indentlist, justify, link, list, liststyle, magicline newpage, pagebreak, pastefromword, pastetext" 
+    }
+}
\ No newline at end of file

src/environments/environment.prod.ts

@@ -2,13 +2,13 @@ export const environment = {
   production: true,
   
   //Local
-  // ApiUrlBase              : 'http://localhost:9825/',
+  ApiUrlBase              : 'http://localhost:9825/',
 
   //Opsol
   // ApiUrlBase              : 'http://innodev.vnetcloud.com/nobucall-api/',
 
   //dev
-  ApiUrlBase              : 'http://innodev.vnetcloud.com/nobucall-api-v2/',
+  // ApiUrlBase              : 'http://innodev.vnetcloud.com/nobucall-api-v2/',
 
   //uat
   // ApiUrlBase              : 'http://innodev.vnetcloud.com/nobucall-api-uat/',

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

@@ -9,24 +9,40 @@ import { Http, ResponseContentType, RequestOptions } from '@angular/http';
 import { environment } from '../../environments/environment.prod';
 
 //const API_URL = environment.apiUrl;
-const API_URL = environment.ApiUrlBase;
-const API_MICROSERVICE = environment.APIMICROSERVICE;
-const ckConfig = environment.ckeConfig;
-
-const SITE_NAME = environment.SITE_NAME;
-const SITE_LOGO  = environment.SITE_LOGO;
-const COMPANY_NAME = environment.COMPANY_NAME
-const PARAM_AGENTROLEID = environment.PARAM_AGENTROLEID
-const PARAM_AGENTSPVROLEID = environment.PARAM_AGENTSPVROLEID
-
-const PARAM_SPV = environment.PARAM_SPV
-const PARAM_AGENT = environment.PARAM_AGENT
-const PARAM_SERVICEDESK = environment.PARAM_SERVICEDESK
-const PARAM_SUPPORT = environment.PARAM_SUPPORT
-
-const ZENDESK_API_URL = environment.ZENDESK_API_URL
-const ZENDESK_API_USER = environment.ZENDESK_API_USER
-const ZENDESK_API_PASS = environment.ZENDESK_API_PASS
+var API_URL = "";
+var API_MICROSERVICE = "";
+var ckConfig = environment.ckeConfig;
+var SITE_NAME = environment.SITE_NAME;
+var SITE_LOGO  = environment.SITE_LOGO;
+var COMPANY_NAME = environment.COMPANY_NAME
+var PARAM_AGENTROLEID = environment.PARAM_AGENTROLEID
+var PARAM_AGENTSPVROLEID = environment.PARAM_AGENTSPVROLEID
+var PARAM_SPV = environment.PARAM_SPV
+var PARAM_AGENT = environment.PARAM_AGENT
+var PARAM_SERVICEDESK = environment.PARAM_SERVICEDESK
+var PARAM_SUPPORT = environment.PARAM_SUPPORT
+var ZENDESK_API_URL = environment.ZENDESK_API_URL
+var ZENDESK_API_USER = environment.ZENDESK_API_USER
+var ZENDESK_API_PASS = environment.ZENDESK_API_PASS
+
+fetch('./assets/configAPI.json').then(res => res.json())
+  .then(res => {
+    API_URL = res.APIBASEURL;
+    API_MICROSERVICE = res.MICROSERVICEURL;
+    ckConfig = res.ckeConfig;
+    SITE_NAME = res.SITE_NAME;
+    SITE_LOGO  = res.SITE_LOGO;
+    COMPANY_NAME = res.COMPANY_NAME
+    PARAM_AGENTROLEID = res.PARAM_AGENTROLEID
+    PARAM_AGENTSPVROLEID = res.PARAM_AGENTSPVROLEID
+    PARAM_SPV = res.PARAM_SPV
+    PARAM_AGENT = res.PARAM_AGENT
+    PARAM_SERVICEDESK = res.PARAM_SERVICEDESK
+    PARAM_SUPPORT = res.PARAM_SUPPORT
+    ZENDESK_API_URL = res.ZENDESK_API_URL
+    ZENDESK_API_USER = res.ZENDESK_API_USER
+    ZENDESK_API_PASS = res.ZENDESK_API_PASS
+  })
 
 @Injectable({
   providedIn: 'root'
@@ -937,6 +953,17 @@ export class DashboardService {
 
   }
 
+  topCategory(startDate: string, endDate: string) {
+    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.get(API_URL +`v3/top/${startDate}/${endDate}`, options);
+  }
+
   ReportTicket(_data) {
 
     const service = this.injector.get(ServiceProxyWeb)