Skip to content

N
nobu-web-v2
Commit 4abfb1fb authored by ari_darmawan's avatar ari_darmawan
Browse files
Options

dropdown search

parent 36437990
Hide whitespace changes
Inline Side-by-side
Showing with 633 additions and 237 deletions
src/app/admin/admin-ticket-onpic/admin-ticket-onpic-detail/admin-ticket-onpic-detail.component.css
View file @ 4abfb1fb
......@@ -11,6 +11,43 @@
text-transform: uppercase;
}
.arataka-custom-autocomplete{
border: 1px solid #cccccc;
padding: 0px;
border-radius: 5px;
margin-top: -5px;
position: absolute;
background: #ffffff !important;
z-index: 999;
width: 90%;
max-height: 260px;
overflow-y: auto;
}
.arataka-chevron-autocomplete{
position: absolute;
z-index: 999;
right: 0;
top: 0;
margin-top: 33px !important;
margin-right: 25px !important;
color: #9E9E9E;
}
.arataka-custom-autocomplete-itemlist{
font-size: 11px;
color: #222;
margin: 7px 0;
cursor: pointer;
padding: 3px 3px;
}
.arataka-custom-autocomplete-itemlist:hover{
background: #1976D2;
border-radius: 3px;
color: #ffffff;
}
.TabsCustom:hover{
color: #222;
border-bottom: 3px solid #d18b5d;
......
src/app/admin/admin-ticket-onpic/admin-ticket-onpic-detail/admin-ticket-onpic-detail.component.html
View file @ 4abfb1fb
......@@ -46,11 +46,24 @@
</div>
<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">
<input type="text" class="form-control form-control-sm" [(ngModel)]="AssigneeTeamAgent_Name"
placeholder="All Agent : Type to search" (blur)="onBlur()"
(keyup)="onSeacrhSelectAgent($event)"/>
<span class="arataka-chevron-autocomplete"></span>
<ng-container *ngFor="let data of AssigneeTeamAgentData; let i = index">
<p (click)="AssigneeTeamAgent_ID = data.ID; search.isAgent=false; AssigneeTeamAgent_Name = data.Name"
class="arataka-custom-autocomplete-itemlist"
>{{data.Name}}</p>
</ng-container>
</div>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="AssigneeTeamAgent_ID"
[disabled]="IsFormTeamAgentDisabled">
[disabled]="IsFormTeamAgentDisabled"
*ngIf="!search.isAgent"
(click)="search.isAgent = true">
<ng-container *ngFor="let AssigneeTeamAgent of AssigneeTeamAgentData; let i = index">
<option value="{{AssigneeTeamAgent.ID}}">{{AssigneeTeamAgent.Name}}</option>
</ng-container>
......@@ -82,7 +95,7 @@
class="form-control form-control-sm select-style"
[(ngModel)]="Topic_ID"
[disabled]="IsFormTeamAgentDisabled"
(change)="TopicChange()">
(change)="TopicChange(); Category_Name = ''; Category_ID = ''; SubTopic_Name= ''; SubTopic_ID = '';">
<ng-container *ngFor="let Topic of TopicData; let i = index">
<option value="{{Topic.ID}}">{{Topic.Name}}</option>
</ng-container>
......@@ -90,12 +103,25 @@
</div>
<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">
<input type="text" class="form-control form-control-sm" [(ngModel)]="SubTopic_Name"
placeholder="All Sub Topic : Type to search" (blur)="onBlur()"
(keyup)="onSeacrhSelectSubTopic($event)"/>
<span class="arataka-chevron-autocomplete"></span>
<ng-container *ngFor="let data of SubTopicData; let i = index">
<p (click)="SubTopic_ID = data.ID; search.isSubTopic=false; SubTopic_Name = data.Name; SubTopicChange(); Category_Name = ''; Category_ID = '';"
class="arataka-custom-autocomplete-itemlist"
>{{data.Name}}</p>
</ng-container>
</div>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="SubTopic_ID"
[disabled]="IsFormSubTopicDisabled"
(change)="SubTopicChange()">
(change)="SubTopicChange()"
*ngIf="!search.isSubTopic"
(click)="search.isSubTopic = true">
<ng-container *ngFor="let SubTopic of SubTopicData; let i = index">
<option value="{{SubTopic.ID}}">{{SubTopic.Name}}</option>
</ng-container>
......@@ -103,11 +129,24 @@
</div>
<div class="form-group">
<label class="text-muted">Category <span class="text-danger">*</span></label>
<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()"
(keyup)="onSeacrhSelectCategory($event)"/>
<span class="arataka-chevron-autocomplete"></span>
<ng-container *ngFor="let data of CategoryData; let i = index">
<p (click)="Category_ID = data.ID; search.isCategory=false; Category_Name = data.Name"
class="arataka-custom-autocomplete-itemlist"
>{{data.Name}}</p>
</ng-container>
</div>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="Category_ID"
[disabled]="IsFormCategoryDisabled">
[disabled]="IsFormCategoryDisabled"
*ngIf="!search.isCategory"
(click)="search.isCategory = true">
<ng-container *ngFor="let Category of CategoryData; let i = index">
<option value="{{Category.ID}}">{{Category.Name}}</option>
</ng-container>
......
src/app/admin/admin-ticket-onpic/admin-ticket-onpic-detail/admin-ticket-onpic-detail.component.ts
View file @ 4abfb1fb
......@@ -153,7 +153,9 @@ export class AdminTicketOnpicDetailComponent implements OnInit {
public ChildTicket = []
public TicketEvent = []
public Category_Name : string = ""
public SubTopic_Name : string = ""
public AssigneeTeamAgent_Name: string = ""
public EmailLogsData = []
public EmailLogsDetail = undefined
......@@ -219,6 +221,13 @@ export class AdminTicketOnpicDetailComponent implements OnInit {
}]
public MacroValue = ""
search = {
isAgent: false,
isSubTopic: false,
isCategory: false
}
constructor(injector: Injector,
private router: Router,
private route: ActivatedRoute,
......@@ -276,6 +285,53 @@ export class AdminTicketOnpicDetailComponent implements OnInit {
}
}
private tempAgent = [];
onSeacrhSelectAgent(evt: any) {
const searchTerm = evt.srcElement.value.toLowerCase();
if (searchTerm == "") {
this.AssigneeTeamAgentData = this.tempAgent;
} else {
const cloneObj = this.tempAgent;
this.AssigneeTeamAgentData = cloneObj.filter((item) => {
return item['Name'].toLowerCase().includes(searchTerm);
})
}
}
private tempSubTopic = [];
onSeacrhSelectSubTopic(evt: any) {
const searchTerm = evt.srcElement.value.toLowerCase();
if (searchTerm == "") {
this.SubTopicData = this.tempSubTopic;
} else {
const cloneObj = this.tempSubTopic;
this.SubTopicData = cloneObj.filter((item) => {
return item['Name'].toLowerCase().includes(searchTerm);
})
}
}
private tempCategory = [];
onSeacrhSelectCategory(evt: any) {
const searchTerm = evt.srcElement.value.toLowerCase();
if (searchTerm == "") {
this.CategoryData = this.tempCategory;
} else {
const cloneObj = this.tempCategory;
this.CategoryData = cloneObj.filter((item) => {
return item['Name'].toLowerCase().includes(searchTerm);
})
}
}
onBlur() {
setTimeout(() => {
this.search.isAgent = false;
this.search.isSubTopic = false;
this.search.isCategory = false;
}, 200);
}
SubmitAsDataByRole(_data){
if(_data.status == 'new' || _data.status == 'escalated_tto'){
this.SubmitAsData = [{
......@@ -1203,7 +1259,10 @@ export class AdminTicketOnpicDetailComponent implements OnInit {
}
}
this.AssigneeTeamAgentData.sort((a: any, b: any) => a.Name.localeCompare(b.Name))
this.AssigneeTeamAgentData.unshift({ID: '', Name: 'No Select'})
this.tempAgent = this.AssigneeTeamAgentData;
this.IsFormTeamDisabled = false
this.IsFormTeamAgentDisabled = false
......@@ -1449,22 +1508,23 @@ export class AdminTicketOnpicDetailComponent implements OnInit {
this._TicketService.GetSubTopic(_Request)
.subscribe((result: any) => {
if(result != null){
this.SubTopicData = []
this.SubTopicData = [];
this.tempSubTopic = [];
//console.log(JSON.stringify(result))
if(result.values != null){
this.SubTopicData.push({
ID: "",
Name: "No Select"
})
this.SubTopic_ID = ""
// this.SubTopicData.push({
// ID: "",
// Name: "No Select"
// })
// this.SubTopic_ID = ""
this.CategoryData = [{
ID: "",
Name: "No Select"
}]
this.Category_ID = ""
// this.CategoryData = [{
// ID: "",
// Name: "No Select"
// }]
// this.Category_ID = ""
for(var i=0; i < result.values.length; i++){
this.SubTopicData.push({
......@@ -1472,6 +1532,9 @@ export class AdminTicketOnpicDetailComponent implements OnInit {
Name: result.values[i].name
})
}
this.SubTopicData.sort((a: any, b: any) => a.Name.localeCompare(b.Name))
this.SubTopicData.unshift({ID: '', Name: 'No Select'})
this.tempSubTopic = this.SubTopicData;
this.IsFormTopicDisabled = false
this.IsFormSubTopicDisabled = false
......@@ -1512,16 +1575,17 @@ export class AdminTicketOnpicDetailComponent implements OnInit {
this._TicketService.GetCategory(_Request)
.subscribe((result: any) => {
if(result != null){
this.CategoryData = []
this.CategoryData = [];
this.tempCategory = [];
//console.log(JSON.stringify(result))
if(result.values != null){
this.CategoryData.push({
ID: "",
Name: "No Select"
})
this.Category_ID = ""
// this.CategoryData.push({
// ID: "",
// Name: "No Select"
// })
// this.Category_ID = ""
for(var i=0; i < result.values.length; i++){
this.CategoryData.push({
......@@ -1529,7 +1593,9 @@ export class AdminTicketOnpicDetailComponent implements OnInit {
Name: result.values[i].name
})
}
this.CategoryData.sort((a: any, b: any) => a.Name.localeCompare(b.Name))
this.CategoryData.unshift({ID: '', Name: 'No Select'})
this.tempCategory = this.CategoryData;
// this.Category_ID = this.CategoryData[0].ID
this.IsFormTopicDisabled = false
......
src/app/admin/admin-ticket/admin-ticket-create/admin-ticket-create.component.css
View file @ 4abfb1fb
......@@ -9,6 +9,43 @@
background: #FAFAFA;
}
.arataka-custom-autocomplete{
border: 1px solid #cccccc;
padding: 0px;
border-radius: 5px;
margin-top: -5px;
position: absolute;
background: #ffffff !important;
z-index: 999;
width: 90%;
max-height: 260px;
overflow-y: auto;
}
.arataka-chevron-autocomplete{
position: absolute;
z-index: 999;
right: 0;
top: 0;
margin-top: 33px !important;
margin-right: 25px !important;
color: #9E9E9E;
}
.arataka-custom-autocomplete-itemlist{
font-size: 11px;
color: #222;
margin: 7px 0;
cursor: pointer;
padding: 3px 3px;
}
.arataka-custom-autocomplete-itemlist:hover{
background: #1976D2;
border-radius: 3px;
color: #ffffff;
}
.custom-minus-date{
position: absolute;
z-index: 99;
......
src/app/admin/admin-ticket/admin-ticket-create/admin-ticket-create.component.html
View file @ 4abfb1fb
......@@ -4,20 +4,21 @@
<h6 class="text-muted"><i class="fas fa-ticket-alt"></i> Create New Ticket</h6>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-2 mb-3">
<button class="btn btn-sm btn-block arataka-btn-primary" (click)="SubmitClick()"><i class="fas fa-save"></i> Create Ticket</button>
</div>
<button class="btn btn-sm btn-block arataka-btn-primary" (click)="SubmitClick()"><i class="fas fa-save"></i>
Create Ticket</button>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-4 col-md-4 col-lg-3">
<div class="form-group">
<label class="text-muted">Add Customer <span class="text-danger">*</span></label>
<button type="button" class="btn arataka-btn-select btn-sm btn-block mb-3"
(click)="SelectCustomerMDClick(null)">
<i class="fas fa-chevron-down"></i>&nbsp;
{{CustomerMdData.Name}}
</button>
</div>
<!-- <hr>
<div class="col-12 col-sm-4 col-md-4 col-lg-3">
<div class="form-group">
<label class="text-muted">Add Customer <span class="text-danger">*</span></label>
<button type="button" class="btn arataka-btn-select btn-sm btn-block mb-3"
(click)="SelectCustomerMDClick(null)">
<i class="fas fa-chevron-down"></i>&nbsp;
{{CustomerMdData.Name}}
</button>
</div>
<!-- <hr>
<p>
<b>Agent</b>
</p>
......@@ -49,186 +50,197 @@
<label class="text-muted">Channel <span class="text-danger">*</span></label>
<input type="text" placeholder="Input Channel ..." #inputRequired class="form-control form-control-sm" [(ngModel)]="channel" maxlength="30">
</div> -->
<!-- <hr> -->
<p>
<b>Assignee</b>
</p>
<div class="form-group">
<label class="text-muted">Assignee Team <span class="text-danger">*</span></label>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="AssigneeTeam_ID"
(change)="AssigneeTeamChange()">
<ng-container *ngFor="let AssigneeTeam of AssigneeTeamData; let i = index">
<option value="{{AssigneeTeam.ID}}">{{AssigneeTeam.Name}}</option>
</ng-container>
</select>
</div>
<div class="form-group">
<label class="text-muted">Assignee Agent <span class="text-danger">*</span></label>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="AssigneeTeamAgent_ID">
<ng-container *ngFor="let AssigneeTeamAgent of AssigneeTeamAgentData; let i = index">
<option value="{{AssigneeTeamAgent.ID}}">{{AssigneeTeamAgent.Name}}</option>
</ng-container>
</select>
</div>
<hr>
<p>
<b>Topic & Category</b>
</p>
<div class="form-group">
<label class="text-muted">Topic <span class="text-danger">*</span></label>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="Topic_ID"
(change)="TopicChange()">
<ng-container *ngFor="let Topic of TopicData; let i = index">
<option value="{{Topic.ID}}">{{Topic.Name}}</option>
</ng-container>
</select>
</div>
<div class="form-group">
<label class="text-muted">Sub Topic <span class="text-danger">*</span></label>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="SubTopic_ID"
(change)="SubTopicChange()">
<ng-container *ngFor="let SubTopic of SubTopicData; let i = index">
<option value="{{SubTopic.ID}}">{{SubTopic.Name}}</option>
</ng-container>
</select>
</div>
<!-- <hr> -->
<p>
<b>Assignee</b>
</p>
<div class="form-group">
<label class="text-muted">Assignee Team <span class="text-danger">*</span></label>
<select type="text" #inputRequired class="form-control form-control-sm select-style"
[(ngModel)]="AssigneeTeam_ID" (change)="AssigneeTeamChange()">
<ng-container *ngFor="let AssigneeTeam of AssigneeTeamData; let i = index">
<option value="{{AssigneeTeam.ID}}">{{AssigneeTeam.Name}}</option>
</ng-container>
</select>
</div>
<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">
<input type="text" class="form-control form-control-sm" [(ngModel)]="AssigneeTeamAgent_Name"
placeholder="All Agent : Type to search" (blur)="onBlur()"
(keyup)="onSeacrhSelectAgent($event)"/>
<span class="arataka-chevron-autocomplete"></span>
<ng-container *ngFor="let data of AssigneeTeamAgentData; let i = index">
<p (click)="AssigneeTeamAgent_ID = data.ID; search.isAgent=false; AssigneeTeamAgent_Name = data.Name;"
class="arataka-custom-autocomplete-itemlist"
>{{data.Name}}</p>
</ng-container>
</div>
<select type="text" #inputRequired class="form-control form-control-sm select-style"
[(ngModel)]="AssigneeTeamAgent_ID" *ngIf="!search.isAgent"
(click)="search.isAgent = true">
<ng-container *ngFor="let AssigneeTeamAgent of AssigneeTeamAgentData; let i = index">
<option value="{{AssigneeTeamAgent.ID}}">{{AssigneeTeamAgent.Name}}</option>
</ng-container>
</select>
</div>
<hr>
<p>
<b>Topic & Category</b>
</p>
<div class="form-group">
<label class="text-muted">Topic <span class="text-danger">*</span></label>
<select type="text" #inputRequired class="form-control form-control-sm select-style" [(ngModel)]="Topic_ID"
(change)="TopicChange(); Category_Name = ''; Category_ID = ''; SubTopic_Name= ''; SubTopic_ID = '';">
<ng-container *ngFor="let Topic of TopicData; let i = index">
<option value="{{Topic.ID}}">{{Topic.Name}}</option>
</ng-container>
</select>
</div>
<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">
<input type="text" class="form-control form-control-sm" [(ngModel)]="SubTopic_Name"
placeholder="All Sub Topic : Type to search" (blur)="onBlur()"
(keyup)="onSeacrhSelectSubTopic($event)"/>
<span class="arataka-chevron-autocomplete"></span>
<ng-container *ngFor="let data of SubTopicData; let i = index">
<p (click)="SubTopic_ID = data.ID; search.isSubTopic=false; SubTopic_Name = data.Name; SubTopicChange(); Category_Name = ''; Category_ID = '';"
class="arataka-custom-autocomplete-itemlist"
>{{data.Name}}</p>
</ng-container>
</div>
<select type="text" #inputRequired class="form-control form-control-sm select-style" [(ngModel)]="SubTopic_ID"
(change)="SubTopicChange()" *ngIf="!search.isSubTopic"
(click)="search.isSubTopic = true">
<ng-container *ngFor="let SubTopic of SubTopicData; let i = index">
<option value="{{SubTopic.ID}}">{{SubTopic.Name}}</option>
</ng-container>
</select>
</div>
<div class="form-group">
<label class="text-muted">Category <span class="text-danger">*</span></label>
<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()"
(keyup)="onSeacrhSelectCategory($event)"/>
<span class="arataka-chevron-autocomplete"></span>
<ng-container *ngFor="let data of CategoryData; let i = index">
<p (click)="Category_ID = data.ID; search.isCategory=false; Category_Name = data.Name"
class="arataka-custom-autocomplete-itemlist"
>{{data.Name}}</p>
</ng-container>
</div>
<select type="text" #inputRequired class="form-control form-control-sm select-style" [(ngModel)]="Category_ID"
*ngIf="!search.isCategory" (click)="search.isCategory = true">
<ng-container *ngFor="let Category of CategoryData; let i = index">
<option value="{{Category.ID}}">{{Category.Name}}</option>
</ng-container>
</select>
</div>
<ng-container
*ngIf="Topic_ID == Env.Topic.Keluhan.toString() || Topic_ID == Env.Topic.PermintaanKeServiceDesk.toString()">
<hr>
<p>Complaint</p>
<div class="form-group">
<label class="text-muted">Reason <span class="text-danger">*</span></label>
<select type="text" #inputRequired class="form-control form-control-sm select-style"
[(ngModel)]="Complaintment_ID">
<ng-container *ngFor="let Complaintment of ComplaintmentData; let i = index">
<option value="{{Complaintment.ID}}">{{Complaintment.Name}}</option>
</ng-container>
</select>
</div>
</ng-container>
</div>
<div class="col-12 col-sm-8 col-md-8 col-lg-9">
<div class="row">
<div class="col-12 col-sm-12 col-md-8 col-lg-9">
<div class="form-group">
<label class="text-muted">Category <span class="text-danger">*</span></label>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="Category_ID">
<ng-container *ngFor="let Category of CategoryData; let i = index">
<option value="{{Category.ID}}">{{Category.Name}}</option>
</ng-container>
</select>
<label class="text-muted">Subject <span class="text-danger">*</span></label>
<input type="text" #inputRequired class="form-control form-control-sm" [(ngModel)]="Subject"
maxlength="100">
</div>
<ng-container *ngIf="Topic_ID == Env.Topic.Keluhan.toString() || Topic_ID == Env.Topic.PermintaanKeServiceDesk.toString()">
<hr>
<p>Complaint</p>
<div class="form-group">
<label class="text-muted">Reason <span class="text-danger">*</span></label>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="Complaintment_ID">
<ng-container *ngFor="let Complaintment of ComplaintmentData; let i = index">
<option value="{{Complaintment.ID}}">{{Complaintment.Name}}</option>
</ng-container>
</select>
</div>
</ng-container>
</div>
<div class="col-12 col-sm-8 col-md-8 col-lg-9">
<div class="row">
<div class="col-12 col-sm-12 col-md-8 col-lg-9">
<div class="form-group">
<label class="text-muted">Subject <span class="text-danger">*</span></label>
<input type="text" #inputRequired class="form-control form-control-sm"
[(ngModel)]="Subject"
maxlength="100">
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-3">
<div class="form-group" [ngClass]="{'d-block': !isDateTransaction, 'd-none':isDateTransaction }">
<label class="text-muted"><small>Date Transaction (Optional)</small></label>
<a href="javascript:;" class="btn btn-sm btn-block custom-add-date" (click)="isDateTransaction=true"><i
class="far fa-calendar-alt"></i> Add Date</a>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-3">
<div class="form-group" [ngClass]="{'d-block': !isDateTransaction, 'd-none':isDateTransaction }">
<label class="text-muted"><small>Date Transaction (Optional)</small></label>
<a href="javascript:;" class="btn btn-sm btn-block custom-add-date" (click)="isDateTransaction=true"><i class="far fa-calendar-alt"></i> Add Date</a>
</div>
<div class="form-group" [ngClass]="{'d-block': isDateTransaction, 'd-none':!isDateTransaction }">
<label class="text-muted"><small>Date Transaction (Optional)</small></label>
<div class="input-group date" id="DateTransaction" data-target-input="nearest">
<input type="text"
class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
<div class="form-group" [ngClass]="{'d-block': isDateTransaction, 'd-none':!isDateTransaction }">
<label class="text-muted"><small>Date Transaction (Optional)</small></label>
<div class="input-group date" id="DateTransaction" data-target-input="nearest">
<input type="text" class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
data-target="#DateTransaction" />
<div class="input-group-append" data-target="#DateTransaction" data-toggle="datetimepicker">
<div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
</div>
</div>
<span class="custom-minus-date text-center" (click)="isDateTransaction=false"><i class="fas fa-times"></i></span>
</div>
<span class="custom-minus-date text-center" (click)="isDateTransaction=false"><i
class="fas fa-times"></i></span>
</div>
</div>
<div class="form-group">
<p
class="btn btn-sm arataka-btn-default m-0"
(click)="SelectAndUploadFile()">
<i class="fas fa-upload"></i> Select & Upload File
</p>
</div>
<div class="form-group">
<label class="text-muted">Description <span class="text-danger">*</span></label>
<!--<textarea class="form-control form-control-sm" [(ngModel)]="description" style="resize: none;"></textarea>-->
<ck-editor
name="editor1"
[(ngModel)]="Description"
skin="moono-lisa"
language="en"
[fullPage]="false"
[config]="{ toolbar: [
</div>
<div class="form-group">
<p class="btn btn-sm arataka-btn-default m-0" (click)="SelectAndUploadFile()">
<i class="fas fa-upload"></i> Select & Upload File
</p>
</div>
<div class="form-group">
<label class="text-muted">Description <span class="text-danger">*</span></label>
<!--<textarea class="form-control form-control-sm" [(ngModel)]="description" style="resize: none;"></textarea>-->
<ck-editor name="editor1" [(ngModel)]="Description" skin="moono-lisa" language="en" [fullPage]="false" [config]="{ toolbar: [
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
[ 'list', 'indent', 'blocks', 'align', 'bidi' ],
[ 'Bold', 'Italic', 'Underline'],
[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'Language' ],
[ 'Link', 'Unlink'] ],
height : 292 }">
</ck-editor>
</div>
<div class="form-group" *ngIf="TeamID == Env.Team.CsCabangBranchAgent || TeamID == Env.Team.SociomileStaff">
<label class="text-muted" *ngIf="TeamID == Env.Team.CsCabangBranchAgent">CS Cabang <span class="text-danger">*</span></label>
<label class="text-muted" *ngIf="TeamID == Env.Team.SociomileStaff">Staff NWB <span class="text-danger">*</span></label>
<input type="text" #inputRequired class="form-control form-control-sm"
[(ngModel)]="CSCabang"
maxlength="100">
</div>
<div class="form-group" *ngIf="TeamID == Env.Team.CsCabangBranchAgent">
<label class="text-muted">Supervisor/BOH <span class="text-danger">*</span></label>
<input type="text" #inputRequired class="form-control form-control-sm"
[(ngModel)]="SupervisorBOH"
maxlength="100">
</div>
</ck-editor>
</div>
<div class="form-group" *ngIf="TeamID == Env.Team.CsCabangBranchAgent || TeamID == Env.Team.SociomileStaff">
<label class="text-muted" *ngIf="TeamID == Env.Team.CsCabangBranchAgent">CS Cabang <span
class="text-danger">*</span></label>
<label class="text-muted" *ngIf="TeamID == Env.Team.SociomileStaff">Staff NWB <span
class="text-danger">*</span></label>
<input type="text" #inputRequired class="form-control form-control-sm" [(ngModel)]="CSCabang" maxlength="100">
</div>
<div class="form-group" *ngIf="TeamID == Env.Team.CsCabangBranchAgent">
<label class="text-muted">Supervisor/BOH <span class="text-danger">*</span></label>
<input type="text" #inputRequired class="form-control form-control-sm" [(ngModel)]="SupervisorBOH"
maxlength="100">
</div>
</div>
</div>
</div>
<div class="modal fade" id="SelectCustomer-MD" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title">
<b>Add Customer</b>
</p>
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title">
<b>Add Customer</b>
</p>
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button> -->
</div>
<div class="modal-body">
<app-admin-ticket-customer-md #CallViewChildCustomerMd
(ChildEvent)="FromChildCustomerMD($event)">
</app-admin-ticket-customer-md>
</div>
</div>
<div class="modal-body">
<app-admin-ticket-customer-md #CallViewChildCustomerMd (ChildEvent)="FromChildCustomerMD($event)">
</app-admin-ticket-customer-md>
</div>
</div>
</div>
</div>
<div class="modal fade" id="SelectFile-MD" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<app-admin-selectfiletemplate #CallViewChildSelectFileMd
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<app-admin-selectfiletemplate #CallViewChildSelectFileMd
(ChildEvent)="FromSelectAndUploadFileMD($event)"></app-admin-selectfiletemplate>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/admin/admin-ticket/admin-ticket-create/admin-ticket-create.component.ts
View file @ 4abfb1fb
......@@ -88,16 +88,23 @@ export class AdminTicketCreateComponent implements OnInit {
public AssigneeTeam_ID : string = ""
public AssigneeTeamAgent_ID : string = ""
public AssigneeTeamAgent_Name: string = ""
public Topic_ID : string = ""
public SubTopic_ID : string = ""
public SubTopic_Name : string = ""
public Category_ID : string = ""
public Category_Name : string = ""
public Complaintment_ID : string = ""
public idAgent: string = "";
public extAgent: string = "";
public channel: string = "";
listAgent: any[] = [];
search = {
isAgent: false,
isSubTopic: false,
isCategory: false
}
constructor(injector: Injector,
private router: Router,
private FormBuilder : FormBuilder,
......@@ -178,6 +185,53 @@ export class AdminTicketCreateComponent implements OnInit {
// this.requestAgent();
}
private tempAgent = [];
onSeacrhSelectAgent(evt: any) {
const searchTerm = evt.srcElement.value.toLowerCase();
if (searchTerm == "") {
this.AssigneeTeamAgentData = this.tempAgent;
} else {
const cloneObj = this.tempAgent;
this.AssigneeTeamAgentData = cloneObj.filter((item) => {
return item['Name'].toLowerCase().includes(searchTerm);
})
}
}
private tempSubTopic = [];
onSeacrhSelectSubTopic(evt: any) {
const searchTerm = evt.srcElement.value.toLowerCase();
if (searchTerm == "") {
this.SubTopicData = this.tempSubTopic;
} else {
const cloneObj = this.tempSubTopic;
this.SubTopicData = cloneObj.filter((item) => {
return item['Name'].toLowerCase().includes(searchTerm);
})
}
}
private tempCategory = [];
onSeacrhSelectCategory(evt: any) {
const searchTerm = evt.srcElement.value.toLowerCase();
if (searchTerm == "") {
this.CategoryData = this.tempCategory;
} else {
const cloneObj = this.tempCategory;
this.CategoryData = cloneObj.filter((item) => {
return item['Name'].toLowerCase().includes(searchTerm);
})
}
}
onBlur() {
setTimeout(() => {
this.search.isAgent = false;
this.search.isSubTopic = false;
this.search.isCategory = false;
}, 200);
}
//Take By User ------------------------------------------------------------------------
replaceAtPosition(number,index,replacement){
number += '';//to string
......@@ -477,10 +531,10 @@ export class AdminTicketCreateComponent implements OnInit {
if(result.values != null){
this.AssigneeTeamAgentData.push({
ID: "",
Name: "No Select"
})
// this.AssigneeTeamAgentData.push({
// ID: "",
// Name: "No Select"
// })
this.AssigneeTeamAgent_ID = ""
......@@ -496,7 +550,9 @@ export class AdminTicketCreateComponent implements OnInit {
}
}
this.AssigneeTeamAgentData.sort((a: any, b: any) => a.Name.localeCompare(b.Name))
this.AssigneeTeamAgentData.unshift({ID: '', Name: "No Select"})
this.tempAgent = this.AssigneeTeamAgentData;
//this.AssigneeTeamAgent_ID = this.AssigneeTeamAgentData[0].ID
}else{
......@@ -591,7 +647,6 @@ export class AdminTicketCreateComponent implements OnInit {
})
}
}
// this.Topic_ID = this.TopicData[0].ID
// this.GettingSubTopicListAPI({ID : this.TopicData[0].ID})
......@@ -618,31 +673,32 @@ export class AdminTicketCreateComponent implements OnInit {
}
GettingSubTopicListAPI(_Request){
this.SubTopicData = [{
ID : "",
Name : "Retrieving.."
}]
// this.SubTopicData = [{
// ID : "",
// Name : "Retrieving.."
// }]
this.SubTopic_ID = ""
this._TicketService.GetSubTopic(_Request)
.subscribe((result: any) => {
if(result != null){
this.SubTopicData = []
this.SubTopicData = [];
this.tempSubTopic = [];
//console.log(JSON.stringify(result))
if(result.values != null){
this.SubTopicData.push({
ID: "",
Name: "No Select"
})
this.SubTopic_ID = ""
// this.SubTopicData.push({
// ID: "",
// Name: "No Select"
// })
// this.SubTopic_ID = ""
this.CategoryData = [{
ID: "",
Name: "No Select"
}]
this.Category_ID = ""
// this.CategoryData = [{
// ID: "",
// Name: "No Select"
// }]
// this.Category_ID = ""
for(var i=0; i < result.values.length; i++){
this.SubTopicData.push({
......@@ -650,7 +706,9 @@ export class AdminTicketCreateComponent implements OnInit {
Name: result.values[i].name
})
}
this.SubTopicData.sort((a: any, b: any) => a.Name.localeCompare(b.Name))
this.SubTopicData.unshift({ID: '', Name: "No Select"})
this.tempSubTopic = this.SubTopicData
// this.SubTopic_ID = this.SubTopicData[0].ID
// this.GettingCategoryListAPI({ID : this.SubTopicData[0].ID})
......@@ -686,15 +744,16 @@ export class AdminTicketCreateComponent implements OnInit {
this._TicketService.GetCategory(_Request)
.subscribe((result: any) => {
if(result != null){
this.CategoryData = []
this.CategoryData = [];
this.tempCategory = [];
//console.log(JSON.stringify(result))
if(result.values != null){
this.CategoryData.push({
ID: "",
Name: "No Select"
})
// this.CategoryData.push({
// ID: "",
// Name: "No Select"
// })
this.Category_ID = ""
for(var i=0; i < result.values.length; i++){
......@@ -703,7 +762,9 @@ export class AdminTicketCreateComponent implements OnInit {
Name: result.values[i].name
})
}
this.CategoryData.sort((a: any, b: any) => a.Name.localeCompare(b.Name))
this.CategoryData.unshift({ID: '', Name: "No Select"})
this.tempCategory = this.CategoryData;
// this.Category_ID = this.CategoryData[0].ID
}else{
......
src/app/admin/admin-ticket/admin-ticket-detail/admin-ticket-detail.component.css
View file @ 4abfb1fb
......@@ -11,6 +11,44 @@
text-transform: uppercase;
}
.arataka-custom-autocomplete{
border: 1px solid #cccccc;
padding: 0px;
border-radius: 5px;
margin-top: -5px;
position: absolute;
background: #ffffff !important;
z-index: 999;
width: 90%;
max-height: 260px;
overflow-y: auto;
}
.arataka-chevron-autocomplete{
position: absolute;
z-index: 999;
right: 0;
top: 0;
margin-top: 33px !important;
margin-right: 25px !important;
color: #9E9E9E;
}
.arataka-custom-autocomplete-itemlist{
font-size: 11px;
color: #222;
margin: 7px 0;
cursor: pointer;
padding: 3px 3px;
}
.arataka-custom-autocomplete-itemlist:hover{
background: #1976D2;
border-radius: 3px;
color: #ffffff;
}
.TabsCustom:hover{
color: #222;
border-bottom: 3px solid #d18b5d;
......
src/app/admin/admin-ticket/admin-ticket-detail/admin-ticket-detail.component.html
View file @ 4abfb1fb
......@@ -104,11 +104,24 @@
</div>
<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">
<input type="text" class="form-control form-control-sm" [(ngModel)]="AssigneeTeamAgent_Name"
placeholder="All Agent : Type to search" (blur)="onBlur()"
(keyup)="onSeacrhSelectAgent($event)"/>
<span class="arataka-chevron-autocomplete"></span>
<ng-container *ngFor="let data of AssigneeTeamAgentData; let i = index">
<p (click)="AssigneeTeamAgent_ID = data.ID; search.isAgent=false; AssigneeTeamAgent_Name = data.Name"
class="arataka-custom-autocomplete-itemlist"
>{{data.Name}}</p>
</ng-container>
</div>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="AssigneeTeamAgent_ID"
[disabled]="IsFormTeamAgentDisabled">
[disabled]="IsFormTeamAgentDisabled"
*ngIf="!search.isAgent"
(click)="search.isAgent = true">
<ng-container *ngFor="let AssigneeTeamAgent of AssigneeTeamAgentData; let i = index">
<option value="{{AssigneeTeamAgent.ID}}">{{AssigneeTeamAgent.Name}}</option>
</ng-container>
......@@ -144,7 +157,7 @@
class="form-control form-control-sm select-style"
[(ngModel)]="Topic_ID"
[disabled]="IsFormTeamAgentDisabled"
(change)="TopicChange()">
(change)="TopicChange(); Category_Name = ''; Category_ID = ''; SubTopic_Name= ''; SubTopic_ID = '';">
<ng-container *ngFor="let Topic of TopicData; let i = index">
<option value="{{Topic.ID}}">{{Topic.Name}}</option>
</ng-container>
......@@ -152,12 +165,25 @@
</div>
<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">
<input type="text" class="form-control form-control-sm" [(ngModel)]="SubTopic_Name"
placeholder="All Sub Topic : Type to search" (blur)="onBlur()"
(keyup)="onSeacrhSelectSubTopic($event)"/>
<span class="arataka-chevron-autocomplete"></span>
<ng-container *ngFor="let data of SubTopicData; let i = index">
<p (click)="SubTopic_ID = data.ID; search.isSubTopic=false; SubTopic_Name = data.Name; SubTopicChange(); Category_Name = ''; Category_ID = '';"
class="arataka-custom-autocomplete-itemlist"
>{{data.Name}}</p>
</ng-container>
</div>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="SubTopic_ID"
[disabled]="IsFormSubTopicDisabled"
(change)="SubTopicChange()">
(change)="SubTopicChange()"
*ngIf="!search.isSubTopic"
(click)="search.isSubTopic = true">
<ng-container *ngFor="let SubTopic of SubTopicData; let i = index">
<option value="{{SubTopic.ID}}">{{SubTopic.Name}}</option>
</ng-container>
......@@ -165,11 +191,24 @@
</div>
<div class="form-group">
<label class="text-muted">Category <span class="text-danger">*</span></label>
<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()"
(keyup)="onSeacrhSelectCategory($event)"/>
<span class="arataka-chevron-autocomplete"></span>
<ng-container *ngFor="let data of CategoryData; let i = index">
<p (click)="Category_ID = data.ID; search.isCategory=false; Category_Name = data.Name"
class="arataka-custom-autocomplete-itemlist"
>{{data.Name}}</p>
</ng-container>
</div>
<select type="text"
#inputRequired
class="form-control form-control-sm select-style"
[(ngModel)]="Category_ID"
[disabled]="IsFormCategoryDisabled">
[disabled]="IsFormCategoryDisabled"
*ngIf="!search.isCategory"
(click)="search.isCategory = true">
<ng-container *ngFor="let Category of CategoryData; let i = index">
<option value="{{Category.ID}}">{{Category.Name}}</option>
</ng-container>
......
src/app/admin/admin-ticket/admin-ticket-detail/admin-ticket-detail.component.ts
View file @ 4abfb1fb
......@@ -142,13 +142,16 @@ export class AdminTicketDetailComponent implements OnInit {
public AssigneeTeam_ID : string = ""
public AssigneeTeamAgent_ID : string = ""
public AssigneeTeamAgent_Name: string = ""
public AssigneeTeamDestionationID : string = ""
public AssigneeTeamAgentDestionationID : string = ""
public Topic_ID : string = ""
public SubTopic_ID : string = ""
public SubTopic_Name : string = ""
public Category_ID : string = ""
public Category_Name : string = ""
public Complaintment_ID : string = ""
public TicketListData = []
......@@ -229,6 +232,12 @@ export class AdminTicketDetailComponent implements OnInit {
detailBodyEmail: any = {};
search = {
isAgent: false,
isSubTopic: false,
isCategory: false
}
constructor(injector: Injector,
private router: Router,
private route: ActivatedRoute,
......@@ -358,6 +367,53 @@ export class AdminTicketDetailComponent implements OnInit {
this.SubmitAs = this.SubmitAsData[0].ID
}
private tempAgent = [];
onSeacrhSelectAgent(evt: any) {
const searchTerm = evt.srcElement.value.toLowerCase();
if (searchTerm == "") {
this.AssigneeTeamAgentData = this.tempAgent;
} else {
const cloneObj = this.tempAgent;
this.AssigneeTeamAgentData = cloneObj.filter((item) => {
return item['Name'].toLowerCase().includes(searchTerm);
})
}
}
private tempSubTopic = [];
onSeacrhSelectSubTopic(evt: any) {
const searchTerm = evt.srcElement.value.toLowerCase();
if (searchTerm == "") {
this.SubTopicData = this.tempSubTopic;
} else {
const cloneObj = this.tempSubTopic;
this.SubTopicData = cloneObj.filter((item) => {
return item['Name'].toLowerCase().includes(searchTerm);
})
}
}
private tempCategory = [];
onSeacrhSelectCategory(evt: any) {
const searchTerm = evt.srcElement.value.toLowerCase();
if (searchTerm == "") {
this.CategoryData = this.tempCategory;
} else {
const cloneObj = this.tempCategory;
this.CategoryData = cloneObj.filter((item) => {
return item['Name'].toLowerCase().includes(searchTerm);
})
}
}
onBlur() {
setTimeout(() => {
this.search.isAgent = false;
this.search.isSubTopic = false;
this.search.isCategory = false;
}, 200);
}
AssigneeTeamChange(){
if(this.AssigneeTeam_ID != ""){
this.GettingTeamAgentListAPI({ID : parseInt(this.AssigneeTeam_ID)})
......@@ -1302,6 +1358,9 @@ export class AdminTicketDetailComponent implements OnInit {
}
}
this.AssigneeTeamAgentData.sort((a: any, b: any) => a.Name.localeCompare(b.Name))
this.AssigneeTeamAgentData.unshift({ID: '', Name: 'No Select'})
this.tempAgent = this.AssigneeTeamAgentData;
this.IsFormTeamDisabled = false
this.IsFormTeamAgentDisabled = false
......@@ -1548,22 +1607,23 @@ export class AdminTicketDetailComponent implements OnInit {
this._TicketService.GetSubTopic(_Request)
.subscribe((result: any) => {
if(result != null){
this.SubTopicData = []
this.SubTopicData = [];
this.tempSubTopic = [];
//console.log(JSON.stringify(result))
if(result.values != null){
this.SubTopicData.push({
ID: "",
Name: "No Select"
})
this.SubTopic_ID = ""
// this.SubTopicData.push({
// ID: "",
// Name: "No Select"
// })
// this.SubTopic_ID = ""
this.CategoryData = [{
ID: "",
Name: "No Select"
}]
this.Category_ID = ""
// this.CategoryData = [{
// ID: "",
// Name: "No Select"
// }]
// this.Category_ID = ""
for(var i=0; i < result.values.length; i++){
this.SubTopicData.push({
......@@ -1571,6 +1631,9 @@ export class AdminTicketDetailComponent implements OnInit {
Name: result.values[i].name
})
}
this.SubTopicData.sort((a: any, b: any) => a.Name.localeCompare(b.Name))
this.SubTopicData.unshift({ID: '', Name: 'No Select'})
this.tempSubTopic = this.SubTopicData;
this.IsFormTopicDisabled = false
this.IsFormSubTopicDisabled = false
......@@ -1611,15 +1674,16 @@ export class AdminTicketDetailComponent implements OnInit {
this._TicketService.GetCategory(_Request)
.subscribe((result: any) => {
if(result != null){
this.CategoryData = []
this.CategoryData = [];
this.tempCategory = [];
//console.log(JSON.stringify(result))
if(result.values != null){
this.CategoryData.push({
ID: "",
Name: "No Select"
})
// this.CategoryData.push({
// ID: "",
// Name: "No Select"
// })
this.Category_ID = ""
for(var i=0; i < result.values.length; i++){
......@@ -1628,7 +1692,9 @@ export class AdminTicketDetailComponent implements OnInit {
Name: result.values[i].name
})
}
this.CategoryData.sort((a: any, b: any) => a.Name.localeCompare(b.Name))
this.CategoryData.unshift({ID: '', Name: 'No Select'})
this.tempCategory = this.CategoryData;
// this.Category_ID = this.CategoryData[0].ID
this.IsFormTopicDisabled = false
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment