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

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

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

@ -1,97 +1,192 @@
<app-generic-header <app-generic-header showBack="true" backLink="/notification/homepage" [headerText]="'worklistMain,title' | translate">
showBack="true"
backLink="/notification/homepage"
[headerText]="'worklistMain,title' | translate">
</app-generic-header> </app-generic-header>
<ion-content class="colorBG"> <ion-content class="colorBG">
<ion-segment mode="md" color="secondary" (ionChange)="segmentChangedClick($event)" <ion-segment mode="md" color="secondary" (ionChange)="segmentChangedClick($event)" [value]="defaultSegment"
[value]="defaultSegment" class="ion-segment-all"> class="ion-segment-all">
<ion-segment-button value="{{segmentVal.name}}" <ion-segment-button value="{{segmentVal.name}}"
[ngClass]="activeSegment == segmentVal.name ? 'active-Segment' : 'normal-Segment'" [ngClass]="activeSegment == segmentVal.name ? 'active-Segment' : 'normal-Segment'"
*ngFor="let segmentVal of segmentsArray"> *ngFor="let segmentVal of segmentsArray">
{{segmentVal.name}} <p style="font-size: 11px;">{{segmentVal.name}}</p>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<ion-card class="cardContent" *ngFor='let segmentContant of segmentData'> <!-- <ion-slides #slides pager="false" (ionSlideDidChange)="slideChanged($event)">
<ion-card-content *ngIf='activeSegment === segmentContant.name'> <ion-slide>
<ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'> <p>SLide 1</p>
<ion-row> </ion-slide>
<ion-col> <ion-slide>
<label class="colItemReq"> {{dataContant.Title}}</label> <p>SLide 2</p>
<br /> </ion-slide>
<label *ngIf="dataContant.Value && dataContant.Type != 'table'">{{dataContant.Value}}</label> <ion-slide>
<p>SLide 3</p>
<div *ngIf="dataContant.MultipleValue && dataContant.Type == 'list'"> </ion-slide>
<label *ngFor="let data of dataContant.MultipleValue">{{data}}<br/></label> </ion-slides> -->
</div> <ion-slides #slides (ionSlideDidChange)="slideChanged($event)">
<ion-slide *ngFor='let segmentContant of segmentData'>
<div *ngIf="dataContant.Value && dataContant.Type =='table'"> <ion-card class="cardContent" *ngIf='activeSegment === segmentContant.name' style="width: 100%;">
<ion-card class="cardContent"> <ion-card-content>
<ion-card-content> <ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
<div *ngFor="let multiData of dataLabelAndValue"> <ion-row>
<div *ngFor="let dataAll of multiData"> <ion-col>
<div *ngFor="let dataLabel of dataAll"> <label class="colItemReq"> {{dataContant.Title}}</label>
<label class="colItemReq">{{dataLabel.label}} <br />
<br/></label> <label *ngIf="dataContant.Value && dataContant.Type != 'table'">{{dataContant.Value}}</label>
<div *ngIf="dataLabel.isTable =='false'">
<label *ngIf="dataLabel.textvalue">{{dataLabel.textvalue}} <div *ngIf="dataContant.MultipleValue && dataContant.Type == 'list'">
<br/></label> <label *ngFor="let data of dataContant.MultipleValue">{{data}}<br /></label>
<label *ngIf="dataLabel.textvalue==''">none </div>
<br/></label>
<br/> <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>
<div *ngIf="dataLabel.isTable == 'true'"> </ion-card-content>
<div *ngFor="let subData of dataLabel.textvalue"> </ion-card>
<div> </div>
<label style="font-weight: bold;">{{subData.label}} </ion-col>
<br/></label> </ion-row>
<label >{{subData.textvalue}} <ion-row *ngIf='dataContant.TableValue'>
<br/></label> <ion-col style="border: 1px solid gainsboro; border-radius: 15px; padding-left: 20px;">
<br/> <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> </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>
</div> </div>
</ion-item>
</div> </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> </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 --> <div *ngIf="dataContant.Value && dataContant.Type =='table'">
<!-- <ng-container> <ion-card class="cardContent">
<ion-card class="cardContent" *ngFor='let segmentContant of segmentDataTable'> <ion-card-content>
<ion-card-content *ngIf='activeSegment === segmentContant.name'> <div *ngFor="let multiData of dataLabelAndValue">
<ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'> <div *ngFor="let dataAll of multiData">
<ion-row *ngFor="let headerData of dataContant.Header"> <div *ngFor="let dataLabel of dataAll">
<ion-col> <label class="colItemReq">{{dataLabel.label}}
<label class="colItemReq"> {{headerData}}</label> <br /></label>
<br /> <div *ngIf="dataLabel.isTable =='false'">
<label>{{headerData}}</label> <label *ngIf="dataLabel.textvalue">{{dataLabel.textvalue}}
</ion-col> <br /></label>
</ion-row> <label *ngIf="dataLabel.textvalue==''">none
</ion-grid> <br /></label>
</ion-card-content> <br />
</ion-card> </div>
</ng-container> --> <div *ngIf="dataLabel.isTable == 'true'">
<div *ngFor="let subData of dataLabel.textvalue">
<!-- END --> <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 class="cardContent" *ngIf='activeSegment === "Approval Level"'>
<ion-card-content> <ion-card-content>
@ -107,7 +202,7 @@
<button ion-button style=" background: none;width: 60%;"> <button ion-button style=" background: none;width: 60%;">
<img src="../assets/imgs/noteSmall.png"> <img src="../assets/imgs/noteSmall.png">
</button> </button>
<div <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'}" [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'" [class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'"
@ -132,36 +227,56 @@
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-card-content> </ion-card-content>
</ion-card> </ion-card> -->
<ion-card class="cardContent"> <ion-card class="cardContent">
<ion-card-content> <ion-card-content>
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col> <ion-col>
<ion-label> <ion-label>
<h2 class="boldTxtNav">Comment</h2> <h2 class="boldTxtNav">Comment</h2>
</ion-label> </ion-label>
<ion-input type='text' [(ngModel)]='commentText'></ion-input> <ion-input type='text' [(ngModel)]='commentText'></ion-input>
<ion-item *ngFor="let object of grantInfo"> <ion-item *ngFor="let object of grantInfo">
<ion-label>{{object.Label}}</ion-label> <ion-label>{{object.Label}}</ion-label>
<ion-select *ngIf="!object.ConditionalFieldName" [(ngModel)]='ExchangeServerSelected' <ion-select *ngIf="!object.ConditionalFieldName" [(ngModel)]='ExchangeServerSelected'
(ionChange)="filterGrantDB(ExchangeServerSelected,object, object.FieldName)" id='{{object.FieldName}}'> (ionChange)="filterGrantDB(ExchangeServerSelected,object, object.FieldName)" id='{{object.FieldName}}'>
<ion-select-option value="{{value}}" *ngFor="let value of object.Value"> <ion-select-option value="{{value}}" *ngFor="let value of object.Value">
{{value}}</ion-select-option> {{value}}</ion-select-option>
</ion-select> </ion-select>
<ion-select *ngIf="object.ConditionalFieldName" [(ngModel)]='ExchangeServerDBSelected' <ion-select *ngIf="object.ConditionalFieldName" [(ngModel)]='ExchangeServerDBSelected'
(ionChange)="filterGrantDB(ExchangeServerDBSelected,object)" id='{{object.FieldName}}'> (ionChange)="filterGrantDB(ExchangeServerDBSelected,object)" id='{{object.FieldName}}'>
<ion-select-option value="{{value}}" *ngFor="let value of filteredGrantFieldsConditionalValue"> <ion-select-option value="{{value}}" *ngFor="let value of filteredGrantFieldsConditionalValue">
{{value}}</ion-select-option> {{value}}</ion-select-option>
</ion-select> </ion-select>
</ion-item> </ion-item>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-card-content> </ion-card-content>
</ion-card> </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> </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 { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { HomeComponent } from '../home/home.component'; import { HomeComponent } from '../home/home.component';
@ -7,7 +7,7 @@ import { itgRequest } from '../models/itgFormDetailsRequest';
import { ModalController } from '@ionic/angular'; import { ModalController } from '@ionic/angular';
import { WorkListReplacementRollComponent } from '../work-list-replacement-roll/work-list-replacement-roll.component'; 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 { WorkListReplacementItgComponent } from '../work-list-replacement-itg/work-list-replacement-itg.component';
import { IonSlides } from '@ionic/angular';
@Component({ @Component({
selector: 'app-work-list-main-itg', 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'], styleUrls: ['./work-list-main-itg.component.scss'],
}) })
export class WorkListMainItgComponent implements OnInit { export class WorkListMainItgComponent implements OnInit {
@ViewChild('slides') slides: IonSlides;
public static APPROVAL = "Services/COCWS.svc/REST/ITGApproveRequest" public static APPROVAL = "Services/COCWS.svc/REST/ITGApproveRequest"
public static REJECT = 'Services/COCWS.svc/REST/ITGRejectRequest' public static REJECT = 'Services/COCWS.svc/REST/ITGRejectRequest'
@ -56,6 +57,7 @@ export class WorkListMainItgComponent implements OnInit {
index2: number; index2: number;
direction: string; direction: string;
defaultSegment = ''; defaultSegment = '';
public slideIndex = 0;
constructor( constructor(
public common: CommonService, public common: CommonService,
public ts: TranslatorService, public ts: TranslatorService,
@ -84,6 +86,8 @@ export class WorkListMainItgComponent implements OnInit {
this.request.Comments = this.request_info.Comments; this.request.Comments = this.request_info.Comments;
this.request.NewUserEMPId = this.request_info.NewUserEMPId; this.request.NewUserEMPId = this.request_info.NewUserEMPId;
this.workListService.getITGFormDetails(this.request).subscribe((result: any) => { this.workListService.getITGFormDetails(this.request).subscribe((result: any) => {
console.log(this.request);
console.log(result);
this.request_details = result.ITGRequest; this.request_details = result.ITGRequest;
this.grantInfo = result.ITGRequest.GrantFields; this.grantInfo = result.ITGRequest.GrantFields;
let count =0; let count =0;
@ -160,10 +164,22 @@ export class WorkListMainItgComponent implements OnInit {
} }
public segmentChangedClick(event: any) { 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() { skip() {
//check if the user clicked on all type of request
if (this.is_all_items_sents) { if (this.is_all_items_sents) {
for (let i = 1; i < this.all_request_names.length; i++) { for (let i = 1; i < this.all_request_names.length; i++) {
for (let j = 0; j < this.all_request_names[i].data.length; j++) { 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 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. if (this.request_info.ID == this.all_request[i].ID) { // check if the ID for the request is found.
this.index = i + 1; 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. if (this.index !== this.all_request.length) { // check if its last one to redirecte to home otherwise to next request.
this.clearDataArray(); this.clearDataArray();
console.log(this.all_request[this.index]);
console.log(this.request_name)
this.changeITGForm(this.all_request[this.index], this.request_name); this.changeITGForm(this.all_request[this.index], this.request_name);
break; return;
} else { } else {
console.log("no 1");
this.common.sharedService.setSharedData(true, 'loadWorkList'); this.common.sharedService.setSharedData(true, 'loadWorkList');
this.common.openNotificationPage(); this.common.openNotificationPage();
break; return;
} }
} else { }
this.common.sharedService.setSharedData(true, 'loadWorkList'); // else {
this.common.openNotificationPage(); // console.log("no 2");
break; // 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 <app-generic-header *ngIf="!messageSuccess" showBack="true" backLink="/notification/homepage"
*ngIf="!messageSuccess" [headerText]="'worklistMain,title' | translate">
showBack="true"
backLink="/notification/homepage"
[headerText]="'worklistMain,title' | translate">
</app-generic-header> </app-generic-header>
<ion-content class="colorBG"> <ion-content class="colorBG">
<div *ngIf="!messageSuccess"> <div *ngIf="!messageSuccess">
<!-- add segemnt part --> <!-- add segemnt part -->
<div class="subjectNotification">{{getPassNotificationDetails.SUBJECT}}</div> <div class="subjectNotification">{{getPassNotificationDetails.SUBJECT}}</div>
<ion-segment mode="md" color="secondary" (ionChange)="segmentChanged($event)" <ion-segment mode="md" color="secondary" (ionChange)="segmentChanged($event)" [value]="defaultSegment"
[value]="defaultSegment" class="ion-segment-all"> class="ion-segment-all">
<ion-segment-button value="item-req" <ion-segment-button value="item-req"
[ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'"> [ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, details-emp'| translate}}</ion-label> <ion-label> {{'worklistMain, details-emp'| translate}}</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="action-history" <ion-segment-button value="action-history"
[ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'"> [ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, action' | translate}}</ion-label> <ion-label> {{'worklistMain, action' | translate}}</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="attach" [ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'"> <ion-segment-button value="attach"
<ion-label> {{'worklistMain, attach-file' | translate}}</ion-label> [ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, attach-file' | translate}}</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="info" [ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'"> <ion-segment-button value="info" [ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, info'| translate}} </ion-label> <ion-label> {{'worklistMain, info'| translate}} </ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<ion-slides #slides (ionSlideDidChange)="slideChanged($event)">
<ng-container *ngIf="activeSegment === 'info'"> <ion-slide>
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div> <ng-container *ngIf="activeSegment === 'item-req'">
<ion-grid>
<div *ngIf="notificationBodyRes?.length > 0 "> <ion-row>
<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-col> <ion-col>
<label class="colItemReq" for="">{{'worklistMain, loc-name' | translate}}</label> <ion-card class="cardContent">
<br /> <ion-card-content>
<div>
<label for="">{{submitterInfo.LOCATION_NAME}}</label> <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-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col> <ion-col>
<label class="colItemReq" for="">{{'worklistMain, branch-payrol' | translate}}</label> <ion-card *ngIf="submitterInfoRes?.length > 0 ">
<br />
<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-col>
</ion-row> </ion-row>
</div> </ion-grid>
</ion-card-content>
</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' : '' "> <ion-card class="cardContent" style="width: 100%;">
Note: {{actionHistory.NOTE}} <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> </div>
<button class="showMore" <ion-col>
(click)="actionHistory.visible = !actionHistory.visible">{{ actionHistory.visible ? 'Show less': 'Show More' }}</button> <ion-label style="color:black !important ;font-weight: bold;">
{{actionHistory.NAME}}
</ion-label>
</div> <div *ngIf="actionHistory.NOTE != '' ">
</div> <div *ngIf="!checkLines(actionHistory.NOTE)">
<ion-label <div class="containerNote">
[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'}" Note: {{actionHistory.NOTE}}
class=""> {{actionHistory.ACTION}}</ion-label> </div>
</div>
<ion-label *ngIf="actionHistory.NOTIFICATION_DATE != ''" class="dateActionHistory"> <div *ngIf="checkLines(actionHistory.NOTE)">
{{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()"> <div class="containerNote"
{{ 'general, load-more' | translate}} [ngClass]="actionHistory.visible ? 'show' : '' ">
</button> Note: {{actionHistory.NOTE}}
</ion-card-content>
</ion-card>
</ng-container> </div>
<ng-container *ngIf="activeSegment === 'attach'"> <button class="showMore"
<ion-card class="cardContent"> (click)="actionHistory.visible = !actionHistory.visible">{{ actionHistory.visible ? 'Show less': 'Show More' }}</button>
<ion-card-content>
<div class="noDataDiv" [hidden]="attachmentRes && attachmentRes.length > 0"> </div>
<p>{{ 'general, notAttch' | translate}}</p> </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-card>
<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">
</div> </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-grid [ngClass]=" direction === 'en' ? 'gridSubordinates' :'gridSubordinates-Ar' ">
</ion-card-content> <div [ngClass]=" direction === 'en' ? 'subOrdinateDiv' :'subOrdinateDiv-Ar' ">
</ion-card> <img *ngIf="List.EMPLOYEE_IMAGE" class="empImgeSub"
</ng-container> [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> <label class="label" for=""> {{ts.trPK('worklistMain','from')}}</label><br />
<ion-col col-12> <label class="label" for="">{{List.DATE_START |date}}</label>
<div id="notificationDynamicFields"> </ion-col>
</div> <ion-col>
</ion-col>
</ion-row> <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>
<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>
</ion-col> </ion-col>
<ion-col size="12"> <div style="font-size: 30px !important"> {{'worklistMain, Tran_Succ' | translate}} </div> </ion-col> <ion-col size="12">
</div> <div style="font-size: 30px !important"> {{'worklistMain, Tran_Succ' | translate}} </div>
</ion-col>
</div>
</ion-content> </ion-content>
@ -511,41 +440,41 @@
<ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVED')"> <ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVED')">
<img src="../assets/imgs/action-approve.png"> <img src="../assets/imgs/action-approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> --> <!-- <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>
<ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')"> <ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')">
<img src="../assets/imgs/action-approve.png"> <img src="../assets/imgs/action-approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> --> <!-- <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>
<ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECTED')"> <ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECTED')">
<img src="../assets/imgs/action-reject.png"> <img src="../assets/imgs/action-reject.png">
<!-- <ion-label > {{'worklistMain, reject' | translate}}</ion-label> --> <!-- <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>
<ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')"> <ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')">
<img src="../assets/imgs/action-info.png"> <img src="../assets/imgs/action-info.png">
<!-- <ion-label > {{'worklistMain, request' | translate}}</ion-label> --> <!-- <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>
<ion-tab-button (click)="nextNotfification()"> <ion-tab-button (click)="nextNotfification()">
<img src="../assets/imgs/action-skip.png"> <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>
<ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()"> <ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()">
<img src="../assets/imgs/action-more.png"> <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-button>
</ion-tab-bar> </ion-tab-bar>
</ion-tabs> </ion-tabs>

@ -292,3 +292,10 @@ ion-card{
.tabBar{ .tabBar{
height:70px 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 { CommonService } from "src/app/hmg-common/services/common/common.service";
import { TranslatorService } from "src/app/hmg-common/services/translator/translator.service"; import { TranslatorService } from "src/app/hmg-common/services/translator/translator.service";
import { WorkListBodyRequest } from "../models/NotificationBodyReq"; 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 { WorkListRfcComponent } from '../work-list-rfc/work-list-rfc.component';
import { ApplyActionModalComponent } from '../apply-action-modal/apply-action-modal.component'; import { ApplyActionModalComponent } from '../apply-action-modal/apply-action-modal.component';
import { GetOpenNotificationsResponse } from 'src/app/hmg-common/services/dashbored/models/GetOpenNotificationsResponse'; import { GetOpenNotificationsResponse } from 'src/app/hmg-common/services/dashbored/models/GetOpenNotificationsResponse';
import { IonSlides } from '@ionic/angular';
@Component({ @Component({
selector: "app-worklist-main", selector: "app-worklist-main",
@ -45,6 +44,7 @@ import { GetOpenNotificationsResponse } from 'src/app/hmg-common/services/dashbo
styleUrls: ["./worklist-main.component.scss"] styleUrls: ["./worklist-main.component.scss"]
}) })
export class WorklistMainComponent implements OnInit { export class WorklistMainComponent implements OnInit {
@ViewChild('slides') slides: IonSlides;
private WorkListBodyObj: WorkListBodyRequest; private WorkListBodyObj: WorkListBodyRequest;
private WorkListButtonsObj: WorkListButtonRequest; private WorkListButtonsObj: WorkListButtonRequest;
private WorkListActionObj: WorkListActionRequest; private WorkListActionObj: WorkListActionRequest;
@ -121,8 +121,9 @@ export class WorklistMainComponent implements OnInit {
public authService: AuthenticationService public authService: AuthenticationService
) { ) {
this.direction = TranslatorService.getCurrentLanguageName() this.direction = TranslatorService.getCurrentLanguageName()
console.log("ENAD TEST LANG: "+this.direction);
this.WorkListActionHistoryObj = new WorkListActionHistoryRequest(); this.WorkListActionHistoryObj = new WorkListActionHistoryRequest();
this.WorkListActionHistoryObj.P_PAGE_NUM = 1; this.WorkListActionHistoryObj.P_PAGE_NUM = 1;
this.WorkListActionHistoryObj.P_PAGE_LIMIT = this.P_PAGE_LIMIT; this.WorkListActionHistoryObj.P_PAGE_LIMIT = this.P_PAGE_LIMIT;
@ -159,7 +160,24 @@ export class WorklistMainComponent implements OnInit {
} }
public segmentChanged(event: any) { public segmentChanged(event: any) {
this.activeSegment = event.detail.value; 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); console.log(" event.detail.value: " + event.detail.value);
} }
intializeNotificationDetail() { 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