fixed slider issue

enad_worklist_slider
enadhilal 5 years ago
parent 4223a00609
commit a80cef47f9

@ -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';
@ -35,6 +35,7 @@ import { MOItemHistoryRes } from '../models/MOItemHistoryRes';
import { MOItemHistoryReq } from '../models/MOItemHistoryReq';
import { GetOpenNotificationsResponse } from 'src/app/hmg-common/services/dashbored/models/GetOpenNotificationsResponse';
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
import { IonSlides } from '@ionic/angular';
@Component({
selector: 'app-worklist-main-mr',
@ -43,6 +44,7 @@ import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbore
})
export class WorklistMainMRComponent implements OnInit {
@ViewChild('slides') slides: IonSlides;
private WorkListBodyObj: WorkListBodyRequest;
private WorkListButtonsObj: WorkListButtonRequest;
private WorkListActionObj: WorkListActionRequest;
@ -141,12 +143,57 @@ export class WorklistMainMRComponent implements OnInit {
this.WorkListAttachObj = new WorkListButtonRequest();
this.intializeNotificationDetail();
}
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);
}
public slideChanged(event: any) {
this.slides.getActiveIndex().then(index => {
console.log(index);
console.log(event);
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';
}
console.log(this.activeSegment);
});
}
public segmentChanged(event: any) {
public segmentChanged1(event: any) {
this.activeSegment = event.detail.value;
console.log(' event.detail.value: ' + event.detail.value);
}

@ -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";
@ -37,6 +37,7 @@ import { WorkListReplacementRollComponent } from '../work-list-replacement-roll/
import { WorkListRfcComponent } from '../work-list-rfc/work-list-rfc.component';
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
import { GetOpenNotificationsResponse } from 'src/app/hmg-common/services/dashbored/models/GetOpenNotificationsResponse';
import { IonSlides } from '@ionic/angular';
@Component({
selector: 'app-worklist-main-po',
@ -44,6 +45,7 @@ import { GetOpenNotificationsResponse } from 'src/app/hmg-common/services/dashbo
styleUrls: ['./worklist-main-po.component.scss'],
})
export class WorklistMainPoComponent implements OnInit {
@ViewChild('slides') slides: IonSlides;
private WorkListBodyObj: WorkListBodyRequest;
private WorkListButtonsObj: WorkListButtonRequest;
private WorkListActionObj: WorkListActionRequest;
@ -148,14 +150,59 @@ export class WorklistMainPoComponent implements OnInit {
}
ngOnInit() {
this.WorkListAttachObj = new WorkListButtonRequest();
this.intializeNotificationDetail();
}//ngOn
public segmentChanged(event: any) {
this.activeSegment = event.detail.value;
if(this.activeSegment === 'line_details')
{
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);
}
public slideChanged(event: any) {
this.slides.getActiveIndex().then(index => {
console.log(index);
console.log(event);
if(index === 0)
{
this.activeSegment = 'line_details';
}
else if(index === 1)
{
this.activeSegment = 'action-history';
}
else if(index === 2)
{
this.activeSegment = 'attach';
}
else if(index === 3)
{
this.activeSegment = 'info';
}
console.log(this.activeSegment);
});
}
}//ngOn
intializeNotificationDetail() {
this.approveDis = false;
this.rejectDis = false;
@ -211,7 +258,7 @@ export class WorklistMainPoComponent implements OnInit {
}
}
public segmentChanged(event: any) {
public segmentChanged1(event: any) {
this.activeSegment = event.detail.value;
console.log(" event.detail.value: " + event.detail.value);
}

@ -1,424 +1,297 @@
<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">
<div class="subjectNotification">{{getPassNotificationDetails.SUBJECT}}</div>
<!-- add segemnt part -->
<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, itemReq'| 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 value="attach" [ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, attach-file' | translate}}
<ion-content class="colorBG">
<div *ngIf="!messageSuccess">
<div class="subjectNotification">{{getPassNotificationDetails.SUBJECT}}</div>
<!-- add segemnt part -->
<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, itemReq'| 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 value="attach"
[ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, attach-file' | translate}}
</ion-label>
</ion-segment-button>
<ion-segment-button checked 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>
<ion-card class="cardContent">
<!-- <ion-card-header class="boxHdr">
<div class="hrTitle"> {{ts.trPK('worklistMain','info')}} </div>
</ion-card-header> -->
<ion-card-content>
<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-col>
<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>
<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="rowBorder">
<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>
<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>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','subject')}} </label>
<br />
</ion-col>
<ion-col>
<label for="">{{getPassNotificationDetails.SUBJECT}} </label>
</ion-col>
</ion-row> -->
<!-- notificationBodyRes -->
<div *ngFor="let header of PRHeader">
<ion-row
*ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'">
<!-- *ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'"> -->
<ion-col>
<label class="colItemReq" for="">{{header.HDR_ATTRIBUTE_NAME}} </label>
<br />
<label for="">{{header.HDR_ATTRIBUTE_VALUE}} </label>
</ion-col>
</ion-row>
</div>
<br />
<ion-grid>
<div>
<ion-row style="text-align: center !important">
<ion-col *ngIf="totalH">
<div class="colItemReq" style="text-align: center !important">{{totalH}}</div>
<div class="">{{valueH}}</div>
</ion-col>
<ion-col *ngIf="taxH ">
<div class="colItemReq" style="text-align: center !important">{{taxH}}</div>
<div class="">{{taxvalueH}}</div>
</ion-col>
</ion-row>
</div>
</ion-grid>
</ion-grid>
<button *ngIf="!IsReachEnd" ion-button class="itemHISBtn" (click)="loadMoreNotificationBody()">
{{ 'general, load-more' | translate}}
</button>
</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 [hidden]="PRLines && PRLines.length > 0">
<p>{{ 'general, empty' | translate}}</p>
</div>
</ion-segment-button>
<ion-segment-button checked value="info"
[ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{'worklistMain, info'| translate}} </ion-label>
</ion-segment-button>
</ion-segment>
<accordin-custom>
<accordin-tab-custom *ngFor="let Lines of PRLines; let i=index;" [header]="Lines.DESCRIPTION">
<div class="itemReqDiv">
<!-- <ion-row>
<ion-col class="colItemReqHeader">
<label for="">{{i+1}}. {{Lines.DESCRIPTION}} </label>
<ion-slides #slides (ionSlideDidChange)="slideChanged($event)">
<ion-slide>
<ng-container *ngIf="activeSegment === 'item-req'">
<div [hidden]="PRLines && PRLines.length > 0">
<p>{{ 'general, empty' | translate}}</p>
</div>
<accordin-custom>
<accordin-tab-custom *ngFor="let Lines of PRLines; let i=index;" [header]="Lines.DESCRIPTION">
<div class="itemReqDiv" style="width: 100% !important;">
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' " class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','cost-center')}}
</label>
<br />
<ion-label class="labelValue" for="">{{Lines.COST_CENTER}} </ion-label>
</ion-col>
</ion-row> -->
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' " class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','cost-center')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<ion-label class="labelValue" for="">{{Lines.COST_CENTER}} </ion-label>
</ion-col>
<!-- </ion-row>
<ion-row> -->
<ion-col class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','code')}} </label>
<br />
<!-- </ion-col>
<ion-col> -->
<ion-label class="labelValue" for="">{{Lines.ITEM_CODE}} </ion-label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' " class="colItems ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','unit')}} </label>
<br />
<ion-label class="labelValue" for="">{{Lines.UOM}} </ion-label>
</ion-col>
<ion-col class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','price')}} ({{ 'general, sar' | translate}})</label>
<br />
<ion-label class="labelValue" for="">{{Lines.UNIT_PRICE}} </ion-label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col class="colItems" [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('payslip','amount')}} ({{ 'general, sar' | translate}})</label>
<br />
<ion-label class="labelValue" for="">{{Lines.LINE_AMOUNT}} </ion-label>
</ion-col>
<ion-col class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','quantity')}} </label>
<br />
<ion-label class="labelValue" for="">{{Lines.QUANTITY}} </ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','ITEM_AMU')}} </label>
<br />
<ion-label class="labelValue" for="">{{Lines.ITEM_AMU}} </ion-label>
</ion-col>
</ion-row>
</div>
</accordin-tab-custom>
</accordin-custom>
</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; let index=index">
<div class="timeline-item" slot="start">
<!-- <div>
<button ion-button
(click)="openNoteDetail(actionHistory.NOTE ,actionHistory.NAME)"
[hidden]="actionHistory.NOTE == '' || actionHistory.NOTE == null"
style=" background: none;width: 60%;">
<img src="../assets/imgs/noteSmall.png">
</button>
</div> -->
<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="actionHistory.NOTE != '' ">
<div *ngIf="!checkLines(actionHistory.NOTE)">
<div class="containerNote">
Note: {{actionHistory.NOTE}}
<ion-col class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','code')}} </label>
<br />
<ion-label class="labelValue" for="">{{Lines.ITEM_CODE}} </ion-label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' " class="colItems ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','unit')}} </label>
<br />
<ion-label class="labelValue" for="">{{Lines.UOM}} </ion-label>
</ion-col>
<ion-col class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','price')}} ({{ 'general, sar'
| translate}})</label>
<br />
<ion-label class="labelValue" for="">{{Lines.UNIT_PRICE}} </ion-label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col class="colItems" [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('payslip','amount')}} ({{ 'general, sar' |
translate}})</label>
<br />
<ion-label class="labelValue" for="">{{Lines.LINE_AMOUNT}} </ion-label>
</ion-col>
<ion-col class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','quantity')}} </label>
<br />
<ion-label class="labelValue" for="">{{Lines.QUANTITY}} </ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','ITEM_AMU')}} </label>
<br />
<ion-label class="labelValue" for="">{{Lines.ITEM_AMU}} </ion-label>
</ion-col>
</ion-row>
</div>
</accordin-tab-custom>
</accordin-custom>
</ng-container>
</ion-slide>
<ion-slide>
<ng-container *ngIf="activeSegment === 'action-history'">
<ion-card class="cardContent" style="width: 100% i !important;">
<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; let index=index">
<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 *ngIf="checkLines(actionHistory.NOTE)">
<div class="containerNote" [ngClass]="actionHistory.visible ? 'show' : '' ">
Note: {{actionHistory.NOTE}}
<ion-col>
<ion-label style="color:black !important ;font-weight: bold;">
{{actionHistory.NAME}}
</ion-label>
<div *ngIf="actionHistory.NOTE">
<div *ngIf="actionHistory.NOTE != '' ">
<div *ngIf="!checkLines(actionHistory.NOTE)">
<div class="containerNote">
Note: {{actionHistory.NOTE}}
</div>
</div>
<div *ngIf="checkLines(actionHistory.NOTE)">
<div class="containerNote"
[ngClass]="actionHistory.visible ? 'show' : '' ">
Note: {{actionHistory.NOTE}}
</div>
<button class="showMore"
(click)="actionHistory.visible = !actionHistory.visible">{{
actionHistory.visible ? 'Show less': 'Show More' }}</button>
</div>
</div>
</div>
<button class="showMore"
(click)="actionHistory.visible = !actionHistory.visible">{{ actionHistory.visible ? 'Show less': 'Show More' }}</button>
</div>
</div>
<!-- *ngIf="!checkLines(actionHistory.NOTE)" -->
<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>
<ion-label *ngIf="actionHistory.NOTIFICATION_DATE != ''"
class="dateActionHistory">
{{actionHistory.NOTIFICATION_DATE| dateString }} </ion-label>
</ion-col>
</ion-item>
</div>
<!-- [ngClass]="{'bg-blue-txt' : actionHistory.ACTION === 'Submitted' || actionHistory.ACTION === 'Submit' ,'bg-orange-txt' : actionHistory.ACTION === 'Pending' ,'bg-red-txt' : actionHistory.ACTION === 'Rejected','bg-green-txt' : actionHistory.ACTION != 'Pending' && actionHistory.ACTION != 'Rejected' && actionHistory.ACTION != 'Submitted' && actionHistory.ACTION != 'Submit'}" -->
<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>
<ion-label *ngIf="actionHistory.NOTIFICATION_DATE != ''" class="dateActionHistory">
{{actionHistory.NOTIFICATION_DATE| dateString }} </ion-label>
</ion-col>
</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>
<ng-container *ngIf="activeSegment === 'attach'">
<ion-card class="cardContent">
</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% !important;">
<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;">
<!-- <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 class="noDataDiv" [hidden]="attachmentRes && attachmentRes.length > 0">
<p>{{ 'general, notAttch' | translate}}</p>
</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 *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>
<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>
</ion-card-content>
</ion-card>
</ng-container>
</ion-slide>
<button float-end class="attachImgBtn"
(click)="OpenAttachFiles(attachList.FILE_DATA,attachList.FILE_CONTENT_TYPE)">
<img class="attachImg" src="../assets/imgs/view.png">
</button>
<ion-slide>
<ng-container *ngIf="activeSegment === 'info'">
<ion-grid>
<ion-row>
<ion-col>
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-card class="cardContent" style="width: 90% !important;">
<ion-card-content>
<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>
<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>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<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>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.RESPONDER}} </label>
</ion-col>
</ion-row>
<div *ngFor="let header of PRHeader">
<ion-row
*ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'">
<ion-col>
<label class="colItemReq" for="">{{header.HDR_ATTRIBUTE_NAME}} </label>
<br />
<label for="">{{header.HDR_ATTRIBUTE_VALUE}} </label>
</ion-col>
</ion-row>
</div>
<br />
<ion-grid>
<div>
<ion-row style="text-align: center !important">
<ion-col *ngIf="totalH">
<div class="colItemReq" style="text-align: center !important">{{totalH}}</div>
<div class="">{{valueH}}</div>
</ion-col>
<ion-col *ngIf="taxH ">
<div class="colItemReq" style="text-align: center !important">{{taxH}}</div>
<div class="">{{taxvalueH}}</div>
</ion-col>
</ion-row>
</div>
</ion-grid>
</ion-grid>
<button *ngIf="!IsReachEnd" ion-button class="itemHISBtn" (click)="loadMoreNotificationBody()">
{{ 'general, load-more' | translate}}
</button>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide>
</ion-slides>
</ion-item>
</ion-grid>
</div>
</ion-card-content>
</ion-card>
</ng-container>
<ion-row>
<ion-col col-12>
<div id="notificationDynamicFieldsPR">
</div>
<ion-row>
<ion-col col-12>
<div id="notificationDynamicFieldsPR">
</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>
</ion-row>
</div>
<div *ngIf="messageSuccess" class="succssfullMSG">
<ion-col size="12">
<ion-icon class="succssfullIcon" name="checkmark"></ion-icon>
<!--filled-->
</ion-col>
<ion-col size="12"> <div style="font-size: 30px !important"> {{'worklistMain, Tran_Succ' | translate}} </div> </ion-col>
</div>
</div>
</ion-content>
<ion-footer *ngIf="!messageSuccess" class="footerSearchBtn">
@ -487,41 +360,41 @@
<ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVE')">
<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('REJECT')">
<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()">
<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>

@ -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';
@ -33,6 +33,7 @@ import { WorkListReplacementRollComponent } from '../work-list-replacement-roll/
import { WorkListRfcComponent } from '../work-list-rfc/work-list-rfc.component';
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
import { GetOpenNotificationsResponse } from 'src/app/hmg-common/services/dashbored/models/GetOpenNotificationsResponse';
import { IonSlides } from '@ionic/angular';
@Component({
selector: 'app-worklist-main-pr',
@ -40,6 +41,7 @@ import { GetOpenNotificationsResponse } from 'src/app/hmg-common/services/dashbo
styleUrls: ['./worklist-main-pr.component.scss'],
})
export class WorklistMainPRComponent implements OnInit {
@ViewChild('slides') slides: IonSlides;
public isPostNoLoad = true;
public worklistNotifications: any;
public totalRequestCount = 0;
@ -138,13 +140,53 @@ export class WorklistMainPRComponent implements OnInit {
this.WorkListAttachObj = new WorkListButtonRequest();
this.intializeNotificationDetail();
}
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);
}
public slideChanged(event: any) {
this.slides.getActiveIndex().then(index => {
console.log(index);
console.log(event);
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';
}
console.log(this.activeSegment);
});
}
intializeNotificationDetail() {
@ -209,7 +251,7 @@ export class WorklistMainPRComponent implements OnInit {
this.getPRNotificationDetails(this.WorkListBodyObj);
}
}
public segmentChanged(event: any) {
public segmentChanged1(event: any) {
this.activeSegment = event.detail.value;
console.log(' event.detail.value: ' + event.detail.value);
}

@ -308,72 +308,74 @@
</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 *ngIf="item.Collection_Notification.length > 0">
<div>
<ion-row *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-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>
<ion-row>
<ion-col>
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
</ion-col>
</ion-row>
<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>
<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>
<ion-row>
<ion-col>
<div *ngIf="notificationBodyRes?.length > 0 ">
<ion-card *ngFor="let item of notificationBodyRes;let i=index; " style="width: 91%;">
<ion-card-content *ngIf="item.Collection_Notification.length > 0">
<div>
<ion-row *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-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 *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-item>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide>
</ion-slides>

@ -16,6 +16,7 @@
.itemReqList{
background: #f0efef;
margin-top: 20px;
width: 100%;
// width: 95%;
// margin-left:9px

Loading…
Cancel
Save