You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mohemmionic5/Mohem/src/app/profile/home/home.component.html

539 lines
20 KiB
HTML

<app-generic-header showBack="true" [headerText]="'userProfile,title' | translate">
6 years ago
</app-generic-header>
<ion-content class="colorBG">
<div class="header-background-style-card">
</div>
<div [ngClass]="direction == 'ltr' ? 'result-graph' : 'result-graph-ar'" style="margin-top: -50px;">
<div class="user-info">
<div class="user-image-container">
<div class="user-image">
<img [ngClass]="direction == 'ltr'? 'img':'img-ar' "
[src]="personalInfo?.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+personalInfo.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
alt="Team Member Image" />
</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">
</button>
</div>
</div>
<div style="margin-top: 18px;">
<h1>{{User_name_Emp}}</h1>
<span>{{personalInfo?.EMPLOYEE_EMAIL_ADDRESS}}</span>
</div>
<div>
<ion-row>
<ion-col style="border-right: 1px solid rgb(221 221 221);">
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','role')}}</p>
<span class="Boldtext">{{personalInfo?.JOB_NAME}}</span>
</ion-col>
<ion-col>
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{personalInfo?.EMPLOYEE_NUMBER}}</span>
</ion-col>
</ion-row>
</div>
</div>
<div class="user-actions">
<ion-row class="ion-justify-content-center">
<ion-col [size]="4" (click)="selectedSegment('personal')">
<div class="action-button col-button">
<img style="width: 50px;" src="../assets/imgs/check_padding.png">
<span>{{ts.trPK('general','personal-info')}}</span>
</div>
</ion-col>
<ion-col [size]="4" (click)="selectedSegment('basic')">
<div class="action-button col-button">
<img style="width: 50px;" src="../assets/imgs/check_padding.png">
<span>{{ts.trPK('general','basic-details')}}</span>
</div>
</ion-col>
<ion-col [size]="4" (click)="selectedSegment('address')">
<div class="action-button col-button">
<img style="width: 50px;" src="../assets/imgs/check_padding.png">
<span>{{ts.trPK('userProfile','address')}} </span>
</div>
</ion-col>
</ion-row>
</div>
<ion-grid *ngIf="personalInfo" [ngClass]="direction === 'ltr'? 'grid-card':'grid-card-ar' ">
<div [ngClass]=" direction == 'ltr' ? 'gridService-en' : 'gridService-ar'"
style="background: #002948; border-radius: 0px 0px 10px 10px;">
<ion-row>
<ion-col>
<label
style="font-size: 12px; color: white; margin: 10px 0px 0px 0px; display: block; text-align: center;font-weight: bold;">
{{ 'general, appreciate-service' | translate}}
</label>
</ion-col>
</ion-row>
<ion-row [ngClass]=" direction == 'ltr' ? 'service-row-en' : 'service-row-ar'">
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row>
<ion-col class="text-years">
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}
{{ts.trPK('userProfile','years')}}</label>
<!-- <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label> -->
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row>
<ion-col class="text-years">
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}
{{ts.trPK('userProfile','months')}}</label>
<!-- <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label> -->
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row>
<ion-col class="text-years">
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}
{{ts.trPK('absenceList','days')}}</label>
<!-- <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label> -->
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</div>
</ion-grid>
</div>
<br>
<ion-card *ngIf="personalInfoSegment">
<ion-card-content>
<ion-label>
<h1 style="color: black;">{{ts.trPK('userProfile','personal-informaion')}}</h1>
</ion-label>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','category')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">part-time</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','address')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">DR.Sulaiman Alhabib Medical Group</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','phone-no')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">0567845661</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','busG')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">CORP Cloud Solutions</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','payrol')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Cloud Solutions Payroll</h3>
<br>
</ion-card-content>
</ion-card>
<ion-card *ngIf="basicDetailsSegment">
<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>
</ion-label>
</ion-col>
<ion-col size="2">
<img style="width: 70%;border: 1px solid;border-radius: 15px;" src="../assets/imgs/edit_icon.png"
(click)="allowEdit(1)">
</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-label>
<h3>{{ts.trPK('general','full-name')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">ENAD HILAL NASSER MOHAMMED</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','marital-status')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Married</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','birth_date')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">01-FEB-1991</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','civil-identity-number')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">2093486013</h3>
<br>
</ion-card-content>
<ion-card-content *ngIf="editBasic">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','basic-details')}}</h1>
</ion-label>
<ion-label>
<h3>{{ts.trPK('general','effective-date')}}</h3>
</ion-label>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>MMMM</ion-label>
<ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','title')}}</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>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','family-name')}}</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-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-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-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-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-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-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-input class="login-input" type="text"></ion-input>
</ion-item>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content *ngIf="editBasic">
<ion-label>
<h1 style="color: black;">{{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-select placeholder="Select One">
<ion-select-option value="m">Male</ion-select-option>
<ion-select-option value="f">Female</ion-select-option>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','marital-status')}}</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>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','nationality')}}</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>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','religion')}}</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>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','education-level')}}</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>
</ion-select>
</ion-item>
<br>
</ion-card-content>
</ion-card>
<ion-card *ngIf="addressSegment">
<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>
</ion-label>
</ion-col>
<ion-col size="2">
<img style="width: 70%;border: 1px solid;border-radius: 15px;" src="../assets/imgs/edit_icon.png"
(click)="allowEdit(2)">
</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-label>
<h3>{{ts.trPK('general','address')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Riyadh</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','street')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">-</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','area')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">-</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','p-o-box')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">22617</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','city')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Riyadh</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','postal-code')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">11416</h3>
<br>
</ion-card-content>
<ion-card-content *ngIf="editAddress">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','address')}}</h1>
</ion-label>
<ion-label>
<h3>{{ts.trPK('general','effective-date')}}</h3>
</ion-label>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>MMMM</ion-label>
<ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','nationality')}}</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>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','address')}}</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-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-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-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-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-input class="login-input" type="text"></ion-input>
</ion-item>
</ion-card-content>
</ion-card>
<!-- <div class="header-div">
<div>
<div class="centerDiv homeBox">
<img class="profileImg" [src]="user_image">
</div>
<div *ngIf="personalInfo">
<p class="empName">{{User_name_Emp}}</p>
<p class="empJob"> {{User_Job_name}}</p>
</div>
</div>
</div>
<ion-grid *ngIf="personalInfo" style="position: relative; display: block; z-index: 5;">
<div [ngClass]=" direction == 'ltr' ? 'gridService-en' : 'gridService-ar'" style="background: #0B4775; border-radius: 20px;">
<ion-row>
<ion-col>
<label style="font-size: 12px; color: white; margin: 10px 0px 0px 0px; display: block; text-align: center;font-weight: bold;">
{{ 'general, appreciate-service' | translate}}
</label>
</ion-col>
</ion-row>
<ion-row [ngClass]=" direction == 'ltr' ? 'service-row-en' : 'service-row-ar'">
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row style="text-align:center">
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<div class="verticalLine"></div>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row style="text-align:center">
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<div class="verticalLine"></div>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row style="text-align:center">
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}</label>
</ion-col>
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</div>
</ion-grid>
<div class="list">
<ion-list class="list-ios">
<div class="p">
<p>{{ts.trPK('userProfile','Years of Services')}}</p>
</div>
<ion-item class="itemline" (click)="openEditprofile()">
<ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 22px !important;" src="../assets/imgs/profile_icon.png" item-left>
</ion-thumbnail>
<ion-label class="profile">
{{ts.trPK('userProfile','edit-profile')}}
</ion-label>
<ion-icon [ngClass]=" direction == 'ltr' ? 'arrow' : 'arrow-ar'" name="arrow-forward" item-right></ion-icon>
</ion-item>
<ion-item class="itemlins" (click)="openPerormance()">
<ion-thumbnail slot="start" class="menu-thumb">
<ion-icon style= "width: 23px; height: 24px !important;" name="speedometer" item-left></ion-icon>
</ion-thumbnail>
<ion-label class="profile">
{{ts.trPK('userProfile','performance-evaluation')}}
</ion-label>
<ion-icon [ngClass]=" direction == 'ltr' ? 'arrow' : 'arrow-ar'" name="arrow-forward" item-right></ion-icon>
</ion-item>
</ion-list>
</div> -->
<ion-footer *ngIf="editBasic||editAddress">
<ion-grid>
<ion-row>
<ion-col>
<ion-button style="--background: #f44336; 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-col>
</ion-row>
</ion-grid>
</ion-footer>
</ion-content>