|
|
|
|
@ -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>
|
|
|
|
|
|