Merge branch 'mohemm-issues-18-jan' into mohemm-issues-jan-31

mohemm-issues-jan-31
umasoodch 5 years ago
commit 88e3796bc3

@ -90,13 +90,15 @@
</div>
</div>
</div>
<div class="no-data-available" *ngIf="showFormattedData.length === 0 && selectedFilter != 'ITG'">
<span>{{ts.trPK('work-list','No-data-available')}}</span>
<div *ngIf="!isLoading">
<div class="no-data-available" *ngIf="showFormattedData.length === 0 && selectedFilter != 'ITG'">
<span>{{ts.trPK('work-list','No-data-available')}}</span>
</div>
<div class="no-data-available" *ngIf="ITGItem.length === 0 && selectedFilter == 'ITG'">
<span>{{ts.trPK('work-list','No-data-available')}}</span>
</div>
</div>
<div class="no-data-available" *ngIf="ITGItem.length === 0 && selectedFilter == 'ITG'">
<span>{{ts.trPK('work-list','No-data-available')}}</span>
</div>
</div>
<!-- </div> -->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="selectedFilter === 'ALL' || itemType !== ''">

@ -355,17 +355,18 @@ z-index: 99;
ion-col{
background: white;
border-radius: 12px;
padding-right: 10px;
padding-right: 30px;
flex: none;
ion-icon{
margin-right: 3px;
font-size: 14px;
font-size: 20px;
margin-left: 3px;
vertical-align: middle;
}
span{
font-size: 12px;
font-size: 14px;
vertical-align: middle;
margin: 5px;
}
}
}
@ -439,21 +440,23 @@ font-size: 15px;
font-size: 12px;
color: #888;
background-color: white;
width: 93%;
height: 30px;
width: auto;
height: 40px;
border: 1px solid;
border-radius: 15px;
border-radius: 30px;
padding: 10px 30px;
}
.text-span-active{
font-size: 12px;
color: #888;
color:white;
background-color:#269DB8;
width: 93%;
height: 30px;
width: auto;
height: 40px;
border: 1px solid;
border-radius: 15px;
border-radius: 30px;
padding: 10px 30px;
}
.slideCss{
width: 200px !important;
width: auto !important;
}

@ -29,6 +29,7 @@ export class HomeComponent implements OnInit {
private WorkListObj: WorkListRequest;
WorkListResObj: any;
notificationType = '1';
public isLoading: boolean;
pageNum = 1;
rowsNo: number;
noOfrows: number;
@ -176,6 +177,7 @@ export class HomeComponent implements OnInit {
ngOnInit() {
this.common.startLoading();
this.isLoading = true;
}
ionViewWillEnter() {
@ -185,6 +187,7 @@ export class HomeComponent implements OnInit {
this.receivedITGCount = false;
this.showChart = false;
this.common.startLoading();
this.isLoading = true;
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
@ -241,6 +244,7 @@ export class HomeComponent implements OnInit {
// this.data.datasets[0].data[4] = this.ITGCount;
this.showChart = true;
this.common.stopLoading();
this.isLoading = false;
}
activeFilter(index: number) {
@ -292,6 +296,7 @@ export class HomeComponent implements OnInit {
if (result.data) {
if (result.data.notificationType !== '' || result.data.selectedValue !== '' || result.data.itemType !== '') {
this.common.startLoading();
this.isLoading = true;
this.showSearchButton = true;
this.itemType = result.data.itemType;
this.notificationType = result.data.notificationType;
@ -460,6 +465,7 @@ export class HomeComponent implements OnInit {
this.data.datasets[0].data[4] = this.ITGCount;
this.showChart = true;
this.common.stopLoading();
this.isLoading =false;
}
}
@ -501,6 +507,7 @@ export class HomeComponent implements OnInit {
clearSearch() {
this.common.startLoading();
this.isLoading = true;
this.itemType = '';
this.selectedFilter = 'ALL';
this.isPostNoLoad = true;
@ -612,6 +619,7 @@ export class HomeComponent implements OnInit {
let count = 0;
let ITEM: any;
let NAME: any;
console.log(this.ITGSegment)
for (let i = 1; i < this.ITGSegment.length; i++) {
// tslint:disable-next-line: prefer-for-of
for (let j = 0; j < this.ITGSegment[i].data.length; j++) {

@ -1,97 +1,192 @@
<app-generic-header
showBack="true"
backLink="/notification/homepage"
[headerText]="'worklistMain,title' | translate">
<app-generic-header showBack="true" backLink="/notification/homepage" [headerText]="'worklistMain,title' | translate">
</app-generic-header>
<ion-content class="colorBG">
<ion-segment mode="md" color="secondary" (ionChange)="segmentChangedClick($event)"
[value]="defaultSegment" class="ion-segment-all">
<ion-segment mode="md" color="secondary" (ionChange)="segmentChangedClick($event)" [value]="defaultSegment"
class="ion-segment-all">
<ion-segment-button value="{{segmentVal.name}}"
[ngClass]="activeSegment == segmentVal.name ? 'active-Segment' : 'normal-Segment'"
*ngFor="let segmentVal of segmentsArray">
{{segmentVal.name}}
<p style="font-size: 11px;">{{segmentVal.name}}</p>
</ion-segment-button>
</ion-segment>
<ion-card class="cardContent" *ngFor='let segmentContant of segmentData'>
<ion-card-content *ngIf='activeSegment === segmentContant.name'>
<ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
<ion-row>
<ion-col>
<label class="colItemReq"> {{dataContant.Title}}</label>
<br />
<label *ngIf="dataContant.Value && dataContant.Type != 'table'">{{dataContant.Value}}</label>
<div *ngIf="dataContant.MultipleValue && dataContant.Type == 'list'">
<label *ngFor="let data of dataContant.MultipleValue">{{data}}<br/></label>
</div>
<div *ngIf="dataContant.Value && dataContant.Type =='table'">
<ion-card class="cardContent">
<ion-card-content>
<div *ngFor="let multiData of dataLabelAndValue">
<div *ngFor="let dataAll of multiData">
<div *ngFor="let dataLabel of dataAll">
<label class="colItemReq">{{dataLabel.label}}
<br/></label>
<div *ngIf="dataLabel.isTable =='false'">
<label *ngIf="dataLabel.textvalue">{{dataLabel.textvalue}}
<br/></label>
<label *ngIf="dataLabel.textvalue==''">none
<br/></label>
<br/>
<!-- <ion-slides #slides pager="false" (ionSlideDidChange)="slideChanged($event)">
<ion-slide>
<p>SLide 1</p>
</ion-slide>
<ion-slide>
<p>SLide 2</p>
</ion-slide>
<ion-slide>
<p>SLide 3</p>
</ion-slide>
</ion-slides> -->
<ion-slides #slides (ionSlideDidChange)="slideChanged($event)">
<ion-slide *ngFor='let segmentContant of segmentData'>
<ion-card class="cardContent" *ngIf='activeSegment === segmentContant.name' style="width: 100%;">
<ion-card-content>
<ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
<ion-row>
<ion-col>
<label class="colItemReq"> {{dataContant.Title}}</label>
<br />
<label *ngIf="dataContant.Value && dataContant.Type != 'table'">{{dataContant.Value}}</label>
<div *ngIf="dataContant.MultipleValue && dataContant.Type == 'list'">
<label *ngFor="let data of dataContant.MultipleValue">{{data}}<br /></label>
</div>
<div *ngIf="dataContant.Value && dataContant.Type =='table'">
<ion-card class="cardContent">
<ion-card-content>
<div *ngFor="let multiData of dataLabelAndValue">
<div *ngFor="let dataAll of multiData">
<div *ngFor="let dataLabel of dataAll">
<label class="colItemReq">{{dataLabel.label}}
<br /></label>
<div *ngIf="dataLabel.isTable =='false'">
<label *ngIf="dataLabel.textvalue">{{dataLabel.textvalue}}
<br /></label>
<label *ngIf="dataLabel.textvalue==''">none
<br /></label>
<br />
</div>
<div *ngIf="dataLabel.isTable == 'true'">
<div *ngFor="let subData of dataLabel.textvalue">
<div>
<label style="font-weight: bold;">{{subData.label}}
<br /></label>
<label>{{subData.textvalue}}
<br /></label>
<br />
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="dataLabel.isTable == 'true'">
<div *ngFor="let subData of dataLabel.textvalue">
<div>
<label style="font-weight: bold;">{{subData.label}}
<br/></label>
<label >{{subData.textvalue}}
<br/></label>
<br/>
</ion-card-content>
</ion-card>
</div>
</ion-col>
</ion-row>
<ion-row *ngIf='dataContant.TableValue'>
<ion-col style="border: 1px solid gainsboro; border-radius: 15px; padding-left: 20px;">
<label class="colItemReq" *ngFor="let header of dataContant.TableValue.Header"><br /> {{header}}</label>
<br />
<label *ngFor="let rows of dataContant.TableValue.Rows"><br />{{rows}}</label>
<label *ngIf="dataContant.TableValue.Rows"><br />none</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card class="cardContent" *ngIf='activeSegment === "Approval Level"'>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col>
<ion-list class="notification-list" style="margin-left: -30px;" *ngFor="let approvalInfo of workList">
<div class="timeline">
<ion-item>
<div class="timeline-item" slot="start">
<div>
<button ion-button style=" background: none;width: 60%;">
<img src="../assets/imgs/noteSmall.png">
</button>
<div
[ngClass]="{'bg-blue-dot' : approvalInfo.Action === 'Submit', 'bg-green-dot':approvalInfo.Action === 'Approved', 'bg-red-dot':approvalInfo.Action === 'Rejected', 'bg-gray-dot':approvalInfo.Action === 'Pending'}"
[class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'"
[ngClass]="{'bg-gray-dot' : approvalInfo.Action === ''}">
</div>
<p style="margin-left: -0%; font-size: 12px !important; width: 66px;">{{approvalInfo.Action}}</p>
</div>
</div>
<div>
<p style="margin-left: 10%; font-weight: bold;">{{approvalInfo.Name}}</p>
<div *ngIf="approvalInfo.Notes">
<p style="margin-left: 10%;">{{ 'submitAbsence, comments' | translate}}:</p>
<p style="margin-left: 10%;">{{approvalInfo.Notes}}</p>
</div>
</div>
</ion-item>
</div>
</div>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
<!-- <div *ngFor='let segmentContant of segmentData'>
<ion-card class="cardContent" *ngIf='activeSegment === segmentContant.name'>
<ion-card-content>
<ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
<ion-row>
<ion-col>
<label class="colItemReq"> {{dataContant.Title}}</label>
<br />
<label *ngIf="dataContant.Value && dataContant.Type != 'table'">{{dataContant.Value}}</label>
<div *ngIf="dataContant.MultipleValue && dataContant.Type == 'list'">
<label *ngFor="let data of dataContant.MultipleValue">{{data}}<br /></label>
</div>
</ion-card-content>
</ion-card>
</div>
</ion-col>
</ion-row>
<ion-row *ngIf='dataContant.TableValue'>
<ion-col style="border: 1px solid gainsboro; border-radius: 15px; padding-left: 20px;">
<label class="colItemReq" *ngFor="let header of dataContant.TableValue.Header"><br /> {{header}}</label>
<br />
<label *ngFor="let rows of dataContant.TableValue.Rows"><br />{{rows}}</label>
<label *ngIf="dataContant.TableValue.Rows"><br />none</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<!-- if there is additional screen like in VIDA -->
<!-- <ng-container>
<ion-card class="cardContent" *ngFor='let segmentContant of segmentDataTable'>
<ion-card-content *ngIf='activeSegment === segmentContant.name'>
<ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
<ion-row *ngFor="let headerData of dataContant.Header">
<ion-col>
<label class="colItemReq"> {{headerData}}</label>
<br />
<label>{{headerData}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ng-container> -->
<!-- END -->
<div *ngIf="dataContant.Value && dataContant.Type =='table'">
<ion-card class="cardContent">
<ion-card-content>
<div *ngFor="let multiData of dataLabelAndValue">
<div *ngFor="let dataAll of multiData">
<div *ngFor="let dataLabel of dataAll">
<label class="colItemReq">{{dataLabel.label}}
<br /></label>
<div *ngIf="dataLabel.isTable =='false'">
<label *ngIf="dataLabel.textvalue">{{dataLabel.textvalue}}
<br /></label>
<label *ngIf="dataLabel.textvalue==''">none
<br /></label>
<br />
</div>
<div *ngIf="dataLabel.isTable == 'true'">
<div *ngFor="let subData of dataLabel.textvalue">
<div>
<label style="font-weight: bold;">{{subData.label}}
<br /></label>
<label>{{subData.textvalue}}
<br /></label>
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</ion-card-content>
</ion-card>
</div>
</ion-col>
</ion-row>
<ion-row *ngIf='dataContant.TableValue'>
<ion-col style="border: 1px solid gainsboro; border-radius: 15px; padding-left: 20px;">
<label class="colItemReq" *ngFor="let header of dataContant.TableValue.Header"><br /> {{header}}</label>
<br />
<label *ngFor="let rows of dataContant.TableValue.Rows"><br />{{rows}}</label>
<label *ngIf="dataContant.TableValue.Rows"><br />none</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
<ion-card class="cardContent" *ngIf='activeSegment === "Approval Level"'>
<ion-card-content>
@ -107,7 +202,7 @@
<button ion-button style=" background: none;width: 60%;">
<img src="../assets/imgs/noteSmall.png">
</button>
<div
[ngClass]="{'bg-blue-dot' : approvalInfo.Action === 'Submit', 'bg-green-dot':approvalInfo.Action === 'Approved', 'bg-red-dot':approvalInfo.Action === 'Rejected', 'bg-gray-dot':approvalInfo.Action === 'Pending'}"
[class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'"
@ -132,36 +227,56 @@
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-card> -->
<ion-card class="cardContent">
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col>
<ion-label>
<h2 class="boldTxtNav">Comment</h2>
</ion-label>
<ion-input type='text' [(ngModel)]='commentText'></ion-input>
<ion-item *ngFor="let object of grantInfo">
<ion-label>{{object.Label}}</ion-label>
<ion-select *ngIf="!object.ConditionalFieldName" [(ngModel)]='ExchangeServerSelected'
(ionChange)="filterGrantDB(ExchangeServerSelected,object, object.FieldName)" id='{{object.FieldName}}'>
<ion-select-option value="{{value}}" *ngFor="let value of object.Value">
{{value}}</ion-select-option>
</ion-select>
<ion-select *ngIf="object.ConditionalFieldName" [(ngModel)]='ExchangeServerDBSelected'
(ionChange)="filterGrantDB(ExchangeServerDBSelected,object)" id='{{object.FieldName}}'>
<ion-select-option value="{{value}}" *ngFor="let value of filteredGrantFieldsConditionalValue">
{{value}}</ion-select-option>
</ion-select>
</ion-item>
<ion-label>
<h2 class="boldTxtNav">Comment</h2>
</ion-label>
<ion-input type='text' [(ngModel)]='commentText'></ion-input>
<ion-item *ngFor="let object of grantInfo">
<ion-label>{{object.Label}}</ion-label>
<ion-select *ngIf="!object.ConditionalFieldName" [(ngModel)]='ExchangeServerSelected'
(ionChange)="filterGrantDB(ExchangeServerSelected,object, object.FieldName)" id='{{object.FieldName}}'>
<ion-select-option value="{{value}}" *ngFor="let value of object.Value">
{{value}}</ion-select-option>
</ion-select>
<ion-select *ngIf="object.ConditionalFieldName" [(ngModel)]='ExchangeServerDBSelected'
(ionChange)="filterGrantDB(ExchangeServerDBSelected,object)" id='{{object.FieldName}}'>
<ion-select-option value="{{value}}" *ngFor="let value of filteredGrantFieldsConditionalValue">
{{value}}</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<!-- if there is additional screen like in VIDA -->
<!-- <ng-container>
<ion-card class="cardContent" *ngFor='let segmentContant of segmentDataTable'>
<ion-card-content *ngIf='activeSegment === segmentContant.name'>
<ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
<ion-row *ngFor="let headerData of dataContant.Header">
<ion-col>
<label class="colItemReq"> {{headerData}}</label>
<br />
<label>{{headerData}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ng-container> -->
<!-- END -->
</ion-content>

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { HomeComponent } from '../home/home.component';
@ -7,7 +7,7 @@ import { itgRequest } from '../models/itgFormDetailsRequest';
import { ModalController } from '@ionic/angular';
import { WorkListReplacementRollComponent } from '../work-list-replacement-roll/work-list-replacement-roll.component';
import { WorkListReplacementItgComponent } from '../work-list-replacement-itg/work-list-replacement-itg.component';
import { IonSlides } from '@ionic/angular';
@Component({
selector: 'app-work-list-main-itg',
@ -15,6 +15,7 @@ import { WorkListReplacementItgComponent } from '../work-list-replacement-itg/wo
styleUrls: ['./work-list-main-itg.component.scss'],
})
export class WorkListMainItgComponent implements OnInit {
@ViewChild('slides') slides: IonSlides;
public static APPROVAL = "Services/COCWS.svc/REST/ITGApproveRequest"
public static REJECT = 'Services/COCWS.svc/REST/ITGRejectRequest'
@ -56,6 +57,7 @@ export class WorkListMainItgComponent implements OnInit {
index2: number;
direction: string;
defaultSegment = '';
public slideIndex = 0;
constructor(
public common: CommonService,
public ts: TranslatorService,
@ -84,6 +86,8 @@ export class WorkListMainItgComponent implements OnInit {
this.request.Comments = this.request_info.Comments;
this.request.NewUserEMPId = this.request_info.NewUserEMPId;
this.workListService.getITGFormDetails(this.request).subscribe((result: any) => {
console.log(this.request);
console.log(result);
this.request_details = result.ITGRequest;
this.grantInfo = result.ITGRequest.GrantFields;
let count =0;
@ -160,10 +164,22 @@ export class WorkListMainItgComponent implements OnInit {
}
public segmentChangedClick(event: any) {
this.activeSegment = event.detail.value;
for(let i=0; i< this.segmentsArray.length; i++){
if(this.segmentsArray[i].name === event.detail.value){
this.slides.slideTo(i);
this.activeSegment = event.detail.value;
}
}
}
slideChanged() {
this.slides.getActiveIndex().then(index => {
this.activeSegment = this.segmentsArray[index].name;
});
}
skip() {
//check if the user clicked on all type of request
if (this.is_all_items_sents) {
for (let i = 1; i < this.all_request_names.length; i++) {
for (let j = 0; j < this.all_request_names[i].data.length; j++) {
@ -187,24 +203,37 @@ export class WorkListMainItgComponent implements OnInit {
}
}
}
} else {
}
//if user clicked on spicific type of ITG request
else {
console.log(this.all_request);
for (let i = 0; i < this.all_request.length; i++) { // search for the request that clicked on all request
console.log("IF statment check the IDs:");
console.log(this.request_info.ID);
console.log(this.all_request[i].ID);
if (this.request_info.ID == this.all_request[i].ID) { // check if the ID for the request is found.
this.index = i + 1;
console.log("value of i: "+i);
console.log("value of index: "+this.index);
if (this.index !== this.all_request.length) { // check if its last one to redirecte to home otherwise to next request.
this.clearDataArray();
console.log(this.all_request[this.index]);
console.log(this.request_name)
this.changeITGForm(this.all_request[this.index], this.request_name);
break;
return;
} else {
console.log("no 1");
this.common.sharedService.setSharedData(true, 'loadWorkList');
this.common.openNotificationPage();
break;
return;
}
} else {
this.common.sharedService.setSharedData(true, 'loadWorkList');
this.common.openNotificationPage();
break;
}
}
// else {
// console.log("no 2");
// this.common.sharedService.setSharedData(true, 'loadWorkList');
// this.common.openNotificationPage();
// return;
// }
}
}
}
@ -468,5 +497,4 @@ export class WorkListMainItgComponent implements OnInit {
}
}
}

@ -1,471 +1,400 @@
<app-generic-header
*ngIf="!messageSuccess"
showBack="true"
backLink="/notification/homepage"
[headerText]="'worklistMain,title' | translate">
<app-generic-header *ngIf="!messageSuccess" showBack="true" backLink="/notification/homepage"
[headerText]="'worklistMain,title' | translate">
</app-generic-header>
<ion-content class="colorBG">
<div *ngIf="!messageSuccess">
<!-- add segemnt part -->
<div class="subjectNotification">{{getPassNotificationDetails.SUBJECT}}</div>
<ion-segment mode="md" color="secondary" (ionChange)="segmentChanged($event)"
[value]="defaultSegment" class="ion-segment-all">
<ion-content class="colorBG">
<div *ngIf="!messageSuccess">
<!-- add segemnt part -->
<div class="subjectNotification">{{getPassNotificationDetails.SUBJECT}}</div>
<ion-segment mode="md" color="secondary" (ionChange)="segmentChanged($event)" [value]="defaultSegment"
class="ion-segment-all">
<ion-segment-button value="item-req"
[ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, details-emp'| translate}}</ion-label>
<ion-segment-button value="item-req"
[ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, details-emp'| translate}}</ion-label>
</ion-segment-button>
<ion-segment-button value="action-history"
[ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, action' | translate}}</ion-label>
</ion-segment-button>
</ion-segment-button>
<ion-segment-button value="action-history"
[ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, action' | translate}}</ion-label>
</ion-segment-button>
<ion-segment-button value="attach" [ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, attach-file' | translate}}</ion-label>
<ion-segment-button value="attach"
[ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, attach-file' | translate}}</ion-label>
</ion-segment-button>
<ion-segment-button value="info" [ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, info'| translate}} </ion-label>
</ion-segment-button>
</ion-segment>
</ion-segment-button>
<ion-segment-button value="info" [ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, info'| translate}} </ion-label>
</ion-segment-button>
</ion-segment>
<ng-container *ngIf="activeSegment === 'info'">
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
<div *ngIf="notificationBodyRes?.length > 0 ">
<ion-card *ngFor="let item of notificationBodyRes;let i=index; ">
<!-- <ion-card-header class="boxHdr">
<div class="hrTitle"> {{'worklistMain, notfDetails' | translate}}</div>
</ion-card-header> -->
<ion-card-content>
<div>
<ion-row class="" *ngIf=" item.Collection_Notification.DISPLAY_FLAG != 'N' ">
<ion-col class="rowBorder" *ngFor="let notificationBody of item.Collection_Notification;"
size="6" [hidden]="notificationBody.DISPLAY_FLAG == 'N'" >
<label class="colItemReq" for="">{{notificationBody.SEGMENT_PROMPT}}</label>
<!-- </ion-col>
<ion-col col-7> -->
<br />
<label for="">{{notificationBody.SEGMENT_VALUE_DSP}}</label>
</ion-col>
</ion-row>
</div>
</ion-card-content>
</ion-card>
</div>
<div style="margin: 10px;font-weight: bold; " *ngIf="subordinatesleaveList != undefined && subordinatesleaveList?.length > 0">
{{ts.trPK('worklistMain','employee-on-leave')}} </div>
<ion-item lines="none"
[ngClass]=" direction === 'en' ? 'subOrdinateList' :'subOrdinateList-Ar' "
*ngFor="let List of subordinatesleaveList;">
<ion-grid
[ngClass]=" direction === 'en' ? 'gridSubordinates' :'gridSubordinates-Ar' ">
<div
[ngClass]=" direction === 'en' ? 'subOrdinateDiv' :'subOrdinateDiv-Ar' ">
<!-- <img class="subOrdinateImg" src="../assets/imgs/profile.png"> -->
<img *ngIf="List.EMPLOYEE_IMAGE" class="empImgeSub"
[src]="'data:image/png;base64,'+List.EMPLOYEE_IMAGE">
<img *ngIf="List.EMPLOYEE_IMAGE == null"
class="empImgeSub" src="../assets/imgs/profile.png">
</div>
<ion-row class="rowHeader "
[ngClass]=" direction === 'en' ? 'subOrdinateRow' :'subOrdinateRow-Ar' "
>
<ion-col size="9">
<label style="font-weight: bold; " class="label" for="">{{List.EMPLOYEE_NAME}} </label>
<br />
<label class="label" for="">{{List.POSITION_TITLE}} </label><br />
</ion-col>
<ion-col class="status" size="3">
<label class="label" style="font-size: 11px;" for="label">{{List.STATUS}}</label>
</ion-col>
</ion-row>
<br />
<ion-row [ngClass]=" direction === 'en' ? 'subOrdinateRow' :'subOrdinateRow-Ar'">
<ion-col>
<label class="label" for=""> {{ts.trPK('worklistMain','from')}}</label><br />
<label class="label" for="">{{List.DATE_START |date}}</label>
</ion-col>
<ion-col>
<label class="label" for="">{{ts.trPK('worklistMain','to')}}</label><br />
<label class="label" for="">{{List.DATE_END | date}}</label>
</ion-col>
</ion-row>
</ion-grid>
<!-- </ion-col> -->
</ion-item>
<!-- </ion-card-content>
</ion-card> -->
</ng-container>
<ng-container *ngIf="activeSegment === 'item-req'">
<ion-card class="cardContent">
<!-- <ion-card-header class="boxHdr">
<div class="hrTitle"> {{ts.trPK('worklistMain','info')}} </div>
</ion-card-header> -->
<ion-card-content>
<div>
<ion-grid style="text-align: left">
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.FROM_USER}}</label>
</ion-col>
<!-- </ion-row>
<ion-row> -->
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for=""> {{getPassNotificationDetails.TO_USER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
</ion-col>
<!-- </ion-row>
<ion-row> -->
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<ion-row class="">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
</ion-col>
<!-- </ion-row>
<ion-row *ngIf=" getPassNotificationDetails.RESPONDER != '' "> -->
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.RESPONDER}} </label>
</ion-col>
</ion-row>
<!-- <ion-row class="">
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','subject')}} </label>
</ion-col>
<ion-col>
<br/>
<label for="">{{getPassNotificationDetails.SUBJECT}} </label>
</ion-col>
</ion-row> -->
<!-- <ion-row>
<ion-col class="greenTxt" col-4>
<button ion-button block class="notColBtn" (click)="openNotificationBody()">
<p>{{ts.trPK('worklistMain','notfDetails')}} </p>
<ion-img class="serviceItemImg" src="../assets/imgs/details.png"></ion-img>
</button>
</ion-col>
<ion-col class="greenTxt" col-4>
<button ion-button block class="notColBtn" (click)="openActionHistory()">
<p>{{ts.trPK('worklistMain','actionHis')}}</p>
<ion-img class="serviceItemImg" src="../assets/imgs/actionHistory.png"></ion-img>
</button>
</ion-col>
<ion-col class="greenTxt" col-4>
<button ion-button block class="notColBtn" (click)="openSupportDocuments()">
<p>{{ts.trPK('worklistMain','suppDoc')}}</p>
<ion-img class="serviceItemImg" src="../assets/imgs/documents.png"></ion-img>
</button>
</ion-col>
</ion-row> -->
</ion-grid>
</div>
</ion-card-content>
</ion-card>
<div *ngIf="submitterInfoRes?.length > 0 ">
<ion-card>
<!-- <ion-card-header class="boxHdr">
<div class="hrTitle"> {{'general, info' | translate}}</div>
</ion-card-header> -->
<ion-card-content>
<div style="font-weight: bold;" class="hrTitle"> {{'userProfile, emp-detail' | translate}}</div>
<div *ngFor="let submitterInfo of submitterInfoRes">
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, empNo' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NUMBER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, name' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, job-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.POSITION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, grade' | translate}}</label>
<br />
<label for="">{{submitterInfo.GRADE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, job_cate' | translate}}</label>
<br />
<label for="">{{submitterInfo.JOB_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, category' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYMENT_CATEGORY_MEANING}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, emp-email' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, org-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.ORGANIZATION_NAME}}</label>
</ion-col>
</ion-row>
<!-- <ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, busG' | translate}}</label>
<br />
<label for="">{{submitterInfo.BUSINESS_GROUP_NAME}}</label>
</ion-col>
</ion-row> -->
<ion-row class="rowBorder submitterInfo">
<ion-slides #slides (ionSlideDidChange)="slideChanged($event)">
<ion-slide>
<ng-container *ngIf="activeSegment === 'item-req'">
<ion-grid>
<ion-row>
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, loc-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.LOCATION_NAME}}</label>
<ion-card class="cardContent">
<ion-card-content>
<div>
<ion-grid style="text-align: left">
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.FROM_USER}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
</label>
<br />
<label for=""> {{getPassNotificationDetails.TO_USER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<ion-row class="">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.RESPONDER}} </label>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, branch-payrol' | translate}}</label>
<br />
<ion-card *ngIf="submitterInfoRes?.length > 0 ">
<label for="">{{submitterInfo.PAYROLL_NAME}}</label>
<ion-card-content [ngClass] = " direction === 'en' ? 'cardAlignTextEn' : 'cardAlignTextAr'">
<div style="font-weight: bold;" class="hrTitle">
{{'userProfile, emp-detail' | translate}}</div>
<div *ngFor="let submitterInfo of submitterInfoRes">
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'userProfile, empNo' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NUMBER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, name' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, job-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.POSITION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'userProfile, grade' | translate}}</label>
<br />
<label for="">{{submitterInfo.GRADE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, job_cate' | translate}}</label>
<br />
<label for="">{{submitterInfo.JOB_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, category' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYMENT_CATEGORY_MEANING}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, emp-email' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, org-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.ORGANIZATION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, loc-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.LOCATION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, branch-payrol' | translate}}</label>
<br />
<label for="">{{submitterInfo.PAYROLL_NAME}}</label>
</ion-col>
</ion-row>
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</div>
</ion-card-content>
</ion-grid>
</ion-card>
</div>
</ng-container>
<ng-container *ngIf="activeSegment === 'action-history'">
<ion-card class="cardContent">
<ion-card-content>
<div class="noDataDiv" [hidden]="actionHistoryRes && actionHistoryRes.length > 0">
<p>{{ 'general, empty' | translate}}</p>
</div>
<div *ngIf="actionHistoryRes && actionHistoryRes.length > 0 ">
<ion-list class="notification-list ">
<div class="timeline">
<ion-item *ngFor="let actionHistory of actionHistoryRes">
<div class="timeline-item" slot="start">
<div [class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE" class="empImge"
[src]="'data:image/png;base64,'+actionHistory.EMPLOYEE_IMAGE">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE == null" class="empImge"
src="../assets/imgs/profile.png"> </div>
</div>
<ion-col>
<ion-label style="color:black !important ;font-weight: bold;">
{{actionHistory.NAME}}
</ion-label>
<div *ngIf="actionHistory.NOTE != '' ">
<div *ngIf="!checkLines(actionHistory.NOTE)">
<div class="containerNote">
Note: {{actionHistory.NOTE}}
</div>
</div>
<div *ngIf="checkLines(actionHistory.NOTE)">
</ng-container>
</ion-slide>
<ion-slide>
<ng-container *ngIf="activeSegment === 'action-history'">
<div class="containerNote" [ngClass]="actionHistory.visible ? 'show' : '' ">
Note: {{actionHistory.NOTE}}
<ion-card class="cardContent" style="width: 100%;">
<ion-card-content>
<div class="noDataDiv" [hidden]="actionHistoryRes && actionHistoryRes.length > 0">
<p>{{ 'general, empty' | translate}}</p>
</div>
<div *ngIf="actionHistoryRes && actionHistoryRes.length > 0 ">
<ion-list class="notification-list ">
<div class="timeline">
<ion-item *ngFor="let actionHistory of actionHistoryRes">
<div class="timeline-item" slot="start">
<div
[class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE" class="empImge"
[src]="'data:image/png;base64,'+actionHistory.EMPLOYEE_IMAGE">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE == null" class="empImge"
src="../assets/imgs/profile.png"> </div>
</div>
<button class="showMore"
(click)="actionHistory.visible = !actionHistory.visible">{{ actionHistory.visible ? 'Show less': 'Show More' }}</button>
<ion-col>
<ion-label style="color:black !important ;font-weight: bold;">
{{actionHistory.NAME}}
</ion-label>
</div>
</div>
<ion-label
[ngClass]="{'bg-blue-txt' : actionHistory.ACTION_CODE === 'SUBMIT' ,'bg-orange-txt' : actionHistory.ACTION_CODE === 'PENDING' ,'bg-red-txt' : actionHistory.ACTION_CODE === 'REJECT','bg-green-txt' : actionHistory.ACTION_CODE != 'PENDING' && actionHistory.ACTION_CODE != 'REJECT' && actionHistory.ACTION_CODE != 'SUBMIT'}"
class=""> {{actionHistory.ACTION}}</ion-label>
<div *ngIf="actionHistory.NOTE != '' ">
<div *ngIf="!checkLines(actionHistory.NOTE)">
<div class="containerNote">
Note: {{actionHistory.NOTE}}
</div>
</div>
<ion-label *ngIf="actionHistory.NOTIFICATION_DATE != ''" class="dateActionHistory">
{{actionHistory.NOTIFICATION_DATE| dateString }} </ion-label>
</ion-col>
<div class="line"></div>
</ion-item>
</div>
</ion-list>
</div>
<div *ngIf="checkLines(actionHistory.NOTE)">
<button ion-button *ngIf="!IsReachEnd" class="itemHISBtn" (click)="loadMoreActionHistory()">
{{ 'general, load-more' | translate}}
</button>
<div class="containerNote"
[ngClass]="actionHistory.visible ? 'show' : '' ">
Note: {{actionHistory.NOTE}}
</ion-card-content>
</ion-card>
</ng-container>
<ng-container *ngIf="activeSegment === 'attach'">
<ion-card class="cardContent">
<ion-card-content>
</div>
<button class="showMore"
(click)="actionHistory.visible = !actionHistory.visible">{{ actionHistory.visible ? 'Show less': 'Show More' }}</button>
<div class="noDataDiv" [hidden]="attachmentRes && attachmentRes.length > 0">
<p>{{ 'general, notAttch' | translate}}</p>
</div>
</div>
</div>
<ion-label
[ngClass]="{'bg-blue-txt' : actionHistory.ACTION_CODE === 'SUBMIT' ,'bg-orange-txt' : actionHistory.ACTION_CODE === 'PENDING' ,'bg-red-txt' : actionHistory.ACTION_CODE === 'REJECT','bg-green-txt' : actionHistory.ACTION_CODE != 'PENDING' && actionHistory.ACTION_CODE != 'REJECT' && actionHistory.ACTION_CODE != 'SUBMIT'}"
class=""> {{actionHistory.ACTION}}</ion-label>
<div *ngIf="attachmentRes && attachmentRes.length > 0 ">
<ion-label *ngIf="actionHistory.NOTIFICATION_DATE != ''"
class="dateActionHistory">
{{actionHistory.NOTIFICATION_DATE| dateString }} </ion-label>
</ion-col>
<div class="line"></div>
</ion-item>
</div>
</ion-list>
</div>
<button ion-button *ngIf="!IsReachEnd" class="itemHISBtn" (click)="loadMoreActionHistory()">
{{ 'general, load-more' | translate}}
</button>
</ion-card-content>
</ion-card>
</ng-container>
</ion-slide>
<ion-slide>
<ng-container *ngIf="activeSegment === 'attach'">
<ion-card class="cardContent" style="width: 100%;">
<ion-card-content>
<div class="noDataDiv" [hidden]="attachmentRes && attachmentRes.length > 0">
<p>{{ 'general, notAttch' | translate}}</p>
</div>
<div *ngIf="attachmentRes && attachmentRes.length > 0 ">
<ion-grid>
<ion-item class="itemAttch" *ngFor="let attachList of attachmentRes ;let i=index;">
<ion-label style="color: black !important">
{{i+1 }}. {{attachList.FILE_NAME}} </ion-label>
<button float-end class="attachImgBtn"
(click)="OpenAttachFiles(attachList.FILE_DATA,attachList.FILE_CONTENT_TYPE)">
<img class="attachImg" src="../assets/imgs/view.png">
</button>
</ion-item>
</ion-grid>
</div>
</ion-card-content>
</ion-card>
</ng-container>
</ion-slide>
<ion-slide>
<ng-container *ngIf="activeSegment === 'info'">
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
<div *ngIf="notificationBodyRes?.length > 0 ">
<ion-card *ngFor="let item of notificationBodyRes;let i=index; " style="width: 91%;">
<ion-card-content>
<div>
<ion-row class="" *ngIf=" item.Collection_Notification.DISPLAY_FLAG != 'N' ">
<ion-col class="rowBorder"
*ngFor="let notificationBody of item.Collection_Notification;" size="6"
[hidden]="notificationBody.DISPLAY_FLAG == 'N'">
<label class="colItemReq" for="">{{notificationBody.SEGMENT_PROMPT}}</label>
<br />
<label for="">{{notificationBody.SEGMENT_VALUE_DSP}}</label>
</ion-col>
</ion-row>
</div>
</ion-card-content>
<ion-grid>
<ion-item class="itemAttch" *ngFor="let attachList of attachmentRes ;let i=index;">
<!-- <div *ngIf="attachList.FILE_CONTENT_TYPE === 'pdf' || attachList.FILE_CONTENT_TYPE === 'PDF'">
<img float-start class="attachImg" src="../assets/imgs/pdf.png">
</div>
<div *ngIf="attachList.FILE_CONTENT_TYPE === 'txt'"> <img float-start class="attachImg"
src="../assets/imgs/doc.png">
</ion-card>
</div>
<div
*ngIf="attachList.FILE_CONTENT_TYPE != 'txt' && attachList.FILE_CONTENT_TYPE != 'PDF' && attachList.FILE_CONTENT_TYPE != 'pdf' && attachList.FILE_CONTENT_TYPE != 'png' && attachList.FILE_CONTENT_TYPE != 'jpeg' && attachList.FILE_CONTENT_TYPE != 'jpg' && attachList.FILE_CONTENT_TYPE != 'PNG' && attachList.FILE_CONTENT_TYPE != 'JPEG' && attachList.FILE_CONTENT_TYPE != 'JPG'">
<img float-start class="attachImg" src="../assets/imgs/nonfile.png">
</div>
<div
*ngIf="attachList.FILE_CONTENT_TYPE === 'png' || attachList.FILE_CONTENT_TYPE === 'jpeg' || attachList.FILE_CONTENT_TYPE === 'jpg'|| attachList.FILE_CONTENT_TYPE === 'PNG' || attachList.FILE_CONTENT_TYPE === 'JPEG'|| attachList.FILE_CONTENT_TYPE === 'JPG'">
<img float-start class="attachImg" src="../assets/imgs/img.png">
</div> -->
<ion-label style="color: black !important">
{{i+1 }}. {{attachList.FILE_NAME}} </ion-label>
<button float-end class="attachImgBtn"
(click)="OpenAttachFiles(attachList.FILE_DATA,attachList.FILE_CONTENT_TYPE)">
<img class="attachImg" src="../assets/imgs/view.png">
</button>
</ion-item>
<div style="margin: 10px;font-weight: bold; "
*ngIf="subordinatesleaveList != undefined && subordinatesleaveList?.length > 0">
{{ts.trPK('worklistMain','employee-on-leave')}} </div>
<ion-item lines="none" [ngClass]=" direction === 'en' ? 'subOrdinateList' :'subOrdinateList-Ar' "
*ngFor="let List of subordinatesleaveList;">
</ion-grid>
</div>
</ion-card-content>
</ion-card>
</ng-container>
<ion-grid [ngClass]=" direction === 'en' ? 'gridSubordinates' :'gridSubordinates-Ar' ">
<div [ngClass]=" direction === 'en' ? 'subOrdinateDiv' :'subOrdinateDiv-Ar' ">
<img *ngIf="List.EMPLOYEE_IMAGE" class="empImgeSub"
[src]="'data:image/png;base64,'+List.EMPLOYEE_IMAGE">
<img *ngIf="List.EMPLOYEE_IMAGE == null" class="empImgeSub"
src="../assets/imgs/profile.png">
</div>
<ion-row class="rowHeader "
[ngClass]=" direction === 'en' ? 'subOrdinateRow' :'subOrdinateRow-Ar' ">
<ion-col size="9">
<label style="font-weight: bold; " class="label" for="">{{List.EMPLOYEE_NAME}}
</label>
<br />
<label class="label" for="">{{List.POSITION_TITLE}} </label><br />
</ion-col>
<ion-col class="status" size="3">
<label class="label" style="font-size: 11px;" for="label">{{List.STATUS}}</label>
</ion-col>
</ion-row>
<br />
<ion-row [ngClass]=" direction === 'en' ? 'subOrdinateRow' :'subOrdinateRow-Ar'">
<ion-col>
<ion-row>
<ion-col col-12>
<div id="notificationDynamicFields">
</div>
</ion-col>
</ion-row>
<label class="label" for=""> {{ts.trPK('worklistMain','from')}}</label><br />
<label class="label" for="">{{List.DATE_START |date}}</label>
</ion-col>
<ion-col>
<label class="label" for="">{{ts.trPK('worklistMain','to')}}</label><br />
<label class="label" for="">{{List.DATE_END | date}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ng-container>
</ion-slide>
</ion-slides>
<ion-row>
<ion-col col-12>
<div id="notificationDynamicFields">
</div>
</ion-col>
</ion-row>
</div>
<div *ngIf="messageSuccess" class="succssfullMSG">
<ion-col size="12">
<ion-icon class="succssfullIcon" name="checkmark"></ion-icon>
</ion-col>
<ion-col size="12"> <div style="font-size: 30px !important"> {{'worklistMain, Tran_Succ' | translate}} </div> </ion-col>
</div>
<ion-col size="12">
<div style="font-size: 30px !important"> {{'worklistMain, Tran_Succ' | translate}} </div>
</ion-col>
</div>
</ion-content>
@ -511,41 +440,41 @@
<ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVED')">
<img src="../assets/imgs/action-approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{approve_label}}</ion-label>
<ion-label style="white-space: nowrap"> {{approve_label}}</ion-label>
</ion-tab-button>
<ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')">
<img src="../assets/imgs/action-approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{close_label}}</ion-label>
<ion-label style="white-space: nowrap"> {{close_label}}</ion-label>
</ion-tab-button>
<ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECTED')">
<img src="../assets/imgs/action-reject.png">
<!-- <ion-label > {{'worklistMain, reject' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{reject_label}}</ion-label>
<ion-label style="white-space: nowrap"> {{reject_label}}</ion-label>
</ion-tab-button>
<ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')">
<img src="../assets/imgs/action-info.png">
<!-- <ion-label > {{'worklistMain, request' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{reqInfo_label}}</ion-label>
<ion-label style="white-space: nowrap"> {{reqInfo_label}}</ion-label>
</ion-tab-button>
<ion-tab-button (click)="nextNotfification()">
<img src="../assets/imgs/action-skip.png">
<ion-label> {{'worklistMain, skip' | translate}}</ion-label>
<ion-label> {{'worklistMain, skip' | translate}}</ion-label>
</ion-tab-button>
<ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()">
<img src="../assets/imgs/action-more.png">
<ion-label> {{'worklistMain, more' | translate}}</ion-label>
<ion-label> {{'worklistMain, more' | translate}}</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

@ -292,3 +292,10 @@ ion-card{
.tabBar{
height:70px
}
.cardAlignTextEn{
text-align: left;
}
.cardAlignTextAr{
text-align: right;
}

@ -1,4 +1,4 @@
import { Component, OnInit, ElementRef } from "@angular/core";
import { Component, OnInit, ElementRef, ViewChild } from "@angular/core";
import { CommonService } from "src/app/hmg-common/services/common/common.service";
import { TranslatorService } from "src/app/hmg-common/services/translator/translator.service";
import { WorkListBodyRequest } from "../models/NotificationBodyReq";
@ -36,8 +36,7 @@ import { WorkListReplacementRollComponent } from '../work-list-replacement-roll/
import { WorkListRfcComponent } from '../work-list-rfc/work-list-rfc.component';
import { ApplyActionModalComponent } from '../apply-action-modal/apply-action-modal.component';
import { GetOpenNotificationsResponse } from 'src/app/hmg-common/services/dashbored/models/GetOpenNotificationsResponse';
import { IonSlides } from '@ionic/angular';
@Component({
selector: "app-worklist-main",
@ -45,6 +44,7 @@ import { GetOpenNotificationsResponse } from 'src/app/hmg-common/services/dashbo
styleUrls: ["./worklist-main.component.scss"]
})
export class WorklistMainComponent implements OnInit {
@ViewChild('slides') slides: IonSlides;
private WorkListBodyObj: WorkListBodyRequest;
private WorkListButtonsObj: WorkListButtonRequest;
private WorkListActionObj: WorkListActionRequest;
@ -121,8 +121,9 @@ export class WorklistMainComponent implements OnInit {
public authService: AuthenticationService
) {
) {
this.direction = TranslatorService.getCurrentLanguageName()
console.log("ENAD TEST LANG: "+this.direction);
this.WorkListActionHistoryObj = new WorkListActionHistoryRequest();
this.WorkListActionHistoryObj.P_PAGE_NUM = 1;
this.WorkListActionHistoryObj.P_PAGE_LIMIT = this.P_PAGE_LIMIT;
@ -159,7 +160,24 @@ export class WorklistMainComponent implements OnInit {
}
public segmentChanged(event: any) {
this.activeSegment = event.detail.value;
if(this.activeSegment === 'item-req')
{
this.slides.slideTo(0);
}
else if(this.activeSegment === 'action-history')
{
this.slides.slideTo(1);
}
else if(this.activeSegment === 'attach')
{
this.slides.slideTo(2);
}
else if(this.activeSegment === 'info')
{
this.slides.slideTo(3);
}
console.log(" event.detail.value: " + event.detail.value);
}
intializeNotificationDetail() {
@ -1134,4 +1152,28 @@ export class WorklistMainComponent implements OnInit {
});
}
slideChanged() {
this.slides.getActiveIndex().then(index => {
console.log(index);
if(index === 0)
{
this.activeSegment = 'item-req';
}
else if(index === 1)
{
this.activeSegment = 'action-history';
}
else if(index === 2)
{
this.activeSegment = 'attach';
}
else if(index === 3)
{
this.activeSegment = 'info';
}
});
}
}

Loading…
Cancel
Save