Merge branch 'MOHEMM-Q2-DEV' of https://gitlab.com/haroon6138/mohemmionic5 into sultan26April
commit
23bcf583fb
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AnnouncementService } from './announcement.service';
|
||||
|
||||
describe('AnnouncementService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: AnnouncementService = TestBed.get(AnnouncementService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,30 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Request } from 'src/app/hmg-common/services/models/request';
|
||||
import { Observable } from 'rxjs';
|
||||
import { AuthenticationService } from '../authentication/authentication.service';
|
||||
import { ConnectorService } from '../connector/connector.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AnnouncementService {
|
||||
public static getAnnouncemntList = '';
|
||||
|
||||
constructor(
|
||||
public authService: AuthenticationService,
|
||||
public con: ConnectorService,
|
||||
) { }
|
||||
|
||||
|
||||
getAnnouncementListService(onError ?: any , oerrorLable ?: any) {
|
||||
const request = new Request();
|
||||
this.authService.authenticateRequest(request);
|
||||
console.log(request);
|
||||
return this.con.post(
|
||||
AnnouncementService.getAnnouncemntList,
|
||||
request,
|
||||
onError,
|
||||
oerrorLable
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { MowadhafiPage } from './mowadhafi.page';
|
||||
import { HmgCommonModule } from '../hmg-common/hmg-common.module';
|
||||
import {MyRequestComponent} from './my-request/my-request.component';
|
||||
import {HRRequestComponent} from './hr-request/hr-request.component';
|
||||
import {RequestDetailsComponent} from'./request-details/request-details.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: MowadhafiPage,
|
||||
children:[{
|
||||
path: 'my-request',
|
||||
component: MyRequestComponent
|
||||
},
|
||||
{
|
||||
path: 'hr-request',
|
||||
component: HRRequestComponent
|
||||
},
|
||||
{
|
||||
path: 'request-details',
|
||||
component: RequestDetailsComponent
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
HmgCommonModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
RouterModule.forChild(routes)
|
||||
],
|
||||
declarations: [MowadhafiPage,MyRequestComponent,HRRequestComponent,RequestDetailsComponent]
|
||||
})
|
||||
export class MowadhafiPageModule {}
|
||||
@ -0,0 +1,10 @@
|
||||
<!-- <ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>mowadhafi</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
-->
|
||||
|
||||
<ion-content>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-content>
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MowadhafiPage } from './mowadhafi.page';
|
||||
|
||||
describe('MowadhafiPage', () => {
|
||||
let component: MowadhafiPage;
|
||||
let fixture: ComponentFixture<MowadhafiPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MowadhafiPage ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MowadhafiPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-mowadhafi',
|
||||
templateUrl: './mowadhafi.page.html',
|
||||
styleUrls: ['./mowadhafi.page.scss'],
|
||||
})
|
||||
export class MowadhafiPage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MowadhafiService } from './mowadhafi.service';
|
||||
|
||||
describe('MowadhafiService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: MowadhafiService = TestBed.get(MowadhafiService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,92 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ConnectorService } from 'src/app/hmg-common/services/connector/connector.service';
|
||||
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MowadhafiService {
|
||||
public static EMPLOYEE_SHARED_DATA = 'employee';
|
||||
public static getMyTeam = 'Services/ERP.svc/REST/GET_EMPLOYEE_SUBORDINATES';
|
||||
public static getSuborinateStatus = 'Services/ERP.svc/REST/GET_SUBORDINATES_ATTD_STATUS';
|
||||
public static getUserInfo ='Services/ERP.svc/REST/Get_UserInformation';
|
||||
public static getTicketTypes ='Services/COCWS.svc/REST/Mohemm_ITG_GetTicketTypes';
|
||||
public static getProject ='Services/COCWS.svc/REST/Mohemm_ITG_GetProjects';
|
||||
public static getProjectDepartments ='Services/COCWS.svc/REST/Mohemm_ITG_GetProjectDepartments';
|
||||
public static getDepartmentSections ='Services/COCWS.svc/REST/Mohemm_ITG_GetDepartmentSections';
|
||||
public static getSectionTopics ='Services/COCWS.svc/REST/Mohemm_ITG_GetSectionTopics';
|
||||
public static getTicketsByEmployee ='Services/COCWS.svc/REST/Mohemm_ITG_GetTicketsByEmployee';
|
||||
public static getTicketStatisticsByEmp ='Services/COCWS.svc/REST/Mohemm_ITG_GetTicketStatisticsByEmployee';
|
||||
public static getTicketTransaction ='Services/COCWS.svc/REST/Mohemm_ITG_GetTicketTransaction';
|
||||
public static getTicketDetails =' Services/COCWS.svc/REST/Mohemm_ITG_GetTicketDetails';
|
||||
|
||||
constructor(
|
||||
public con: ConnectorService,
|
||||
private authService: AuthenticationService
|
||||
) { }
|
||||
public getEmployeeSubordinates(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getMyTeam, request, onError, errorLabel);
|
||||
}
|
||||
|
||||
public getSuborinatesAttStatus(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getSuborinateStatus, request, onError, errorLabel);
|
||||
}
|
||||
|
||||
public getUserInfo(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getUserInfo, request, onError, errorLabel);
|
||||
}
|
||||
public getTicketTypes(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getTicketTypes, request, onError, errorLabel);
|
||||
}
|
||||
public getProject(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getProject, request, onError, errorLabel);
|
||||
}
|
||||
public getProjectDepartments(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getProjectDepartments, request, onError, errorLabel);
|
||||
}
|
||||
public getDepartmentSections(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getDepartmentSections, request, onError, errorLabel);
|
||||
}
|
||||
public getSectionTopics(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getSectionTopics, request, onError, errorLabel);
|
||||
}
|
||||
public getTicketsByEmployee(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getTicketsByEmployee, request, onError, errorLabel);
|
||||
}
|
||||
|
||||
public getTicketStatisticsByEmp(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getTicketStatisticsByEmp, request, onError, errorLabel);
|
||||
}
|
||||
|
||||
public getTicketTransaction(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getTicketTransaction, request, onError, errorLabel);
|
||||
}
|
||||
|
||||
public getTicketDetails(absence: any, onError?: any, errorLabel?: string){
|
||||
const request = absence;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(MowadhafiService.getTicketDetails, request, onError, errorLabel);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar class="header-toolbar-new" >
|
||||
<ion-buttons slot="start">
|
||||
<nav-buttons (backClick)="goback()" [navigate]="false"></nav-buttons>
|
||||
</ion-buttons>
|
||||
<ion-title style=" color:white; text-align: center;">{{ts.trPK('userProfile','MyHR-request')}}</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<!-- <div>
|
||||
<ion-row [ngClass]="direction == 'en' ? 'empty-en':'empty-ar' ">{{ts.trPK('general','empty')}}</ion-row>
|
||||
</div> -->
|
||||
<div>
|
||||
<ion-card class="result-container" (click)="openRequestDetailsPage()">
|
||||
<ion-card-content>
|
||||
<ion-row style="margin-left: -3px; margin-right: -9px;">
|
||||
<ion-col class="text">Complaints</ion-col>
|
||||
<ion-col class="date">{{ts.trPK('userProfile','postedDate')}} May2,2021</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>There is some Complaints</ion-row>
|
||||
<ion-row style="margin-top: 5px;">Pending</ion-row>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</div>
|
||||
</ion-content>
|
||||
<ion-footer class="footer">
|
||||
<div class="Btn">
|
||||
<ion-button class="CreateBtn" (click)="openHRRequestPage()" >{{ts.trPK('userProfile','createHR-Request')}}</ion-button>
|
||||
</div>
|
||||
</ion-footer>
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
|
||||
|
||||
|
||||
.empty-en{
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-family: WorkSans-Bold;
|
||||
margin: 50px 0px 0px 100px;
|
||||
}
|
||||
.empty-ar{
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-family: WorkSans-Bold;
|
||||
margin: 50px 100px 0px 0px;
|
||||
}
|
||||
|
||||
.result-container{
|
||||
position: relative;
|
||||
background: white;
|
||||
/* padding-bottom: 3px; */
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.text{
|
||||
font-size: 15px;
|
||||
margin-top: -9px;
|
||||
font-family: 'WorkSans-bold';
|
||||
}
|
||||
.date{
|
||||
margin-top: -9px;
|
||||
margin-right: -49px;
|
||||
color: gray;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.CreateBtn{
|
||||
--background: var(--newgreen) !important;
|
||||
background: var(--newgreen) !important;
|
||||
white-space: normal;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
min-height: 1.0cm;
|
||||
--border-radius: 7px !important;
|
||||
border-radius: 7px !important;
|
||||
--min-height: 1.6cm !important;
|
||||
width: 315px;
|
||||
}
|
||||
.footer{
|
||||
padding: 15px 0px;
|
||||
background-color: var(--light) !important;
|
||||
border: 0px !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
.Btn{
|
||||
margin: auto; text-align: center; display: block;
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar class="header-toolbar-new">
|
||||
<ion-buttons slot="start">
|
||||
<nav-buttons (backClick)="goback()" [navigate]="false"></nav-buttons>
|
||||
</ion-buttons>
|
||||
<ion-title style=" color:white; text-align: center;">{{ts.trPK('userProfile','MyHR-request')}}</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<!-- <div>
|
||||
<ion-row [ngClass]="direction == 'en' ? 'empty-en':'empty-ar' ">{{ts.trPK('general','empty')}}</ion-row>
|
||||
</div> -->
|
||||
<div>
|
||||
<ion-card class="result-container" >
|
||||
<ion-card-content>
|
||||
<ion-row style="margin-left: -3px; margin-right: -9px;">
|
||||
<ion-col >Pending</ion-col>
|
||||
<ion-col class="date">{{ts.trPK('userProfile','postedDate')}} May2,2021</ion-col>
|
||||
</ion-row>
|
||||
<ion-col [size]="12">
|
||||
<h2 class="labels">{{ts.trPK('userProfile','refrence')}}</h2>
|
||||
<p class="text">453388</p>
|
||||
</ion-col>
|
||||
<ion-col [size]="12">
|
||||
<h2 class="labels"> {{ts.trPK('userProfile','section')}}</h2>
|
||||
<p class="text">Employee</p>
|
||||
</ion-col>
|
||||
<ion-col [size]="12">
|
||||
<h2 class="labels"> {{ts.trPK('userProfile','topic')}}</h2>
|
||||
<p class="text">Change Tiket</p>
|
||||
</ion-col>
|
||||
<ion-col [size]="12">
|
||||
<h2 class="labels">{{ts.trPK('userProfile','Description')}}</h2>
|
||||
<p class="DescrText">descriptions</p>
|
||||
</ion-col>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ion-card class="result-containerList" >
|
||||
<ion-card-content>
|
||||
<div style="position: relative;">
|
||||
<div [ngClass]=" direction == 'en'? 'request-list-container' : 'request-list-container-ar'" >
|
||||
<div>
|
||||
<!-- <div *ngFor="let formattedAction of showFormattedAction; let i = index"> -->
|
||||
<span [ngClass]="direction == 'en'? 'text-span':'text-span-ar'">Action By</span>
|
||||
<div class="action-data">
|
||||
<p >descriptions</p>
|
||||
<span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">May 16,2021</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
@ -0,0 +1,174 @@
|
||||
|
||||
|
||||
|
||||
.sendCodeBtn{
|
||||
--background: #269DB8;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-left: 23px !important;
|
||||
margin-top: 15px !important;
|
||||
margin-bottom: 20px !important;
|
||||
/* border-radius: 4px; */
|
||||
height: 26px;
|
||||
/* padding: 6px 24px; */
|
||||
font-size: 15px;
|
||||
width: 322px;
|
||||
}
|
||||
|
||||
.empty-en{
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-family: WorkSans-Bold;
|
||||
margin: 50px 0px 0px 100px;
|
||||
}
|
||||
.empty-ar{
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-family: WorkSans-Bold;
|
||||
margin: 50px 100px 0px 0px;
|
||||
}
|
||||
|
||||
.result-container{
|
||||
position: relative;
|
||||
background: white;
|
||||
/* padding-bottom: 3px; */
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.result-containerList{
|
||||
position: relative;
|
||||
background: white;
|
||||
/* padding-bottom: 3px; */
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.text{
|
||||
font-size: 15px;
|
||||
// margin-top: -9px;
|
||||
font-family: 'WorkSans-bold';
|
||||
}
|
||||
.date{
|
||||
// margin-top: -9px;
|
||||
margin-right: -49px;
|
||||
color: gray;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.labels{
|
||||
font-size: 13px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: -10px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.request-list-container {
|
||||
position: relative;
|
||||
padding-left: 37px;
|
||||
clear: both;
|
||||
min-height: 200px;
|
||||
margin-bottom: 80px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.request-list-container:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
left: 7px;
|
||||
top: 15px;
|
||||
background-color: #f5f4f4;
|
||||
}
|
||||
.request-list-container-ar {
|
||||
position: relative;
|
||||
padding-left: 60px;
|
||||
clear: both;
|
||||
min-height: 200px;
|
||||
margin-bottom: 80px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.request-list-container-ar:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
left: 30px;
|
||||
top: 15px;
|
||||
right: 6px;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.text-span {
|
||||
position: relative;
|
||||
display: block;
|
||||
// margin-bottom: 10px;
|
||||
font-family: 'WorkSans-bold';
|
||||
}
|
||||
.text-span:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -35px;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #269db8;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.text-span-ar{
|
||||
position: relative;
|
||||
display: block;
|
||||
// margin-bottom: 10px;
|
||||
/* margin-top: 10px; */
|
||||
margin-right: 30px;
|
||||
}
|
||||
.text-span-ar:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -29px;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #269db8;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.action-data{
|
||||
background-color: white;
|
||||
padding: 1px;
|
||||
border-radius: 20px;
|
||||
font-family: WorkSans-Regular;
|
||||
// padding-left: 15px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 15px;
|
||||
p{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.date-span{
|
||||
font-size: 13px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: -10px;
|
||||
color: gray;
|
||||
margin-left: 178px;
|
||||
|
||||
}
|
||||
.date-span-ar{
|
||||
font-size: 13px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: -10px;
|
||||
color: gray;
|
||||
margin-right: 155px;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RequestDetailsComponent } from './request-details.component';
|
||||
|
||||
describe('RequestDetailsComponent', () => {
|
||||
let component: RequestDetailsComponent;
|
||||
let fixture: ComponentFixture<RequestDetailsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ RequestDetailsComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(RequestDetailsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,75 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Platform, Events, MenuController } from '@ionic/angular';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
|
||||
import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
|
||||
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
|
||||
import { MowadhafiService } from '../mowadhafi.service';
|
||||
import { Location } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-request-details',
|
||||
templateUrl: './request-details.component.html',
|
||||
styleUrls: ['./request-details.component.scss'],
|
||||
})
|
||||
export class RequestDetailsComponent implements OnInit {
|
||||
public direction : String;
|
||||
|
||||
constructor(
|
||||
public ts: TranslatorService,
|
||||
public cs: CommonService,
|
||||
public authService: AuthenticationService,
|
||||
public sharedData: SharedDataService,
|
||||
public events: Events,
|
||||
public MowadhafiService: MowadhafiService,
|
||||
private location: Location,
|
||||
private menu: MenuController,
|
||||
|
||||
) {
|
||||
this.direction = TranslatorService.getCurrentLanguageName();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.getTicketTransaction();
|
||||
this.getTicketDetails()
|
||||
}
|
||||
|
||||
goback() {
|
||||
this.location.back();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
getTicketTransaction(){
|
||||
const request = {
|
||||
// EmployeeNumber:"191817",
|
||||
ItgTicketId:"5a10de61-c4db-4c77-e464-08d8a1beaaac",
|
||||
|
||||
};
|
||||
this.MowadhafiService.getTicketTransaction(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
|
||||
{
|
||||
this.handlegetTicketTransactionResult(result);
|
||||
|
||||
}) }
|
||||
handlegetTicketTransactionResult(result){
|
||||
|
||||
}
|
||||
|
||||
getTicketDetails(){
|
||||
const request = {
|
||||
// EmployeeNumber:"191817",
|
||||
ItgTicketId:"5a10de61-c4db-4c77-e464-08d8a1beaaac",
|
||||
|
||||
};
|
||||
this.MowadhafiService.getTicketDetails(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
|
||||
{
|
||||
this.handlegetTicketDetailsResult(result);
|
||||
|
||||
}) }
|
||||
handlegetTicketDetailsResult(result){
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar class="header-toolbar-new">
|
||||
<ion-buttons slot="start">
|
||||
<nav-buttons (backClick)="goback()" [navigate]="false"></nav-buttons>
|
||||
</ion-buttons>
|
||||
<ion-title style=" color:white; text-align: center;">{{ts.trPK('userProfile','MyHR-request')}}</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div>
|
||||
<ion-row [ngClass]="direction == 'en' ? 'empty-en':'empty-ar' ">{{ts.trPK('general','empty')}}</ion-row>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<div>
|
||||
<ion-button class="sendCodeBtn" (click)="openHRRequestPage()" >{{ts.trPK('userProfile','createHR-Request')}}</ion-button>
|
||||
</div>
|
||||
</ion-footer>
|
||||
@ -1,33 +0,0 @@
|
||||
|
||||
|
||||
.sendCodeBtn{
|
||||
--background: #269DB8;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-left: 23px !important;
|
||||
margin-top: 15px !important;
|
||||
margin-bottom: 20px !important;
|
||||
/* border-radius: 4px; */
|
||||
height: 26px;
|
||||
/* padding: 6px 24px; */
|
||||
font-size: 15px;
|
||||
width: 322px;
|
||||
}
|
||||
|
||||
.empty-en{
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-family: WorkSans-Bold;
|
||||
margin: 50px 0px 0px 100px;
|
||||
}
|
||||
.empty-ar{
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-family: WorkSans-Bold;
|
||||
margin: 50px 100px 0px 0px;
|
||||
}
|
||||
@ -1,121 +1,153 @@
|
||||
<app-generic-header
|
||||
showBack="true"
|
||||
[headerText]="'userProfile,title' | translate">
|
||||
[headerText]="'userProfile, title' | translate">
|
||||
</app-generic-header>
|
||||
|
||||
<ion-content class="colorBG">
|
||||
<div class="header-div">
|
||||
<!-- <ion-buttons slot="start">
|
||||
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
||||
</ion-buttons> -->
|
||||
<!-- <p class="proTitles">{{ts.trPK('userProfile','title')}}</p> -->
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<div class="centerDiv homeBox">
|
||||
<div class="centerDiv homeBox">
|
||||
<!-- <div class="profileDiv"> -->
|
||||
<img class="profileImg" [src]="user_image">
|
||||
<img class="profileImg" [src]="imageSrc">
|
||||
</div>
|
||||
|
||||
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
|
||||
<!-- <div class="Text">{{personalInfo.EMPLOYEE_NAME}}</div> -->
|
||||
<div *ngIf="personalInfo">
|
||||
<p class="empName">{{User_name_Emp}}</p>
|
||||
<p class="empJob"> {{User_Job_name}}</p>
|
||||
<p class="Text">{{personalInfo.EMPLOYEE_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 [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'">
|
||||
<button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()">
|
||||
<!-- <ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon> -->
|
||||
<img (click)="ChangeImage();" class="changeIcon" src="../assets/imgs/edit-image.svg">
|
||||
</button>
|
||||
</div>
|
||||
</ion-grid>
|
||||
|
||||
</div> <!-- end header-div -->
|
||||
<div>
|
||||
|
||||
<div class="list">
|
||||
<ion-list class="list-ios">
|
||||
<div class="p">
|
||||
<p>{{ts.trPK('userProfile','Years of Services')}}</p>
|
||||
</div>
|
||||
<!-- <ion-card *ngIf="personalInfo"> -->
|
||||
|
||||
<!-- <ion-card-header class="boxHdr">
|
||||
<div class="hrTitle">{{personalInfo.EMPLOYEE_NAME}}</div>
|
||||
</ion-card-header> -->
|
||||
<!-- <ion-card-content> -->
|
||||
<div *ngIf="personalInfo">
|
||||
|
||||
<ion-grid>
|
||||
<div class="profileGrid">
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col class="line">
|
||||
<ion-row>
|
||||
<label class="lebl">
|
||||
{{ts.trPK('userProfile','empNo')}}</label></ion-row>
|
||||
<ion-row > <label
|
||||
class="rowBolds">{{personalInfo.EMPLOYEE_NUMBER}}</label> </ion-row>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-row> <label class="lebl">{{ts.trPK('userProfile','category')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}</label> </ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','address')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds"></label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<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-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('general','mobile')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.EMPLOYEE_MOBILE_NUMBER}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','busG')}}</label>
|
||||
</ion-row>
|
||||
<ion-row> <label class="rowBolds">{{personalInfo.BUSINESS_GROUP_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','job')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.JOB_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','payrol')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.PAYROLL_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','orgEmail')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','position')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.POSITION_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','grade')}} </label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.GRADE_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
</div>
|
||||
</ion-grid>
|
||||
</div>
|
||||
<!-- </ion-card-content> -->
|
||||
<!-- </ion-card> -->
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -1,216 +1,130 @@
|
||||
ion-col.colBold, ion-col.colBold > label{
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
|
||||
.list-ios {
|
||||
// margin-left: 0;
|
||||
// margin-right: 0;
|
||||
// margin-top: 32px;
|
||||
// margin-bottom: 32px;
|
||||
// background: var(--ion-item-background,var(--ion-background-color,#fff));
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: -15px;
|
||||
margin-bottom: 32px;
|
||||
border: 1px solid #d8d8d8;
|
||||
background: var(--ion-item-background, var(--ion-background-color, #fff));
|
||||
border-radius: 10px;
|
||||
padding-top: 60px;
|
||||
.colorBG{
|
||||
--background: #f0efef;
|
||||
}
|
||||
.header-div{
|
||||
text-transform: capitalize;
|
||||
background: #269DB8;
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 160px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.header-toolbar-new{
|
||||
--background: #269DB8;
|
||||
// .profileCont{
|
||||
// background-color: #d9d7d7 !important;
|
||||
|
||||
|
||||
.menubutton {
|
||||
background: #f0ecec;
|
||||
min-height: 39px;
|
||||
width: 35px !important;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.colorBG{
|
||||
--background: #f0efef;
|
||||
}
|
||||
.header-div{
|
||||
text-transform: capitalize;
|
||||
background: #269DB8;
|
||||
display: block;
|
||||
|
||||
.changeIcon{
|
||||
/* background: #c1c1c1; */
|
||||
width: 21px;
|
||||
/* height: 26px; */
|
||||
border-radius: 50% !important;
|
||||
position: relative;
|
||||
height: 113px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
color: #7f8c8d;
|
||||
height: 35px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.changeImgBtn{
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
left: 65%;
|
||||
}
|
||||
.changeImgBtn-ar{
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
left: 66%;
|
||||
}
|
||||
.profileImg{
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
display: -webkit-inline-box;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
/* background: transparent; */
|
||||
border-radius: 78% !important;
|
||||
position: relative;
|
||||
top: 34px;
|
||||
// background: white;
|
||||
background: transparent;
|
||||
margin-left: -3px;
|
||||
height: 160px;
|
||||
display: -webkit-inline-box;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
// background: transparent;
|
||||
border-radius: 69% !important;
|
||||
position: relative;
|
||||
top: 34px;
|
||||
// background: white;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.Text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
margin-top: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proTitles {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: white;
|
||||
margin-top: -33px;
|
||||
}
|
||||
|
||||
.Text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
margin-top: 34px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
ion-thumbnail.menu-thumb{
|
||||
width:20px;
|
||||
height:20px;
|
||||
// margin-top: 5px !important;
|
||||
}
|
||||
|
||||
.profile{
|
||||
color: black !important;
|
||||
// font-weight: bolder !important;
|
||||
|
||||
}
|
||||
|
||||
.gridService-en{
|
||||
margin-top: 87px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: -49px;
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.gridService-ar{
|
||||
margin-top: 87px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: -49px;
|
||||
margin-left: 17px;
|
||||
margin-right: 17px;
|
||||
}
|
||||
|
||||
.columns{
|
||||
// margin: 10px;
|
||||
// background: #0B4775;
|
||||
// border-radius: 27px;
|
||||
// padding-left: 30px;
|
||||
// padding-right: 6px;
|
||||
// padding-top: 19px;
|
||||
// padding-bottom: 26px;
|
||||
}
|
||||
.columns-ar{
|
||||
// margin: 10px;
|
||||
// background: #0B4775;
|
||||
// border-radius: 27px;
|
||||
// padding-left: 7px;
|
||||
// padding-right: 3px;
|
||||
// padding-top: 19px;
|
||||
// padding-bottom: 26px;
|
||||
}
|
||||
|
||||
.service{
|
||||
font-size: 28px;
|
||||
// font-weight: bolder;
|
||||
color: white;
|
||||
letter-spacing: 1px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.services{
|
||||
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
.service-ar{
|
||||
font-size: 28px;
|
||||
color: white;
|
||||
letter-spacing: 1px;
|
||||
font-weight: bold;
|
||||
margin-right: 26px;
|
||||
}
|
||||
.services-ar{
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.list{
|
||||
margin-left: 14px;
|
||||
margin-right: 14px;
|
||||
border-radius: 10px;
|
||||
// background: white;
|
||||
border:#bebbbb !important;
|
||||
padding: 2px;
|
||||
}
|
||||
.p{
|
||||
color: black !important;
|
||||
font-size: medium;
|
||||
text-align: center;
|
||||
border-bottom: rgb(190, 187, 187) solid 1px;
|
||||
}
|
||||
.itemline{
|
||||
border-bottom: rgb(190, 187, 187) solid 1px;
|
||||
}
|
||||
.itemlins{
|
||||
border-bottom: rgb(190, 187, 187) solid 1px;
|
||||
margin-bottom: 209px;
|
||||
.line{
|
||||
|
||||
padding-top: 0px !important;
|
||||
/* margin-bottom: 0px; */
|
||||
/* margin: 0px; */
|
||||
border-right: 1px #c5c2c2 solid !important;
|
||||
line-height: 10px !important;
|
||||
|
||||
}
|
||||
.proTitles {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: white;
|
||||
margin-top: -33px;
|
||||
}
|
||||
|
||||
|
||||
.profileGrid{
|
||||
border: #bebbbb solid 1px;
|
||||
border-radius: 9px;
|
||||
padding: 0px;
|
||||
margin-top: 54px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: black;
|
||||
// font-weight: bold;
|
||||
background: white;
|
||||
|
||||
}
|
||||
.empName {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
margin-top: 38px;
|
||||
|
||||
}
|
||||
.empJob{
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
margin-top: 4px;
|
||||
|
||||
}
|
||||
.arrow{
|
||||
width: 20px;
|
||||
height: 22px !important;
|
||||
}
|
||||
.arrow-ar{
|
||||
float: left;
|
||||
font-size: 25px;
|
||||
color: grey;
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.verticalLine {
|
||||
width:1%;
|
||||
height:50px;
|
||||
background:white;
|
||||
margin-top: 100%;
|
||||
// margin-left: 10%;
|
||||
}
|
||||
|
||||
.service-row-en{
|
||||
width: 79%;
|
||||
margin: -12px 0px 0px 35px;
|
||||
|
||||
|
||||
|
||||
.lebl{
|
||||
|
||||
color: black;
|
||||
font-size: 14px !important;
|
||||
font-weight: bold !important;
|
||||
padding-top: 9px;
|
||||
padding-left: 5px;
|
||||
|
||||
}
|
||||
.service-row-ar{
|
||||
width: 95%;
|
||||
margin: -12px 0px 35px 0px;
|
||||
.rowBolds{
|
||||
color: black !important;
|
||||
font-size: 14px !important;
|
||||
/* padding: 6px !important; */
|
||||
padding-bottom: 9px;
|
||||
padding-left: 5px;
|
||||
padding-top: 4px;
|
||||
|
||||
}
|
||||
@ -1,153 +1,539 @@
|
||||
<app-generic-header
|
||||
showBack="true"
|
||||
[headerText]="'userProfile, title' | translate">
|
||||
<app-generic-header showBack="true" [headerText]="'userProfile,title' | translate">
|
||||
</app-generic-header>
|
||||
|
||||
<ion-content class="colorBG">
|
||||
<div class="header-div">
|
||||
<div class="centerDiv homeBox">
|
||||
<div class="centerDiv homeBox">
|
||||
<!-- <div class="profileDiv"> -->
|
||||
<img class="profileImg" [src]="imageSrc">
|
||||
</div>
|
||||
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
|
||||
<!-- <div class="Text">{{personalInfo.EMPLOYEE_NAME}}</div> -->
|
||||
<div *ngIf="personalInfo">
|
||||
<p class="Text">{{personalInfo.EMPLOYEE_NAME}}</p>
|
||||
<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 [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'">
|
||||
<button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()">
|
||||
<!-- <ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon> -->
|
||||
<img (click)="ChangeImage();" class="changeIcon" src="../assets/imgs/edit-image.svg">
|
||||
</button>
|
||||
<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>
|
||||
|
||||
</div> <!-- end header-div -->
|
||||
<div>
|
||||
|
||||
<!-- <ion-card *ngIf="personalInfo"> -->
|
||||
|
||||
<!-- <ion-card-header class="boxHdr">
|
||||
<div class="hrTitle">{{personalInfo.EMPLOYEE_NAME}}</div>
|
||||
</ion-card-header> -->
|
||||
<!-- <ion-card-content> -->
|
||||
<div *ngIf="personalInfo">
|
||||
|
||||
<ion-grid>
|
||||
<div class="profileGrid">
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col class="line">
|
||||
<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>
|
||||
<label class="lebl">
|
||||
{{ts.trPK('userProfile','empNo')}}</label></ion-row>
|
||||
<ion-row > <label
|
||||
class="rowBolds">{{personalInfo.EMPLOYEE_NUMBER}}</label> </ion-row>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-row> <label class="lebl">{{ts.trPK('userProfile','category')}}</label>
|
||||
<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>
|
||||
<label class="rowBolds">{{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}</label> </ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','address')}}</label>
|
||||
<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>
|
||||
<label class="rowBolds"></label>
|
||||
<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-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</ion-grid>
|
||||
</div>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('general','mobile')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.EMPLOYEE_MOBILE_NUMBER}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<br>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','busG')}}</label>
|
||||
</ion-row>
|
||||
<ion-row> <label class="rowBolds">{{personalInfo.BUSINESS_GROUP_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<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-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','job')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.JOB_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<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-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','payrol')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.PAYROLL_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<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-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','orgEmail')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-card-content *ngIf="editBasic">
|
||||
<ion-label>
|
||||
<h1 style="color: black;">{{ts.trPK('general','basic-details')}}</h1>
|
||||
</ion-label>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','position')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.POSITION_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-label>
|
||||
<h3>{{ts.trPK('general','effective-date')}}</h3>
|
||||
</ion-label>
|
||||
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','grade')}} </label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.GRADE_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
<!-- </ion-card-content> -->
|
||||
<!-- </ion-card> -->
|
||||
</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>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,39 @@
|
||||
<ion-content padding>
|
||||
<ion-label padding>
|
||||
<h2 style=" font-weight: bold; color: black; font-size: 20px;">
|
||||
{{ts.trPK('general','type-of-change')}}</h2>
|
||||
</ion-label>
|
||||
|
||||
<ion-list>
|
||||
<ion-radio-group value="1">
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-label >
|
||||
<h3 style="color: black; font-size: 20px; white-space: break-spaces !important">{{ts.trPK('general','correct-or-complete')}}</h3></ion-label>
|
||||
<ion-radio slot="start" color="secondary" mode='md' value="1"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-label>
|
||||
<h3 style="color: black; font-size: 20px; white-space: break-spaces !important">{{ts.trPK('general','new-info')}}</h3>
|
||||
</ion-label>
|
||||
<ion-radio slot="start" color="secondary" mode='md' value="2"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
</ion-radio-group>
|
||||
</ion-list>
|
||||
|
||||
<ion-footer>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button style=" width: 90%; background: white; --background: #b4b4b4">{{ts.trPK('userProfile','cancel-text')}}</ion-button>
|
||||
</ion-col>
|
||||
|
||||
<ion-col>
|
||||
<ion-button style=" width: 90%; background: white; --background: #269db8">{{ts.trPK('general','next')}}</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-footer>
|
||||
</ion-content>
|
||||
@ -0,0 +1,3 @@
|
||||
ion-label{
|
||||
white-space: normal;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EditDetailProfileComponent } from './edit-detail-profile.component';
|
||||
|
||||
describe('EditDetailProfileComponent', () => {
|
||||
let component: EditDetailProfileComponent;
|
||||
let fixture: ComponentFixture<EditDetailProfileComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ EditDetailProfileComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EditDetailProfileComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,30 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-detail-profile',
|
||||
templateUrl: './edit-detail-profile.component.html',
|
||||
styleUrls: ['./edit-detail-profile.component.scss'],
|
||||
})
|
||||
export class EditDetailProfileComponent implements OnInit {
|
||||
|
||||
|
||||
constructor(
|
||||
public modalController: ModalController,
|
||||
public ts: TranslatorService,
|
||||
) { }
|
||||
|
||||
colorRadio = "#269db8"
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
dismiss() {
|
||||
// using the injected ModalController this page
|
||||
// can "dismiss" itself and optionally pass back data
|
||||
this.modalController.dismiss({
|
||||
'dismissed': true
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Loading…
Reference in New Issue