diff --git a/Mohem/src/app/absence/submit-absence/submit-absence.component.html b/Mohem/src/app/absence/submit-absence/submit-absence.component.html index 7fac58dd..ec40c78c 100644 --- a/Mohem/src/app/absence/submit-absence/submit-absence.component.html +++ b/Mohem/src/app/absence/submit-absence/submit-absence.component.html @@ -3,15 +3,21 @@ [headerText]="'submitAbsence, submitAbsence' | translate"> - - + +
+ + +
+ - {{item.ABSENCE_ATTENDANCE_TYPE_NAME}} + {{ts.trPK('submitAbsence','startDate')}} @@ -52,7 +58,7 @@
-
+
{{ts.trPK('general','next')}} diff --git a/Mohem/src/app/absence/submit-absence/submit-absence.component.scss b/Mohem/src/app/absence/submit-absence/submit-absence.component.scss index deb4981b..d89d2ed7 100644 --- a/Mohem/src/app/absence/submit-absence/submit-absence.component.scss +++ b/Mohem/src/app/absence/submit-absence/submit-absence.component.scss @@ -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; +} + + + diff --git a/Mohem/src/app/hmg-common/hmg-common.module.ts b/Mohem/src/app/hmg-common/hmg-common.module.ts index 7d6e752e..c0d8c8f9 100644 --- a/Mohem/src/app/hmg-common/hmg-common.module.ts +++ b/Mohem/src/app/hmg-common/hmg-common.module.ts @@ -110,6 +110,7 @@ import { ChartModule } from 'primeng/chart'; import { GenericHeaderComponent } from './ui/generic-header/generic-header.component'; import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx'; import { AttendanceOptionsComponent } from '../home/attendance-options/attendance-options.component'; +import { CardCalendarComponent } from './ui/card-calendar/card-calendar.component'; @NgModule({ imports: [ @@ -192,7 +193,8 @@ import { AttendanceOptionsComponent } from '../home/attendance-options/attendanc DateInfoModalComponent, Modal, GenericHeaderComponent, - AttendanceOptionsComponent + AttendanceOptionsComponent, + CardCalendarComponent ], exports: [ FabButtonComponent, @@ -262,7 +264,8 @@ import { AttendanceOptionsComponent } from '../home/attendance-options/attendanc FileUploadModule, Modal, GenericHeaderComponent, - AttendanceOptionsComponent + AttendanceOptionsComponent, + CardCalendarComponent ], providers: [ AttendScanService, diff --git a/Mohem/src/app/hmg-common/services/authentication/authentication.service.ts b/Mohem/src/app/hmg-common/services/authentication/authentication.service.ts index 688377e5..9d0a6ec5 100644 --- a/Mohem/src/app/hmg-common/services/authentication/authentication.service.ts +++ b/Mohem/src/app/hmg-common/services/authentication/authentication.service.ts @@ -133,7 +133,7 @@ export class AuthenticationService { }else{ mobileType = 'android'; } - request.VersionID = 2.8; + request.VersionID = 2.9; request.Channel = 31; request.LanguageID = TranslatorService.getCurrentLanguageCode(); request.MobileType = mobileType; diff --git a/Mohem/src/app/hmg-common/services/connector/connector.service.ts b/Mohem/src/app/hmg-common/services/connector/connector.service.ts index b18145b3..0d0ca8d9 100644 --- a/Mohem/src/app/hmg-common/services/connector/connector.service.ts +++ b/Mohem/src/app/hmg-common/services/connector/connector.service.ts @@ -27,8 +27,8 @@ export class ConnectorService { public static retryTimes = 0; public static timeOut = 120 * 1000; -// public static host = 'https://uat.hmgwebservices.com/'; - public static host = 'https://hmgwebservices.com/'; + public static host = 'https://uat.hmgwebservices.com/'; + //public static host = 'https://hmgwebservices.com/'; constructor(public httpClient: HttpClient, public cs: CommonService, diff --git a/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.html b/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.html new file mode 100644 index 00000000..b4ff6e5a --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.html @@ -0,0 +1,6 @@ + + +
+
+ {{text}} +
diff --git a/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.scss b/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.scss new file mode 100644 index 00000000..60f914b3 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.scss @@ -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; + +} diff --git a/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.spec.ts b/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.spec.ts new file mode 100644 index 00000000..73b7e266 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.spec.ts @@ -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; + + 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(); + }); +}); diff --git a/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.ts b/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.ts new file mode 100644 index 00000000..a0590c6d --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/card-calendar/card-calendar.component.ts @@ -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() {} + +} diff --git a/Mohem/src/app/hmg-common/ui/employee-information/employee-information.component.html b/Mohem/src/app/hmg-common/ui/employee-information/employee-information.component.html index a90e4704..a863abf6 100644 --- a/Mohem/src/app/hmg-common/ui/employee-information/employee-information.component.html +++ b/Mohem/src/app/hmg-common/ui/employee-information/employee-information.component.html @@ -14,7 +14,8 @@ {{title}} - + +
+
Team Member Image
+
+ +
+ +

{{employee.EMPLOYEE_NAME}}

- {{employee.JOB_NAME}} + {{employee.EMPLOYEE_EMAIL_ADDRESS}} + +
+
+ + +

{{ts.trPK('userProfile','role')}}

+ {{employee.JOB_NAME}} +
+ +

{{ts.trPK('userProfile','empNo')}}

+ {{employee.EMPLOYEE_NUMBER}} +
+
+
-
+ +
+ + + + + + + + + + + + + + + + + + + + + +
+ + +
-
+ + +
-
-

+

+

{{ts.trPK('myTeam','todayAttendance')}}

- {{ts.trPK('myTeam','check-in')}} + {{ts.trPK('myTeam','check-in')}}

{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}

--:--

- {{ts.trPK('myTeam','check-out')}} + {{ts.trPK('myTeam','check-out')}}

{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}

--:--

@@ -98,16 +195,54 @@
+ +
+ + + +
+
+ + + {{ts.trPK('attendance','monthly-attendance-calendar')}} + + + + + + +
+
+ + + + + + + +
+
- -
-
- {{ts.trPK('myTeam','attendance-statistics')}} -
-
-
-
- {{ts.trPK('attendance','present')}} - {{attendedDays}} +
+ + +
+ {{ts.trPK('attendance-tracking','schedule')}} +

{{timeCardSummaryData.SCHEDULE_DAYS}}

+
+
+ + +
+ {{ts.trPK('attendance-tracking','off-days')}} +

{{timeCardSummaryData.OFF_DAYS}}

-
- {{ts.trPK('attendance','absent')}} - {{absentDays}} + + + +
+ {{ts.trPK('attendance-tracking','non-analyzed')}} +

{{timeCardSummaryData.NOT_ANALYZED_DAYS}}

+
+ + +
+ {{ts.trPK('attendance-tracking','shortage-hours')}} +

{{timeCardSummaryData.SHORTAGE_HRS}}

+
+
+ +
+
+
+ + + {{ts.trPK('attendance','present')}} + {{attendedDays}} + +
+
+ + + {{ts.trPK('attendance','absent')}} + {{absentDays}} +

{{totalAttendancePrecentage}}

{{ts.trPK('absenceList','days')}}
- +
+ + + + +
+
+
+ + + {{ts.trPK('attendance','monthly-attendance-calendar')}} + + + + + + + +
+ +
+
+ +
+ + + + + + + +
- - -
- {{ts.trPK('attendance-tracking','schedule')}} -

{{timeCardSummaryData.SCHEDULE_DAYS}}

-
-
- - -
- {{ts.trPK('attendance-tracking','off-days')}} -

{{timeCardSummaryData.OFF_DAYS}}

-
-
- - -
- {{ts.trPK('attendance-tracking','non-analyzed')}} -

{{timeCardSummaryData.NOT_ANALYZED_DAYS}}

-
-
- - -
- {{ts.trPK('attendance-tracking','shortage-hours')}} -

{{timeCardSummaryData.SHORTAGE_HRS}}

-
-
-
+ +
+
- +
-
+
+ +

{{ts.trPK('myTeam','my-team-members')}}

+

{{EmpTotal}}

+
+ +
+ -
+ + @@ -241,12 +449,15 @@
- - + + + +

{{ts.trPK('userProfile','profile-details')}}

- +

{{ts.trPK('userProfile','category')}}

{{employee.EMPLOYMENT_CATEGORY_MEANING}}

@@ -270,10 +481,10 @@

{{ts.trPK('userProfile','payrol')}}

{{employee.PAYROLL_NAME}}

- +

{{ts.trPK('userProfile','position')}}

{{employee.POSITION_NAME}}

diff --git a/Mohem/src/app/my-team/details/details.component.scss b/Mohem/src/app/my-team/details/details.component.scss index 136a9943..a4c35a1d 100644 --- a/Mohem/src/app/my-team/details/details.component.scss +++ b/Mohem/src/app/my-team/details/details.component.scss @@ -32,11 +32,19 @@ ion-title{ text-align: center; margin-bottom: 15px; .user-image-container{ - position: relative; - width: 80px; - height: 80px; - display: block; - margin: 0 auto; + position: relative; + width: 100%; + height: 24px; + justify-content: space-between; + display: flex; + margin: 0 auto; + align-items: center; + } + // position: relative; + // width: 80px; + // height: 80px; + // display: block; + // margin: 0 auto; // &:before{ // position: absolute; // content: ""; @@ -53,16 +61,27 @@ ion-title{ // background-color: green !important; // } } + + @media screen and (min-width: 1px) and (max-width:767px){ .user-image{ - overflow: hidden; - position: relative; - display: block; - width: 100%; - height: 100%; - border-radius: 80px; - border: 1px solid #ccc; - margin: 0px auto 6px; - } + position: relative; + display: block; + width: 30%; + 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: 30%; + height: 100%; + border-radius: 80px; + margin-bottom: 371px; + }} h1{ margin: 0; padding: 0; @@ -71,18 +90,20 @@ ion-title{ margin-bottom: 4px; } span{ - font-size: 14px; + font-size: 11px; display: block; - color: #888 + // color: #888 + } - } + $actionBtnSize : 36px; .user-actions{ text-align: center; .action-button{ font-size: 11px; - white-space: nowrap; - color: #888; + font-weight: bold; + // white-space: nowrap; + // color: #888; .action-button-icon{ width: $actionBtnSize; height: $actionBtnSize; @@ -104,19 +125,24 @@ ion-title{ 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; + // border-bottom: 1px solid #ccc; } h2{ font-size: 13px; - font-family: WorkSans-Bold; + // 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; } } @@ -128,28 +154,80 @@ ion-title{ color: black; } -.active-Segment { - font-size: 0.3cm !important; - background: #269DB8 !important; - text-transform: none; - --color-checked: none; - border-radius: 100px; - border:0; - } - .active-Segment ion-label{ - font-size: 11px; - color: white !important; - } - .normal-Segment ion-label{ - color: black !important; - font-size: 11px; - } - .normal-Segment { - font-size: 0.3cm !important; - text-transform: none; - --color-checked: none; - border: 0; - } +@media screen and (min-width: 1px) and (max-width:767px){ + .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; + padding-left: 17px;}} + + @media screen and (min-width: 1px) and (max-width:767px){ + .normal-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: #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{ padding: 15px; border-bottom: 1px solid #ccc; @@ -207,7 +285,8 @@ ion-title{ /////////////////////////////////////////////////////// Attendance /////////////////////// .header{ - margin-top: 20px; + // margin-top: 20px; + margin-top: 1px; } .slidPrev{ @@ -244,14 +323,47 @@ ion-title{ /* margin-left: 136px; */ margin-right: -251px; } + +@media screen and (min-width: 1px) and (max-width:767px){ .result-graph { position: relative; background: white; - margin-top: 20px; + // 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; + }} +.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 { @@ -273,7 +385,7 @@ ion-title{ padding: 0; margin: 0; position: absolute; - left: 50%; + left: 85%; top: 50%; display: block; text-align: center; @@ -293,8 +405,12 @@ ion-title{ } } .today-graph { - width: 100%; + // width: 100%; max-height: 4cm; + display: block; + height: 132px; + width: 264px; + margin-left: 154px; } .green-label{ @@ -359,7 +475,10 @@ ion-title{ .attendance-information{ background: white; 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) { h2{ padding: 0; @@ -369,45 +488,100 @@ ion-title{ span{ font-size: 9px; } + } @media screen and (min-width: 360px) { h2{ padding: 0; margin: 0; - font-size: 18px; + font-size: 14px; } span{ font-size: 11px; + margin-bottom: 3px; } + } } .month-year-span{ - font-size: 20px; - font-family: WorkSans-Bold; + font-size: 16px; + // font-family: WorkSans-Bold; + font-weight: bold; } .green-label-container{ - border-top: 5px solid #269DB8; - padding: 1px 0px; - margin: 15px 0px + // border-top: 5px solid #269DB8; + // padding: 1px 0px; + // margin: 15px 0px + width: 12px; + height: 12px; + padding-right: -10px; + border-radius: 100%; + background-color: #269DB8; + } .blue-label-container{ - border-top: 5px solid #292F42; - padding: 1px 0px; - margin: 15px 0px + // border-top: 5px solid #292F42; + // padding: 1px 0px; + // margin: 15px 0px + width: 12px; + height: 12px; + padding-right: -10px; + border-radius: 100%; + background-color: #292F42; + margin-top: 30px; } .span-one{ + // display: block; + // font-size: 12px; + // color: black; display: block; font-size: 12px; color: black; + margin-left: 6px; + margin-top: -2px; + font-weight: bold; + } .span-two{ + // display: block; + // font-size: 22px; display: block; - font-size: 22px; + font-size: 12px; + color: black; + margin-left: 6px; + margin-top: -2px; + font-weight: 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{ margin-left: -50px; @@ -416,10 +590,12 @@ ion-title{ } .label-container{ position: absolute; - width: 20%; - right: 30px; + // width: 20%; + // right: 30px; top: 50%; - margin-top: -60px; + margin-top: -27px; + left: 20px; + } .attendance-summary .attendance-information { span{ @@ -428,8 +604,10 @@ ion-title{ line-height: 14px; } h2{ - text-align: right; - font-family: WorkSans-Bold; + // text-align: right; + // font-family: WorkSans-Bold; + font-weight: bolder; + font-size: 13px; } } @@ -437,8 +615,10 @@ ion-title{ .calendar-container{ background: white; margin-bottom: 100px; - margin-top: 20px; + margin-top: 10px; border-radius: 20px; + border: 1px solid #ccc; + padding-bottom: 25px; span{ text-align: left; 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; + } + + + + + + + + \ No newline at end of file diff --git a/Mohem/src/app/my-team/details/details.component.ts b/Mohem/src/app/my-team/details/details.component.ts index 42f15451..feb95a7d 100644 --- a/Mohem/src/app/my-team/details/details.component.ts +++ b/Mohem/src/app/my-team/details/details.component.ts @@ -57,7 +57,8 @@ export class DetailsComponent implements OnInit { public yearTitle: string; public activeMonth: any; public currentMonthName = ''; - + + public showAttendence = false; public showData = false; public currentYear = new Date().getFullYear(); public attendanceTrackingList: any = []; @@ -67,6 +68,7 @@ export class DetailsComponent implements OnInit { year: any; preMonth: number; nextMonth: any; + currentMonth: any; public direction: string; public options = { cutoutPercentage: 80, @@ -85,8 +87,128 @@ export class DetailsComponent implements OnInit { // tslint:disable-next-line: max-line-length public monthsNameArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 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( public timeCardService: TimeCardService, public menuService: MenuService, @@ -106,6 +228,8 @@ export class DetailsComponent implements OnInit { this.showAttendanceTracking(); // tslint:disable-next-line: max-line-length this.currentMonthName = this.direction === 'en' ? this.common.getMonthName(this.monthIndex) : this.common.getMonthNameAr(this.monthIndex); + this.getSuborinatesAttStatus(); + } showAttendanceTracking() { @@ -130,6 +254,7 @@ export class DetailsComponent implements OnInit { } } + initAttendance() { this.data = {}; // 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() { if (this.currentMonthName !== this.month) { @@ -189,6 +325,7 @@ export class DetailsComponent implements OnInit { this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear); this.nextMonth = this.nextMonth + 1; this.preMonth = this.nextMonth - 2; + } } @@ -276,15 +413,24 @@ export class DetailsComponent implements OnInit { this.totalAttendancePrecentage = this.absentDays + this.attendedDays; if (this.totalAttendancePrecentage > 0) { this.data = { + // labels: ['Apsent', 'Present'], datasets: [ { + label: "# of Votes", data: [this.absentDays, this.attendedDays], backgroundColor: [ - '#269DB8', + 'black', '#269DB8' ], - borderWidth: 2 - }] + borderWidth: 1, + // cutoutPrecentage:20 , + + }], + labels: [ + 'Apsent', + 'Present' + + ] }; } } @@ -546,4 +692,75 @@ doInfinite(infiniteScroll) { 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; + } + } + } diff --git a/Mohem/src/app/my-team/home/home.component.html b/Mohem/src/app/my-team/home/home.component.html index 5af1f667..356357b3 100644 --- a/Mohem/src/app/my-team/home/home.component.html +++ b/Mohem/src/app/my-team/home/home.component.html @@ -7,7 +7,54 @@
-
+
+
+ {{ts.trPK('myTeam','search-by')}} +
+
+ + + + + {{ts.trPK('searchForReplacment','name')}} + {{ts.trPK('searchForReplacment','name')}} + + {{ts.trPK('searchForReplacment','userName')}} + {{ts.trPK('searchForReplacment','userName')}} + + {{ts.trPK('searchForReplacment','email')}} + {{ts.trPK('searchForReplacment','email')}} + + + + + + + + + + + +
+ +
+
+ +

{{ts.trPK('myTeam','my-team-members')}}

+

{{EmpTotal}}

+
+ +
+ + + + -
+
@@ -77,5 +127,9 @@ + + + - \ No newline at end of file + + \ No newline at end of file diff --git a/Mohem/src/app/my-team/home/home.component.scss b/Mohem/src/app/my-team/home/home.component.scss index ded6a0aa..13788acf 100644 --- a/Mohem/src/app/my-team/home/home.component.scss +++ b/Mohem/src/app/my-team/home/home.component.scss @@ -30,20 +30,37 @@ ion-content { } .request-heading { span { - text-align: center; + // text-align: center; + // display: block; + // padding-top: 8px; + // font-family: workSans-Regular; display: block; 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 { position: relative; background: white; margin-top: 20px; - padding-bottom: 20px; + padding-bottom: 35px; border-radius: 20px; z-index: 1; + border: 1px solid #ccc; } .result-text-container { padding: 0; @@ -139,7 +156,7 @@ ion-content { width: 100%; height: 100%; border-radius: 80px; - border: 1px solid #ccc; + border: 1px solid rgb(170, 169, 169); 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; +} \ No newline at end of file diff --git a/Mohem/src/app/my-team/home/home.component.ts b/Mohem/src/app/my-team/home/home.component.ts index edc30021..295da569 100644 --- a/Mohem/src/app/my-team/home/home.component.ts +++ b/Mohem/src/app/my-team/home/home.component.ts @@ -7,6 +7,7 @@ import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-respo import { MyTeamService } from '../service/my-team.service'; import { ModalController, IonInfiniteScroll } from '@ionic/angular'; import { DetailsComponent } from '../details/details.component'; +import { Body } from '@angular/http/src/body'; @Component({ selector: 'app-home', templateUrl: './home.component.html', @@ -28,6 +29,8 @@ export class HomeComponent implements OnInit { public selEmpNo: any; public totalEmployees = 0; public pageFirstVisit = false; + myColor: string = 'secondary'; + public EmpTotal = []; public options = { cutoutPercentage: 80, @@ -95,7 +98,13 @@ export class HomeComponent implements OnInit { ngOnInit() { this.common.sharedService.setSharedData( [], DetailsComponent.opendEmployeesARR); this.setIntitial(); + + this.getSuborinatesAttStatus(); } + toggleColor() { + this.myColor = 'secondary'; + // this.myColor = '#269DB8' +} // activeFilter(index: number) { // this.previousActiveIndex = this.currentActiveIndex; @@ -228,4 +237,36 @@ export class HomeComponent implements OnInit { 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) + } } diff --git a/Mohem/src/app/my-team/service/my-team.service.ts b/Mohem/src/app/my-team/service/my-team.service.ts index ebda3f1d..a15eb1c4 100644 --- a/Mohem/src/app/my-team/service/my-team.service.ts +++ b/Mohem/src/app/my-team/service/my-team.service.ts @@ -7,6 +7,7 @@ import { AuthenticationService } from "src/app/hmg-common/services/authenticatio export class MyTeamService { public static EMPLOYEE_SHARED_DATA = 'employee'; public static getMyTeam = 'Services/ERP.svc/REST/GET_EMPLOYEE_SUBORDINATES'; + public static getSuborinateStatus = 'Services/ERP.svc/REST/GET_SUBORDINATES_ATTD_STATUS'; constructor( public con: ConnectorService, private authService: AuthenticationService @@ -16,4 +17,11 @@ export class MyTeamService { this.authService.authenticateRequest(request); 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); + } + } diff --git a/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.html b/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.html index f4fa3715..15900c2a 100644 --- a/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.html +++ b/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.html @@ -30,16 +30,15 @@
- - - {{'vacation-rule, itemType' | translate}} - - - {{x.ITEM_TYPE_DISPLAY_NAME}} - - + +
+ + +
diff --git a/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.scss b/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.scss index 7edf7d17..c4fc2246 100644 --- a/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.scss +++ b/Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.scss @@ -162,3 +162,72 @@ color: black !important; // .cusprogressbar li.active:before { // 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; + } + + +} \ No newline at end of file diff --git a/Mohem/src/assets/imgs/call-o.svg b/Mohem/src/assets/imgs/call-o.svg new file mode 100644 index 00000000..b5a9434a --- /dev/null +++ b/Mohem/src/assets/imgs/call-o.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Mohem/src/assets/imgs/call.svg b/Mohem/src/assets/imgs/call.svg new file mode 100644 index 00000000..e7b1638d --- /dev/null +++ b/Mohem/src/assets/imgs/call.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Mohem/src/assets/imgs/create req.svg b/Mohem/src/assets/imgs/create req.svg new file mode 100644 index 00000000..8cbae617 --- /dev/null +++ b/Mohem/src/assets/imgs/create req.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Mohem/src/assets/imgs/create-req.svg b/Mohem/src/assets/imgs/create-req.svg new file mode 100644 index 00000000..8cbae617 --- /dev/null +++ b/Mohem/src/assets/imgs/create-req.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Mohem/src/assets/imgs/fav filled.svg b/Mohem/src/assets/imgs/fav filled.svg new file mode 100644 index 00000000..7987c91b --- /dev/null +++ b/Mohem/src/assets/imgs/fav filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Mohem/src/assets/imgs/fav.svg b/Mohem/src/assets/imgs/fav.svg new file mode 100644 index 00000000..cbad1863 --- /dev/null +++ b/Mohem/src/assets/imgs/fav.svg @@ -0,0 +1,3 @@ + + + diff --git a/Mohem/src/assets/imgs/profile.svg b/Mohem/src/assets/imgs/profile.svg new file mode 100644 index 00000000..735b72f7 --- /dev/null +++ b/Mohem/src/assets/imgs/profile.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/Mohem/src/assets/imgs/team-members.svg b/Mohem/src/assets/imgs/team-members.svg new file mode 100644 index 00000000..fbfbaa33 --- /dev/null +++ b/Mohem/src/assets/imgs/team-members.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Mohem/src/assets/imgs/view days.svg b/Mohem/src/assets/imgs/view days.svg new file mode 100644 index 00000000..cdeb2c3f --- /dev/null +++ b/Mohem/src/assets/imgs/view days.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/Mohem/src/assets/imgs/view stats.svg b/Mohem/src/assets/imgs/view stats.svg new file mode 100644 index 00000000..ab5ab989 --- /dev/null +++ b/Mohem/src/assets/imgs/view stats.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Mohem/src/assets/imgs/view-attendance.svg b/Mohem/src/assets/imgs/view-attendance.svg new file mode 100644 index 00000000..f0d0087f --- /dev/null +++ b/Mohem/src/assets/imgs/view-attendance.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/Mohem/src/assets/imgs/view-days.svg b/Mohem/src/assets/imgs/view-days.svg new file mode 100644 index 00000000..cdeb2c3f --- /dev/null +++ b/Mohem/src/assets/imgs/view-days.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/Mohem/src/assets/imgs/view-stats.svg b/Mohem/src/assets/imgs/view-stats.svg new file mode 100644 index 00000000..ab5ab989 --- /dev/null +++ b/Mohem/src/assets/imgs/view-stats.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Mohem/src/assets/localization/i18n.json b/Mohem/src/assets/localization/i18n.json index 4ec28a25..7252d7a0 100644 --- a/Mohem/src/assets/localization/i18n.json +++ b/Mohem/src/assets/localization/i18n.json @@ -1077,6 +1077,10 @@ "en": "My Profile", "ar": "معلوماتي" }, + "profile-details": { + "en": "Profile Details", + "ar": "تفاصيل الملف الشخصي" + }, "edit-profile": { "en": "Edit Profile", "ar": "تعديل المعلومات" @@ -1125,6 +1129,10 @@ "en": "Employee Detail", "ar": "بيانات الموظف" }, + "role": { + "en": "Role", + "ar": "Role" + }, "address": { "en": "Address", "ar": "العنوان" @@ -1227,7 +1235,7 @@ }, "monthly-attendance-calendar": { "ar": "سجل الحضور الشهري", - "en": "Monthly Attendance Calendar" + "en": "Monthly Attendance" }, "completed": { "ar": "منجز", @@ -1577,6 +1585,10 @@ "en": "Late", "ar": "التأخير" }, + "search-by": { + "en": "Search By", + "ar": "البحث بواسطة" + }, "attendance-statistics": { "en": "Attendance Statistics", "ar": "احصائيات الحضور" @@ -1590,7 +1602,19 @@ "ar": "عدد" }, "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": " اعضاء الفريق" }, "team-stats": { @@ -2660,7 +2684,7 @@ "ar": "ساعات التقصير" }, "schedule": { - "en": "Schedule", + "en": "Scheduled Days", "ar": "ايام العمل" }, "off-days": { @@ -2671,6 +2695,14 @@ "en": "Non Analyzed", "ar": "لايوجد تحليل" }, + "view-days": { + "en": "View Days", + "ar": "عرض الأيام" + }, + "view-stats": { + "en": "View Stats", + "ar": "عرض الأحصائيات" + }, "attendance-statistics": { "en": "Attendance Statistics", "ar": "احصائيات الحضور"