fixing radio design

enad-Q1
enadhilal 4 years ago
parent a8d7c919a8
commit bbe151ba59

@ -1,185 +1,202 @@
<ion-header *ngIf="!messageSuccess"> <ion-header *ngIf="!messageSuccess">
<ion-toolbar> <ion-toolbar>
<!-- class="header-toolbar" <nav-buttons></nav-buttons> --> <!-- class="header-toolbar" <nav-buttons></nav-buttons> -->
<ion-title *ngIf="!isAnswer && getPassActionMode !='REQUEST_INFO' && getPassActionMode !='DELEGATE'" color="dark">{{ 'replacementRoll, title' | translate}}</ion-title> <ion-title *ngIf="!isAnswer && getPassActionMode !='REQUEST_INFO' && getPassActionMode !='DELEGATE'" color="dark">{{
<ion-title *ngIf="getPassActionMode =='REQUEST_INFO'" color="dark">{{ 'worklistMain, request' | translate}}</ion-title> '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-title *ngIf="isAnswer" color="dark">Answer</ion-title> -->
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content > <ion-content>
<div *ngIf="!messageSuccess"> <div *ngIf="!messageSuccess">
<ion-list [hidden]="isAnswer==true"> <ion-list [hidden]="isAnswer==true">
<ion-list-header> <ion-list-header>
<ion-label class="boldTxtNav">{{'replacementRoll, searchBy' | translate}}</ion-label> <ion-label class="boldTxtNav">{{'replacementRoll, searchBy' | translate}}</ion-label>
</ion-list-header> </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"> <ion-row class="top-radio-row" style="display: flex;">
<ion-col class="center"> <ion-item lines='none'>
<ion-radio mode="md" value="1" checked></ion-radio> <ion-radio mode="md" value="1" checked></ion-radio>
<ion-label class="radio-label">{{'replacementRoll, workflow' | translate}}</ion-label> <ion-label class="radio-label"><p class="textSearchType">{{'replacementRoll, workflow' | translate}}</p></ion-label>
</ion-col> </ion-item>
<ion-col> <ion-item lines='none'>
<ion-radio mode="md" value="4" ></ion-radio> <ion-radio mode="md" value="4"></ion-radio>
<ion-label class="radio-label">{{'replacementRoll, favorite' | translate}}</ion-label> <ion-label class="radio-label"><p class="textSearchType">{{'replacementRoll, favorite' | translate}}</p></ion-label>
</ion-col> </ion-item>
<ion-col> <ion-item lines='none'>
<ion-radio mode="md" value="2" ></ion-radio> <ion-radio mode="md" value="2"></ion-radio>
<ion-label class="radio-label">{{'replacementRoll, employee-id' | translate}}</ion-label> <ion-label class="radio-label"><p class="textSearchType">{{'replacementRoll, employee-id' | translate}}</p></ion-label>
</ion-col> </ion-item>
<ion-col> <ion-item lines='none'>
<ion-radio mode="md" value="3" ></ion-radio> <ion-radio mode="md" value="3"></ion-radio>
<ion-label class="radio-label">{{'replacementRoll, employee-email' | translate}}</ion-label> <ion-label class="radio-label"><p class="textSearchType">{{'replacementRoll, employee-email' | translate}}</p></ion-label>
</ion-col> </ion-item>
</ion-row> <ion-item lines='none'>
<ion-radio mode="md" value="5"></ion-radio>
<ion-label class="radio-label"><p class="textSearchType">{{'replacementRoll, employee-name' | translate}}</p></ion-label>
</ion-item>
</ion-row>
</ion-radio-group> </ion-radio-group>
<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-input class='replacmentSearchBar' (ionInput)="onChangeInput()" style="height: 45px;" class="searchbar-input sc-ion-searchbar-md" [(ngModel)]="inputSearch" [placeholder]= '"replacementRoll, searchbyname" | translate' clearInput="true"></ion-input>
</div>
<div *ngIf="isFilter">
<ion-searchbar class="filterClass" mode='md' (ionInput)="filterList($event)" placeholder="Filter"></ion-searchbar>
</div>
<div style="padding: 5px;" *ngIf="!isFilter">
</ion-list> <!-- <ion-input (ionInput)="onChangeInput()" [ngClass]="direction == 'en'? 'filterInput':'filterInput-ar'" [(ngModel)]="inputSearch" [placeholder]='getPlaceHolder()' clearInput="true"></ion-input> -->
<ion-input class='replacmentSearchBar' (ionInput)="onChangeInput()" style="height: 45px;"
class="searchbar-input sc-ion-searchbar-md" [(ngModel)]="inputSearch"
[placeholder]='"replacementRoll, searchbyname" | translate' clearInput="true"></ion-input>
<div class="noteInput" *ngIf="isAnswer==true"> </div>
<ion-label class="boldTxtNav" padding>{{"replacementRoll, question" | translate}} :
{{pQuestion}} ?</ion-label> <div *ngIf="isFilter">
<ion-label class="boldTxtNav" padding>{{"replacementRoll, answer" | translate}} <ion-searchbar class="filterClass" mode='md' (ionInput)="filterList($event)" placeholder="Filter">
</ion-label> </ion-searchbar>
</div>
<ion-item>
<ion-textarea [(ngModel)]="userNote"></ion-textarea>
</ion-item> </ion-list>
</div>
<div [hidden]="isAnswer==true" *ngIf="actionHistory.length >0 && !userSelected && ReplacementList.length==0 && searchBy != '4'"> <div class="noteInput" *ngIf="isAnswer==true">
<div class="uk-margin"> <ion-label class="boldTxtNav" padding>{{"replacementRoll, question" | translate}} :
{{'replacementRoll, related' | translate}} {{pQuestion}} ?</ion-label>
<ion-label class="boldTxtNav" padding>{{"replacementRoll, answer" | translate}}
</ion-label>
<ion-item>
<ion-textarea [(ngModel)]="userNote"></ion-textarea>
</ion-item>
</div> </div>
<div [hidden]="isAnswer==true"
*ngIf="actionHistory.length >0 && !userSelected && ReplacementList.length==0 && searchBy === '1'">
<div class="uk-margin">
{{'replacementRoll, related' | translate}}
</div>
<div class="square-container uk-padding">
<div *ngFor="let employee of actionHistory;let i=index;" class="square">
<div class="profileImageDiv">
<div class="square-container uk-padding" > <img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep"
<div *ngFor="let employee of actionHistory;let i=index;" class="square"> [src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<div class="profileImageDiv"> <img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImgeRep" src="../assets/imgs/profile.png">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep" [src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImgeRep" src="../assets/imgs/profile.png">
<ion-label class="employee-details"> <ion-label class="employee-details">
<span (click)="select(employee,i)">{{employee.NAME}}</span> <span (click)="select(employee,i)">{{employee.NAME}}</span>
</ion-label> </ion-label>
<div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'" (click)="setFavorite(employee)"> <div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'" (click)="setFavorite(employee)">
<img src="assets/imgs/fav.svg" /> <img src="assets/imgs/fav.svg" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<br/>
<div [hidden]="isAnswer==true" *ngIf="favoriteUserList.length> 0 && !userSelected && ReplacementList.length ==0 && searchBy == '4'">
<div class="uk-margin">
{{'replacementRoll, favorite' | translate}}
</div> </div>
<div class="square-container uk-padding" > <br />
<div *ngFor="let employee of favoriteUserList;let i=index;" class="square"> <div [hidden]="isAnswer==true"
<div class="profileImageDiv"> *ngIf="favoriteUserList.length> 0 && !userSelected && ReplacementList.length ==0 && searchBy == '4'">
<div class="uk-margin">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep" [src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE"> {{'replacementRoll, favorite' | translate}}
<img *ngIf="employee.EMPLOYEE_IMAGE == null || employee.EMPLOYEE_IMAGE==''" class="empImgeRep" src="../assets/imgs/profile.png"> </div>
<div class="square-container uk-padding">
<div *ngFor="let employee of favoriteUserList;let i=index;" class="square">
<div class="profileImageDiv">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep"
[src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null || employee.EMPLOYEE_IMAGE==''" class="empImgeRep"
src="../assets/imgs/profile.png">
<ion-label class="employee-details"> <ion-label class="employee-details">
<span (click)="select(employee,i)">{{employee.EMPLOYEE_DISPLAY_NAME}}</span> <span (click)="select(employee,i)">{{employee.EMPLOYEE_DISPLAY_NAME}}</span>
</ion-label> </ion-label>
<div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'"> <div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'">
<img src="assets/imgs/fav filled.svg" /> <img src="assets/imgs/fav filled.svg" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div [hidden]="isAnswer==true" *ngIf="ReplacementList.length>0 && !userSelected" class="uk-margin"> <div [hidden]="isAnswer==true" *ngIf="ReplacementList.length>0 && !userSelected" class="uk-margin">
{{'replacementRoll, search-result' | translate}} {{'replacementRoll, search-result' | translate}}
</div> </div>
<br/> <br />
<ion-item [hidden]="isAnswer==true" lines="none" *ngIf="!userSelected"> <ion-item [hidden]="isAnswer==true" lines="none" *ngIf="!userSelected">
<div class="square-container"> <div class="square-container">
<div (click)="select(employee,i)" *ngFor="let employee of ReplacementList;let i=index;" class="square"> <div (click)="select(employee,i)" *ngFor="let employee of ReplacementList;let i=index;" class="square">
<div class="profileImageDiv"> <div class="profileImageDiv">
<!-- <img class="profileImage" src="../assets/imgs/profile.png"> --> <!-- <img class="profileImage" src="../assets/imgs/profile.png"> -->
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep" [src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE"> <img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep"
<img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImgeRep" src="../assets/imgs/profile.png"> [src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<ion-label class="employee-details"> <img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImgeRep" src="../assets/imgs/profile.png">
<ion-label class="employee-details">
<span>{{employee.EMPLOYEE_DISPLAY_NAME}}</span>
<!-- <br>{{employee.USER_NAME}}<br> <span>{{employee.EMPLOYEE_DISPLAY_NAME}}</span>
<!-- <br>{{employee.USER_NAME}}<br>
{{employee.EMAIL_ADDRESS}} --> {{employee.EMAIL_ADDRESS}} -->
</ion-label> </ion-label>
<div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'"> <div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'">
<img src="assets/imgs/fav.svg" /> <img src="assets/imgs/fav.svg" />
</div> </div>
</div> </div>
</div> </div>
<!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content> <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> --> </ion-infinite-scroll> -->
</div> </div>
</ion-item> </ion-item>
</div> </div>
<div *ngIf="messageSuccess" class="succssfullMSG"> <div *ngIf="messageSuccess" class="succssfullMSG">
<ion-col size="12"> <ion-col size="12">
<ion-icon class="succssfullIcon" name="checkmark"></ion-icon> <ion-icon class="succssfullIcon" name="checkmark"></ion-icon>
<!--filled--> <!--filled-->
</ion-col> </ion-col>
<ion-col size="12"> <div style="font-size: 30px !important"> Transaction Successful </div> </ion-col> <ion-col size="12">
</div> <div style="font-size: 30px !important"> Transaction Successful </div>
</ion-col>
</div>
</ion-content> </ion-content>
<ion-footer *ngIf="!messageSuccess"> <ion-footer *ngIf="!messageSuccess">
<div class="noteInput" *ngIf="isAnswer== false && userSelected ==true"> <div class="noteInput" *ngIf="isAnswer== false && userSelected ==true">
<!-- <ion-label class="boldTxtNav" padding>{{"replacementRoll, enterNote" | translate}} <!-- <ion-label class="boldTxtNav" padding>{{"replacementRoll, enterNote" | translate}}
</ion-label> --> </ion-label> -->
<ion-item> <ion-item>
<ion-textarea [(ngModel)]="userNote" [placeholder]="'replacementRoll, enterNote' | translate"></ion-textarea> <ion-textarea [(ngModel)]="userNote" [placeholder]="'replacementRoll, enterNote' | translate"></ion-textarea>
</ion-item> </ion-item>
</div> </div>
<br/> <br />
<div class="centerDiv"> <div class="centerDiv">
<ion-button *ngIf="userSelected ==true" class="footer-button" style="background: var(--newgreen)!important;border-radius: 10px; --background: transparent; " ion-button (click)="submitAction()"> <ion-button *ngIf="userSelected ==true" class="footer-button"
style="background: var(--newgreen)!important;border-radius: 10px; --background: transparent; " ion-button
(click)="submitAction()">
{{'general, submit' | translate}}</ion-button> {{'general, submit' | translate}}</ion-button>
<ion-button class="footer-button" style="border-radius: 10px; --background: transparent; " ion-button (click)="closeModal()"> <ion-button class="footer-button" style="border-radius: 10px; --background: transparent; " ion-button
(click)="closeModal()">
{{'general, cancel' | translate}}</ion-button> {{'general, cancel' | translate}}</ion-button>
</div> </div>
</ion-footer> </ion-footer>

@ -204,4 +204,8 @@ ion-radio{
padding-bottom: 25px; padding-bottom: 25px;
padding-top: 15px; padding-top: 15px;
} }
.textSearchType{
padding-top: 8px;
font-size: 12px;
}

@ -53,7 +53,7 @@ export class WorkListReplacementRollComponent implements OnInit {
this.P_PAGE_LIMIT = 50; this.P_PAGE_LIMIT = 50;
this.getPassActionMode = this.cs.sharedService.getSharedData('passActionMode', false); this.getPassActionMode = this.cs.sharedService.getSharedData('passActionMode', false);
console.log(this.getPassActionMode); console.log(this.getPassActionMode);
// this.getFavruite(); this.getFavruite();
this.getPassNotificationDetails = this.cs.sharedService.getSharedData('passNotificationInfo', false); this.getPassNotificationDetails = this.cs.sharedService.getSharedData('passNotificationInfo', false);
this.getpassResAttr = this.cs.sharedService.getSharedData('passResAttr', false); this.getpassResAttr = this.cs.sharedService.getSharedData('passResAttr', false);
console.log(this.getpassResAttr); console.log(this.getpassResAttr);
@ -113,6 +113,14 @@ export class WorkListReplacementRollComponent implements OnInit {
this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME = ""; this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME = "";
break; break;
} }
case '5': {
this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME = this.inputSearch;
this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME = "";
this.WorkListReplacmentEmployeeObj.P_SEARCH_EMAIL_ADDRESS = "";
break;
}
default: { default: {
this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME = ""; this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME = "";
this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME = ""; this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME = "";
@ -421,10 +429,10 @@ export class WorkListReplacementRollComponent implements OnInit {
this.selectedType = 1; this.selectedType = 1;
this.listOfRealted = this.actionHistory; this.listOfRealted = this.actionHistory;
} else if(selectValue === '4'){ } else if(selectValue === '4'){
this.getFavruite(); // this.getFavruite();
this.isFilter = true; this.isFilter = true;
this.selectedType = 4; this.selectedType = 4;
} else if( selectValue === '2' || selectValue === '3'){ } else if( selectValue === '2' || selectValue === '3' || selectValue === '5'){
this.isSelect = true; this.isSelect = true;
this.isFilter = false; this.isFilter = false;
this.selectedType = 0; this.selectedType = 0;

Loading…
Cancel
Save