updated profile/home and the modal to meet the design style

zohaib-huawei-q2
enadhilal 5 years ago
parent 344bc11ab9
commit f21fe520e0

@ -33,6 +33,6 @@
}
.my-custom-modal-css .modal-wrapper {
width: 90%;
height: 55%;
width: 95%;
height: 60%;
}

@ -10,8 +10,7 @@
class="ion-segment-all">
<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 class="padding-zero"> {{'worklistMain, info'| translate}} </ion-label>
</ion-segment-button>
@ -24,8 +23,9 @@
[ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="padding-zero"> {{'worklistMain, action' | translate}}</ion-label>
</ion-segment-button>
<ion-segment-button value="attach" [ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
<ion-segment-button value="attach"
[ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="padding-zero"> {{'worklistMain, attach-file' | translate}}</ion-label>
</ion-segment-button>
@ -40,21 +40,24 @@
<ion-grid>
<ion-row>
<ion-col>
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div *ngIf="notificationBodyRes?.length > 0 ">
<ion-card *ngFor="let item of notificationBodyRes;let i=index; " style="width: 91%;">
<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>
*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>
@ -65,41 +68,49 @@
</div>
<div style="margin: 10px;font-weight: bold; "
*ngIf="subordinatesleaveList != undefined && subordinatesleaveList?.length > 0">
{{ts.trPK('worklistMain','employee-on-leave')}}
{{ts.trPK('worklistMain','employee-on-leave')}}
</div>
<ion-item lines="none" [ngClass]=" direction === 'en' ? 'subOrdinateList' :'subOrdinateList-Ar' "
<ion-item lines="none"
[ngClass]=" direction === 'en' ? 'subOrdinateList' :'subOrdinateList-Ar' "
*ngFor="let List of subordinatesleaveList;">
<ion-grid [ngClass]=" direction === 'en' ? 'gridSubordinates' :'gridSubordinates-Ar' ">
<ion-grid
[ngClass]=" direction === 'en' ? 'gridSubordinates' :'gridSubordinates-Ar' ">
<div [ngClass]=" direction === 'en' ? 'subOrdinateDiv' :'subOrdinateDiv-Ar' ">
<img *ngIf="List.EMPLOYEE_IMAGE" class="empImgeSub"
style="width: 70px !important; height: 70px !important;"
<img *ngIf="List.EMPLOYEE_IMAGE" class="empImgeSub"
style="width: 70px !important; height: 70px !important;"
[src]="'data:image/png;base64,'+List.EMPLOYEE_IMAGE">
<img *ngIf="List.EMPLOYEE_IMAGE == null" class="empImgeSub"
style="width: 70px !important; height: 70px !important;"
style="width: 70px !important; height: 70px !important;"
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 style="font-weight: bold; " class="label"
for="">{{List.EMPLOYEE_NAME}}
</label>
<br />
<label class="label" for="">{{List.POSITION_TITLE}} </label><br />
<br>
<label class="label" style="font-size: 11px !important; position: absolute; left: 0px; color: #000;" for="label">{{List.STATUS}}</label>
<label class="label"
style="font-size: 11px !important; position: absolute; left: 0px; color: #000;"
for="label">{{List.STATUS}}</label>
</ion-col>
<!-- <ion-col class="status" size="3">
</ion-col> -->
</ion-row>
<br />
<ion-row [ngClass]=" direction === 'en' ? 'subOrdinateRow' :'subOrdinateRow-Ar'">
<ion-row
[ngClass]=" direction === 'en' ? 'subOrdinateRow' :'subOrdinateRow-Ar'">
<ion-col>
<label class="label" for=""> {{ts.trPK('worklistMain','from')}}</label><br />
<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="">{{ts.trPK('worklistMain','to')}}</label><br />
<label class="label" for="">{{List.DATE_END | date}}</label>
</ion-col>
</ion-row>
@ -107,177 +118,189 @@
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide>
<ion-slide>
<ng-container *ngIf="activeSegment === 'item-req'">
<ion-grid style="width: 1px;">
<ion-row>
<ion-col>
<ion-card class="cardContent">
<ion-card-content>
<div>
<ion-grid style="text-align: left;">
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.FROM_USER}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
</label>
<br />
<label for=""> {{getPassNotificationDetails.TO_USER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<ion-row class="">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.RESPONDER}} </label>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-card *ngIf="submitterInfoRes?.length > 0 ">
<ion-card-content [ngClass] = " direction === 'en' ? 'cardAlignTextEn' : 'cardAlignTextAr'">
<div style="font-weight: bold;" class="hrTitle">
{{'userProfile, emp-detail' | translate}}</div>
<div *ngFor="let submitterInfo of submitterInfoRes">
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'userProfile, empNo' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NUMBER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, name' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, job-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.POSITION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'userProfile, grade' | translate}}</label>
<br />
<label for="">{{submitterInfo.GRADE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, job_cate' | translate}}</label>
<br />
<label for="">{{submitterInfo.JOB_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, category' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYMENT_CATEGORY_MEANING}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, emp-email' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, org-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.ORGANIZATION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, loc-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.LOCATION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, branch-payrol' | translate}}</label>
<br />
<label for="">{{submitterInfo.PAYROLL_NAME}}</label>
</ion-col>
</ion-row>
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide>
<ion-grid style="width: 1px;">
<ion-row>
<ion-col>
<ion-card class="cardContent">
<ion-card-content>
<div>
<ion-grid style="text-align: left;">
<ion-row class="rowBorder">
<ion-col
[ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">
{{ts.trPK('worklistMain','from')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.FROM_USER}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq"
for="">{{ts.trPK('worklistMain','to')}}
</label>
<br />
<label for=""> {{getPassNotificationDetails.TO_USER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col
[ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq"
for="">{{ts.trPK('worklistMain','sent')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq"
for="">{{ts.trPK('worklistMain','closed')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<ion-row class="">
<ion-col
[ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq"
for="">{{ts.trPK('worklistMain','id')}}
</label>
<br />
<label
for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq"
for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.RESPONDER}} </label>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-card *ngIf="submitterInfoRes?.length > 0 ">
<ion-card-content
[ngClass]=" direction === 'en' ? 'cardAlignTextEn' : 'cardAlignTextAr'">
<div style="font-weight: bold;" class="hrTitle">
{{'userProfile, emp-detail' | translate}}</div>
<div *ngFor="let submitterInfo of submitterInfoRes">
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, empNo' |
translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NUMBER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, name' |
translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, job-name' |
translate}}</label>
<br />
<label for="">{{submitterInfo.POSITION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, grade' |
translate}}</label>
<br />
<label for="">{{submitterInfo.GRADE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, job_cate' |
translate}}</label>
<br />
<label for="">{{submitterInfo.JOB_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, category' |
translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYMENT_CATEGORY_MEANING}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, emp-email' |
translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
</ion-col>
</ion-row>
<!-- <ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, org-name' |
translate}}</label>
<br />
<label for="">{{submitterInfo.ORGANIZATION_NAME}}</label>
</ion-col>
</ion-row> -->
<!-- <ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, loc-name' |
translate}}</label>
<br />
<label for="">{{submitterInfo.LOCATION_NAME}}</label>
</ion-col>
</ion-row> -->
<ion-row>
<ion-col>
<label class="colItemReq" for="">{{'worklistMain, branch-payrol' |
translate}}</label>
<br />
<label for="">{{submitterInfo.PAYROLL_NAME}}</label>
</ion-col>
</ion-row>
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide>
<ion-slide>
<ng-container *ngIf="activeSegment === 'action-history'">
@ -292,13 +315,14 @@
<div class="timeline">
<ion-item *ngFor="let actionHistory of actionHistoryRes">
<div class="timeline-item" slot="start">
<div
<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>
src="../assets/imgs/profile.png">
</div>
</div>
<ion-col size="8">
<ion-label class="name">
@ -322,7 +346,8 @@
</div>
<button class="showMore"
(click)="actionHistory.visible = !actionHistory.visible">{{ actionHistory.visible ? 'Show less': 'Show More' }}</button>
(click)="actionHistory.visible = !actionHistory.visible">{{
actionHistory.visible ? 'Show less': 'Show More' }}</button>
</div>
</div>
@ -336,9 +361,11 @@
{{actionHistory.NOTIFICATION_DATE| dateString }} </ion-label>
</ion-col>
<ion-col size="4">
<img class="req_info" src="assets/imgs/req info.svg" (click)="openRequestInfoDel(actionHistory, 'REQUEST_INFO')" />
<img class="req_info" src="assets/imgs/delegate.svg" (click)="openRequestInfoDel(actionHistory, 'DELEGATE')"/>
<img class="req_info" src="assets/imgs/req info.svg"
(click)="openRequestInfoDel(actionHistory, 'REQUEST_INFO')" />
<img class="req_info" src="assets/imgs/delegate.svg"
(click)="openRequestInfoDel(actionHistory, 'DELEGATE')" />
</ion-col>
<div class="line"></div>
</ion-item>
@ -452,37 +479,37 @@
<ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVED')">
<img src="../assets/imgs/mohemm-action/Approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> -->
<ion-label class = "action-btn"> {{approve_label}}</ion-label>
<ion-label class="action-btn"> {{approve_label}}</ion-label>
</ion-tab-button>
<ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')">
<img src="../assets/imgs/mohemm-action/Approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> -->
<ion-label class = "action-btn"> {{close_label}}</ion-label>
<ion-label class="action-btn"> {{close_label}}</ion-label>
</ion-tab-button>
<ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECTED')">
<img src="../assets/imgs/mohemm-action/Reject.png">
<!-- <ion-label > {{'worklistMain, reject' | translate}}</ion-label> -->
<ion-label class = "action-btn"> {{reject_label}}</ion-label>
<ion-label class="action-btn"> {{reject_label}}</ion-label>
</ion-tab-button>
<ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')">
<img src="../assets/imgs/mohemm-action/info.png">
<!-- <ion-label > {{'worklistMain, request' | translate}}</ion-label> -->
<ion-label class = "action-btn"> {{reqInfo_label}}</ion-label>
<ion-label class="action-btn"> {{reqInfo_label}}</ion-label>
</ion-tab-button>
<ion-tab-button (click)="nextNotfification()">
<img src="../assets/imgs/mohemm-action/Skip.png">
<ion-label class = "action-btn"> {{'worklistMain, skip' | translate}}</ion-label>
<ion-label class="action-btn"> {{'worklistMain, skip' | translate}}</ion-label>
</ion-tab-button>
<ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()">
<img src="../assets/imgs/mohemm-action/More.png">
<ion-label class = "action-btn"> {{'worklistMain, more' | translate}}</ion-label>
<ion-label class="action-btn"> {{'worklistMain, more' | translate}}</ion-label>
</ion-tab-button>

@ -14,7 +14,7 @@
</div>
<div [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'">
<button ion-button icon-only menuToggle class="menubutton">
<img class="changeIcon" src="../assets/imgs/edit-image.svg">
<img class="changeIcon" src="../assets/imgs/edit_icon.png">
</button>
</div>
</div>
@ -39,23 +39,23 @@
<ion-row class="ion-justify-content-center">
<ion-col [size]="4" (click)="selectedSegment('personal')">
<div class="action-button col-button">
<img *ngIf="!personalInfoSegment" style="width: 50px;" src="../assets/imgs/profile-icons/info@2x.png">
<img *ngIf="personalInfoSegment" style="width: 50px;" src="../assets/imgs/profile-icons/info-a@2x.png">
<span>{{ts.trPK('general','personal-info')}}</span>
<img *ngIf="!personalInfoSegment" style="width: 40px;" src="../assets/imgs/profile-icons/info@2x.png">
<img *ngIf="personalInfoSegment" style="width: 40px;" src="../assets/imgs/profile-icons/info-a@2x.png">
<span style="font-size: 11px;">{{ts.trPK('general','personal-info')}}</span>
</div>
</ion-col>
<ion-col [size]="4" (click)="selectedSegment('basic')">
<div class="action-button col-button">
<img *ngIf="!basicDetailsSegment" style="width: 50px;" src="../assets/imgs/profile-icons/basic-detail@2x.png">
<img *ngIf="basicDetailsSegment" style="width: 50px;" src="../assets/imgs/profile-icons/basic-detail@21.png">
<span>{{ts.trPK('general','basic-details')}}</span>
<img *ngIf="!basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@2x.png">
<img *ngIf="basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@21.png">
<span style="font-size: 11px;">{{ts.trPK('general','basic-details')}}</span>
</div>
</ion-col>
<ion-col [size]="4" (click)="selectedSegment('address')">
<div class="action-button col-button">
<img *ngIf="!addressSegment" style="width: 50px;" src="../assets/imgs/profile-icons/main-address@2x.png">
<img *ngIf="addressSegment" style="width: 50px;" src="../assets/imgs/profile-icons/main address-a@2x.png">
<span>{{ts.trPK('userProfile','address')}} </span>
<img *ngIf="!addressSegment" style="width: 40px;" src="../assets/imgs/profile-icons/main-address@2x.png">
<img *ngIf="addressSegment" style="width: 40px;" src="../assets/imgs/profile-icons/main address-a@2x.png">
<span style="font-size: 11px;">{{ts.trPK('userProfile','address')}} </span>
</div>
</ion-col>
</ion-row>
@ -112,86 +112,86 @@
<br>
<ion-card *ngIf="personalInfoSegment">
<ion-card *ngIf="personalInfoSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content>
<ion-label>
<h1 style="color: black;">{{ts.trPK('userProfile','personal-informaion')}}</h1>
<h1 class="header-label-text-form">{{ts.trPK('userProfile','personal-informaion')}}</h1>
</ion-label>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','category')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','category')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">part-time</h3>
<h3 class="result-label-text-form">part-time</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','address')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','address')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">DR.Sulaiman Alhabib Medical Group</h3>
<h3 class="result-label-text-form">DR.Sulaiman Alhabib Medical Group</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','phone-no')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','phone-no')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">0567845661</h3>
<h3 class="result-label-text-form">0567845661</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','busG')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','busG')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">CORP Cloud Solutions</h3>
<h3 class="result-label-text-form">CORP Cloud Solutions</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','payrol')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','payrol')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Cloud Solutions Payroll</h3>
<h3 class="result-label-text-form">Cloud Solutions Payroll</h3>
<br>
</ion-card-content>
</ion-card>
<ion-card *ngIf="basicDetailsSegment">
<ion-card *ngIf="basicDetailsSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content *ngIf="!editBasic">
<ion-grid>
<ion-row>
<ion-col size="10">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','basic-details')}}</h1>
<h1 class="header-label-text-form">{{ts.trPK('general','basic-details')}}</h1>
</ion-label>
</ion-col>
<ion-col size="2">
<img style="width: 70%;border: 1px solid;border-radius: 15px;" src="../assets/imgs/edit_icon.png"
<img style="width: 70%;" src="../assets/imgs/profile-icons/editing@2x.png"
(click)="allowEdit(1)">
</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-label>
<h3>{{ts.trPK('general','full-name')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','full-name')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">ENAD HILAL NASSER MOHAMMED</h3>
<h3 class="result-label-text-form">ENAD HILAL NASSER MOHAMMED</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','marital-status')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','marital-status')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Married</h3>
<h3 class="result-label-text-form">Married</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','birth_date')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','birth_date')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">01-FEB-1991</h3>
<h3 class="result-label-text-form">01-FEB-1991</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','civil-identity-number')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','civil-identity-number')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">2093486013</h3>
<h3 class="result-label-text-form">2093486013</h3>
<br>
</ion-card-content>
<ion-card-content *ngIf="editBasic">
<ion-card-content *ngIf="editBasic" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','basic-details')}}</h1>
<h1 class="header-label-text-form">{{ts.trPK('general','basic-details')}}</h1>
</ion-label>
<ion-label>
<h3>{{ts.trPK('general','effective-date')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','effective-date')}}</h3>
</ion-label>
<ion-item lines="none" class="item-input-login" style="--background: white">
@ -201,7 +201,11 @@
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','title')}}</ion-label>
<ion-label>
<h3 class="type-label-text-form">
{{ts.trPK('general','title')}}
</h3>
</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="mr">Mr</ion-select-option>
<ion-select-option value="ms">Miss</ion-select-option>
@ -210,60 +214,96 @@
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','family-name')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','family-name')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','preferred-name')}}</ion-label>
<ion-label position="floating">
<h3 >
{{ts.trPK('userProfile','preferred-name')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','previous-family-name')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','previous-family-name')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','father-name')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','father-name')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','grand-father-name')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','grand-father-name')}}
</h3>
</ion-label>
<ion-input class="login-input" required type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','arabic-first-name')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','arabic-first-name')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','arabic-father-name')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','arabic-father-name')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','arabic-grand-father-name')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','arabic-grand-father-name')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content *ngIf="editBasic">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','other')}}</h1>
<h1 class="header-label-text-form">{{ts.trPK('general','other')}}</h1>
</ion-label>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','gender')}}</ion-label>
<ion-label>
<h3 class="type-label-text-form">
{{ts.trPK('general','gender')}}
</h3>
</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="m">Male</ion-select-option>
<ion-select-option value="f">Female</ion-select-option>
@ -272,7 +312,11 @@
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','marital-status')}}</ion-label>
<ion-label>
<h3 class="type-label-text-form">
{{ts.trPK('general','marital-status')}}
</h3>
</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="s">Singal</ion-select-option>
<ion-select-option value="m">Married</ion-select-option>
@ -281,7 +325,11 @@
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','nationality')}}</ion-label>
<ion-label>
<h3 class="type-label-text-form">
{{ts.trPK('general','nationality')}}
</h3>
</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="mr">Mr</ion-select-option>
<ion-select-option value="ms">Miss</ion-select-option>
@ -290,7 +338,11 @@
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','religion')}}</ion-label>
<ion-label>
<h3 class="type-label-text-form">
{{ts.trPK('general','religion')}}
</h3>
</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="i">Islam</ion-select-option>
<ion-select-option value="o">Other</ion-select-option>
@ -299,7 +351,11 @@
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','education-level')}}</ion-label>
<ion-label>
<h3 class="type-label-text-form">
{{ts.trPK('general','education-level')}}
</h3>
</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="u">University</ion-select-option>
<ion-select-option value="o">other</ion-select-option>
@ -310,62 +366,62 @@
</ion-card-content>
</ion-card>
<ion-card *ngIf="addressSegment">
<ion-card *ngIf="addressSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content *ngIf="!editAddress">
<ion-grid>
<ion-row>
<ion-col size="10">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','main-address')}}</h1>
<h1 class="header-label-text-form">{{ts.trPK('general','main-address')}}</h1>
</ion-label>
</ion-col>
<ion-col size="2">
<img style="width: 70%;border: 1px solid;border-radius: 15px;" src="../assets/imgs/edit_icon.png"
<img style="width: 70%;" src="../assets/imgs/profile-icons/editing@2x.png"
(click)="allowEdit(2)">
</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-label>
<h3>{{ts.trPK('general','address')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','address')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Riyadh</h3>
<h3 class="result-label-text-form">Riyadh</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','street')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','street')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">-</h3>
<h3 class="result-label-text-form">-</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','area')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','area')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">-</h3>
<h3 class="result-label-text-form">-</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','p-o-box')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','p-o-box')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">22617</h3>
<h3 class="result-label-text-form">22617</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','city')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','city')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Riyadh</h3>
<h3 class="result-label-text-form">Riyadh</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','postal-code')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','postal-code')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">11416</h3>
<h3 class="result-label-text-form">11416</h3>
<br>
</ion-card-content>
<ion-card-content *ngIf="editAddress">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','address')}}</h1>
<h1 class="header-label-text-form">{{ts.trPK('general','address')}}</h1>
</ion-label>
<ion-label>
<h3>{{ts.trPK('general','effective-date')}}</h3>
<h3 class="type-label-text-form">{{ts.trPK('general','effective-date')}}</h3>
</ion-label>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>MMMM</ion-label>
@ -374,7 +430,11 @@
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','nationality')}}</ion-label>
<ion-label>
<h3 class="type-label-text-form">
{{ts.trPK('general','nationality')}}
</h3>
</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="mr">Mr</ion-select-option>
<ion-select-option value="ms">Miss</ion-select-option>
@ -383,37 +443,61 @@
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','address')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','address')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','street')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','street')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','area')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','area')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','p-o-box')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','p-o-box')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','city')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','city')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','postal-code')}}</ion-label>
<ion-label position="floating">
<h3 class="type-label-text-form">
{{ts.trPK('userProfile','postal-code')}}
</h3>
</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
</ion-card-content>
@ -529,11 +613,11 @@
<ion-grid>
<ion-row>
<ion-col>
<ion-button style="--background: #f44336; background: white; width: 100%;" (click)="disableEdit(1)">Cancel
<ion-button style="--background: #CB3332; background: white; width: 100%;" (click)="disableEdit(1)">Cancel
</ion-button>
</ion-col>
<ion-col>
<ion-button style="--background: #46da59; background: white; width: 100%;" (click)="presentModal()">Update</ion-button>
<ion-button style="--background: #20A169; background: white; width: 100%;" (click)="presentModal()">Update</ion-button>
</ion-col>
</ion-row>
</ion-grid>

@ -970,7 +970,7 @@ $actionBtnSize: 36px;
.header-background-style-card {
padding-top: 1px;
background: #269db8;
height: 15%;
height: 115px;
}
.text-years {
@ -997,7 +997,7 @@ $actionBtnSize: 36px;
.changeImgBtn {
position: absolute;
left: 60%;
bottom: 150%;
bottom: 230%;
}
.changeImgBtn-ar {
position: absolute;
@ -1013,12 +1013,12 @@ $actionBtnSize: 36px;
}
.changeIcon {
bottom: 6px;
width: 10px;
border-radius: 50% !important;
position: relative;
color: #7f8c8d;
height: 35px;
// bottom: 6px;
// width: 10px;
// border-radius: 50% !important;
// position: relative;
// color: #7f8c8d;
// height: 35px;
}
.card-style-details-info {
@ -1039,3 +1039,34 @@ $actionBtnSize: 36px;
.login-input {
border: none;
}
.card-size-info-en{
width: 90%;
left: 2%;
}
.card-size-info-ar{
width: 90%;
right: 2%;
}
.header-label-text-form{
opacity: 1;
color: #2B353E;
font: normal normal 600 20px/30px Poppins;
letter-spacing: -0.8px;
}
.type-label-text-form{
font: normal normal 600 13px/20px Poppins;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
}
.result-label-text-form{
font: normal normal 600 16px/25px Poppins;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}

@ -27,7 +27,7 @@
<ion-grid>
<ion-row>
<ion-col>
<ion-button style=" width: 90%; background: white; --background: #b4b4b4">{{ts.trPK('userProfile','cancel-text')}}</ion-button>
<ion-button style=" width: 90%; background: white; --background: #b4b4b4">{{ts.trPK('eit','cancel-text')}}</ion-button>
</ion-col>
<ion-col>

Binary file not shown.

After

Width:  |  Height:  |  Size: 512 B

Loading…
Cancel
Save