added new design for delegate and favourite

enad-pre-live
enadhilal 4 years ago
parent 0811ae3f22
commit 526a5cbeb5

@ -498,6 +498,7 @@ export class WorkListMainItgComponent implements OnInit {
}
if (this.actionSelected === 'Delegate') {
this.common.sharedService.setSharedData(info, 'selectedEmpInfo'),
this.common.sharedService.setSharedData('Delegate','pressedBtn')
this.presentModal(4);
}
if (this.actionSelected === 'Doable') {
@ -516,6 +517,7 @@ export class WorkListMainItgComponent implements OnInit {
this.actionService(2, this.commentText);
}
if (this.actionSelected === 'RequestInformation') {
this.common.sharedService.setSharedData('RequestInformation','pressedBtn')
this.presentModal(3);
}
if (this.actionSelected === 'ReportGenerated') {

@ -1,13 +1,12 @@
<ion-header>
<ion-toolbar>
<!-- <nav-buttons></nav-buttons> -->
<!-- <ion-toolbar>
<ion-title>{{ 'worklistMain, delegate' | translate}}</ion-title>
<ion-buttons slot="primary">
<ion-button style="background: none !important;" (click)="closePage()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-toolbar> -->
</ion-header>
<ion-content padding>
@ -60,9 +59,15 @@
</ion-radio-group> -->
<ion-list-header>
<ion-label class="boldTxtNav">{{'replacementRoll, searchBy' | translate}}</ion-label>
<!-- <ion-label class="boldTxtNav">{{'replacementRoll, searchBy' | translate}}</ion-label> -->
<ion-title class="boldTxtNav" *ngIf="!isAnswer && getPassActionMode !='RequestInformation' && getPassActionMode !='Delegate'" color="dark">{{
'replacementRoll, title' | translate}}</ion-title>
<ion-title class="boldTxtNav" *ngIf="getPassActionMode =='RequestInformation'" color="dark">{{ 'worklistMain, request' | translate}}
</ion-title>
<ion-title class="boldTxtNav" *ngIf="getPassActionMode =='Delegate'" color="dark">{{ 'worklistMain, delegate' | translate}}</ion-title>
</ion-list-header>
<ion-radio-group [(ngModel)]="searchKeySelect" (ionChange)="onChangeSelect($event)">
<!-- <ion-radio-group [(ngModel)]="searchKeySelect" (ionChange)="onChangeSelect($event)">
<ion-row class="top-radio-row" style="display: flex;">
<ion-item lines='none'>
<ion-radio mode="md" value="1" checked></ion-radio>
@ -95,19 +100,49 @@
</ion-label>
</ion-item>
</ion-row>
</ion-radio-group>
<ion-item lines="none" class="search-box" *ngIf='!isFilter && !userSelected'>
</ion-radio-group> -->
<div style="border: 1px solid lightgray; border-radius: 100px; width: 100%;">
<ion-grid style="height: 50px; padding: 1px 1px 1px 1px;">
<ion-row>
<ion-col size="7">
<div *ngIf="isFilter" style="height: 0px;">
<ion-searchbar style="padding-top: 1px;" class="filterClass" mode='md' (ionInput)="filterList($event)" placeholder="Filter">
</ion-searchbar>
</div>
<ion-input *ngIf="!isFilter" class='replacmentSearchBar' clearInput="true"
[(ngModel)]="searchKey" [placeholder]='"replacementRoll, searchbyname" | translate'>
<ion-icon style="width: 50px; height: 21px;" name="search"></ion-icon>
</ion-input>
</ion-col>
<ion-col size="5" style="display: flex;">
<div class="vl"></div>
<ion-item lines="none" style="display: flex;">
<ion-select style="min-width: 100%; height: 40px; padding-top: 5px;" [(ngModel)]="searchKeySelect" (ionChange)="onChangeSelect($event)">
<ion-select-option value="1" checked><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, workflow' | translate}}</p></ion-select-option>
<ion-select-option value="4" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, favorite' | translate}}</p></ion-select-option>
<ion-select-option value="2" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, employee-id' | translate}}</p></ion-select-option>
<ion-select-option value="3" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, employee-email' | translate}}</p></ion-select-option>
<ion-select-option value="5" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, employee-name' | translate}}</p></ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-grid>
<ion-row>
<ion-col>
<div style="text-align: end;" *ngIf='searchKey && !userSelected && !isFilter'>
<button ion-button clear class="searchText" (click)="onChangeInput()" type="button" item-right >
{{"general, search" | translate}}
</button>
</div>
</ion-col>
</ion-row>
</ion-grid>
<!-- <ion-input (ionInput)="onChangeInput()" [ngClass]="direction == 'ltr'? 'filterInput':'filterInput-ar'"
[(ngModel)]="searchKey" [placeholder]='getPlaceHolder()' clearInput="true"></ion-input> -->
<!-- <ion-input class='replacmentSearchBar'
style="height: 45px; border: 1px solid lightgray; border-radius: 50px; width: 350px;"
[(ngModel)]="searchKey"
[placeholder]='"replacementRoll, searchbyname" | translate' clearInput="true">
<ion-button (click)='onChangeInput()' style="--background: transparent; background: transparent; color: black"><ion-icon name="search"></ion-icon></ion-button>
</ion-input> -->
<!-- <ion-item lines="none" class="search-box" *ngIf='!isFilter && !userSelected'>
<ion-grid>
<ion-row style="height: 45px; border: 1px solid lightgray; border-radius: 50px;">
<ion-col size='9'>
@ -130,7 +165,7 @@
<div *ngIf="isFilter && !userSelected">
<ion-searchbar class="filterClass" mode='md' (ionInput)="filterList($event)" placeholder="Filter">
</ion-searchbar>
</div>
</div> -->
</ion-list>

@ -14,7 +14,9 @@ ion-radio {
text-align: center;
}
.boldTxtNav {
text-align: start;
font-weight: bold;
padding: 12px;
}
.employee-details {
display: inline-block;
@ -284,3 +286,13 @@ ion-radio {
border-radius: 60px;
color: white;
}
.vl {
border-left: 2px solid lightgray;
height: 36px;
}
.searchText{
background: transparent;
color: #D55D5C;
font-weight: bold;
text-decoration: underline;
}

@ -41,6 +41,7 @@ export class WorkListReplacementItgComponent implements OnInit {
arr = [];
delegtedEmp;
isFavoriteLetterActive = false;
getPassActionMode: any;
public slideOptsOne = {
slidesPerView: 6,
@ -63,7 +64,9 @@ export class WorkListReplacementItgComponent implements OnInit {
// }
ngOnInit() {
this.onChangeSelect1('1');
this.delegtedEmp = this.cs.sharedService.getSharedData('selectedEmpInfo', true);
this.getPassActionMode = this.cs.sharedService.getSharedData('pressedBtn', true);
if (this.delegtedEmp === undefined) {
if (!this.relatedList || this.relatedList.length === 0 || this.relatedList === undefined) {
this.arr = this.cs.sharedService.getSharedData('workflow-user', false);
@ -223,6 +226,31 @@ export class WorkListReplacementItgComponent implements OnInit {
}
}
onChangeSelect1(select) {
let selectValue = select;
this.searchKey = '';
if (selectValue == "1") {
this.listOfRealted = this.relatedList;
console.log(this.relatedList);
this.isSelect = true;
this.isFilter = true;
this.ReplacementList = [];
} else if (selectValue == "4") {
this.listOfFav = this.favoriteUserList;
this.isFilter = true;
this.ReplacementList = [];
// if(this.favoriteUserList.length === 0 || this.favoriteUserList === undefined){
this.getFavruite();
// }
} else if (selectValue === '2' || selectValue === '3' || selectValue === '5') {
this.isSelect = true;
this.isFilter = false;
}
else {
this.isSelect = false;
}
}
getPlaceHolder() {
return this.searchKeySelect == '1' ? this.ts.trPK('replacementRoll', 'searchbyname') : this.searchKeySelect == '2' ? this.ts.trPK('replacementRoll', 'searchbyusername') : this.ts.trPK('replacementRoll', 'searchbyemail');
}

@ -1,14 +1,12 @@
<ion-header *ngIf="!messageSuccess">
<ion-toolbar>
<!-- class="header-toolbar" <nav-buttons></nav-buttons> -->
<ion-title *ngIf="!isAnswer && getPassActionMode !='REQUEST_INFO' && getPassActionMode !='DELEGATE'" color="dark">{{
<ion-header *ngIf="!messageSuccess" no-border>
<ion-toolbar no-border>
<!-- <ion-title *ngIf="!isAnswer && getPassActionMode !='REQUEST_INFO' && getPassActionMode !='DELEGATE'" color="dark">{{
'replacementRoll, title' | translate}}</ion-title>
<ion-title *ngIf="getPassActionMode =='REQUEST_INFO'" color="dark">{{ 'worklistMain, request' | translate}}
</ion-title>
<ion-title *ngIf="getPassActionMode =='DELEGATE'" color="dark">{{ 'worklistMain, delegate' | translate}}</ion-title>
<ion-title *ngIf="getPassActionMode =='DELEGATE'" color="dark">{{ 'worklistMain, delegate' | translate}}</ion-title> -->
<!-- <ion-title *ngIf="isAnswer" color="dark">Answer</ion-title> -->
</ion-toolbar>
</ion-header>
@ -18,9 +16,15 @@
<ion-list [hidden]="isAnswer==true">
<ion-list-header>
<ion-label class="boldTxtNav">{{'replacementRoll, searchBy' | translate}}</ion-label>
<ion-title class="boldTxtNav" *ngIf="!isAnswer && getPassActionMode !='REQUEST_INFO' && getPassActionMode !='DELEGATE'" color="dark">{{
'replacementRoll, title' | translate}}</ion-title>
<ion-title class="boldTxtNav" *ngIf="getPassActionMode =='REQUEST_INFO'" color="dark">{{ 'worklistMain, request' | translate}}
</ion-title>
<ion-title class="boldTxtNav" *ngIf="getPassActionMode =='DELEGATE'" color="dark">{{ 'worklistMain, delegate' | translate}}</ion-title>
</ion-list-header>
<ion-radio-group [(ngModel)]="searchBy" (ionChange)="onChangeSelect($event)">
<!-- <ion-radio-group [(ngModel)]="searchBy" (ionChange)="onChangeSelect($event)">
<ion-row class="top-radio-row" style="display: flex;">
<ion-item lines='none'>
<ion-radio mode="md" value="1" checked></ion-radio>
@ -53,13 +57,12 @@
</ion-label>
</ion-item>
</ion-row>
</ion-radio-group>
</ion-radio-group> -->
<div style="padding: 5px;" *ngIf="!isFilter">
<!-- <div style="padding: 5px;" *ngIf="!isFilter">
<!-- <ion-input (ionInput)="onChangeInput()" [ngClass]="direction == 'en'? 'filterInput':'filterInput-ar'" [(ngModel)]="inputSearch" [placeholder]='getPlaceHolder()' clearInput="true"></ion-input> -->
<ion-grid>
<ion-row style="height: 45px; border: 1px solid lightgray; border-radius: 50px;">
<ion-col size='9'>
@ -80,12 +83,50 @@
<div *ngIf="isFilter">
<ion-searchbar class="filterClass" mode='md' (ionInput)="filterList($event)" placeholder="Filter">
</ion-searchbar>
</div> -->
<div style="border: 1px solid lightgray; border-radius: 100px; width: 100%;">
<ion-grid style="height: 50px; padding: 1px 1px 1px 1px;">
<ion-row>
<ion-col size="7">
<div *ngIf="isFilter" style="height: 0px;">
<ion-searchbar style="padding-top: 1px;" class="filterClass" mode='md' (ionInput)="filterList($event)" placeholder="Filter">
</ion-searchbar>
</div>
<ion-input *ngIf="!isFilter" class='replacmentSearchBar' clearInput="true"
[(ngModel)]="inputSearch" [placeholder]='"replacementRoll, searchbyname" | translate'>
<ion-icon style="width: 50px; height: 21px;" name="search"></ion-icon>
</ion-input>
</ion-col>
<ion-col size="5" style="display: flex;">
<div class="vl"></div>
<ion-item lines="none" style="display: flex;">
<ion-select style="min-width: 100%; height: 40px; padding-top: 5px;" [(ngModel)]="searchBy" (ionChange)="onChangeSelect($event)">
<ion-select-option value="1" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, workflow' | translate}}</p></ion-select-option>
<ion-select-option value="4" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, favorite' | translate}}</p></ion-select-option>
<ion-select-option value="2" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, employee-id' | translate}}</p></ion-select-option>
<ion-select-option value="3" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, employee-email' | translate}}</p></ion-select-option>
<ion-select-option value="5" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, employee-name' | translate}}</p></ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-grid>
<ion-row>
<ion-col>
<div style="text-align: end;" *ngIf='inputSearch && !userSelected && !isFilter'>
<button ion-button clear class="searchText" (click)="onChangeInput()" type="button" item-right >
{{"general, search" | translate}}
</button>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
<div style="font-weight: bold;" *ngIf="searchBy === '4' && !isFavoriteLetterActive">
<div style="font-weight: bold;" *ngIf="searchBy === '4' && !isFavoriteLetterActive && !userSelected">
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of favLetter; let i=index">
<div>
@ -95,7 +136,7 @@
</ion-slides>
</div>
<div style="font-weight: bold;" *ngIf="searchBy === '4' && isFavoriteLetterActive">
<div style="font-weight: bold;" *ngIf="searchBy === '4' && isFavoriteLetterActive && !userSelected">
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of favLetter; let i=index">
<div [ngClass]="returnIsActiveFunction(i)? 'isFavLetterActive':''">

@ -158,8 +158,9 @@ ion-radio {
padding: 5px;
}
.boldTxtNav {
text-align: start;
font-weight: bold;
padding: 5px;
padding: 12px;
}
.employee-details {
display: inline-block;
@ -212,3 +213,23 @@ ion-radio {
border-radius: 60px;
color: white;
}
.vl {
border-left: 2px solid lightgray;
height: 36px;
}
.clearText{
background: transparent;
color: #D55D5C;
font-weight: bold;
text-decoration: underline;
}
.searchText{
background: transparent;
color: #D55D5C;
font-weight: bold;
text-decoration: underline;
}
.filterClass input{
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

@ -673,4 +673,8 @@ selectedLetter(el) {
returnIsActiveFunction(i) {
return this.favIsActive[i];
}
clearSearchInput(){
this.inputSearch = '';
}
}

@ -1630,4 +1630,9 @@ ion-segment-button {
.disabledField{
opacity: .5;
pointer-events: none;
}
}
.filterClass input{
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
Loading…
Cancel
Save