RELEASED 2.1.1

RELEASED.md

+# VERSION 2.1.1 [15-09-2023]
+- add tooltip dropdown search
+
 # VERSION 2.1.0 [07-09-2023]
 - add user team sd
 - change component dropdown search
\ No newline at end of file

package.json

 {
   "name": "smart-city",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

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

@@ -33,6 +33,7 @@
           </p>
           <div class="form-group">
             <label class="text-muted">Assignee Team <span class="text-danger">*</span></label>
+            <span [nzTitle]="assigneTeamName" nz-tooltip>
               <nz-select
                 style="width: 100%;"
                 [(ngModel)]="AssigneeTeam_ID"
@@ -42,8 +43,11 @@
                 nzShowSearch
                 (ngModelChange)="AssigneeTeamChange()"
               >
-              <nz-option *ngFor="let o of AssigneeTeamData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                <nz-option *ngFor="let o of AssigneeTeamData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                  <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                </nz-option>
               </nz-select>
+            </span>
             <!-- <select type="text" 
               #inputRequired
               class="form-control form-control-sm select-style" 
@@ -57,6 +61,7 @@
           </div>
           <div class="form-group">
             <label class="text-muted">Assignee Agent <span class="text-danger">*</span></label>
+            <span [nzTitle]="assigneAgentName" nz-tooltip>
               <nz-select
                 style="width: 100%;"
                 [(ngModel)]="AssigneeTeamAgent_ID"
@@ -65,8 +70,11 @@
                 nzAllowClear
                 nzShowSearch
               >
-              <nz-option *ngFor="let o of AssigneeTeamAgentData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                <nz-option *ngFor="let o of AssigneeTeamAgentData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                  <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                </nz-option>
               </nz-select>
+            </span>
             <!-- <div [ngClass]="{'arataka-custom-autocomplete': search.isAgent}" *ngIf="search.isAgent">
               <input type="text" class="form-control form-control-sm" [(ngModel)]="AssigneeTeamAgent_Name"
                 placeholder="All Agent : Type to search" (blur)="onBlur()"
@@ -124,6 +132,7 @@
           </div>
           <div class="form-group">
             <label class="text-muted">Sub Topic <span class="text-danger">*</span></label>
+            <span [nzTitle]="SubTopic_Name" nz-tooltip>
               <nz-select
                 style="width: 100%;"
                 [(ngModel)]="SubTopic_ID"
@@ -133,8 +142,11 @@
                 (ngModelChange)="SubTopicChange()"
                 [disabled]="IsFormSubTopicDisabled"
               >
-              <nz-option *ngFor="let o of SubTopicData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                <nz-option *ngFor="let o of SubTopicData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                  <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                </nz-option>
               </nz-select>
+            </span>
             <!-- <div [ngClass]="{'arataka-custom-autocomplete': search.isSubTopic}" *ngIf="search.isSubTopic">
               <input type="text" class="form-control form-control-sm" [(ngModel)]="SubTopic_Name"
                 placeholder="All Sub Topic : Type to search" (blur)="onBlur()"
@@ -161,6 +173,7 @@
           </div>
           <div class="form-group">
             <label class="text-muted">Category <span class="text-danger">*</span></label>
+            <span [nzTitle]="Category_Name" nz-tooltip>
               <nz-select
                 style="width: 100%;"
                 [(ngModel)]="Category_ID"
@@ -169,8 +182,11 @@
                 nzShowSearch
                 [disabled]="IsFormCategoryDisabled"
               >
-              <nz-option *ngFor="let o of CategoryData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                <nz-option *ngFor="let o of CategoryData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                  <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                </nz-option>
               </nz-select>
+            </span>
             <!-- <div [ngClass]="{'arataka-custom-autocomplete': search.isCategory}" *ngIf="search.isCategory">
               <input type="text" class="form-control form-control-sm" [(ngModel)]="Category_Name"
                 placeholder="All Category : Type to search" (blur)="onBlur()"
@@ -216,7 +232,21 @@
             </p>
             <div class="form-group">
               <label class="text-muted">Reason <span class="text-danger">*</span></label>
-              <select type="text" 
+              <span [nzTitle]="reasonName" nz-tooltip>
+                <nz-select
+                  style="width: 100%;"
+                  [(ngModel)]="Complaintment_ID"
+                  nzPlaceHolder="Select Category"
+                  nzAllowClear
+                  nzShowSearch
+                  [disabled]="IsFormComplaintmentDisabled"
+                >
+                  <nz-option *ngFor="let o of ComplaintmentData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                    <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                  </nz-option>
+                </nz-select>
+              </span>
+              <!-- <select type="text" 
                 #inputRequired
                 class="form-control form-control-sm select-style" 
                 [(ngModel)]="Complaintment_ID"
@@ -224,7 +254,7 @@
                 <ng-container *ngFor="let Complaintment of ComplaintmentData; let i = index">
                   <option value="{{Complaintment.ID}}">{{Complaintment.Name}}</option>
                 </ng-container>
-              </select>
+              </select> -->
             </div>
             <div class="row" *ngIf="!IsFormComplaintmentDisabled">
               <div class="col-6">
@@ -455,7 +485,9 @@
                     nzShowSearch
                     (ngModelChange)="AssigneeTeamDestinationChange()"
                   >
-                    <nz-option *ngFor="let o of AssigneeTeamDestionationData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                    <nz-option *ngFor="let o of AssigneeTeamDestionationData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                      <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                    </nz-option>
                   </nz-select>
                   <!-- <select type="text" 
                     #inputRequired
@@ -478,7 +510,9 @@
                     nzAllowClear
                     nzShowSearch
                   >
-                    <nz-option *ngFor="let o of AssigneeTeamAgentDestinationData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                    <nz-option *ngFor="let o of AssigneeTeamAgentDestinationData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                      <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                    </nz-option>
                   </nz-select>
                   <!-- <select type="text" 
                     #inputRequired

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

@@ -139,6 +139,9 @@ export class AdminTicketOnpicDetailComponent implements OnInit {
 
   public AssigneeTeamDestionationID : string = ""
   public AssigneeTeamAgentDestionationID : string = ""
+  public assigneTeamName: string = "";
+  public assigneAgentName: string = "";
+  public reasonName: string = "";
   
   public Topic_ID : string = ""
   public SubTopic_ID : string = ""
@@ -819,6 +822,12 @@ export class AdminTicketOnpicDetailComponent implements OnInit {
             this.ResolveByName =  data.fields.resolvedby_id_friendlyname
             this.TransactionDate = data.fields.tanggal_transaksi
 
+            this.SubTopic_Name = data.fields.service_name
+            this.Category_Name = data.fields.servicesubcategory_name
+            this.assigneTeamName = data.fields.team_id_friendlyname
+            this.assigneAgentName = data.fields.agent_id_friendlyname
+            this.reasonName = data.fields.penyebab_pengaduan_id_friendlyname
+            
             this.ResolutionDate =  data.fields.resolution_date
             this.LastUpdate =  data.fields.last_update
             

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

@@ -70,7 +70,9 @@
           nzShowSearch
           (ngModelChange)="AssigneeTeamChange()"
         >
-          <nz-option *ngFor="let o of AssigneeTeamData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+          <nz-option *ngFor="let o of AssigneeTeamData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+            <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+          </nz-option>
         </nz-select>
       </div>
       <div class="form-group">
@@ -82,7 +84,9 @@
           nzAllowClear
           nzShowSearch
         >
-          <nz-option *ngFor="let o of AssigneeTeamAgentData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+          <nz-option *ngFor="let o of AssigneeTeamAgentData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+            <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+          </nz-option>
         </nz-select>
         <!-- <div [ngClass]="{'arataka-custom-autocomplete': search.isAgent}" *ngIf="search.isAgent">
           <input type="text" class="form-control form-control-sm" [(ngModel)]="AssigneeTeamAgent_Name"
@@ -126,7 +130,9 @@
           nzShowSearch
           (ngModelChange)="SubTopicChange()"
         >
-          <nz-option *ngFor="let o of SubTopicData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+          <nz-option *ngFor="let o of SubTopicData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+            <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+          </nz-option>
         </nz-select>
         <!-- <div [ngClass]="{'arataka-custom-autocomplete': search.isSubTopic}" *ngIf="search.isSubTopic">
           <input type="text" class="form-control form-control-sm" [(ngModel)]="SubTopic_Name"
@@ -156,7 +162,9 @@
             nzAllowClear
             nzShowSearch
           >
-        <nz-option *ngFor="let o of CategoryData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+          <nz-option *ngFor="let o of CategoryData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+            <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+          </nz-option>
         </nz-select>
         <!-- <div [ngClass]="{'arataka-custom-autocomplete': search.isCategory}" *ngIf="search.isCategory">
           <input type="text" class="form-control form-control-sm" [(ngModel)]="Category_Name"

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

@@ -91,6 +91,7 @@
             </p>
             <div class="form-group">
               <label class="text-muted">Assignee Team <span class="text-danger">*</span></label>
+              <span [nzTitle]="assigneTeamName" nz-tooltip>
                 <nz-select
                   style="width: 100%;"
                   [(ngModel)]="AssigneeTeam_ID"
@@ -100,11 +101,15 @@
                   (ngModelChange)="AssigneeTeamChange()"
                   [disabled]="IsFormTeamDisabled"
               >
-              <nz-option *ngFor="let o of AssigneeTeamData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                <nz-option *ngFor="let o of AssigneeTeamData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                  <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                </nz-option>
               </nz-select>
+            </span>
           </div>
           <div class="form-group">
             <label class="text-muted">Assignee Agent <span class="text-danger">*</span></label>
+            <span [nzTitle]="assigneAgentName" nz-tooltip>
               <nz-select
                 style="width: 100%;"
                 [(ngModel)]="AssigneeTeamAgent_ID"
@@ -113,8 +118,11 @@
                 nzAllowClear
                 nzShowSearch
               >
-              <nz-option *ngFor="let o of AssigneeTeamAgentData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                <nz-option *ngFor="let o of AssigneeTeamAgentData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                  <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                </nz-option>
               </nz-select>
+            </span>
             <!-- <div class="form-group">
               <label class="text-muted">Assignee Agent <span class="text-danger">*</span></label>
               <div [ngClass]="{'arataka-custom-autocomplete': search.isAgent}" *ngIf="search.isAgent">
@@ -178,6 +186,7 @@
             </div>
             <div class="form-group">
               <label class="text-muted">Sub Topic <span class="text-danger">*</span></label>
+              <span [nzTitle]="SubTopic_Name" nz-tooltip>
                 <nz-select
                   style="width: 100%;"
                   [(ngModel)]="SubTopic_ID"
@@ -187,11 +196,15 @@
                   (ngModelChange)="SubTopicChange()"
                   [disabled]="IsFormSubTopicDisabled"
                   >
-                <nz-option *ngFor="let o of SubTopicData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                  <nz-option *ngFor="let o of SubTopicData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                    <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                  </nz-option>
                 </nz-select>
+              </span>
             </div>
             <div class="form-group">
               <label class="text-muted">Category <span class="text-danger">*</span></label>
+              <span [nzTitle]="Category_Name" nz-tooltip>
                 <nz-select
                 style="width: 100%;"
                   [(ngModel)]="Category_ID"
@@ -200,8 +213,11 @@
                   nzShowSearch
                   [disabled]="IsFormCategoryDisabled"
                 >
-                <nz-option *ngFor="let o of CategoryData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                <nz-option *ngFor="let o of CategoryData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                  <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                </nz-option>
                 </nz-select>
+              </span>
             <!-- <div class="form-group">
               <label class="text-muted">Sub Topic <span class="text-danger">*</span></label>
               <div [ngClass]="{'arataka-custom-autocomplete': search.isSubTopic}" *ngIf="search.isSubTopic">
@@ -275,7 +291,21 @@
               </p>
               <div class="form-group">
                 <label class="text-muted">Reason <span class="text-danger">*</span></label>
-                <select type="text" 
+                <span [nzTitle]="reasonName" nz-tooltip>
+                  <nz-select
+                  style="width: 100%;"
+                    [(ngModel)]="Complaintment_ID"
+                    nzPlaceHolder="Select Reason"
+                    nzAllowClear
+                    nzShowSearch
+                    [disabled]="IsFormComplaintmentDisabled"
+                  >
+                  <nz-option *ngFor="let o of ComplaintmentData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                    <span nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                  </nz-option>
+                  </nz-select>
+                </span>
+                <!-- <select type="text" 
                   #inputRequired
                   class="form-control form-control-sm select-style" 
                   [(ngModel)]="Complaintment_ID"
@@ -283,7 +313,7 @@
                   <ng-container *ngFor="let Complaintment of ComplaintmentData; let i = index">
                     <option value="{{Complaintment.ID}}">{{Complaintment.Name}}</option>
                   </ng-container>
-                </select>
+                </select> -->
               </div>
               <div class="row" *ngIf="!IsFormComplaintmentDisabled">
                 <div class="col-6">
@@ -523,7 +553,9 @@
                       nzShowSearch
                       (ngModelChange)="AssigneeTeamDestinationChange()"
                     >
-                      <nz-option *ngFor="let o of AssigneeTeamDestionationData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                      <nz-option *ngFor="let o of AssigneeTeamDestionationData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                        <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                      </nz-option>
                     </nz-select>
                     <!-- <select type="text" 
                       #inputRequired
@@ -546,7 +578,9 @@
                       nzAllowClear
                       nzShowSearch
                     >
-                      <nz-option *ngFor="let o of AssigneeTeamAgentDestinationData" [nzValue]="o.ID" [nzLabel]="o.Name"></nz-option>
+                      <nz-option *ngFor="let o of AssigneeTeamAgentDestinationData" [nzValue]="o.ID" [nzLabel]="o.Name" nzCustomContent>
+                        <span  nz-tooltip [nzTitle]="o.Name">{{o.Name}}</span>
+                      </nz-option>
                     </nz-select>
                     <!-- <select type="text" 
                       #inputRequired

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

@@ -143,6 +143,9 @@ export class AdminTicketDetailComponent implements OnInit {
   public AssigneeTeam_ID : string = ""
   public AssigneeTeamAgent_ID : string = ""
   public AssigneeTeamAgent_Name: string = ""
+  public assigneTeamName: string = "";
+  public assigneAgentName: string = "";
+  public reasonName: string = "";
   
   public AssigneeTeamDestionationID : string = ""
   public AssigneeTeamAgentDestionationID : string = ""
@@ -930,6 +933,11 @@ export class AdminTicketDetailComponent implements OnInit {
             this.ResolutionDate =  data.fields.resolution_date
             this.LastUpdate =  data.fields.last_update
             this.ttrDeadline = data.fields.ttr_escalation_deadline
+            this.SubTopic_Name = data.fields.service_name
+            this.Category_Name = data.fields.servicesubcategory_name
+            this.assigneTeamName = data.fields.team_id_friendlyname
+            this.assigneAgentName = data.fields.agent_id_friendlyname
+            this.reasonName = data.fields.penyebab_pengaduan_id_friendlyname
 
             //if on PIC
             //ServiceDeskLogsID must be null first at get detail ticket

src/app/admin/admin.module.ts

@@ -38,7 +38,7 @@ import { PipeEncryptoJs } from '../pipe/pipe-global.pipe';
 import { PipeDencryptoJs } from '../pipe/pipe-global.pipe';
 */
 import { NzSelectModule } from 'ng-zorro-antd';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { NgZorroAntdModule, NzPopoverModule, NzToolTipModule   } from 'ng-zorro-antd';
 @NgModule({
   declarations: [
     /*PipeSha256,
@@ -79,7 +79,9 @@ import { NgZorroAntdModule } from 'ng-zorro-antd';
     AdminRoutingModule,
     CKEditorModule,
     NzSelectModule,
-    NgZorroAntdModule
+    NgZorroAntdModule,
+    NzPopoverModule,
+    NzToolTipModule
   ]
 })
 export class AdminModule { }

src/app/app.component.ts

 import { Component, OnInit,Injector, Input, Output, EventEmitter } from '@angular/core';
 import { Router } from '@angular/router';
-
+import { en_US, NzI18nService } from 'ng-zorro-antd';
 import { MicroService } from '../shared/serviceproxy/service-proxy.service';
 import { environment } from '../environments/environment.prod';
 import * as $ from 'jquery';
@@ -22,9 +22,12 @@ export class AppComponent implements OnInit{
 
   constructor(
     private router: Router, 
+    private i18n: NzI18nService,
     // private _ServiceProxyWeb : ServiceProxyWeb,
     private MicroService: MicroService
-  ) { }
+  ) {
+    this.i18n.setLocale(en_US);
+   }
 
   public href: string = "";