From afc8c99639dd9639c5078b90279683f05888d1de Mon Sep 17 00:00:00 2001 From: "Fatimah.Alshammari" Date: Mon, 10 Feb 2020 16:33:30 +0300 Subject: [PATCH] add new design to payslip --- Mohem/angular.json | 2 +- Mohem/src/app/app.component.html | 3 +- Mohem/src/app/app.component.ts | 5 + Mohem/src/app/hmg-common/hmg-common.module.ts | 7 +- .../src/app/payslip/home/home.component.html | 642 ++++++++---------- .../src/app/payslip/home/home.component.scss | 240 ++++++- Mohem/src/app/payslip/home/home.component.ts | 125 +++- Mohem/src/app/payslip/payslip.page.ts | 1 + Mohem/src/assets/localization/i18n.json | 20 + Mohem/src/global.scss | 6 + 10 files changed, 664 insertions(+), 387 deletions(-) diff --git a/Mohem/angular.json b/Mohem/angular.json index 42b54182..eb6b8116 100644 --- a/Mohem/angular.json +++ b/Mohem/angular.json @@ -42,7 +42,7 @@ "input": "src/app/app.scss" } ], - "scripts": [], + "scripts": ["node_modules/chart.js/dist/Chart.js"], "es5BrowserSupport": true }, "configurations": { diff --git a/Mohem/src/app/app.component.html b/Mohem/src/app/app.component.html index f3b35531..73b85b95 100644 --- a/Mohem/src/app/app.component.html +++ b/Mohem/src/app/app.component.html @@ -98,7 +98,8 @@ - + + diff --git a/Mohem/src/app/app.component.ts b/Mohem/src/app/app.component.ts index a1e655df..ccfe1c9d 100644 --- a/Mohem/src/app/app.component.ts +++ b/Mohem/src/app/app.component.ts @@ -140,6 +140,11 @@ export class AppComponent implements OnInit, AfterViewInit { this.cs.openChangePassword(); this.menu.toggle(); } + +// openPayslipPage(){ +// this.cs.openPayslipPage(); +// this.menu.toggle(); +// } private changeImage() { this.cs.openChangeImagePage(); diff --git a/Mohem/src/app/hmg-common/hmg-common.module.ts b/Mohem/src/app/hmg-common/hmg-common.module.ts index 44dbe250..40b14ab7 100644 --- a/Mohem/src/app/hmg-common/hmg-common.module.ts +++ b/Mohem/src/app/hmg-common/hmg-common.module.ts @@ -101,6 +101,7 @@ import {FabButtonComponent} from './ui/fab-button/fab-button.component' import { AttendScanService } from './services/attend-services/attend-scan.service'; import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'; import { NgCircleProgressModule } from 'ng-circle-progress'; +import { ChartModule } from 'primeng/chart'; @NgModule({ imports: [ CommonModule, @@ -111,7 +112,8 @@ import { NgCircleProgressModule } from 'ng-circle-progress'; NgxChartsModule, ListboxModule, PdfViewerModule, - NgCircleProgressModule.forRoot() + NgCircleProgressModule.forRoot(), + ChartModule ], declarations: [ FabButtonComponent, @@ -230,7 +232,8 @@ import { NgCircleProgressModule } from 'ng-circle-progress'; StatsButtonComponent, ServicesButtonComponent, ConfirmLoginComponent, - NgCircleProgressModule + NgCircleProgressModule, + ChartModule ], providers: [ AttendScanService, diff --git a/Mohem/src/app/payslip/home/home.component.html b/Mohem/src/app/payslip/home/home.component.html index c06b7c72..8a72c56a 100644 --- a/Mohem/src/app/payslip/home/home.component.html +++ b/Mohem/src/app/payslip/home/home.component.html @@ -1,3 +1,6 @@ + + + - - - choose payslip - - {{options.PAYSLIP_CHOICE}} - - - - - +
+ + + +

{{ts.trPK('payslip','monthly-payslip')}}

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

{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}

+ + - - - - - - - - - - + + +
+ + + +
+
-
- - --> - - - -
- + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - +
+ +
+ + + +
+ +

{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}

+ + + {{ts.trPK('payslip','total')}}
{{ts.trPK('payslip','salary')}}
- - - - - - - - - - + - - - - - -
- - - - - - - - + + +
+
+ + + + + + + + +
+
+ + + - - - - - - - - - - - + + + +
- - - - + + + +
+
+ + + + +
{{ts.trPK('payslip','summary-payment')}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
-
- - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
-
- +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
- +
{{ts.trPK('payslip','earnings')}}
+
+ + + + + + + + + + + + + + + + + + +
+
{{ts.trPK('payslip','deductions')}}
+
+ + + + + + + + + + + + + + + + + + +
+ + + + +
{{ts.trPK('payslip','payment-information')}}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/Mohem/src/app/payslip/home/home.component.scss b/Mohem/src/app/payslip/home/home.component.scss index 3b9e5d21..7dde3934 100644 --- a/Mohem/src/app/payslip/home/home.component.scss +++ b/Mohem/src/app/payslip/home/home.component.scss @@ -1,9 +1,6 @@ .rowAccordin{ border: none; - - -} - + } .gridAccordin{ margin: 10px; background: #ffffff; @@ -11,9 +8,31 @@ } .colPayslip{ - text-align: center; - color: var(--labelColor); + border-right: 1px solid #cac8c8; + border-bottom-left-radius: -10px !important; + padding-top: 8px; + padding-bottom: 8px; + margin-left: 18px; + font-size: 12px !important; +} +.colPayslips{ + border-bottom-left-radius: -10px !important; + padding-top: 8px; + padding-bottom: 8px; + margin-left: 18px; + font-size: 12px !important; + } + +.label{ + font-size: 15px !important; + text-align: center; + margin-bottom: 1px; +} +.label-bold{ + font-size: 13px !important; + // font-weight: bold !important; + font-family: WorkSans-Bold; } .earingTotH{ text-align: right; @@ -39,3 +58,212 @@ color: var(--red); } + +.colorBG{ + --background: #f0efef; + } + +.header-div { + + background-color: #22C6B3; + text-transform: capitalize; + height: 180px; + position: relative; + display: block; + margin-bottom: -28px; + } + .Title{ + text-align: center; + color: white; + margin-top: -33px; + font-size: 17px; + } + + .Imgdiv{ + padding-top: -38px; + margin-top: -32px; + } + .Imgsrc{ + width: 23px; + height: 24px; + /* display: -webkit-inline-box; */ + /* display: inline-flex; */ + overflow: hidden; + background: transparent; + border-radius: 70% !important; + /* position: relative; */ + top: 7px; + margin-left: 344px !important; + margin-top: -46px; + } + +.p{ + font-weight: bold; + margin-top: -7px; + font-size: 14px; +} + + .slidBtn{ + margin-top: 8px; + margin-left: 10px; + background: transparent; + } + .activeArrow{ + height: 26px; + width: 26px; + color: white; + background: transparent !important; + --background: transparent !important; + + + } +.slidbtn{ + background: transparent; + margin-bottom: -59px; + margin-top: 8px; + margin-left: 65px; +} + .disabledArrow{ + height: 26px; + width: 26px; + color: #908d8d; + background: transparent !important; + --background: transparent !important; + } + + .result-graph{ + font-size: 14px; + margin-left: -48px; + margin-right: 3px; + } + .headerGrid{ + background-color: white !important; + border: 1px solid #cac8c8 !important; + border-radius: 20px !important; + padding-top: 13px; + padding-bottom: 14px; + margin-left: 30px; + margin-right: 32px; + margin-top: -2px; + margin-bottom: 10px; + padding-right: 21px; + + } + .result-text-container { + padding: 0; + margin: 0; + position: absolute; + left: 42%; + top: 50%; + display: block; + text-align: center; + transform: translate(-50%, -50%); + + h2 { + + font-size: 25px; + font-family: WorkSans-Bold; + margin: 0 auto; + line-height: 36px; + + } + + span { + + width: 125px; + display: block; + margin: 0 auto; + font-size: 15px; + font-family: workSans-Regular; + } + } +.green-label{ +font-size: 12px; +margin-top: -13px; +} + +.green-amount{ + font-size: 17px; + font-family: WorkSans-Bold; + margin-top: -3px; +} + +.blue-label{ + font-size: 12px; + margin-top: -13px; + } + + .blue-amount{ + font-size: 17px; + font-family: WorkSans-Bold; + margin-top: -4px; + } + + .grids{ + border-radius: 20px !important; + background: white; + padding-left: 1px; + padding-right: 1px; + margin: 13px; + padding-top: 0px; + padding-bottom: 3px; + padding-left: 13px; + padding-right: 13px; + border: 1px solid #cac8c8; + } + + .header{ + + margin-top: -126px; + } + .bgcolor { + + color: white; + border-top-right-radius: 19px; + border-top-left-radius: 15px; + padding-top: 1; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; + /* border-radius: 12px !important; */ + background: #094875; + border-bottom: 1px solid #a7a4a4; + border-top: 1px solid #cac8c8; + margin-left: -13px; + margin-right: -13px; + } + +.rowtable{ + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; + border-top: 1px solid #cac8c8; + margin-left: -13px; + margin-right: -13px; + +} +.rowtables{ + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; + margin-left: -13px; + margin-right: -13px; + +} +.col{ + + font-size: 15px; + font-family: WorkSans-Bold; +} +.hrTitle{ + margin-left: 11px !important; + font-size: 15px !important; +} +.date{ + font-size: 15px !important; + margin-left: 58px; + margin-bottom: 12px; + padding-right: 5px; +} \ No newline at end of file diff --git a/Mohem/src/app/payslip/home/home.component.ts b/Mohem/src/app/payslip/home/home.component.ts index 1a387670..6bd1875b 100644 --- a/Mohem/src/app/payslip/home/home.component.ts +++ b/Mohem/src/app/payslip/home/home.component.ts @@ -1,11 +1,14 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, SimpleChanges } from '@angular/core'; import {PayslipService} from '../service/payslip.service' import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; import { CommonService } from 'src/app/hmg-common/services/common/common.service'; import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response'; import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service'; import { DeductionRequest } from '../model/deductionReq'; -import { IonInfiniteScroll } from '@ionic/angular'; +import { IonInfiniteScroll,IonSlides} from '@ionic/angular'; +import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service"; +import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/models/authenticated-user"; +import { UIChart } from 'primeng/components/chart/chart'; @Component({ selector: 'app-home', @@ -32,16 +35,44 @@ export class HomeComponent implements OnInit { private deductionReq: DeductionRequest; doinfiniteDedReq:any; doinfinitEarReq:any; + personalInfo: any; + setImage:any; + imageSrc: any = "../assets/imgs/profile.png"; + slideView: any; + sliderOne: any; + payslipIndex :any; + data:any; + @ViewChild('slides') slides: IonSlides; + @ViewChild('slideWithNav') slideWithNav: IonSlides; + @ViewChild('chart') chart: UIChart; + slideOptsOne = { + initialSlide: 0, + slidesPerView: 1, + autoplay:true + }; @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll; + public options = { + cutoutPercentage: 80, + tooltips: { enabled: false }, + legend: { display: false }}; + gaugeType = "full"; + // gaugeValue = 11.200; + // gaugeLabel = ""; + constructor( public payslipService:PayslipService, public ts: TranslatorService, public common: CommonService, - public sharedData: SharedDataService + public sharedData: SharedDataService, + public authService: AuthenticationService, + public cs: CommonService, + + ) {} + ngOnInit() { // this.selEmp = this.common.sharedService.getSharedData( // MenuResponse.SHARED_SEL_EMP, @@ -75,7 +106,63 @@ export class HomeComponent implements OnInit { this.getPayslip(); + // this.getProfile(); + } + + + ngOnChanges(changes: SimpleChanges): void { + if (changes.inputData.currentValue) { + // update this.data here + + // then chart is getting updated + setTimeout(() => { + this.chart.reinit(); + }, 100); + } + } + + slideNext(object, slideView) { + if(this.payslipIndex!=0){ + this.payslipIndex=this.payslipIndex-1; + this.showInfo(); + } +} + +slidePrev(object, slideView) { + if(this.payslipIndex { + // if (user) { + // this.personalInfo = user; + // if(this.cs.getUpdateImage().status){ + // // this.imageSrc = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+this.cs.getUpdateImage().img); + // this.imageSrc = "data:image/png;base64,"+this.cs.getUpdateImage().img; + // // alert("this.imageSrc"+ this.imageSrc); + // }else{ + // this.imageSrc = user.EMPLOYEE_IMAGE + // ? "data:image/png;base64," + user.EMPLOYEE_IMAGE + // : this.imageSrc; + // console.log("2-"+user); + // } + // } + // else { + // console.log("3-"+user); + // } + // }); + // } + + + + getPayslip(){ // this.selEmp ="13777"; @@ -99,19 +186,21 @@ export class HomeComponent implements OnInit { if (result.GetPayslipList != null) { this.GetPayslipList = result.GetPayslipList; + alert(this.GetPayslipList.length); this.firstPayslip= this.GetPayslipList[0] this.defultSelected=this.firstPayslip.PAYSLIP_CHOICE } this.showPaySlip = this.GetPayslipList[0]; + this.payslipIndex=0; this.getAllPayslipData(this.GetPayslipList[0].ACTION_CONTEXT_ID); } - // showPaymentInfo - showInfo(event){ - console.log(event.detail.value); - const index = parseInt(event.detail.value); - this.showPaySlip =this.GetPayslipList[index]; - this.ActionContextID=this.GetPayslipList[index].ACTION_CONTEXT_ID; + showInfo(){ + + //console.log(event.detail.value); + //const index = parseInt(event.detail.value); + this.showPaySlip =this.GetPayslipList[this.payslipIndex]; + this.ActionContextID=this.GetPayslipList[this.payslipIndex].ACTION_CONTEXT_ID; this.getAllPayslipData(this.ActionContextID); } @@ -140,8 +229,18 @@ export class HomeComponent implements OnInit { this.GetSummaryOfPaymentList = result.GetSummaryOfPaymentList[0]; this.earingTotal = this.GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT; this.deductionTotal = this.GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT; - - } + this.data = { + + labels: ['earingTotal', 'deductionTotal'], + datasets: [ + { data: [this.earingTotal,this.deductionTotal], + backgroundColor: [ + '#22c6b3', + '#094875', ], + borderWidth: 2 + } + ] + }; } } @@ -286,8 +385,6 @@ getDeduction(ActionContextID){ } else { if (this.infiniteScroll) this.infiniteScroll.complete(); } - } //end infiniteScroll - - + } } diff --git a/Mohem/src/app/payslip/payslip.page.ts b/Mohem/src/app/payslip/payslip.page.ts index 15744cfa..f0f43eb8 100644 --- a/Mohem/src/app/payslip/payslip.page.ts +++ b/Mohem/src/app/payslip/payslip.page.ts @@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./payslip.page.scss'], }) export class PayslipPage implements OnInit { + constructor() { } diff --git a/Mohem/src/assets/localization/i18n.json b/Mohem/src/assets/localization/i18n.json index 9d52c4fd..22123ac2 100644 --- a/Mohem/src/assets/localization/i18n.json +++ b/Mohem/src/assets/localization/i18n.json @@ -2049,6 +2049,10 @@ "en": "payslip", "ar":"كشف الراتب" }, + "monthly-payslip": { + "en": "Monthly Pay Slip", + "ar": "كشف الراتب الشهري" + }, "end-date":{ "en": "Peroid End Date", "ar":" تاريخ بداية الفترة" @@ -2061,6 +2065,10 @@ "en": "Peroid Name", "ar":"اسم الفترة " }, + "salary":{ + "en": "Salary", + "ar":"الراتب" + }, "deductions-Amount":{ "en": "Total Deductions Amount", "ar":"قيمة الخصومات " @@ -2113,6 +2121,18 @@ "en": "Deductions", "ar":"الخصومات " }, + "deductions-key":{ + "en": "DED", + "ar":" " + }, + "earnings-key":{ + "en": "NET", + "ar":" " + }, + "particular":{ + "en": "Particular", + "ar":"الخصائص" + }, "payment-information":{ "en": "Payment Information", "ar":"معلةمات الدفع " diff --git a/Mohem/src/global.scss b/Mohem/src/global.scss index 4421a600..d7f80b69 100644 --- a/Mohem/src/global.scss +++ b/Mohem/src/global.scss @@ -9,5 +9,11 @@ @import '~@ionic/angular/css/text-alignment.css'; @import '~@ionic/angular/css/text-transformation.css'; @import '~@ionic/angular/css/flex-utils.css'; +@import '../node_modules/primeng/resources/themes/nova-light/theme.css'; +@import "../node_modules/primeng/resources/primeng.min.css"; +@import "../node_modules/primeicons/primeicons.css"; @import "theme/styles.scss"; @import "theme/worklist.scss"; + + +