Merge branch 'MOHEMM-Q2-DEV' of https://gitlab.com/haroon6138/mohemmionic5 into sultan26April

zohaib-huawei-q2
Sultan Khan 5 years ago
commit 977be243ce

@ -27,17 +27,17 @@
"@ionic-native/background-geolocation": "^5.30.0", "@ionic-native/background-geolocation": "^5.30.0",
"@ionic-native/badge": "^5.18.0", "@ionic-native/badge": "^5.18.0",
"@ionic-native/barcode-scanner": "^5.18.0", "@ionic-native/barcode-scanner": "^5.18.0",
"@ionic-native/base64": "^5.32.1", "@ionic-native/base64": "^5.18.0",
"@ionic-native/ble": "^5.18.0", "@ionic-native/ble": "^5.18.0",
"@ionic-native/camera": "^5.18.0", "@ionic-native/camera": "^5.18.0",
"@ionic-native/core": "^5.8.0", "@ionic-native/core": "^5.8.0",
"@ionic-native/date-picker": "^5.10.0", "@ionic-native/date-picker": "^5.10.0",
"@ionic-native/device": "^5.18.0", "@ionic-native/device": "^5.18.0",
"@ionic-native/diagnostic": "^5.18.0", "@ionic-native/diagnostic": "^5.18.0",
"@ionic-native/file": "^5.32.1", "@ionic-native/file": "^5.18.0",
"@ionic-native/file-path": "^5.32.1", "@ionic-native/file-path": "^5.18.0",
"@ionic-native/fingerprint-aio": "^5.18.0", "@ionic-native/fingerprint-aio": "^5.18.0",
"@ionic-native/firebase-x": "^5.32.1", "@ionic-native/firebase-x": "^5.21.5",
"@ionic-native/geolocation": "^5.10.0", "@ionic-native/geolocation": "^5.10.0",
"@ionic-native/globalization": "^5.18.0", "@ionic-native/globalization": "^5.18.0",
"@ionic-native/health": "^5.4.0", "@ionic-native/health": "^5.4.0",
@ -46,13 +46,13 @@
"@ionic-native/launch-navigator": "^5.17.0", "@ionic-native/launch-navigator": "^5.17.0",
"@ionic-native/local-notifications": "^5.17.0", "@ionic-native/local-notifications": "^5.17.0",
"@ionic-native/native-storage": "^5.17.0", "@ionic-native/native-storage": "^5.17.0",
"@ionic-native/nfc": "^5.32.1", "@ionic-native/nfc": "^5.30.0",
"@ionic-native/open-native-settings": "^5.14.0", "@ionic-native/open-native-settings": "^5.14.0",
"@ionic-native/splash-screen": "^5.0.0", "@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/sqlite": "^5.18.0", "@ionic-native/sqlite": "^5.18.0",
"@ionic-native/status-bar": "^5.0.0", "@ionic-native/status-bar": "^5.0.0",
"@ionic-native/themeable-browser": "^5.18.0", "@ionic-native/themeable-browser": "^5.18.0",
"@ionic-native/wifi-wizard-2": "^5.32.1", "@ionic-native/wifi-wizard-2": "^5.31.1",
"@ionic-native/zbar": "^5.10.0", "@ionic-native/zbar": "^5.10.0",
"@ionic/angular": "^4.1.0", "@ionic/angular": "^4.1.0",
"@ng-bootstrap/ng-bootstrap": "^4.2.2", "@ng-bootstrap/ng-bootstrap": "^4.2.2",
@ -79,7 +79,7 @@
"cordova-plugin-device": "^2.0.3", "cordova-plugin-device": "^2.0.3",
"cordova-plugin-dialogs": "^2.0.2", "cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-file": "^6.0.2", "cordova-plugin-file": "^6.0.2",
"cordova-plugin-filepath": "^1.6.0", "cordova-plugin-filepath": "^1.5.6",
"cordova-plugin-fingerprint-aio": "^3.0.0", "cordova-plugin-fingerprint-aio": "^3.0.0",
"cordova-plugin-firebasex": "^7.0.2", "cordova-plugin-firebasex": "^7.0.2",
"cordova-plugin-geolocation": "^4.0.2", "cordova-plugin-geolocation": "^4.0.2",
@ -93,6 +93,7 @@
"cordova-plugin-statusbar": "^2.4.3", "cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-themeablebrowser": "^0.2.18", "cordova-plugin-themeablebrowser": "^0.2.18",
"cordova-plugin-whitelist": "^1.3.4", "cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-wifiwizard2": "^3.1.1",
"cordova-sqlite-storage": "^3.4.0", "cordova-sqlite-storage": "^3.4.0",
"cordova-support-google-services": "^1.3.2", "cordova-support-google-services": "^1.3.2",
"cordova.plugins.diagnostic": "^5.0.1", "cordova.plugins.diagnostic": "^5.0.1",
@ -104,7 +105,7 @@
"ng-circle-progress": "^1.6.0", "ng-circle-progress": "^1.6.0",
"ng2-file-upload": "^1.3.0", "ng2-file-upload": "^1.3.0",
"ng2-pdf-viewer": "^5.3.2", "ng2-pdf-viewer": "^5.3.2",
"ngx-gauge": "^1.1.0", "ngx-gauge": "^1.0.0-beta.10",
"npm": "^6.14.11", "npm": "^6.14.11",
"phonegap-nfc": "^1.2.0", "phonegap-nfc": "^1.2.0",
"phonegap-plugin-barcodescanner": "^8.1.0", "phonegap-plugin-barcodescanner": "^8.1.0",

@ -3,15 +3,21 @@
[headerText]="'submitAbsence, submitAbsence' | translate"> [headerText]="'submitAbsence, submitAbsence' | translate">
</app-generic-header> </app-generic-header>
<ion-content padding> <content padding>
<ion-item class='dynamicField'>
<div [ngClass]=" direction === 'en' ? 'custom-text-area-element Field-en' : 'custom-text-area-element Field-ar'" >
<label class="label" position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','absenceType')}} </label>
<select class="label-Select" (ionChange)="calcDay()" [(ngModel)]="absenceType" (ionChange)="onTypeAbsenceChange()" required>
<option value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </option>
</select>
</div>
<!-- <ion-item class='dynamicField'>
<ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','absenceType')}} </ion-label> <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','absenceType')}} </ion-label>
<ion-select (ionChange)="calcDay()" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="absenceType" (ionChange)="onTypeAbsenceChange()" required> <ion-select (ionChange)="calcDay()" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="absenceType" (ionChange)="onTypeAbsenceChange()" required> -->
<!-- let item of AbsenceType; let i=index; --> <!-- let item of AbsenceType; let i=index; -->
<ion-select-option value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </ion-select-option> <!-- <ion-select-option value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </ion-select-option>
</ion-select> </ion-select>
</ion-item> </ion-item> -->
<ion-item class='dynamicField'> <ion-item class='dynamicField'>
<ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','startDate')}} </ion-label> <ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','startDate')}} </ion-label>
@ -52,7 +58,7 @@
</ion-item> </ion-item>
<div id="dynamic-abs-container" > <div id="dynamic-abs-container" >
</div> </div>
</ion-content> </content>
<ion-footer> <ion-footer>
<div class="centerDiv"> <div class="centerDiv">
<ion-button class="confirmEitOkButton" (click)="validateAbcenseTransaction()">{{ts.trPK('general','next')}}</ion-button> <ion-button class="confirmEitOkButton" (click)="validateAbcenseTransaction()">{{ts.trPK('general','next')}}</ion-button>

@ -21,3 +21,94 @@
} }
.label-Select{
color: var(--dark);
font-size: 15px;
border: none;
font-weight: 400;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 80%;
padding: 1px 0px;
background-color: var(--light);
border-bottom: var(--cusgray) solid 1px;
border-radius: 0px;
// margin-left: 20px;
margin-left: 34px;
margin-top: -10px;
// -webkit-appearance: none;
// -moz-appearance: none;
text-indent: 1px;
// text-overflow: '';
box-shadow: none;
-webkit-box-shadow:none;
-moz-box-shadow: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
:root[dir="ltr"]{
background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-right: 20px;
}
:root[dir="rtl"]{
background-image: linear-gradient(-135deg, #999 50%, transparent 50%),linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-left: 20px;
}
}
.label{
font-size: 16px;
// margin-left: 15px;
color: #a2a5a6 !important;
display: block;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
/* font-size: inherit; */
// text-overflow: ellipsis;
// white-space: nowrap;
white-space: normal;
// padding-top: 10px;
padding: 5px 0px;
padding-left: 10px !important;
margin: 10px auto;
:root[dir="ltr"]{
font-family: var(--fontFamilySemiBoldEN) !important;
}
:root[dir="rtl"]{
font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold;
}
}
.Field-en{
border-radius: 30px;
border: 1px solid #a2a5a6!important;
margin-bottom: 20px;
padding-left: 20px !important;
padding-top: 6px !important;
color: #999999 !important;
}
.Field-ar{
border-radius: 30px;
border: 1px solid #a2a5a6!important;
margin-bottom: 20px;
padding-right: 20px !important;
padding-top: 6px !important;
color: #999999 !important;
}

@ -22,7 +22,9 @@ const routes: Routes = [
{ path: 'payslip', loadChildren: './payslip/payslip.module#PayslipPageModule' }, { path: 'payslip', loadChildren: './payslip/payslip.module#PayslipPageModule' },
{ path: 'attendance-tracking', loadChildren: './attendance-tracking/attendance-tracking.module#AttendanceTrackingPageModule' }, { path: 'attendance-tracking', loadChildren: './attendance-tracking/attendance-tracking.module#AttendanceTrackingPageModule' },
{ path: 'itemforsale', loadChildren: './itemforsale/itemforsale.module#ItemforsalePageModule' }, { path: 'itemforsale', loadChildren: './itemforsale/itemforsale.module#ItemforsalePageModule' },
{ path: 'offersdiscount', loadChildren: './offersdiscount/offersdiscount.module#OffersdiscountPageModule' }, { path: 'erm-channel', loadChildren: './erm-channel/erm-channel.module#ErmChannelPageModule' } { path: 'offersdiscount', loadChildren: './offersdiscount/offersdiscount.module#OffersdiscountPageModule' },
{ path: 'erm-channel', loadChildren: './erm-channel/erm-channel.module#ErmChannelPageModule' },
{ path: 'backend-integrations', loadChildren: './backend-integrations/backend-integrations.module#BackendIntegrationsPageModule' }

@ -45,6 +45,15 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item [hidden]="TeamFlag!='true'" (click)="openMyRequestPage()">
<ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 14px !important;" src="../assets/imgs/my_team_icon.png" item-left>
</ion-thumbnail>
<ion-label class="profile">
HR REQUEST
</ion-label>
</ion-item>
<!-- <ion-item (click)="openChangePassword()"> --> <!-- <ion-item (click)="openChangePassword()"> -->
<ion-item (click)="openChangePassword()"> <ion-item (click)="openChangePassword()">
@ -148,7 +157,6 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<!-- <ion-item (click)="profile()"> <!-- <ion-item (click)="profile()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img width="30" src="../assets/imgs/profile_icon.png" item-left> <img width="30" src="../assets/imgs/profile_icon.png" item-left>

@ -183,6 +183,11 @@ export class AppComponent implements OnInit {
this.cs.openMyTeamPage(); this.cs.openMyTeamPage();
} }
public openMyRequestPage() {
this.cs.openMyRequestPage();
this.menu.toggle();
}
public profile() { public profile() {
this.cs.openEditProfile(); this.cs.openEditProfile();
this.menu.toggle(); this.menu.toggle();

@ -0,0 +1,58 @@
<app-generic-header
showBack="true"
[headerText]="'login,announcement' | translate">
</app-generic-header>
<ion-content style="--background:#F4F4F4;">
<ion-searchbar (ionInput)="filterList($event)" style="--background: white"></ion-searchbar>
<ion-list style="background: #f4f4f4;">
<div *ngFor="let item of arrList; let i = index"
[ngClass]="i>0 && !item.Open ? 'class-dev-close': 'class-dev-open'"
style="background: white; margin: 20px; padding: 0px;">
<ion-card *ngIf="i === 0 && !item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<img [src]="item.img" class="image-center">
<ion-item>
<ion-label>
<h2 class="text-style">{{item.title}}</h2>
<p class="text-style">{{item.body}}</p>
<p class="text-style">{{item.date}}</p>
</ion-label>
</ion-item>
</ion-card>
<ion-card *ngIf="i === 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<ion-card-header style="background: transparent;">
<ion-card-title style="font-size: 20px; margin: 5px;">{{item.title}} <br>
<p style="font-size: 12px; color: gray;">{{item.date}}</p>
</ion-card-title>
<img [src]="item.img" class="image-center">
</ion-card-header>
<ion-card-content>
<p>{{item.body}}</p>
</ion-card-content>
</ion-card>
<ion-item *ngIf="i > 0 && !item.isOpen" (click)="toggleAnnouncement(item)" lines='none'
style="border: 1px solid lightgray; border-radius: 30px; height: 100px;">
<img [src]="item.img" style="width: 30%;">
<ion-label style="margin: 5px;">
<h2>{{item.title}}</h2>
<p>{{item.body}}</p>
<p>{{item.date}}</p>
</ion-label>
</ion-item>
<ion-card *ngIf="i > 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<ion-card-header style="background: transparent;">
<ion-card-title style="font-size: 20px; margin: 5px;">{{item.title}} <br>
<p style="font-size: 12px; color: gray;">{{item.date}}</p>
</ion-card-title>
<img [src]="item.img" class="image-center">
</ion-card-header>
<ion-card-content>
<p>{{item.body}}</p>
</ion-card-content>
</ion-card>
</div>
</ion-list>
</ion-content>

@ -0,0 +1,22 @@
.image-center{
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
.text-style{
margin: 5px;
}
.class-dev-close{
border: 1px solid lightgray;
border-radius: 30px;
}
.class-dev-open{}
.class-item-open{
border: 1px solid lightgray;
border-radius: 30px;
height: 100px;
}
.class-item-close{}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AnnouncementComponent } from './announcement.component';
describe('AnnouncementComponent', () => {
let component: AnnouncementComponent;
let fixture: ComponentFixture<AnnouncementComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AnnouncementComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AnnouncementComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,62 @@
import { Component, OnInit } from '@angular/core';
import { detachEmbeddedView } from '@angular/core/src/view';
@Component({
selector: 'app-announcement',
templateUrl: './announcement.component.html',
styleUrls: ['./announcement.component.scss'],
})
export class AnnouncementComponent implements OnInit {
dt = new Date().toJSON().slice(0,10).replace(/-/g,'/');
public arr =[
{
title:"Basic Microsoft Excel Cource",
body:" is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
img:"../assets/imgs/HMG.png",
date: this.dt,
isopen: true
},
{
title:"External Visit",
body:"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
img:"../assets/imgs/M.png",
date: this.dt,
isopen: false
},
{
title:"Maintenance Activity",
body:"The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from 'de Finibus Bonorum et Malorum' by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.",
img:"../assets/imgs/M.png",
date: this.dt,
isopen: false
},
];
public arrList = [];
constructor() { }
ngOnInit() {
this.arrList = this.arr;
}
filterList(event) {
const val = event.target.value;
if (val === '') {
this.arrList = this.arr;
}
this.arrList = this.arr.filter((item) => {
return (item.title.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
}
toggleAnnouncement(item){
this.arrList.forEach(element => {
if(element.title === item.title){
element.isOpen = !element.isOpen;
}else{
element.isOpen = false;
}
});
}
}

@ -0,0 +1,36 @@
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 { HmgCommonModule } from '../hmg-common/hmg-common.module';
import { BackendIntegrationsPage } from './backend-integrations.page';
import { AnnouncementComponent } from './announcement/announcement.component';
const routes: Routes = [
{
path: '',
component: BackendIntegrationsPage,
children: [
{
path: 'announcement',
component: AnnouncementComponent
}
]
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HmgCommonModule,
RouterModule.forChild(routes)
],
declarations: [BackendIntegrationsPage, AnnouncementComponent]
})
export class BackendIntegrationsPageModule {}

@ -0,0 +1,3 @@
<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 { BackendIntegrationsPage } from './backend-integrations.page';
describe('BackendIntegrationsPage', () => {
let component: BackendIntegrationsPage;
let fixture: ComponentFixture<BackendIntegrationsPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BackendIntegrationsPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BackendIntegrationsPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-backend-integrations',
templateUrl: './backend-integrations.page.html',
styleUrls: ['./backend-integrations.page.scss'],
})
export class BackendIntegrationsPage implements OnInit {
constructor() { }
ngOnInit() {
}
}

@ -110,6 +110,7 @@ import { ChartModule } from 'primeng/chart';
import { GenericHeaderComponent } from './ui/generic-header/generic-header.component'; import { GenericHeaderComponent } from './ui/generic-header/generic-header.component';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx'; import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx';
import { AttendanceOptionsComponent } from '../home/attendance-options/attendance-options.component'; import { AttendanceOptionsComponent } from '../home/attendance-options/attendance-options.component';
import { CardCalendarComponent } from './ui/card-calendar/card-calendar.component';
@NgModule({ @NgModule({
imports: [ imports: [
@ -192,7 +193,8 @@ import { AttendanceOptionsComponent } from '../home/attendance-options/attendanc
DateInfoModalComponent, DateInfoModalComponent,
Modal, Modal,
GenericHeaderComponent, GenericHeaderComponent,
AttendanceOptionsComponent AttendanceOptionsComponent,
CardCalendarComponent
], ],
exports: [ exports: [
FabButtonComponent, FabButtonComponent,
@ -262,7 +264,8 @@ import { AttendanceOptionsComponent } from '../home/attendance-options/attendanc
FileUploadModule, FileUploadModule,
Modal, Modal,
GenericHeaderComponent, GenericHeaderComponent,
AttendanceOptionsComponent AttendanceOptionsComponent,
CardCalendarComponent
], ],
providers: [ providers: [
AttendScanService, AttendScanService,

@ -1118,6 +1118,13 @@ export class CommonService {
public openMyTeamDetailPage() { public openMyTeamDetailPage() {
this.nav.navigateForward(['/my-team/details']); this.nav.navigateForward(['/my-team/details']);
} }
public openMyRequestPage() {
this.nav.navigateForward(['/my-team/my-request']);
}
public openHRRequestPage() {
this.nav.navigateForward(['/my-team/hr-request']);
}
public openPage(link: string) { public openPage(link: string) {
this.nav.navigateForward([link]); this.nav.navigateForward([link]);
@ -1225,6 +1232,9 @@ export class CommonService {
public eitUpdate() { public eitUpdate() {
this.nav.navigateForward(['/eit/eit-update-list']); this.nav.navigateForward(['/eit/eit-update-list']);
} }
public openAnnouncement() {
this.nav.navigateForward(['/backend-integrations/announcement']);
}

@ -27,13 +27,13 @@ export class ConnectorService {
public static retryTimes = 0; public static retryTimes = 0;
public static timeOut = 120 * 1000; public static timeOut = 120 * 1000;
public static host = 'https://uat.hmgwebservices.com/'; // public static host = 'https://uat.hmgwebservices.com/';
//public static host = 'https://hmgwebservices.com/'; public static host = 'https://hmgwebservices.com/';
constructor(public httpClient: HttpClient, constructor(public httpClient: HttpClient,
public cs: CommonService, public cs: CommonService,
private events: Events, private events: Events,
public ts: TranslatorService) { } public ts: TranslatorService) {}
public post( public post(
service: string, service: string,
@ -202,7 +202,7 @@ export class ConnectorService {
DeviceToken: deviceToken DeviceToken: deviceToken
}; };
this.getLoginInfo(requestGetLoginInfo, () => { }, this.ts.trPK('general', 'ok')).subscribe(res => { this.getLoginInfo(requestGetLoginInfo, () => {}, this.ts.trPK('general', 'ok')).subscribe(res => {
if (this.cs.validResponse(res)) { if (this.cs.validResponse(res)) {
if (res.Mohemm_GetMobileLoginInfoList.length > 0) { if (res.Mohemm_GetMobileLoginInfoList.length > 0) {
this.cs.sharedService.setSharedData(res.Mohemm_GetMobileLoginInfoList[0], 'imei-user-data'); this.cs.sharedService.setSharedData(res.Mohemm_GetMobileLoginInfoList[0], 'imei-user-data');
@ -214,7 +214,7 @@ export class ConnectorService {
this.events.publish('user', user); this.events.publish('user', user);
this.cs.openLogin(); this.cs.openLogin();
} }
} else { } } else {}
}); });
} }

@ -0,0 +1,6 @@
<div class="main-container" [ngStyle]="active === true ? {'color': color} : {}">
<div class="main-container-radius" [ngStyle]="active === true ? {'color': '#ffffff'} : {'color': color}"></div>
<span class="text-span" [ngStyle]="active === true ? {'color': '#269DB8'} : {}">{{text}}</span>
</div>

@ -0,0 +1,20 @@
.main-container{
width: 47px;
position: relative;
margin-left: 9px;
}
.main-container-radius{
position: absolute;
width: 30px;
}
.number-span{
display: block;
}
.text-span{
font-size: 13px;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CardCalendarComponent } from './card-calendar.component';
describe('CardCalendarComponent', () => {
let component: CardCalendarComponent;
let fixture: ComponentFixture<CardCalendarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CardCalendarComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CardCalendarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,18 @@
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-card-calendar',
templateUrl: './card-calendar.component.html',
styleUrls: ['./card-calendar.component.scss'],
})
export class CardCalendarComponent implements OnInit {
@Input() text: string;
@Input() active: boolean;
@Input() color: string;
constructor() { }
ngOnInit() {}
}

@ -14,7 +14,8 @@
<span class="title">{{title}}</span> <span class="title">{{title}}</span>
</span> </span>
<a [ngClass]="employeePhoneNumber == '' ? 'disable-phone image-container' : 'image-container'" href="tel:{{employeePhoneNumber}}"> <a [ngClass]="employeePhoneNumber == '' ? 'disable-phone image-container' : 'image-container'" href="tel:{{employeePhoneNumber}}">
<img src="../assets/imgs/green_call_icon.png" > <!-- <img src="../assets/imgs/green_call_icon.png" > -->
<img src="../assets/imgs/call.svg" >
</a> </a>
</div> </div>
<!-- <div class="swipe-information"> <!-- <div class="swipe-information">

@ -1,16 +1,26 @@
.team-member-container{ .team-member-container{
// background: white;
// border-radius: 100px 20px 20px 100px;
// margin-top: 15px;
// font-family: WorkSans-Regular;
// border: 1px solid #ccc;
// border-radius: 15px;
// padding-bottom: 8px;
background: white; background: white;
border-radius: 100px 20px 20px 100px; /* margin-top: 2px; */
margin-top: 15px;
font-family: WorkSans-Regular; font-family: WorkSans-Regular;
border: 1px solid #ccc;
border-radius: 15px;
padding-bottom: 8px;
margin-bottom: 7px;
} }
.user-image-container{ // .user-image-container{
position: relative; // position: relative;
width: 70px; // width: 70px;
height: 70px; // height: 70px;
display: block; // display: block;
margin: 0 auto; // margin: 0 auto;
// &:before{ // &:before{
// position: absolute; // position: absolute;
// content: ""; // content: "";
@ -26,19 +36,24 @@
// &.present:before{ // &.present:before{
// background-color: green !important; // background-color: green !important;
// } // }
} // }
.user-image{ .user-image{
overflow: hidden; // overflow: hidden;
position: relative; // position: relative;
display: block; // display: block;
width: 100%; // width: 100%;
height: 100%; // height: 100%;
border-radius: 80px; // border-radius: 80px;
border: 1px solid #ccc; // border: 1px solid #ccc;
margin: 0px auto 6px; // margin: 0px auto 6px;
img { img {
width: 100%; // width: 100%;
max-height: 100%; // max-height: 100%;
width: 74%;
max-height: 74%;
margin-top: 4px;
margin-left: 6px;
} }
} }
@ -48,11 +63,14 @@
.name{ .name{
font-size: 16px; font-size: 16px;
color: black; color: black;
margin: 0; // margin: 0;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
margin-left: -10px;
margin-top: -5px;
font-family: 'WorkSans-Bold';
} }
.title{ .title{
font-size: 13px; font-size: 13px;
@ -62,6 +80,9 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
display: block; display: block;
margin-left: -10px;
margin-top: -6px;
color: black;
} }
} }
.image-container{ .image-container{

@ -788,4 +788,7 @@ export class HomePage implements OnInit {
offersDiscount() { offersDiscount() {
this.common.navigateForward('/offersdiscount/home'); this.common.navigateForward('/offersdiscount/home');
} }
openAnnouncement(){
this.common.openAnnouncement();
}
} }

@ -9,17 +9,101 @@
<ion-content> <ion-content>
<div class="contentBg"> <div class="contentBg">
<div class="result-graph" style="padding-top: 12px;"> <div class="result-graph" >
<div class="user-info"> <div class="user-info">
<div class="user-image-container"> <div class="user-image-container">
<div>
<img style="height: 18px; margin-left: 23px;" src="../assets/imgs/fav.svg">
<!-- <ion-col><img src="../assets/imgs/fav filled.svg"></ion-col> -->
</div>
<div class="user-image"> <div class="user-image">
<img [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/> <img [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
</div> </div>
<div style="margin-right: 16px;" slot="end" >
<a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}"></a>
<img src="../assets/imgs/call-o.svg"></div>
<!-- <a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
<img src="../assets/imgs/profile.svg">
</a> -->
</div> </div>
<div style="margin-top: 18px;">
<h1>{{employee.EMPLOYEE_NAME}}</h1> <h1>{{employee.EMPLOYEE_NAME}}</h1>
<span>{{employee.JOB_NAME}}</span> <span>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</span>
<!-- <span>{{employee.JOB_NAME}}</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">{{employee.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">{{employee.EMPLOYEE_NUMBER}}</span>
</ion-col>
</ion-row>
</div>
</div>
<div >
<ion-row>
<ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment">
<ion-segment-button
value="About"
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
<!-- <ion-label> Team Members</ion-label> -->
<img class="imgSize" src="../assets/imgs/profile.svg">
</ion-segment-button>
<ion-segment-button
value="create-request"
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
<img (click)="getMenuEntries(employee)" class="imgSize" src="../assets/imgs/create-req.svg">
<!-- <ion-label> {{ts.trPK('vacation-rule','create-request')}}</ion-label> -->
</ion-segment-button>
<ion-segment-button
value="Attendance"
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
<!-- <ion-label>{{ts.trPK('attendance','attendance')}}</ion-label> -->
<img class="imgSize" src="../assets/imgs/view-attendance.svg">
</ion-segment-button>
<ion-segment-button
value="Team Members"
[ngClass]="activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment'">
<!-- <ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label> -->
<img class="imgSize" src="../assets/imgs/team-members.svg">
</ion-segment-button>
</ion-segment>
</ion-row>
</div> </div>
<div class="user-actions"> <div class="user-actions">
<ion-row class="ion-justify-content-center">
<ion-col [size]="3">
<div class="action-button col-button">
<span>{{ts.trPK('myTeam','profile-details')}}</span>
</div>
</ion-col>
<ion-col [size]="3" (click)="getMenuEntries(employee)">
<div class="action-button col-button">
<span>{{ts.trPK('vacation-rule','create-request')}}</span>
</div>
</ion-col>
<ion-col [size]="3" >
<div class="action-button col-button">
<span>{{ts.trPK('myTeam','view-attendence')}} </span>
</div>
</ion-col>
<ion-col [size]="3" >
<div class="action-button col-button">
<span>{{ts.trPK('myTeam','team-members')}}</span>
</div>
</ion-col>
</ion-row>
</div>
<!-- <div class="user-actions">
<ion-row class="ion-justify-content-center"> <ion-row class="ion-justify-content-center">
<ion-col [size]="4"> <ion-col [size]="4">
<div class="action-button col-button"> <div class="action-button col-button">
@ -46,10 +130,10 @@
</div> </div>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div> -->
</div> </div>
<div class="segments-container"> <!-- <div class="user-actions">
<ion-segment <ion-segment
(ionChange)="segmentChanged($event)" (ionChange)="segmentChanged($event)"
[value]="activeSegment"> [value]="activeSegment">
@ -57,36 +141,49 @@
value="Attendance" value="Attendance"
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" > [ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
<ion-label>{{ts.trPK('attendance','attendance')}}</ion-label> <ion-label>{{ts.trPK('attendance','attendance')}}</ion-label>
<img src="../assets/imgs/days.svg">
</ion-segment-button> </ion-segment-button>
<ion-segment-button <ion-segment-button
value="Team Members" value="Team Members"
[ngClass]="[activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment', empSubordinate.length === 0 ? 'disable-phone': '']"> [ngClass]="[activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment', empSubordinate.length === 0 ? 'disable-phone': '']">
<ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label> <ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label>
<img src="../assets/imgs/days.svg">
</ion-segment-button> </ion-segment-button>
<ion-segment-button <ion-segment-button
value="About" value="About"
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'"> [ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{ts.trPK('general','about')}}</ion-label> <ion-label> Team Members</ion-label>
<img src="../assets/imgs/profile.svg">
</ion-segment-button>
<ion-segment-button
value="create-request"
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
<img src="../assets/imgs/create_request_icon.png">
<ion-label> {{ts.trPK('vacation-rule','create-request')}}</ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
</div> </div> -->
<!-- <div *ngIf="activeSegment === 'create-request'">
</div> -->
<div *ngIf="activeSegment === 'Attendance'"> <div *ngIf="activeSegment === 'Attendance'">
<div> <div class="attendence">
<p style="margin-bottom: 1px;"> <p class="attendence-text">
{{ts.trPK('myTeam','todayAttendance')}} {{ts.trPK('myTeam','todayAttendance')}}
</p> </p>
<ion-row style="margin: 0 -5px;"> <ion-row style="margin: 0 -5px;">
<ion-col [size]="4"> <ion-col [size]="4">
<div class="attendance-information"> <div class="attendance-information">
<span>{{ts.trPK('myTeam','check-in')}}</span> <span style="color: green; ">{{ts.trPK('myTeam','check-in')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN !== null">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2> <h2 *ngIf="attendanceTrackingList.P_SWIPE_IN !== null">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2> <h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2>
</div> </div>
</ion-col> </ion-col>
<ion-col [size]="4"> <ion-col [size]="4">
<div class="attendance-information"> <div class="attendance-information">
<span>{{ts.trPK('myTeam','check-out')}}</span> <span style="color: red; ">{{ts.trPK('myTeam','check-out')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT !== null">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2> <h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT !== null">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2> <h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2>
</div> </div>
@ -98,16 +195,54 @@
</div> </div>
</ion-col> </ion-col>
</ion-row> </ion-row>
<!-- <ion-row *ngIf="attendanceTrackingList.stats == '' || attendanceTrackingList.stats == '' "> Hello </ion-row>
</div> -->
</div>
<div *ngIf="showAttendence" class="result-graph-attendence">
<div >
<ion-row style="margin-top: 8px; margin-left: 12px;">
<ion-col [size]="8">
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
</ion-col>
<ion-col [size]="4">
<ion-row>
<button (click)="showCalender()" style="background: white; margin-left: 15px;">
<label class="stats" >{{ts.trPK('attendance-tracking','view-days')}}</label>
<img src="../assets/imgs/view-days.svg">
</button>
</ion-row>
</ion-col>
</ion-row>
</div> </div>
<div class="header"> <div class="header">
<div> <div>
<div>
<ion-row >
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
<app-card-calendar
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-calendar>
</ion-slide>
</ion-slides>
</ion-row>
</div>
<!--
<ion-row *ngIf="direction == 'en'"> <ion-row *ngIf="direction == 'en'">
<ion-col [size]="2" style="text-align: left;"> <ion-col [size]="2" style="text-align: left;">
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon> <ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
</ion-col> </ion-col>
<ion-col [size]="8" style="text-align: center;"> <ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{month}} {{year}}</span>
<span class="month-year-span">{{month}} </span>
</ion-col> </ion-col>
<ion-col [size]="2" style="text-align: right;"> <ion-col [size]="2" style="text-align: right;">
<ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon> <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
@ -119,49 +254,25 @@
<ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="previousSlide()"></ion-icon> <ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="previousSlide()"></ion-icon>
</ion-col> </ion-col>
<ion-col [size]="8" style="text-align: center;"> <ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{year}} {{month}}</span>
<span class="month-year-span">{{month}}</span>
</ion-col> </ion-col>
<ion-col [size]="2" style="text-align: left;"> <ion-col [size]="2" style="text-align: left;">
<ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon> <ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon>
</ion-col> </ion-col>
</ion-row> </ion-row> -->
</div> </div>
</div> </div>
<div class="result-graph">
<div> <div>
<span [ngClass]="direction == 'en' ? 'request-heading':'request-heading-ar'">{{ts.trPK('myTeam','attendance-statistics')}}</span>
</div>
<div style="position: relative;">
<div class="label-container">
<div class="green-label-container">
<span class="span-one">{{ts.trPK('attendance','present')}}</span>
<span class="span-two">{{attendedDays}}</span>
</div>
<div class="blue-label-container">
<span class="span-one">{{ts.trPK('attendance','absent')}}</span>
<span class="span-two">{{absentDays}}</span>
</div>
</div>
<div class="graph-container">
<div class="result-text-container">
<h2>{{totalAttendancePrecentage}}</h2>
<span>{{ts.trPK('absenceList','days')}}</span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div>
</div>
<ion-row class="attendance-summary"> <ion-row class="attendance-summary">
<ion-col [size]="3"> <ion-col [size]="4">
<div class="attendance-information"> <div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','schedule')}}</span> <span>{{ts.trPK('attendance-tracking','schedule')}}</span>
<h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2> <h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
</div> </div>
</ion-col> </ion-col>
<ion-col [size]="3"> <ion-col [size]="2">
<div class="attendance-information"> <div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','off-days')}}</span> <span>{{ts.trPK('attendance-tracking','off-days')}}</span>
<h2>{{timeCardSummaryData.OFF_DAYS}}</h2> <h2>{{timeCardSummaryData.OFF_DAYS}}</h2>
@ -182,9 +293,98 @@
</div> </div>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div>
<div style="position: relative;">
<div class="label-container">
<ion-row>
<label class="green-label-container"> </label>
<span class="span-one">{{ts.trPK('attendance','present')}}</span>
<span class="span-two">{{attendedDays}}</span>
</ion-row>
</div>
<div class="label-container">
<ion-row>
<label class="blue-label-container"> </label>
<span class="spa-one">{{ts.trPK('attendance','absent')}}</span>
<span class="spa-two">{{absentDays}}</span>
</ion-row>
</div>
<div class="graph-container">
<div class="result-text-container">
<h2>{{totalAttendancePrecentage}}</h2>
<span>{{ts.trPK('absenceList','days')}}</span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options" ></p-chart>
</div>
</div>
</div>
<!-- //////////////////////////////////CALENDAR/////////////////////////////////////////////////////// -->
<div *ngIf="!showAttendence">
<div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' "> <div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span> <div>
<ion-row style="margin-top: 8px; margin-left: 12px;">
<ion-col [size]="8">
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
</ion-col>
<ion-col [size]="4">
<ion-row>
<button (click)="showCalender()" style="background: white; margin-left: 15px; margin-top: 6px;">
<label class="stats" >{{ts.trPK('attendance-tracking','view-stats')}}</label>
<img src="../assets/imgs/view-stats.svg">
</button>
</ion-row>
</ion-col>
</ion-row>
</div>
<div class="header">
<div>
<div>
<ion-row >
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
<app-card-calendar
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-calendar>
</ion-slide>
</ion-slides>
</ion-row>
</div>
<!-- <ion-row *ngIf="direction == 'en'">
<ion-col [size]="2" style="text-align: left;">
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
</ion-col>
<ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{month}} </span>
</ion-col>
<ion-col [size]="2" style="text-align: right;">
<ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
</ion-col>
</ion-row>
<ion-row *ngIf="direction == 'ar'">
<ion-col [size]="2" style="text-align: right;">
<ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="previousSlide()"></ion-icon>
</ion-col>
<ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{month}}</span>
</ion-col>
<ion-col [size]="2" style="text-align: left;">
<ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon>
</ion-col>
</ion-row> -->
</div>
</div>
<app-circle-calendar <app-circle-calendar
[currentDateParent]="currentDate" [currentDateParent]="currentDate"
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList" [dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
@ -192,11 +392,18 @@
(currentYear)=changeYear($event)> (currentYear)=changeYear($event)>
</app-circle-calendar> </app-circle-calendar>
</div> </div>
</div>
</div> </div>
<div *ngIf="activeSegment === 'Team Members'"> <div *ngIf="activeSegment === 'Team Members'">
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;"> <div style="margin-top: -23px;">
<ion-row>
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
<ion-col> <div class="number"><p class="numberEmp">{{EmpTotal}}</p></div></ion-col>
</ion-row>
</div>
<!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding> <ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding> <ion-col [size]="3" class="search-dropdown" no-padding>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" <ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
@ -214,16 +421,16 @@
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon> <ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div> -->
<div *ngIf="isSearch"> <!-- <div *ngIf="isSearch">
<ion-row class="search-container"> <ion-row class="search-container">
<ion-col style="float: left;" size=[6] (click)="clearSearchTwo()"> <ion-col style="float: left;" size=[6] (click)="clearSearchTwo()">
<span style="margin-left: 5px;">{{ts.trPK('work-list','clear-search')}}</span> <span style="margin-left: 5px;">{{ts.trPK('work-list','clear-search')}}</span>
<ion-icon name="close" ></ion-icon> <ion-icon name="close" ></ion-icon>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div> -->
<ng-container *ngFor="let subordinate of empSubordinate;let i=index"> <ng-container *ngFor="let subordinate of empSubordinate;let i=index">
<app-employee-information <app-employee-information
@ -235,18 +442,22 @@
</app-employee-information> </app-employee-information>
</ng-container> </ng-container>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content> <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-infinite-scroll>
</div> </div>
<div class="employee-information-indetail" *ngIf="activeSegment === 'About'"> <div class="employee-information-indetail" *ngIf="activeSegment === 'About'">
<ion-row> <ion-row style=" padding-left: 13px;">
<ion-col [size]="6" [ngStyle]="direction == 'en' ? {'border-right': '1px solid #ccc'} : {'border-left': '1px solid #ccc'}"> <!-- <ion-col [size]="6" [ngStyle]="direction == 'en' ? {'border-right': '1px solid #ccc'} : {'border-left': '1px solid #ccc'}">
<h2>{{ts.trPK('userProfile','empNo')}}</h2> <h2>{{ts.trPK('userProfile','empNo')}}</h2>
<p>{{employee.EMPLOYEE_NUMBER}}</p> <p>{{employee.EMPLOYEE_NUMBER}}</p>
</ion-col> -->
<ion-col>
<p style="font-size: 16px; font-family: WorkSans-Bold; margin-top: 15px;">{{ts.trPK('userProfile','profile-details')}}</p>
</ion-col> </ion-col>
<ion-col [size]="6"> <ion-col [size]="12">
<h2>{{ts.trPK('userProfile','category')}}</h2> <h2>{{ts.trPK('userProfile','category')}}</h2>
<p>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p> <p>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
</ion-col> </ion-col>
@ -270,10 +481,10 @@
<h2>{{ts.trPK('userProfile','payrol')}}</h2> <h2>{{ts.trPK('userProfile','payrol')}}</h2>
<p>{{employee.PAYROLL_NAME}}</p> <p>{{employee.PAYROLL_NAME}}</p>
</ion-col> </ion-col>
<ion-col [size]="12"> <!-- <ion-col [size]="12">
<h2>{{ts.trPK('userProfile','orgEmail')}}</h2> <h2>{{ts.trPK('userProfile','orgEmail')}}</h2>
<p>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</p> <p>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</p>
</ion-col> </ion-col> -->
<ion-col [size]="12"> <ion-col [size]="12">
<h2>{{ts.trPK('userProfile','position')}}</h2> <h2>{{ts.trPK('userProfile','position')}}</h2>
<p>{{employee.POSITION_NAME}}</p> <p>{{employee.POSITION_NAME}}</p>

@ -33,10 +33,18 @@ ion-title{
margin-bottom: 15px; margin-bottom: 15px;
.user-image-container{ .user-image-container{
position: relative; position: relative;
width: 80px; width: 100%;
height: 80px; height: 24px;
display: block; justify-content: space-between;
display: flex;
margin: 0 auto; margin: 0 auto;
align-items: center;
}
// position: relative;
// width: 80px;
// height: 80px;
// display: block;
// margin: 0 auto;
// &:before{ // &:before{
// position: absolute; // position: absolute;
// content: ""; // content: "";
@ -53,16 +61,27 @@ ion-title{
// background-color: green !important; // background-color: green !important;
// } // }
} }
@media screen and (min-width: 1px) and (max-width:767px){
.user-image{ .user-image{
overflow: hidden;
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 30%;
height: 100%; height: 100%;
border-radius: 80px; border-radius: 80px;
border: 1px solid #ccc; /* border: 1px solid #ccc; */
margin: 0px auto 6px; margin-top: -125px;
}
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.user-image{
position: relative;
display: block;
width: 30%;
height: 100%;
border-radius: 80px;
margin-bottom: 371px;
}}
h1{ h1{
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -71,18 +90,20 @@ ion-title{
margin-bottom: 4px; margin-bottom: 4px;
} }
span{ span{
font-size: 14px; font-size: 11px;
display: block; display: block;
color: #888 // color: #888
}
} }
$actionBtnSize : 36px; $actionBtnSize : 36px;
.user-actions{ .user-actions{
text-align: center; text-align: center;
.action-button{ .action-button{
font-size: 11px; font-size: 11px;
white-space: nowrap; font-weight: bold;
color: #888; // white-space: nowrap;
// color: #888;
.action-button-icon{ .action-button-icon{
width: $actionBtnSize; width: $actionBtnSize;
height: $actionBtnSize; height: $actionBtnSize;
@ -104,19 +125,24 @@ ion-title{
margin-top: 15px; margin-top: 15px;
border-radius: 20px; border-radius: 20px;
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 20px;
border: 1px solid #ccc;
ion-col{ ion-col{
padding: 15px; padding: 15px;
border-bottom: 1px solid #ccc; // border-bottom: 1px solid #ccc;
} }
h2{ h2{
font-size: 13px; font-size: 13px;
font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
color: rgb(128, 124, 124);
} }
p{ p{
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
font-family: WorkSans-Bold;
// margin-bottom: 10px;
} }
} }
@ -128,28 +154,80 @@ ion-title{
color: black; color: black;
} }
.active-Segment { @media screen and (min-width: 1px) and (max-width:767px){
font-size: 0.3cm !important; .active-Segment {
width: 11%;
max-width: 11%;
min-width: 11%;
height: 30% !important;
min-height: 36px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 22px;
margin-left: 22px;
background-color: #269DB8;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.active-Segment{
width: 11%;
max-width: 11%;
min-width: 11%;
height: 56% !important;
min-height: 68px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 62px;
margin-left: 45px;
background: #269DB8 !important; background: #269DB8 !important;
text-transform: none; padding-left: 17px;}}
--color-checked: none;
border-radius: 100px; @media screen and (min-width: 1px) and (max-width:767px){
border:0;
}
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black !important;
font-size: 11px;
}
.normal-Segment { .normal-Segment {
font-size: 0.3cm !important; width: 11%;
text-transform: none; max-width: 11%;
--color-checked: none; min-width: 11%;
border: 0; height: 30% !important;
} min-height: 36px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 22px;
margin-left: 22px;
background: #414040 !important;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.normal-Segment{
width: 11%;
max-width: 11%;
min-width: 11%;
height: 56% !important;
min-height: 68px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 62px;
margin-left: 45px;
background: #414040 !important;
padding-left: 17px;}}
@media screen and (min-width: 1px) and (max-width:767px){
.imgSize{
position: absolute;
/* right: 15px; */
top: 0;
bottom: 0;
left: 7px;
margin: auto;
height: 18px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.imgSize{position: absolute;
top: 0;
bottom: 0;
left: 9px;
margin: auto;
height: 28px;}}
.colum-container{ .colum-container{
padding: 15px; padding: 15px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
@ -207,7 +285,8 @@ ion-title{
/////////////////////////////////////////////////////// Attendance /////////////////////// /////////////////////////////////////////////////////// Attendance ///////////////////////
.header{ .header{
margin-top: 20px; // margin-top: 20px;
margin-top: 1px;
} }
.slidPrev{ .slidPrev{
@ -244,14 +323,47 @@ ion-title{
/* margin-left: 136px; */ /* margin-left: 136px; */
margin-right: -251px; margin-right: -251px;
} }
@media screen and (min-width: 1px) and (max-width:767px){
.result-graph { .result-graph {
position: relative; position: relative;
background: white; background: white;
margin-top: 20px; // margin-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
border-radius: 20px; border-radius: 20px;
z-index: 1; z-index: 1;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 56px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 12px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.result-graph {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 89px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 114px !important;
}}
.result-graph-attendence {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 20px;
border: 1px solid #ccc;
} }
.request-heading { .request-heading {
@ -273,7 +385,7 @@ ion-title{
padding: 0; padding: 0;
margin: 0; margin: 0;
position: absolute; position: absolute;
left: 50%; left: 85%;
top: 50%; top: 50%;
display: block; display: block;
text-align: center; text-align: center;
@ -293,8 +405,12 @@ ion-title{
} }
} }
.today-graph { .today-graph {
width: 100%; // width: 100%;
max-height: 4cm; max-height: 4cm;
display: block;
height: 132px;
width: 264px;
margin-left: 154px;
} }
.green-label{ .green-label{
@ -359,7 +475,10 @@ ion-title{
.attendance-information{ .attendance-information{
background: white; background: white;
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 9px;
font-weight: bolder;
// border-right: 1px solid rgb(221, 221, 221);
@media screen and (min-width: 300px) and (max-width:359px) { @media screen and (min-width: 300px) and (max-width:359px) {
h2{ h2{
padding: 0; padding: 0;
@ -369,45 +488,100 @@ ion-title{
span{ span{
font-size: 9px; font-size: 9px;
} }
} }
@media screen and (min-width: 360px) { @media screen and (min-width: 360px) {
h2{ h2{
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 18px; font-size: 14px;
} }
span{ span{
font-size: 11px; font-size: 11px;
margin-bottom: 3px;
} }
} }
} }
.month-year-span{ .month-year-span{
font-size: 20px; font-size: 16px;
font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
font-weight: bold;
} }
.green-label-container{ .green-label-container{
border-top: 5px solid #269DB8; // border-top: 5px solid #269DB8;
padding: 1px 0px; // padding: 1px 0px;
margin: 15px 0px // margin: 15px 0px
width: 12px;
height: 12px;
padding-right: -10px;
border-radius: 100%;
background-color: #269DB8;
} }
.blue-label-container{ .blue-label-container{
border-top: 5px solid #292F42; // border-top: 5px solid #292F42;
padding: 1px 0px; // padding: 1px 0px;
margin: 15px 0px // margin: 15px 0px
width: 12px;
height: 12px;
padding-right: -10px;
border-radius: 100%;
background-color: #292F42;
margin-top: 30px;
} }
.span-one{ .span-one{
// display: block;
// font-size: 12px;
// color: black;
display: block; display: block;
font-size: 12px; font-size: 12px;
color: black; color: black;
margin-left: 6px;
margin-top: -2px;
font-weight: bold;
} }
.span-two{ .span-two{
// display: block;
// font-size: 22px;
display: block; display: block;
font-size: 22px; font-size: 12px;
color: black;
margin-left: 6px;
margin-top: -2px;
font-weight: bold;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
}
.spa-one{
// display: block;
// font-size: 12px;
// color: black;
display: block;
font-size: 12px;
color: black;
margin-left: 6px;
margin-top: 28px;
font-weight: bold;
}
.spa-two{
// display: block;
// font-size: 22px;
display: block;
font-size: 12px;
color: black;
margin-left: 6px;
margin-top: 28px;
font-weight: bold;
font-family: WorkSans-Bold;
} }
.graph-container{ .graph-container{
margin-left: -50px; margin-left: -50px;
@ -416,10 +590,12 @@ ion-title{
} }
.label-container{ .label-container{
position: absolute; position: absolute;
width: 20%; // width: 20%;
right: 30px; // right: 30px;
top: 50%; top: 50%;
margin-top: -60px; margin-top: -27px;
left: 20px;
} }
.attendance-summary .attendance-information { .attendance-summary .attendance-information {
span{ span{
@ -428,8 +604,10 @@ ion-title{
line-height: 14px; line-height: 14px;
} }
h2{ h2{
text-align: right; // text-align: right;
font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
font-weight: bolder;
font-size: 13px;
} }
} }
@ -437,8 +615,10 @@ ion-title{
.calendar-container{ .calendar-container{
background: white; background: white;
margin-bottom: 100px; margin-bottom: 100px;
margin-top: 20px; margin-top: 10px;
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc;
padding-bottom: 25px;
span{ span{
text-align: left; text-align: left;
display: block; display: block;
@ -462,4 +642,76 @@ ion-title{
} }
.Boldtext{
font-size: 13px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
}
.attendence{
position: relative;
background: white;
border-radius: 20px;
border: 1px solid #ccc;
}
.attendence-text{
margin-bottom: 1px;
margin-left: 10px;
font-family: WorkSans-Bold;
font-size: 16px;
}
.stats{
color: #289DB8; font-size: 9px;
margin-right: 5px;
font-family: 'WorkSans-Bold';
}
.text{
font-size: 16px;
font-weight: bolder;
font-family: 'WorkSans-Bold';
margin-top: 27px;
}
.number{
width: 20px;
height: 20px;
padding-right: -10px;
border-radius: 100%;
background-color: #269DB8;
z-index: 9;
margin-top: 26px;
}
.numberEmp{
color: white;
font-size: 13px;
font-weight: bolder;
margin-left: 6px;
}
.slider-container{
padding-bottom: 20px;
}
.filters-row {
margin-top: 10px;
margin-left: 20px;
}
.disable-filter {
pointer-events: none;
opacity: .3;
}

@ -58,6 +58,7 @@ export class DetailsComponent implements OnInit {
public activeMonth: any; public activeMonth: any;
public currentMonthName = ''; public currentMonthName = '';
public showAttendence = false;
public showData = false; public showData = false;
public currentYear = new Date().getFullYear(); public currentYear = new Date().getFullYear();
public attendanceTrackingList: any = []; public attendanceTrackingList: any = [];
@ -67,6 +68,7 @@ export class DetailsComponent implements OnInit {
year: any; year: any;
preMonth: number; preMonth: number;
nextMonth: any; nextMonth: any;
currentMonth: any;
public direction: string; public direction: string;
public options = { public options = {
cutoutPercentage: 80, cutoutPercentage: 80,
@ -85,8 +87,128 @@ export class DetailsComponent implements OnInit {
// tslint:disable-next-line: max-line-length // tslint:disable-next-line: max-line-length
public monthsNameArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; public monthsNameArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
public monthIndex = new Date().getMonth() + 1; public monthIndex = new Date().getMonth() + 1;
public EmpTotal = [];
public selectedFilter = '';
public itemType = '';
public monthNo : any;
public filters = [
{
// value: '',
name: 'JAN',
active: true,
color: '#0a0a0a',
key: 'January',
monthNo: 1,
disable: false
},
{
// value: '',
name: 'FEB',
active: false,
color: '#0a0a0a',
key: 'February',
monthNo: 2,
disable: false
},
{
// value: '',
name: 'MAR',
active: false,
color: '#0a0a0a',
key: 'March',
monthNo: 3,
disable: false
},
{
// value: '',
name: 'APRIL',
active: false,
color: '#0a0a0a',
key: 'April',
monthNo: 4,
disable: false
},
{
// value: '',
name: 'MAY',
active: false,
color: '#0a0a0a',
key: 'May',
monthNo: 5,
disable: false
},
{
// value: '',
name: 'JUN',
active: false,
color: '#0a0a0a',
key: 'June',
monthNo: 6,
disable: false
},
{
// value: '',
name: 'JUL',
active: false,
color: '#0a0a0a',
key: 'July',
monthNo: 7,
disable: false
},
{
// value: '',
name: 'AUG',
active: false,
color: '#0a0a0a',
key: 'Augest',
monthNo: 8,
disable: false
},
{
// value: '',
name: 'SEP',
active: false,
color: '#0a0a0a',
key: 'September',
monthNo: 9,
disable: false
},
{
// value: '',
name: 'NOV',
active: false,
color: '#0a0a0a',
key: 'November',
monthNo: 10,
disable: false
},
{
// value: '',
name: 'OCT',
active: false,
color: '#0a0a0a',
key: 'October',
monthNo: 11,
disable: false
},
{
// value: '',
name: 'DEC',
active: false,
color: '#0a0a0a',
key: 'December',
monthNo: 12,
disable: false
}
];
public slideOptsOne = {
slidesPerView: 7,
spaceBetween: 1
};
constructor( constructor(
public timeCardService: TimeCardService, public timeCardService: TimeCardService,
public menuService: MenuService, public menuService: MenuService,
@ -106,6 +228,8 @@ export class DetailsComponent implements OnInit {
this.showAttendanceTracking(); this.showAttendanceTracking();
// tslint:disable-next-line: max-line-length // tslint:disable-next-line: max-line-length
this.currentMonthName = this.direction === 'en' ? this.common.getMonthName(this.monthIndex) : this.common.getMonthNameAr(this.monthIndex); this.currentMonthName = this.direction === 'en' ? this.common.getMonthName(this.monthIndex) : this.common.getMonthNameAr(this.monthIndex);
this.getSuborinatesAttStatus();
} }
showAttendanceTracking() { showAttendanceTracking() {
@ -130,6 +254,7 @@ export class DetailsComponent implements OnInit {
} }
} }
initAttendance() { initAttendance() {
this.data = {}; this.data = {};
// tslint:disable-next-line: max-line-length // tslint:disable-next-line: max-line-length
@ -176,6 +301,17 @@ export class DetailsComponent implements OnInit {
}); });
} }
monthCardSliders(monthNo){
console.log(monthNo+"__________________")
// this.common.startLoading();
// this.showData = false;
// this.currentMonth = this.nextMonth - 1;
// this.currentDate = new Date(this.currentYear, (this.preMonth + 1), 1);
this.calendarConfig(this.getMonthName(this.monthNo) , this.currentYear);
console.log("next month =" + this.nextMonth );
console.log(" Month Name =" + this.currentMonthName);
}
nextSlide() { nextSlide() {
if (this.currentMonthName !== this.month) { if (this.currentMonthName !== this.month) {
@ -189,6 +325,7 @@ export class DetailsComponent implements OnInit {
this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear); this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear);
this.nextMonth = this.nextMonth + 1; this.nextMonth = this.nextMonth + 1;
this.preMonth = this.nextMonth - 2; this.preMonth = this.nextMonth - 2;
} }
} }
@ -276,15 +413,24 @@ export class DetailsComponent implements OnInit {
this.totalAttendancePrecentage = this.absentDays + this.attendedDays; this.totalAttendancePrecentage = this.absentDays + this.attendedDays;
if (this.totalAttendancePrecentage > 0) { if (this.totalAttendancePrecentage > 0) {
this.data = { this.data = {
// labels: ['Apsent', 'Present'],
datasets: [ datasets: [
{ {
label: "# of Votes",
data: [this.absentDays, this.attendedDays], data: [this.absentDays, this.attendedDays],
backgroundColor: [ backgroundColor: [
'#269DB8', 'black',
'#269DB8' '#269DB8'
], ],
borderWidth: 2 borderWidth: 1,
}] // cutoutPrecentage:20 ,
}],
labels: [
'Apsent',
'Present'
]
}; };
} }
} }
@ -546,4 +692,75 @@ doInfinite(infiniteScroll) {
this.showEmailInput = true; this.showEmailInput = true;
} }
} }
showCalender(){
if(this.showAttendence){
this.showAttendence = false
}else{
this.showAttendence = true
}
}
getSuborinatesAttStatus(){
const request = {
// VersionID:2.8,
// Channel:37,
// LanguageID:2,
// MobileType:"android",
// P_SESSION_ID:1142449920,
// MobileNumber:"0508079569",
// TokenID:"VHR_Token",
// P_USER_NAME:"111209",
// UserName:"111209",
// P_EMAIL_ADDRESS:"Faisal.AlQurashi@cloudsolutions.com.sa",
SearchMonth:"January",
SearchYear:2021
};
// this.myTeamService.getSuborinatesAttStatus().subscribe((result: any) =>
this.myTeamService.getSuborinatesAttStatus(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
{
this.handleRespondSuborinatesAttStatusResult(result);
})
}
handleRespondSuborinatesAttStatusResult(result){
// this.EmpTotal = result.GetSubordinatesAttdStatusList.length;
this.EmpTotal = result.GetSubordinatesAttdStatusList[0].NUMBER_OF_EMPLOYEES;
console.log("total no "+this.EmpTotal)
}
activeFilter(index: number) {
console.log(this.filters);
if (this.currentActiveIndex !== index) {
this.previousActiveIndex = this.currentActiveIndex;
this.currentActiveIndex = index;
this.filters[this.previousActiveIndex].active = false;
this.filters[this.currentActiveIndex].active = true;
this.selectedFilter = this.filters[this.currentActiveIndex].key;
}
}
disableFilters() {
for (const filter of this.filters) {
if (filter.key === this.itemType) {
filter.disable = false;
filter.active = true;
// filter.value = this.nextMonth - 1;
this.selectedFilter = filter.name;
} else if (this.itemType === '') {
filter.disable = false;
filter.active = false;
} else {
filter.disable = true;
filter.active = false;
}
}
if (this.itemType === '') {
this.filters[0].active = true;
}
}
} }

@ -8,6 +8,53 @@
<ion-content> <ion-content>
<div class="contentBg"> <div class="contentBg">
<div class="result-graph"> <div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','search-by')}}</span>
</div>
<div>
<ion-row class="custom-radio">
<!-- <ion-col [size]="3" class="search-dropdown" no-padding> -->
<ion-radio-group [(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)" class="radio-list">
<ion-radio value="Name" [checked]="this.searchKeySelect === 'Name'" [color]="myColor" >{{ts.trPK('searchForReplacment','name')}}</ion-radio>
<ion-label class="text-label" >{{ts.trPK('searchForReplacment','name')}}</ion-label>
<ion-radio value="User Name" [checked]="this.searchKeySelect === 'User Name'" [color]="myColor" >{{ts.trPK('searchForReplacment','userName')}}</ion-radio>
<ion-label class="text-label">{{ts.trPK('searchForReplacment','userName')}}</ion-label>
<ion-radio value="Email" [checked]="this.searchKeySelect === 'Email'" [color]="myColor" >{{ts.trPK('searchForReplacment','email')}}</ion-radio>
<ion-label class="text-label">{{ts.trPK('searchForReplacment','email')}}</ion-label>
</ion-radio-group>
</ion-row>
<!-- <ion-row>
<ion-input placeholder="Search by" class="search-label"[(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)" ></ion-input>
</ion-row> -->
<ion-row>
<ion-col class="search-label">
<ion-input *ngIf="showEmailInput" placeholder="Search by Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showUserNameOrNameInput" placeholder ="Search by Name or Username" [(ngModel)]="searchNameOrUserName"></ion-input>
</ion-col>
</ion-row>
</div>
<!-- <div class="result-text-container">
<h2>{{totalEmployees}}</h2>
<span>{{ts.trPK('myTeam','total')}} <br> {{ts.trPK('myTeam','team-members')}}</span>
</div> -->
</div>
<div>
<ion-row>
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
<ion-col> <div class="number"><p class="numberEmp">{{EmpTotal}}</p></div></ion-col>
</ion-row>
</div>
<!-- <div class="result-graph">
<div class="request-heading"> <div class="request-heading">
<span>{{ts.trPK('myTeam','team-stats')}}</span> <span>{{ts.trPK('myTeam','team-stats')}}</span>
</div> </div>
@ -17,7 +64,7 @@
</div> </div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart> <p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div> </div> -->
<!-- <ion-row class="filters-row"> <!-- <ion-row class="filters-row">
<ion-slides [options]="slideOptsOne"> <ion-slides [options]="slideOptsOne">
@ -33,7 +80,7 @@
</ion-slides> </ion-slides>
</ion-row> --> </ion-row> -->
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;"> <!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding> <ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding> <ion-col [size]="3" class="search-dropdown" no-padding>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" <ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
@ -47,11 +94,14 @@
<ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input> <ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showUserNameOrNameInput" placeholder ="{{ts.trPK('general','search')}}" [(ngModel)]="searchNameOrUserName"></ion-input> <ion-input *ngIf="showUserNameOrNameInput" placeholder ="{{ts.trPK('general','search')}}" [(ngModel)]="searchNameOrUserName"></ion-input>
</ion-col> </ion-col>
<ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployee()"> <ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployee()">
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon> <ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div> -->
<div *ngIf="isSearch"> <div *ngIf="isSearch">
<ion-row class="search-container"> <ion-row class="search-container">
@ -77,5 +127,9 @@
<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content> <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-infinite-scroll>
</ion-content> </ion-content>

@ -30,20 +30,37 @@ ion-content {
} }
.request-heading { .request-heading {
span { span {
text-align: center; // text-align: center;
// display: block;
// padding-top: 8px;
// font-family: workSans-Regular;
display: block; display: block;
padding-top: 8px; padding-top: 8px;
font-family: workSans-Regular; padding-left: 15px;
font-weight: bold;
font-size: 12px;
margin-top: 9px;
} }
} }
.search-label{
border: 1px solid #ccc;
margin-left: 15px;
margin-right: 15px;
border-radius: 22px;
margin-top: 24px;
font-size: 11px;
color: rgb(143, 141, 141);
}
.result-graph { .result-graph {
position: relative; position: relative;
background: white; background: white;
margin-top: 20px; margin-top: 20px;
padding-bottom: 20px; padding-bottom: 35px;
border-radius: 20px; border-radius: 20px;
z-index: 1; z-index: 1;
border: 1px solid #ccc;
} }
.result-text-container { .result-text-container {
padding: 0; padding: 0;
@ -139,7 +156,7 @@ ion-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 80px; border-radius: 80px;
border: 1px solid #ccc; border: 1px solid rgb(170, 169, 169);
margin: 0px auto 6px; margin: 0px auto 6px;
} }
@ -162,3 +179,64 @@ ion-content {
} }
} }
} }
// .myClass .toggle-icon {
// background-color: purple; // this changes the background, ie the grey stripe.
// .toggle-inner {
// background-color: yellow; // this changes the backgroundcolor of the toggle dot.
// }
// }
.text-label{
--color: black !important;
font-size: 13px;
margin-left: 15px;
margin-right: 18px;
}
.radio-list{
background: white;
margin-left: 18px;
/* margin-right: 10px; */
margin-top: 12px;
}
// .selected .radio-icon {
// border-color: #0064D9;
// color: red;
// }
.radio-icon{
.custom-radio .radio-icon {
margin: 0px;
border-radius: 50%;
border-width: var(--border-width);
border-style: var(--border-style);
border-color: #dcdcdc;
margin-top: 6px !important;
border-color: #d8d4d4 !important;}
}
.text{
font-size: 16px;
font-weight: bolder;
font-family: 'WorkSans-Bold';
margin-top: 27px;
}
.number{
width: 20px;
height: 20px;
padding-right: -10px;
border-radius: 100%;
background-color: #269DB8;
z-index: 9;
margin-top: 26px;
}
.numberEmp{
color: white;
font-size: 13px;
font-weight: bolder;
margin-left: 6px;
}

@ -7,6 +7,7 @@ import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-respo
import { MyTeamService } from '../service/my-team.service'; import { MyTeamService } from '../service/my-team.service';
import { ModalController, IonInfiniteScroll } from '@ionic/angular'; import { ModalController, IonInfiniteScroll } from '@ionic/angular';
import { DetailsComponent } from '../details/details.component'; import { DetailsComponent } from '../details/details.component';
import { Body } from '@angular/http/src/body';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
templateUrl: './home.component.html', templateUrl: './home.component.html',
@ -28,6 +29,8 @@ export class HomeComponent implements OnInit {
public selEmpNo: any; public selEmpNo: any;
public totalEmployees = 0; public totalEmployees = 0;
public pageFirstVisit = false; public pageFirstVisit = false;
myColor: string = 'secondary';
public EmpTotal = [];
public options = { public options = {
cutoutPercentage: 80, cutoutPercentage: 80,
@ -95,7 +98,13 @@ export class HomeComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.common.sharedService.setSharedData( [], DetailsComponent.opendEmployeesARR); this.common.sharedService.setSharedData( [], DetailsComponent.opendEmployeesARR);
this.setIntitial(); this.setIntitial();
this.getSuborinatesAttStatus();
} }
toggleColor() {
this.myColor = 'secondary';
// this.myColor = '#269DB8'
}
// activeFilter(index: number) { // activeFilter(index: number) {
// this.previousActiveIndex = this.currentActiveIndex; // this.previousActiveIndex = this.currentActiveIndex;
@ -228,4 +237,36 @@ export class HomeComponent implements OnInit {
this.showEmailInput = true; this.showEmailInput = true;
} }
} }
getSuborinatesAttStatus(){
const request = {
// VersionID:2.8,
// Channel:37,
// LanguageID:2,
// MobileType:"android",
// P_SESSION_ID:1142449920,
// MobileNumber:"0508079569",
// TokenID:"VHR_Token",
// P_USER_NAME:"111209",
// UserName:"111209",
// P_EMAIL_ADDRESS:"Faisal.AlQurashi@cloudsolutions.com.sa",
SearchMonth:"January",
SearchYear:2021
};
// this.myTeamService.getSuborinatesAttStatus().subscribe((result: any) =>
this.myTeamService.getSuborinatesAttStatus(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
{
this.handleRespondSuborinatesAttStatusResult(result);
})
}
handleRespondSuborinatesAttStatusResult(result){
// this.EmpTotal = result.GetSubordinatesAttdStatusList.length;
this.EmpTotal = result.GetSubordinatesAttdStatusList[0].NUMBER_OF_EMPLOYEES;
console.log("total no "+this.EmpTotal)
}
} }

@ -0,0 +1,195 @@
<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','HR-request')}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div *ngIf="!showRequestDetails" class="contentBg">
<div class="result-graph" >
<div class="user-info">
<div class="user-image-container">
<div class="user-image">
<img class="img" [src]="EmpImg ? 'data:image/png;base64,'+ EmpImg : '../assets/imgs/profile.png'" alt="Team Member Image"/>
</div>
</div>
<div style="margin-top: 18px;">
<span class="Nametext">{{EmpName}}</span>
<p style=" font-size: 12px; color: rgb(128, 124, 124);">{{EmpEmail}}</p>
<!-- <span>{{EmpJob}}</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">{{EmpJob}}</span>
</ion-col>
<ion-col>
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{EmpNum}}</span>
</ion-col>
</ion-row>
</div>
</div>
</div>
<div class="employee-information-indetail">
<ion-row style="padding-left: 13px;">
<ion-col>
<p style="font-size: 16px; font-family: WorkSans-Bold; margin-top: 15px;">{{ts.trPK('userProfile','profile-details')}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','category')}}</h2>
<p>{{EmpCatMeaning}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','address')}}</h2>
<p>{{EmpLocation}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','phone-no')}}</h2>
<p>{{EmpMobile}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','busG')}}</h2>
<p>{{EmpOrgName}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','job')}}</h2>
<p>{{EmpJob}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','payrol')}}</h2>
<p>{{EmpPayrol}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','position')}}</h2>
<p>{{EmpPosition}}</p>
</ion-col>
<ion-col [size]="12" style="border-bottom: none;">
<h2>{{ts.trPK('userProfile','grade')}}</h2>
<p>{{EmpGRADENAME}}</p>
</ion-col>
</ion-row>
</div>
<div>
<ion-button class="sendCodeBtn" (click)="createRequest()" >{{ts.trPK('userProfile','createHR-Request')}}</ion-button>
</div>
</div>
<!-- ///////////////////////////////////////////////////////////////////next page -->
<!-- <div>
<div class="verify-code">
<ion-row style=" margin-left: 9px; margin-bottom: 13px;">
<ion-col style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','code-sent')}}</ion-col>
<ion-col class="Boldtext"> {{EmpMobile}}</ion-col>
</ion-row>
<ion-row dir="ltr">
<ion-col [size]="12">
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()" #ref autofocus="true">
</ion-input>
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
</ion-col>
</ion-row>
</div>
<div>
<ion-button class="sendVerifyBtn" (click)="VerifyCode()" >{{ts.trPK('userProfile','verify-code')}}</ion-button>
</div>
</div> -->
<!-- ///////////////////////////////////////////////////////////////////next page -->
<div *ngIf="showRequestDetails" class="result-serviceType">
<div class="request-heading">
<span>{{ts.trPK('userProfile','ServiceType')}}</span>
</div>
<div>
<ion-row class="custom-radio">
<ion-radio-group (ionChange)="showSelectedField($event)" class="radio-list">
<ion-radio value="HR Services" [color]="myColor">HR Services</ion-radio>
<ion-label class="text-label" >HR Services</ion-label>
<ion-radio value="Complaints" [color]="myColor" >Complaints</ion-radio>
<ion-label class="text-label">Complaints</ion-label>
<ion-radio value="Inquiry" [color]="myColor" >Inquiry</ion-radio>
<ion-label class="text-label">Inquiry</ion-label>
</ion-radio-group>
</ion-row>
</div>
<div class="request-heading">
<span>{{ts.trPK('userProfile','DeptName')}}</span>
</div>
<div class="filed">
<label class="selectLabel">Select Department</label>
</div>
<div class="request-heading">
<span>{{ts.trPK('userProfile','RelatedSection')}}</span>
</div>
<div class="filed">
<label class="selectLabel">Select Section</label>
</div>
<div class="request-heading">
<span>{{ts.trPK('userProfile','RelatedTopic')}}</span>
</div>
<div class="filed">
<label class="selectLabel">Select Topic</label>
</div>
<div class="request-heading">
<span>{{ts.trPK('userProfile','SupportingDocument')}}</span>
</div>
<div style="margin-left: 15px; margin-top: 12px;">
<img (click)="uploadDocument()" src="../assets/imgs/add-photo.svg">
</div>
<div class="request-heading">
<span>{{ts.trPK('userProfile','Description')}}</span>
</div>
<div class="filedDesc">
<label class="labelDesc">Description</label>
</div>
<ion-row style="margin-left: 5px;">
<div class="cancelRequest">
<ion-button (click)="cancelRequest()">Cancel
</ion-button>
</div>
<div class="submitRequest">
<ion-button (click)="submitRequest()">Submit
</ion-button>
</div>
</ion-row>
</div>
</ion-content>

@ -0,0 +1,328 @@
.header-toolbar-new{
--background: #269DB8;
}
.contentBg{
padding: 0px 20px;
}
.contentBg:before {
position: absolute;
content: "";
background: #269DB8;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}
@media screen and (min-width: 1px) and (max-width:767px){
.result-graph {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 56px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 12px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.result-graph {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 89px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 114px !important;
}}
.user-info{
text-align: center;
margin-bottom: 3px;
.user-image-container{
position: relative;
width: 100%;
height: 24px;
justify-content: space-between;
display: flex;
margin: 0 auto;
align-items: center;
}}
.Boldtext{
font-size: 13px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
}
.Nametext{
font-size: 15px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
}
.employee-information-indetail{
background: white;
margin-top: 15px;
border-radius: 20px;
margin-bottom: 15px;
border-radius: 20px;
border: 1px solid #ccc;
ion-col{
padding: 15px;
// border-bottom: 1px solid #ccc;
}
h2{
font-size: 13px;
// font-family: WorkSans-Bold;
margin: 0;
font-weight: bold;
color: rgb(128, 124, 124);
}
p{
font-size: 13px;
margin: 0;
font-family: WorkSans-Bold;
// margin-bottom: 10px;
}
}
@media screen and (min-width: 1px) and (max-width:767px){
.user-image{
position: relative;
display: block;
width: 95%;
height: 100%;
border-radius: 80px;
/* border: 1px solid #ccc; */
margin-top: -125px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.user-image{
position: relative;
display: block;
width: 95%;
height: 100%;
border-radius: 80px;
margin-bottom: 371px;
}}
.img{
width: 100px;
height: 100px;
display: inline-flex;
overflow: hidden;
background: transparent;
border-radius: 70% !important;
position: relative;
top: 3px;
}
.sendCodeBtn{
--background: #269DB8;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-left: 5px !important;
margin-top: 15px !important;
margin-bottom: 20px !important;
/* border-radius: 4px; */
height: 26px;
/* padding: 6px 24px; */
font-size: 15px;
width: 322px;
}
.verify-code{
position: relative;
background: white;
border-radius: 20px;
z-index: 1;
border-radius: 20px;
border: 1px solid #ccc;
padding: 21px 3px 34px 14px;
margin: 25px 22px 2px 22px;
}
// .sms_code{
// margin: 0px;
// text-align: center;
// }
ion-input {
margin: 0 5px;
text-align: center;
line-height: 0;
font-size: 32px;
//border: solid 1px #ccc;
border: 1px solid #ccc !important;
//box-shadow: 0 0 5px #ccc inset;
outline: none;
width: 20%;
transition: all .2s ease-in-out;
border-radius: 3px;
display: inline-block;
&:focus {
border-color:var(--ion-color-secondary) !important;
box-shadow: 0 0 5px var(--ion-color-secondary) !important;
}
&::selection {
background: transparent;
}
}
.sendVerifyBtn{
--background: #269DB8;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-top: 15px !important;
margin-bottom: 20px !important;
/* border-radius: 4px; */
height: 26px;
font-size: 15px;
width: 322px;
margin-left: 22px;
}
.custom-radio .radio-icon {
margin: 0px;
border-radius: 50%;
border-width: var(--border-width);
border-style: var(--border-style);
border-color: #dcdcdc;
margin-top: 6px !important;
border-color: #d8d4d4 !important;
margin-bottom: 18px;}
.text-label{
color: black !important;
font-size: 10px;
margin-left: 15px;
margin-right: 18px;
font-family: 'WorkSans-Bold';
}
.radio-list{
background: white;
margin-left: 18px;
/* margin-right: 10px; */
margin-top: 12px;
}
.result-serviceType{
position: relative;
background: white;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 12px;
margin: 25px 22px 2px 22px;
padding-bottom: 241px;
}
.request-heading {
span {
display: block;
padding-top: 8px;
padding-left: 15px;
/* font-weight: bold; */
font-size: 14px;
font-family: 'WorkSans-Bold';
}
}
.filed{
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
margin: 10px;
padding-left: 11px !important;
padding-top: 6px !important;
color: #636161;
padding-bottom: 15px;
}
.filedDesc{
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
margin: 10px;
padding-left: 11px !important;
padding-top: 6px !important;
color: #636161;
padding-bottom: 110px;
}
.labelDesc{
display: block;
padding-top: 8px;
padding-left: 15px;
font-size: 14px;
font-weight: bold;
color: #adabab;
}
.selectLabel{
display: block;
padding-top: 8px;
padding-left: 15px;
font-size: 14px;
/* font-family: 'WorkSans-Bold'; */
font-weight: bold;
color: black;
}
.cancelRequest{
padding: 10px 0px 10px 10px;
ion-button{
border-radius: 7px;
padding: 12px 25px 12px 25px;
background: #d00a0a;
--background: transparent;
--box-shadow: none !important;
height: auto;
min-height: inherit;
font-size: 16px;
font-weight: bold;
}
}
.submitRequest{
padding: 10px 10px 10px 1px;
ion-button{
border-radius: 7px;
padding: 12px 25px 12px 25px;
background: #19a163;
--background: transparent;
--box-shadow: none !important;
height: auto;
min-height: inherit;
font-size: 16px;
font-weight: bold;
}}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HRRequestComponent } from './hr-request.component';
describe('HRRequestComponent', () => {
let component: HRRequestComponent;
let fixture: ComponentFixture<HRRequestComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HRRequestComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HRRequestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,131 @@
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 { MyTeamService } from '../service/my-team.service';
import { Location } from '@angular/common';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import { LoginModel } from 'src/app/authentication/models/LoginModel';
import { SendActivationByType } from 'src/app/authentication/models/sendActivationByType';
@Component({
selector: 'app-hr-request',
templateUrl: './hr-request.component.html',
styleUrls: ['./hr-request.component.scss'],
})
export class HRRequestComponent implements OnInit {
public EmpName : string;
public EmpNum : string;
public EmpGroup : string;
public EmpMobile : string;
public EmpJob : string;
public EmpOrgName : string;
public EmpPayrol : string;
public EmpPosition : string;
public EmpEmail: string;
public EmpCatMeaning:string;
public EmpGRADENAME : string;
public EmpLocation : string;
public EmpImg : string;
public userImage: any = '../assets/imgs/profile.png';
public loginData = new LoginModel();
public searchKeySelect = 'Complaints';
myColor: string = 'secondary';
public showRequestDetails = false;
public direction: string;
constructor(
public ts: TranslatorService,
public cs: CommonService,
public authService: AuthenticationService,
public sharedData: SharedDataService,
public events: Events,
public myTeamService: MyTeamService,
private location: Location,
private menu: MenuController,
) {
this.direction = TranslatorService.getCurrentDirection();
}
ngOnInit() {
this.getUserInformation();
}
goback() {
this.location.back();
}
getUserInformation(){
const request = {
P_SELECTED_EMPLOYEE_NUMBER:"121816",
P_SELECTED_RESP_ID:-999,
P_PAGE_NUM:1,
P_PAGE_LIMIT:1
};
this.myTeamService.getUserInfo(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
{
this.handleUserInfoResult(result);
})
}
handleUserInfoResult(result){
this.EmpName = result.MemberInformationList[0].EMPLOYEE_NAME;
console.log("____________" + this.EmpName);
this.EmpNum = result.MemberInformationList[0].EMPLOYEE_NUMBER;
this.EmpGroup = result.MemberInformationList[0].BUSINESS_GROUP_NAME;
this.EmpMobile = result.MemberInformationList[0].EMPLOYEE_MOBILE_NUMBER;
this.EmpJob = result.MemberInformationList[0].JOB_NAME;
this.EmpOrgName = result.MemberInformationList[0].ORGANIZATION_NAME;
this.EmpPayrol = result.MemberInformationList[0].PAYROLL_NAME;
this.EmpPosition = result.MemberInformationList[0].POSITION_NAME;
this.EmpEmail = result.MemberInformationList[0].EMPLOYEE_EMAIL_ADDRESS;
this.EmpCatMeaning = result.MemberInformationList[0].EMPLOYMENT_CATEGORY_MEANING;
this.EmpGRADENAME = result.MemberInformationList[0].GRADE_NAME;
this.EmpLocation = result.MemberInformationList[0].LOCATION_NAME;
this.EmpImg = result.MemberInformationList[0].EMPLOYEE_IMAGE
// console.log("total no "+this.EmpTotal)
}
// public sendActivationCode() {
// }
// VerifyCode(){
// }
createRequest(){
if(this.showRequestDetails){
this.showRequestDetails = false
}else{
this.showRequestDetails = true
}}
public cancelRequest() {
this.cs.openMyRequestPage();
this.menu.toggle();
}
submitRequest(){
}
uploadDocument(){
}
}

@ -0,0 +1,22 @@
<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>

@ -0,0 +1,33 @@
.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;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MyRequestComponent } from './my-request.component';
describe('MyRequestComponent', () => {
let component: MyRequestComponent;
let fixture: ComponentFixture<MyRequestComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyRequestComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyRequestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,46 @@
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 { MyTeamService } from '../service/my-team.service';
import { Location } from '@angular/common';
@Component({
selector: 'app-my-request',
templateUrl: './my-request.component.html',
styleUrls: ['./my-request.component.scss'],
})
export class MyRequestComponent implements OnInit {
public direction : String;
constructor(
public ts: TranslatorService,
public cs: CommonService,
public authService: AuthenticationService,
public sharedData: SharedDataService,
public events: Events,
public myTeamService: MyTeamService,
private location: Location,
private menu: MenuController,
) {
this.direction = TranslatorService.getCurrentLanguageName();
}
ngOnInit() {}
goback() {
this.location.back();
}
public openHRRequestPage() {
this.cs.openHRRequestPage();
this.menu.toggle();
}
}

@ -8,6 +8,9 @@ import { IonicModule } from '@ionic/angular';
import { MyTeamPage } from './my-team.page'; import { MyTeamPage } from './my-team.page';
import { HmgCommonModule } from '../hmg-common/hmg-common.module'; import { HmgCommonModule } from '../hmg-common/hmg-common.module';
import {MyRequestComponent} from './my-request/my-request.component';
import {HRRequestComponent} from './/hr-request/hr-request.component';
const routes: Routes = [ const routes: Routes = [
{ {
@ -24,7 +27,16 @@ const routes: Routes = [
{ {
path: 'details-2', path: 'details-2',
component: DetailsComponent component: DetailsComponent
},
{
path: 'my-request',
component: MyRequestComponent
},
{
path: 'hr-request',
component: HRRequestComponent
} }
] ]
} }
]; ];
@ -37,6 +49,6 @@ const routes: Routes = [
IonicModule, IonicModule,
RouterModule.forChild(routes) RouterModule.forChild(routes)
], ],
declarations: [MyTeamPage,HomeComponent,DetailsComponent] declarations: [MyTeamPage,HomeComponent,DetailsComponent,MyRequestComponent,HRRequestComponent]
}) })
export class MyTeamPageModule {} export class MyTeamPageModule {}

@ -7,6 +7,8 @@ import { AuthenticationService } from "src/app/hmg-common/services/authenticatio
export class MyTeamService { export class MyTeamService {
public static EMPLOYEE_SHARED_DATA = 'employee'; public static EMPLOYEE_SHARED_DATA = 'employee';
public static getMyTeam = 'Services/ERP.svc/REST/GET_EMPLOYEE_SUBORDINATES'; 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';
constructor( constructor(
public con: ConnectorService, public con: ConnectorService,
private authService: AuthenticationService private authService: AuthenticationService
@ -16,4 +18,18 @@ export class MyTeamService {
this.authService.authenticateRequest(request); this.authService.authenticateRequest(request);
return this.con.post(MyTeamService.getMyTeam, request, onError, errorLabel); return this.con.post(MyTeamService.getMyTeam, request, onError, errorLabel);
} }
public getSuborinatesAttStatus(absence: any, onError?: any, errorLabel?: string){
const request = absence;
this.authService.authenticateRequest(request);
return this.con.post(MyTeamService.getSuborinateStatus, request, onError, errorLabel);
}
public getUserInfo(absence: any, onError?: any, errorLabel?: string){
const request = absence;
this.authService.authenticateRequest(request);
return this.con.post(MyTeamService.getUserInfo, request, onError, errorLabel);
}
} }

@ -30,16 +30,15 @@
<label class="stepHeaderLebal">{{ 'vacation-rule, apply-for-vacation-rule' | translate}} </label><br> <label class="stepHeaderLebal">{{ 'vacation-rule, apply-for-vacation-rule' | translate}} </label><br>
<label class="stepHeaderLebal"> {{ 'vacation-rule, step-1' | translate}}</label> <label class="stepHeaderLebal"> {{ 'vacation-rule, step-1' | translate}}</label>
</div> </div>
<!-- //// okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'/// -->
<ion-item class="selectItem"> <div class="selectItem">
<ion-label>{{'vacation-rule, itemType' | translate}}</ion-label> <label class="label">{{'vacation-rule, itemType' | translate}}</label>
<ion-select mode="ios" okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}' <select class="label-Select" [(ngModel)]="index" (ionChange)="vacationRuleSel($event)" required>
[(ngModel)]="index" (ionChange)="vacationRuleSel($event)" required> <option [selected]="x.ITEM_TYPE_DISPLAY_NAME" value="{{i}}"
<ion-select-option [selected]="x.ITEM_TYPE_DISPLAY_NAME" value="{{i}}"
*ngFor="let x of ruleTypeList; let i=index;"> *ngFor="let x of ruleTypeList; let i=index;">
{{x.ITEM_TYPE_DISPLAY_NAME}} </ion-select-option> {{x.ITEM_TYPE_DISPLAY_NAME}} </option>
</ion-select> </select>
</ion-item> </div>
</ion-row> </ion-row>

@ -162,3 +162,72 @@ color: black !important;
// .cusprogressbar li.active:before { // .cusprogressbar li.active:before {
// background-color: #209a83; // background-color: #209a83;
// } // }
.label-Select{
color: var(--dark);
font-size: 15px;
border: none;
font-weight: 400;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 80%;
// padding: 1px 0px;
background-color: var(--light);
border-bottom: var(--cusgray) solid 1px;
border-radius: 0px;
// margin-left: 20px;
margin-left: 34px;
margin-top: -10px;
// -webkit-appearance: none;
// -moz-appearance: none;
text-indent: 1px;
// text-overflow: '';
box-shadow: none;
-webkit-box-shadow:none;
-moz-box-shadow: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
:root[dir="ltr"]{
background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-right: 20px;
}
:root[dir="rtl"]{
background-image: linear-gradient(-135deg, #999 50%, transparent 50%),linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-left: 20px;
}
}
.label{
font-size: 16px;
// margin-left: 15px;
color: #a2a5a6 !important;
display: block;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
white-space: normal;
// padding-top: 10px;
// padding: 5px 0px;
padding-left: 10px !important;
margin: 10px auto;
:root[dir="ltr"]{
font-family: var(--fontFamilySemiBoldEN) !important;
}
:root[dir="rtl"]{
font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold;
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 237 KiB

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<g id="Group_7231" data-name="Group 7231" transform="translate(-111.351 -245.557)">
<circle id="Ellipse_152" data-name="Ellipse 152" cx="15" cy="15" r="15" transform="translate(111.351 245.557)" fill="#1fa169"/>
<path id="Path_13" data-name="Path 13" d="M11.706,9.111c-.791-.676-1.593-1.086-2.375-.411l-.466.408c-.341.3-.976,1.681-3.429-1.141S4.443,4.71,4.785,4.416l.469-.409c.777-.677.484-1.529-.077-2.406L4.839,1.07C4.276.2,3.663-.38,2.884.3L2.463.664A3.952,3.952,0,0,0,.922,3.279C.641,5.138,1.528,7.266,3.559,9.6s4.014,3.51,5.895,3.489a3.962,3.962,0,0,0,2.8-1.161l.422-.368c.777-.675.294-1.363-.5-2.041Z" transform="translate(119.204 254.187)" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 769 B

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.572" height="21" viewBox="0 0 19.572 21">
<g id="phone-receiver-silhouette" transform="translate(-0.872 0)">
<path id="Path_13" data-name="Path 13" d="M18.252,14.616c-1.269-1.085-2.556-1.742-3.809-.659l-.748.655c-.547.475-1.565,2.7-5.5-1.831S6.6,7.556,7.149,7.085L7.9,6.429c1.246-1.086.776-2.453-.123-3.86l-.543-.852C6.332.313,5.349-.609,4.1.475l-.675.59A6.339,6.339,0,0,0,.953,5.26C.5,8.242,1.924,11.656,5.182,15.4s6.439,5.63,9.456,5.6a6.356,6.356,0,0,0,4.5-1.862l.678-.591c1.246-1.083.472-2.186-.8-3.274Z" transform="translate(0 0)" fill="#259cb8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 622 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.876" height="17.876" viewBox="0 0 17.876 17.876">
<g id="new-page" transform="translate(-1 -1)">
<path id="Path_14" data-name="Path 14" d="M20.7,7H7.6a.6.6,0,0,0-.6.6V20.7a.6.6,0,0,0,.6.6H20.7a.6.6,0,0,0,.6-.6V7.6A.6.6,0,0,0,20.7,7Zm-2.979,7.746H14.746v2.979H13.554V14.746H10.575V13.554h2.979V10.575h1.192v2.979h2.979Z" transform="translate(-2.425 -2.425)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M15.3,3.383V1.6a.6.6,0,0,0-.6-.6H1.6a.6.6,0,0,0-.6.6V14.7a.6.6,0,0,0,.6.6H3.383V5.171A1.788,1.788,0,0,1,5.171,3.383Z" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 619 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.876" height="17.876" viewBox="0 0 17.876 17.876">
<g id="new-page" transform="translate(-1 -1)">
<path id="Path_14" data-name="Path 14" d="M20.7,7H7.6a.6.6,0,0,0-.6.6V20.7a.6.6,0,0,0,.6.6H20.7a.6.6,0,0,0,.6-.6V7.6A.6.6,0,0,0,20.7,7Zm-2.979,7.746H14.746v2.979H13.554V14.746H10.575V13.554h2.979V10.575h1.192v2.979h2.979Z" transform="translate(-2.425 -2.425)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M15.3,3.383V1.6a.6.6,0,0,0-.6-.6H1.6a.6.6,0,0,0-.6.6V14.7a.6.6,0,0,0,.6.6H3.383V5.171A1.788,1.788,0,0,1,5.171,3.383Z" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 619 B

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.663" height="17.821" viewBox="0 0 15.663 17.821">
<g id="user_19_" data-name="user (19)" transform="translate(-31)">
<g id="Group_7233" data-name="Group 7233" transform="translate(34.133)">
<g id="Group_7232" data-name="Group 7232">
<path id="Path_16" data-name="Path 16" d="M125.7,0a4.7,4.7,0,1,0,4.7,4.7A4.7,4.7,0,0,0,125.7,0Z" transform="translate(-121)" fill="#fff"/>
</g>
</g>
<g id="Group_7235" data-name="Group 7235" transform="translate(31 10.442)">
<g id="Group_7234" data-name="Group 7234">
<path id="Path_17" data-name="Path 17" d="M44.678,302.026a6.7,6.7,0,0,0-4.8-2.026H37.787a6.7,6.7,0,0,0-4.8,2.026A6.848,6.848,0,0,0,31,306.857a.522.522,0,0,0,.522.522H46.141a.522.522,0,0,0,.522-.522A6.848,6.848,0,0,0,44.678,302.026Z" transform="translate(-31 -300)" fill="#fff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 912 B

@ -0,0 +1,34 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.515" height="19.099" viewBox="0 0 22.515 19.099">
<g id="group_2_" data-name="group (2)" transform="translate(0 -38.84)">
<g id="Group_7238" data-name="Group 7238" transform="translate(17.523 49.151)">
<g id="Group_7237" data-name="Group 7237" transform="translate(0 0)">
<path id="Path_23" data-name="Path 23" d="M400.235,273.32h-1.741a4.53,4.53,0,0,1,.274,1.557v6.581a1.94,1.94,0,0,1-.112.65h2.879a1.952,1.952,0,0,0,1.95-1.95V276.57A3.254,3.254,0,0,0,400.235,273.32Z" transform="translate(-398.494 -273.32)" fill="#fff"/>
</g>
</g>
<g id="Group_7240" data-name="Group 7240" transform="translate(0 49.151)">
<g id="Group_7239" data-name="Group 7239">
<path id="Path_24" data-name="Path 24" d="M4.717,274.878a4.529,4.529,0,0,1,.274-1.557H3.25A3.254,3.254,0,0,0,0,276.571v3.587a1.952,1.952,0,0,0,1.95,1.95H4.829a1.941,1.941,0,0,1-.112-.65Z" transform="translate(0 -273.321)" fill="#fff"/>
</g>
</g>
<g id="Group_7242" data-name="Group 7242" transform="translate(6.017 47.458)">
<g id="Group_7241" data-name="Group 7241" transform="translate(0 0)">
<path id="Path_25" data-name="Path 25" d="M144.06,234.815h-3.981a3.254,3.254,0,0,0-3.25,3.25v6.581a.65.65,0,0,0,.65.65h9.181a.65.65,0,0,0,.65-.65v-6.581A3.254,3.254,0,0,0,144.06,234.815Z" transform="translate(-136.829 -234.815)" fill="#fff"/>
</g>
</g>
<g id="Group_7244" data-name="Group 7244" transform="translate(7.349 38.84)">
<g id="Group_7243" data-name="Group 7243" transform="translate(0 0)">
<path id="Path_26" data-name="Path 26" d="M171.023,38.84a3.908,3.908,0,1,0,3.909,3.909A3.913,3.913,0,0,0,171.023,38.84Z" transform="translate(-167.114 -38.84)" fill="#fff"/>
</g>
</g>
<g id="Group_7246" data-name="Group 7246" transform="translate(1.471 42.483)">
<g id="Group_7245" data-name="Group 7245" transform="translate(0 0)">
<path id="Path_27" data-name="Path 27" d="M36.366,121.689a2.922,2.922,0,1,0,2.923,2.923A2.926,2.926,0,0,0,36.366,121.689Z" transform="translate(-33.443 -121.689)" fill="#fff"/>
</g>
</g>
<g id="Group_7248" data-name="Group 7248" transform="translate(15.198 42.483)">
<g id="Group_7247" data-name="Group 7247" transform="translate(0 0)">
<path id="Path_28" data-name="Path 28" d="M348.53,121.689a2.923,2.923,0,1,0,2.923,2.923A2.926,2.926,0,0,0,348.53,121.689Z" transform="translate(-345.607 -121.689)" fill="#fff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12.339" height="14.601" viewBox="0 0 12.339 14.601">
<g id="calendar_26_" data-name="calendar (26)" transform="translate(-7.31 -1.5)">
<path id="Path_18" data-name="Path 18" d="M7.31,38.632a.993.993,0,0,0,.993.993H18.656a.993.993,0,0,0,.993-.993V30.71H7.31Zm8.545-5.813h1.61v1.61h-1.61Zm0,2.737h1.61v1.61h-1.61Zm-3.179-2.737h1.608v1.61H12.675Zm0,2.737h1.608v1.61H12.675ZM9.492,32.818H11.1v1.61H9.492Zm0,2.737H11.1v1.61H9.492Z" transform="translate(0 -23.523)" fill="#259cb8"/>
<path id="Path_19" data-name="Path 19" d="M54.275,4.755a.175.175,0,0,0,.175-.175v-2.9a.175.175,0,1,0-.35,0v2.9A.175.175,0,0,0,54.275,4.755Z" transform="translate(-37.681)" fill="#259cb8"/>
<path id="Path_20" data-name="Path 20" d="M18.656,9.4H17.114v1.542a.528.528,0,1,1-1.055,0V9.4H10.9v1.542a.528.528,0,1,1-1.053,0V9.4H8.3a1,1,0,0,0-.993.993V13.2H19.649V10.393a1,1,0,0,0-.993-.993Z" transform="translate(0 -6.362)" fill="#259cb8"/>
<path id="Path_21" data-name="Path 21" d="M22.275,4.824a.175.175,0,0,0,.177-.175v-2.9a.177.177,0,0,0-.352,0v2.9a.175.175,0,0,0,.175.175Z" transform="translate(-11.911 -0.069)" fill="#259cb8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,6 @@
<svg id="data-management_1_" data-name="data-management (1)" xmlns="http://www.w3.org/2000/svg" width="14.455" height="14.455" viewBox="0 0 14.455 14.455">
<path id="Path_209" data-name="Path 209" d="M271.424,0H271V6.8h6.8V6.381A6.408,6.408,0,0,0,271.424,0Z" transform="translate(-263.349)" fill="#259cb8"/>
<path id="Path_210" data-name="Path 210" d="M78.084,276.2a6.32,6.32,0,0,0,10.529-4.775V271h-5.33Z" transform="translate(-75.879 -263.349)" fill="#259cb8"/>
<path id="Path_211" data-name="Path 211" d="M98.924,61H98.5a6.31,6.31,0,0,0-3.7,1.2l4.128,4.128Z" transform="translate(-92.12 -59.278)" fill="#259cb8"/>
<path id="Path_212" data-name="Path 212" d="M2.021,122.787a6.25,6.25,0,0,0-.415,8.784l4.6-4.6Z" transform="translate(0 -119.32)" fill="#259cb8"/>
</svg>

After

Width:  |  Height:  |  Size: 778 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.567" height="19.604" viewBox="0 0 16.567 19.604">
<g id="calendar_26_" data-name="calendar (26)" transform="translate(-7.31 -1.5)">
<path id="Path_18" data-name="Path 18" d="M7.31,41.346a1.333,1.333,0,0,0,1.333,1.333h13.9a1.333,1.333,0,0,0,1.333-1.333V30.71H7.31Zm11.472-7.805h2.162V35.7H18.782Zm0,3.675h2.162v2.162H18.782Zm-4.268-3.675h2.159V35.7H14.514Zm0,3.675h2.159v2.162H14.514ZM10.24,33.541H12.4V35.7H10.24Zm0,3.675H12.4v2.162H10.24Z" transform="translate(0 -21.575)" fill="#fff"/>
<path id="Path_19" data-name="Path 19" d="M54.335,5.87a.235.235,0,0,0,.235-.235v-3.9a.235.235,0,0,0-.47,0v3.9a.235.235,0,0,0,.235.235Z" transform="translate(-34.56)" fill="#fff"/>
<path id="Path_20" data-name="Path 20" d="M22.544,9.4h-2.07v2.07a.708.708,0,0,1-1.417,0V9.4H12.127v2.07a.708.708,0,1,1-1.414,0V9.4H8.643A1.336,1.336,0,0,0,7.31,10.733V14.5H23.877V10.733A1.336,1.336,0,0,0,22.544,9.4Z" transform="translate(0 -5.835)" fill="#fff"/>
<path id="Path_21" data-name="Path 21" d="M22.335,5.933a.235.235,0,0,0,.238-.235V1.8a.238.238,0,0,0-.473,0V5.7a.235.235,0,0,0,.235.235Z" transform="translate(-10.924 -0.063)" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12.339" height="14.601" viewBox="0 0 12.339 14.601">
<g id="calendar_26_" data-name="calendar (26)" transform="translate(-7.31 -1.5)">
<path id="Path_18" data-name="Path 18" d="M7.31,38.632a.993.993,0,0,0,.993.993H18.656a.993.993,0,0,0,.993-.993V30.71H7.31Zm8.545-5.813h1.61v1.61h-1.61Zm0,2.737h1.61v1.61h-1.61Zm-3.179-2.737h1.608v1.61H12.675Zm0,2.737h1.608v1.61H12.675ZM9.492,32.818H11.1v1.61H9.492Zm0,2.737H11.1v1.61H9.492Z" transform="translate(0 -23.523)" fill="#259cb8"/>
<path id="Path_19" data-name="Path 19" d="M54.275,4.755a.175.175,0,0,0,.175-.175v-2.9a.175.175,0,1,0-.35,0v2.9A.175.175,0,0,0,54.275,4.755Z" transform="translate(-37.681)" fill="#259cb8"/>
<path id="Path_20" data-name="Path 20" d="M18.656,9.4H17.114v1.542a.528.528,0,1,1-1.055,0V9.4H10.9v1.542a.528.528,0,1,1-1.053,0V9.4H8.3a1,1,0,0,0-.993.993V13.2H19.649V10.393a1,1,0,0,0-.993-.993Z" transform="translate(0 -6.362)" fill="#259cb8"/>
<path id="Path_21" data-name="Path 21" d="M22.275,4.824a.175.175,0,0,0,.177-.175v-2.9a.177.177,0,0,0-.352,0v2.9a.175.175,0,0,0,.175.175Z" transform="translate(-11.911 -0.069)" fill="#259cb8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,6 @@
<svg id="data-management_1_" data-name="data-management (1)" xmlns="http://www.w3.org/2000/svg" width="14.455" height="14.455" viewBox="0 0 14.455 14.455">
<path id="Path_209" data-name="Path 209" d="M271.424,0H271V6.8h6.8V6.381A6.408,6.408,0,0,0,271.424,0Z" transform="translate(-263.349)" fill="#259cb8"/>
<path id="Path_210" data-name="Path 210" d="M78.084,276.2a6.32,6.32,0,0,0,10.529-4.775V271h-5.33Z" transform="translate(-75.879 -263.349)" fill="#259cb8"/>
<path id="Path_211" data-name="Path 211" d="M98.924,61H98.5a6.31,6.31,0,0,0-3.7,1.2l4.128,4.128Z" transform="translate(-92.12 -59.278)" fill="#259cb8"/>
<path id="Path_212" data-name="Path 212" d="M2.021,122.787a6.25,6.25,0,0,0-.415,8.784l4.6-4.6Z" transform="translate(0 -119.32)" fill="#259cb8"/>
</svg>

After

Width:  |  Height:  |  Size: 778 B

@ -1075,6 +1075,10 @@
"en": "My Profile", "en": "My Profile",
"ar": "معلوماتي" "ar": "معلوماتي"
}, },
"profile-details": {
"en": "Profile Details",
"ar": "تفاصيل الملف الشخصي"
},
"edit-profile": { "edit-profile": {
"en": "Edit Profile", "en": "Edit Profile",
"ar": "تعديل المعلومات" "ar": "تعديل المعلومات"
@ -1123,6 +1127,10 @@
"en": "Employee Detail", "en": "Employee Detail",
"ar": "بيانات الموظف" "ar": "بيانات الموظف"
}, },
"role": {
"en": "Role",
"ar": "Role"
},
"address": { "address": {
"en": "Address", "en": "Address",
"ar": "العنوان" "ar": "العنوان"
@ -1225,7 +1233,7 @@
}, },
"monthly-attendance-calendar": { "monthly-attendance-calendar": {
"ar": "سجل الحضور الشهري", "ar": "سجل الحضور الشهري",
"en": "Monthly Attendance Calendar" "en": "Monthly Attendance"
}, },
"completed": { "completed": {
"ar": "منجز", "ar": "منجز",
@ -1575,6 +1583,10 @@
"en": "Late", "en": "Late",
"ar": "التأخير" "ar": "التأخير"
}, },
"search-by": {
"en": "Search By",
"ar": "البحث بواسطة"
},
"attendance-statistics": { "attendance-statistics": {
"en": "Attendance Statistics", "en": "Attendance Statistics",
"ar": "احصائيات الحضور" "ar": "احصائيات الحضور"
@ -1588,7 +1600,19 @@
"ar": "عدد" "ar": "عدد"
}, },
"team-members": { "team-members": {
"en": "TEAM MEMBERS", "en": "Team Members",
"ar": " اعضاء الفريق"
},
"view-attendence": {
"en": "View Attendance",
"ar": " عرض الحضور"
},
"profile-details": {
"en": "Profile Detailes",
"ar": " الملف الشخصي"
},
"my-team-members": {
"en": "My Team Members",
"ar": " اعضاء الفريق" "ar": " اعضاء الفريق"
}, },
"team-stats": { "team-stats": {
@ -2808,7 +2832,7 @@
"ar": "ساعات التقصير" "ar": "ساعات التقصير"
}, },
"schedule": { "schedule": {
"en": "Schedule", "en": "Scheduled Days",
"ar": "ايام العمل" "ar": "ايام العمل"
}, },
"off-days": { "off-days": {
@ -2819,6 +2843,14 @@
"en": "Non Analyzed", "en": "Non Analyzed",
"ar": "لايوجد تحليل" "ar": "لايوجد تحليل"
}, },
"view-days": {
"en": "View Days",
"ar": "عرض الأيام"
},
"view-stats": {
"en": "View Stats",
"ar": "عرض الأحصائيات"
},
"attendance-statistics": { "attendance-statistics": {
"en": "Attendance Statistics", "en": "Attendance Statistics",
"ar": "احصائيات الحضور" "ar": "احصائيات الحضور"

@ -6,7 +6,7 @@
"outDir": "./dist/out-tsc", "outDir": "./dist/out-tsc",
"sourceMap": true, "sourceMap": true,
"declaration": false, "declaration": false,
"module": "commonjs", "module": "es2015",
"moduleResolution": "node", "moduleResolution": "node",
"emitDecoratorMetadata": true, "emitDecoratorMetadata": true,
"experimentalDecorators": true, "experimentalDecorators": true,
@ -25,3 +25,4 @@
"strictInjectionParameters": true "strictInjectionParameters": true
} }
} }

Loading…
Cancel
Save