add translate and fix design in Home, worklist, myLeave and Ticket Request

MOE_DEV_NEW_TEMPORARY_DESIGN
enadhilal 6 years ago
parent 36c4bf322b
commit 3740606bd2

@ -109,7 +109,7 @@
<ion-item style="padding-left: 4%;" *ngFor="let employee of approversList">
<div class="timeline-item" slot="start">
<div class="timeline-thumb timeline-icon">
<div [class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImge"
[src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImge"

@ -21,6 +21,7 @@ import { SubmitAbsenceModalComponent } from '../submit-absence-modal/submit-abse
styleUrls: ["./absence-confirm.component.scss"]
})
export class AbsenceConfirmComponent implements OnInit {
direction:string;
P_TransactionID: number;
approversList: ApproversList;
selEmp: string = "";
@ -51,7 +52,7 @@ export class AbsenceConfirmComponent implements OnInit {
public WorklistAttachService: WorklistAttachService
) {
this.isSubmitBtnClicked = false;
this.direction = TranslatorService.getCurrentLanguageName()
// this.isResubmitAbs = this.navParams.get("isResubmit");
if (this.isResubmitAbs) {
this.P_TransactionID = this.common.sharedService.getSharedData(

@ -10,21 +10,21 @@
</ion-col> -->
<h2><div class="Header">Confirmation</div></h2>
<h2><div class="Header">{{'eit,confirmation' | translate}}</div></h2>
<div>
<div *ngIf="submitAbsAttachmentList.length==0" class="labelcheck" lines="none" style="text-align: center;">
No Attachment
{{'eit,no-attachment' | translate}}
</div>
<div *ngIf="absComments==''" class="labelcheck" style="text-align: center;margin-bottom: 5px;padding-bottom: 16px;">
No Note
{{'eit,no-note' | translate}}
</div>
</div>
<ion-footer style="border-top: 2px solid grey !important;">
<ion-row class="rowBtn">
<ion-label class="labelRadio">Are you sure you want to submit</ion-label>
<ion-label class="labelRadio">{{'eit,submit' | translate}}</ion-label>
<ion-button class="submitOkButton" (click)="OkBtnModal()"> {{ts.trPK('general','ok')}}
</ion-button>
</ion-row>

@ -104,7 +104,7 @@
<ion-item style="padding-left: 4%;" *ngFor="let employee of approversList">
<div class="timeline-item" slot="start">
<div class="timeline-thumb timeline-icon">
<div [class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImge"
[src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImge"

@ -60,9 +60,11 @@ export class ConfirmAddEitComponent implements OnInit {
TransactionID: any;
indexLastObj: any = 0;
filterAllowedType: any = ['application/pdf', 'image/jpeg', 'image/png', 'text/plain', 'image/jpg', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
direction: string;
constructor(public modalController: ModalController, public cs: CommonService, private ts: TranslatorService, private eitService: EitService) {
this.direction = TranslatorService.getCurrentLanguageName()
this.isSubmitBtnClicked = false;
this.eitRequest = new EitRequest();
}

@ -25,7 +25,7 @@
<div class="light-dote"></div>
<!-- </ion-col>
<ion-col> -->
<label class="light-label">{{ts.trPK('absenceList','adult')}}</label>
<label [ngClass]="direction == 'en' ? 'light-label':'light-label-ar' ">{{ts.trPK('absenceList','adult')}}</label>
</ion-col>
<ion-col class="col" size="4">
<div class="blue-dote"></div>
@ -37,7 +37,7 @@
<div class="green-dote"></div>
<!-- </ion-col>
<ion-col> -->
<label class="green-label">{{ts.trPK('absenceList','infants')}} </label>
<label [ngClass]="direction == 'en'? 'green-label':'green-label-ar'">{{ts.trPK('absenceList','infants')}} </label>
</ion-col>
</ion-row>
@ -53,7 +53,7 @@
<div class="gridService">
<ion-row>
<ion-col class="columns">
<div class="adult-dote"></div>
<div [class]="direction =='en'? 'adult-dote':'adult-dote-ar'"></div>
<label>{{ts.trPK('absenceList','adult')}}</label>
<br>
<br>
@ -61,7 +61,7 @@
<br> <label class="services">{{ts.trPK('absenceList','tickets')}}</label>
</ion-col>
<ion-col class="columns">
<div class="child-dote"></div>
<div [ngClass]="direction == 'en'? 'child-dote' :'child-dote-ar'"></div>
<label>{{ts.trPK('absenceList','child')}} </label>
<br>
<br>
@ -70,7 +70,7 @@
<br> <label class="services">{{ts.trPK('absenceList','tickets')}}</label>
</ion-col>
<ion-col class="columns">
<div class="infants-dote"></div>
<div [ngClass]="direction == 'en'? 'infants-dote': 'infants-dote-ar'"></div>
<label>{{ts.trPK('absenceList','infants')}} </label>
<br>
<br>

@ -134,6 +134,11 @@ h4 {
margin-left: 7px !important;
margin-right: 42px;
}
.green-label-ar{
font-size: 15px !important;
margin-left: 7px !important;
margin-right: 15px;
}
.blue-label{
font-size: 15px !important;
margin-left: 7px !important;
@ -144,6 +149,11 @@ h4 {
margin-left: 7px !important;
margin-right: -26px;
}
.light-label-ar{
font-size: 15px !important;
margin-right: 7px !important;
margin-left: -26px;
}
.light-dote{
background-color: #3CB9D5;
@ -215,6 +225,16 @@ h4 {
margin-left: -17px;
margin-right: 5px;
}
.adult-dote-ar{
background-color: #3CB9D5;
width: 15px;
height: 15px;
border-radius: 50% !important;
display: inline-block;
margin-right: 0px;
margin-left: 5px;
}
.child-dote{
background-color: #22C6B3;
@ -225,6 +245,15 @@ h4 {
margin-left: -17px;
margin-right: 5px;
}
.child-dote-ar{
background-color: #22C6B3;
width: 15px;
height: 15px;
border-radius: 50% !important;
display: inline-block;
margin-right: 1px;
margin-left: 5px;
}
.infants-dote{
background-color: #1FA269;
width: 15px;
@ -235,4 +264,14 @@ h4 {
margin-right: 5px;
// margin-bottom: 6px;
}
.infants-dote-ar{
background-color: #1FA269;
width: 15px;
height: 15px;
border-radius: 50% !important;
display: inline-block;
margin-right: 1px;
margin-left: 5px;
}

@ -53,10 +53,12 @@ export class EitListComponent implements OnInit {
gaugeType = "full";
accrualBalancesList: any;
common: any;
direction: string;
// gaugeValue = 11.200;
// gaugeLabel = "";
constructor(private cs: CommonService, private EITService: EitService, private ts: TranslatorService, private modalCtrl: ModalController) {
this.direction = TranslatorService.getCurrentLanguageName()
this.selMenu = this.cs.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.selEmp = this.cs.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
this.respID = this.cs.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);

@ -22,7 +22,7 @@
<ion-label>
<b text-wrap>{{menuItem.PROMPT}}</b>
<ion-icon style="float: right;font-size: 25px;color: grey;" name="arrow-forward"></ion-icon>
<ion-icon [ngClass]='direction == "en"? "span-arrow-en":"span-arrow-ar"' name="arrow-forward"></ion-icon>
</ion-label>
@ -34,7 +34,7 @@
<!-- <ion-row>
<ion-col size="10" class="menu-name"><span ion-text color="color2">&nbsp;{{subPage.PROMPT}} </span> -->
<ion-label><span ion-text color="color2">&nbsp;{{subPage.PROMPT}} </span>
<ion-icon style="float: right;font-size: 25px;color: grey;" name="arrow-forward"></ion-icon>
<ion-icon [ngClass]='direction == "en"? "span-arrow-en":"span-arrow-ar"' name="arrow-forward"></ion-icon>
</ion-label>
<!-- </ion-col>
</ion-row> -->

@ -66,3 +66,17 @@ ion-icon::before {
// border-bottom: 1px solid #dedede;
// }
.span-arrow-en{
float: right;
font-size: 25px;
color: grey;
transform: rotate(0deg);
}
.span-arrow-ar{
float: left;
font-size: 25px;
color: grey;
transform: rotate(180deg);
}

@ -16,8 +16,10 @@ export class HomeComponent implements OnInit {
selMenu: MenuResponse = new MenuResponse();
// Selected Side Menu
selectedMenu: any;
direction: string;
constructor(private cs: CommonService, private ts: TranslatorService) {
this.direction = TranslatorService.getCurrentLanguageName()
this.menu = this.cs.sharedService.getSharedData('menuEntries', false);
this.selMenu = this.cs.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
const title: string = this.ts.trPK('eit', 'my-requests');

@ -10,21 +10,21 @@
</ion-col> -->
<h2><div class="Header">Confirmation</div></h2>
<h2><div class="Header">{{'eit,confirmation' | translate}}</div></h2>
<div>
<div *ngIf="submitAttachmentList.length==0" class="labelcheck" lines="none" style="text-align: center;">
No Attachment
{{'eit,no-attachment' | translate}}
</div>
<div *ngIf="eitComments==''" class="labelcheck" style="text-align: center;margin-bottom: 5px;padding-bottom: 16px;">
No Note
{{'eit,no-note' | translate}}
</div>
</div>
<ion-footer style="border-top: 1px solid grey !important;">
<ion-row class="rowBtn">
<ion-label class="labelRadio">Are you sure you want to submit</ion-label>
<ion-label class="labelRadio">{{'eit,submit' | translate}}</ion-label>
<ion-button class="submitOkButton" (click)="OkBtnModal()"> {{ts.trPK('general','ok')}}
</ion-button>
</ion-row>

@ -56,31 +56,31 @@ export class HomePage implements OnInit {
camera: boolean;
public statsButtons = [
{
title: 'Work List',
title: this.ts.trPK('home','worklist'),
statsValue: 0,
icon: 'assets/icon/new-design/work_list.png',
link: '/notification/homepage'
},
{
title: 'Pending Request',
title: this.ts.trPK('home','pending-request'),
statsValue: 13,
icon: 'assets/icon/new-design/pending_request.png',
link: ''
},
{
title: 'Missing Swipes',
title: this.ts.trPK('home','missing-swipes'),
statsValue: 0,
icon: 'assets/icon/new-design/missing_swipe.png',
link: ''
},
{
title: 'Leave Balance',
title: this.ts.trPK('home','leave-balance'),
statsValue: 0,
icon: 'assets/icon/new-design/leave_balance.png',
link: ''
},
{
title: 'Ticket Balance',
title: this.ts.trPK('absenceList','tickets-balance'),
statsValue: 0,
icon: 'assets/icon/new-design/ticket_balance.png',
link: ''

@ -61,9 +61,9 @@
</ion-col>
</ion-row>
<div [ngClass]="isEmptyObject() ? 'work-list-container' : ''" *ngIf='selectedFilter != "ITG"'>
<div [ngClass]="isEmptyObject() && direction =='en' ? 'work-list-container-en' : 'work-list-container-ar'" *ngIf='selectedFilter != "ITG"'>
<div *ngFor="let data of showFormattedData | keyvalue; let i = index">
<span class="date-span">{{data.key}}</span>
<span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">{{data.key}}</span>
<div (click)="openNotificationDetail(data.value)" class="date-data" *ngFor="let workList of data.value; let j = index">
<p>{{workList.SUBJECT}}</p>
</div>
@ -71,9 +71,9 @@
</div>
<div [ngClass]="isEmptyObject() ? 'work-list-container' : ''" *ngIf="selectedFilter == 'ITG'" >
<div [ngClass]="isEmptyObject() && direction =='en' ? 'work-list-container-en' : 'work-list-container-ar'" *ngIf="selectedFilter == 'ITG'" >
<div *ngFor='let segmentInfo of ITGItem[0]; let i= index' (click)='openITG(segmentInfo)'>
<span class="date-span">{{segmentInfo.ModifiedDate |date}}</span>
<span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">{{segmentInfo.ModifiedDate |date}}</span>
<div class="date-data">
<p>{{segmentInfo.Title}}</p>
</div>

@ -312,7 +312,7 @@ ion-content {
margin-top: 10px;
margin-left: 20px;
}
.work-list-container {
.work-list-container-en {
position: relative;
padding-left: 60px;
clear: both;
@ -320,7 +320,7 @@ ion-content {
margin-bottom: 80px;
padding-top: 15px;
}
.work-list-container:before{
.work-list-container-en:before{
content: "";
position: absolute;
height: 100%;
@ -329,6 +329,26 @@ ion-content {
top: 15px;
background-color: #dddddd;
}
.work-list-container-ar {
position: relative;
padding-right: 60px;
clear: both;
min-height: 200px;
margin-bottom: 80px;
padding-top: 15px;
}
.work-list-container-ar:before{
content: "";
position: absolute;
height: 100%;
width: 4px;
right: 30px;
top: 15px;
background-color: #dddddd;
}
.search-container{
margin-top: 15px;
display: block;
@ -365,6 +385,9 @@ ion-content {
background-color: #38c9b3;
top: 1px;
}
.date-data{
background-color: white;
padding: 1px;
@ -418,3 +441,20 @@ ion-content {
.slideCss{
width: 200px !important;
}
.date-span-ar {
position: relative;
display: block;
margin-bottom: 10px;
}
.date-span-ar:before{
content: "";
position: absolute;
right: -35px;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #38c9b3;
top: 1px;
}

@ -153,7 +153,9 @@ export class HomeComponent implements OnInit {
}
ngOnInit() {
// this.direction = TranslatorService.getCurrentDirection();
this.direction = TranslatorService.getCurrentLanguageName()//TranslatorService.getCurrentDirection();
console.log(">>>>>>>>>>>>>>>>>>"+this.direction);
this.worklistNotifications = this.common.sharedService.getSharedData('worklistNotifications', false);
this.Details();
this.Count();
@ -406,7 +408,7 @@ export class HomeComponent implements OnInit {
style: false
};
}
if(this.ITGSegment.length !=0 ){
if(this.ITGSegment.length != 0 ){
this.setActive(this.ITGSegment[0].code);
}
});

@ -75,7 +75,7 @@
</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', 'bg-gray-dot':approvalInfo.Action === ''}"
class="timeline-thumb timeline-icon">
[class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
</div>
<p style="margin-left: -20%; font-size: 12px !important;">{{approvalInfo.Action}}</p>
</div>

@ -49,6 +49,7 @@ export class WorkListMainItgComponent implements OnInit {
public ExchangeServerSelected: any;
public ExchangeServerDBSelected: any;
public actionBTN: { name: string, image: string, isAvailable: boolean }[] = [];
direction: string;
constructor(
public common: CommonService,
public ts: TranslatorService,
@ -56,6 +57,7 @@ export class WorkListMainItgComponent implements OnInit {
public modalCtrl: ModalController) { }
ngOnInit() {
this.direction = TranslatorService.getCurrentLanguageName()
this.request_info = this.common.sharedService.getSharedData(HomeComponent.REQUSET_INFO);
this.request_name = this.common.sharedService.getSharedData(HomeComponent.REQUSET_NAME);
this.all_request = this.common.sharedService.getSharedData(HomeComponent.ALL_REQUEST);

@ -455,7 +455,7 @@
</button>
</div> -->
<div class="timeline-thumb timeline-icon">
<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">

@ -113,7 +113,7 @@ export class WorklistMainMRComponent implements OnInit {
private modalCtrl: ModalController,
public worklistService: WorklistService
) {
this.direction = TranslatorService.getCurrentLanguageName()
//this.getPassNotificationDetails = this.common.sharedService.getSharedData('passNotificationInfo');
this.WorkListActionHistoryObj = new WorkListActionHistoryRequest();
this.WorkListActionHistoryObj.P_PAGE_NUM = this.P_PAGE_NUM;

@ -598,7 +598,7 @@
</button>
</div> -->
<div class="timeline-thumb timeline-icon">
<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>

@ -115,6 +115,7 @@ export class WorklistMainPoComponent implements OnInit {
approveDis: boolean = false;
rejectDis: boolean = false;
requestDis: boolean = false;
direction: string;
constructor(
@ -128,6 +129,7 @@ export class WorklistMainPoComponent implements OnInit {
private modalCtrl: ModalController,
public worklistService: WorklistService,
) {
this.direction = TranslatorService.getCurrentLanguageName()
this.WorkListActionHistoryObj = new WorkListActionHistoryRequest();
this.WorkListActionHistoryObj.P_PAGE_NUM = this.P_PAGE_NUM;
this.WorkListActionHistoryObj.P_PAGE_LIMIT = this.P_PAGE_LIMIT;

@ -307,7 +307,7 @@
</button>
</div> -->
<div class="timeline-thumb timeline-icon">
<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"

@ -100,6 +100,7 @@ export class WorklistMainPRComponent implements OnInit {
approveDis: boolean;
rejectDis: boolean;
requestDis: boolean;
direction: string;
constructor(
@ -113,7 +114,7 @@ export class WorklistMainPRComponent implements OnInit {
private modalCtrl: ModalController,
public worklistService: WorklistService
) {
this.direction = TranslatorService.getCurrentLanguageName()
//this.getPassNotificationDetails = this.common.sharedService.getSharedData('passNotificationInfo');
this.WorkListActionHistoryObj = new WorkListActionHistoryRequest();
this.WorkListActionHistoryObj.P_PAGE_NUM = this.P_PAGE_NUM;

@ -332,7 +332,7 @@
<ion-item *ngFor="let actionHistory of actionHistoryRes">
<div class="timeline-item" slot="start">
<div class="timeline-thumb timeline-icon">
<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"

@ -94,6 +94,7 @@ export class WorklistMainComponent implements OnInit {
rejectDis: boolean = false;
requestDis: boolean = false;
moreDisabled: boolean = true;
direction: string;
constructor(
public worklistService: WorklistService,
@ -110,6 +111,7 @@ export class WorklistMainComponent implements OnInit {
) {
this.direction = TranslatorService.getCurrentLanguageName()
this.WorkListActionHistoryObj = new WorkListActionHistoryRequest();
this.WorkListActionHistoryObj.P_PAGE_NUM = this.P_PAGE_NUM;
this.WorkListActionHistoryObj.P_PAGE_LIMIT = this.P_PAGE_LIMIT;

@ -884,6 +884,23 @@
"en": "Work List",
"ar": "قائمة العمل"
},
"pending-request":{
"en":"Penading Request",
"ar":"طلبات قيد الانتظار"
},
"missing-swipes":{
"en":"Missing Swipes",
"ar":"البصمات المفقوده"
},
"leave-balance":{
"en":"Leave Balance",
"ar":"رصيد الاجزات"
},
"":{
"":"",
"":""
},
"possitionAlert": {
"en": "The app could not access your location. Make sure that the location service is enabled from your device settings",
"ar": "تعذر على التطبيق الوصول إلى موقعك. تأكد من تفعيل خدمة الموقع من إعدادات جهازك"
@ -1443,6 +1460,22 @@
"deleteAttach": {
"en": "Attachment deleted successfully",
"ar": "تحديث"
},
"confirmation":{
"en":"Confirmation",
"ar":"تاكيد"
},
"no-attachment":{
"en":"No Attachment",
"ar":"لا يوجد مرفقات"
},
"no-note":{
"en":"No Note",
"ar":"لا يوجد ملاحظات"
},
"submit":{
"en":"Are you sure you want to submit?",
"ar":"هل انت متاكد من ارسال الطلب؟"
}
},
"submitAbsence": {

@ -184,7 +184,24 @@ ion-label.labelValue.sc-ion-label-md-h.sc-ion-label-md-s.md.hydrated
/* z-index: 1; */
}
.timeline .timeline-thumb {
.timeline-en .timeline-thumb {
border-radius: 500px;
width: 70px !important;
z-index: 2;
position: absolute;
left: 0px;
// :root[dir="ltr"]{
// left: 37px;
// }
// :root[dir="rtl"]{
// right: 37px;
// }
float: right;
top: 9px;
}
.timeline-ar .timeline-thumb {
border-radius: 500px;
width: 70px !important;

Loading…
Cancel
Save