diff --git a/src/app/apply-leave/apply-leave.component.html b/src/app/apply-leave/apply-leave.component.html index 04a1bb1c..546f26cf 100644 --- a/src/app/apply-leave/apply-leave.component.html +++ b/src/app/apply-leave/apply-leave.component.html @@ -1,54 +1,99 @@
-
-

{{languageConstants.apply}}

-

{{languageConstants.leave}}

-
-
-

{{languageConstants.checkDetails}}

-

{{languageConstants.casualSickLeave}}

-

30/04/2021 - 05/05/2021G

-
-
- -
-
- -
+
+
+

{{languageConstants.apply}}
{{languageConstants.leave}}

-
-
- -

-
-
-
- -

+
+

{{languageConstants.checkDetails}}

+

{{languageConstants.casualSickLeave}}

+

30/04/2021 - 05/05/2021G

+
+ + +
-
- -

+
+
+ + {{languageConstants.leaveType}} + + + {{leaveType}} + + + +
+
+ +
+ + {{languageConstants.from}} + + + + + + +
+
+ + {{languageConstants.to}} + + + + + + +
+ +
+
+
+ + {{languageConstants.startTime}} + + +
+
+ + {{languageConstants.endTime}} + + +
+
+
+ + {{languageConstants.reason}} + + +
+
+ +
-
-
-
- -
-
- -
-
-
- -
-
- -
+
\ No newline at end of file diff --git a/src/app/apply-leave/apply-leave.component.scss b/src/app/apply-leave/apply-leave.component.scss index 745cb19d..6d7d62ed 100644 --- a/src/app/apply-leave/apply-leave.component.scss +++ b/src/app/apply-leave/apply-leave.component.scss @@ -1,43 +1,71 @@ -@import '../../styles.scss'; -#apply-leave{ - background: $clr-mania; - .align-middle{ - @include flex-box(column, top); - text-align: center; - padding-bottom: 5px; - width: 90%; - margin: 0% auto; - // .down-arrow{ - // position: absolute; - // top: 29%; - // right: 10%; - // } - .down-arrow{ - position: relative; - top: -45%; - right: -42%; - } - .calendar-icon{ - position: relative; - top: -40px; - right: -57px; - } - .txt-content{ - color: $clr-sappire; - font-weight: bold; - } - .txt-content:first-child{ - margin-top: 10%; - } - .txt-content:last-child{ - margin-bottom: 10%; - } - } - .alert-section{ - background-color: #FFFFFFA6; - margin-bottom: 5%; - .cancel-button{ - background:$clr-roman !important; - } - } -} \ No newline at end of file +.page-container { + height: 100%; + display: flex; + flex-direction: column; + background-color: #b4e8fd; +} +.flex-row { + flex-direction: row; + display: flex; + width: 100%; +} +button { + border-radius: 10px; + font-size: 0.938rem; + width: 98%; + background: #0b5fa4 0 0 no-repeat padding-box !important; + margin: 2%; +} +.left-section { + width: 48%; + margin-right: 2%; +} +.title { + text-align: center; +} +.right-section { + width: 48%; +} +.data-container { + margin: 2%; + padding: 2%; +} +.input-field { + width: 100%; +} +#apply-leave { + background: #b4e8fd; +} +.align-middle { + width: 100%; +} +.down-arrow { + position: relative; + top: -45%; + right: -42%; +} +.calendar-icon { + position: relative; + top: -59px; + right: -147px; +} +.txt-content { + color: #0b5fa4; + margin: 5% auto; +} +.alert-section { + background-color: #fff A6; + margin: 5% 0% 5% 0%; + text-align: center; + padding: 2%; +} +.cancel-button { + background: #da6c6c !important; +} +.font-body-xsmall-bold { + font-size: 1rem; + line-height: 1.125rem; + letter-spacing: 1px; + font-family: "Raleway VariableFont"; + text-transform: uppercase; +} diff --git a/src/app/apply-leave/apply-leave.component.ts b/src/app/apply-leave/apply-leave.component.ts index b8de4b7c..80aa5fb9 100644 --- a/src/app/apply-leave/apply-leave.component.ts +++ b/src/app/apply-leave/apply-leave.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; import { Router } from '@angular/router'; import { TranslationContentService } from 'src/constants/language/TranslationContentService'; import { RouterService } from '../shared/services/routerService'; @@ -11,8 +12,15 @@ import { RouterService } from '../shared/services/routerService'; export class ApplyLeaveComponent implements OnInit { public showAlertBox:boolean = false; public languageConstants:any = ''; + public leaveTypeList = ['Casual Leave', 'Sick Leave']; + public todayDate = new Date(); + public exportTime = { hour: 7, minute: 15, meriden: 'PM', format: 24 }; - constructor(private routerService: RouterService, private router: Router, private translationContentService:TranslationContentService) { } + constructor(private formBuilder: FormBuilder, private routerService: RouterService, private router: Router, private translationContentService:TranslationContentService) { + this.createNewForm(); + } + + applyLeaveForm!: FormGroup; ngOnInit(): void { this.translationContentService.getContent().subscribe((content: any) => { @@ -20,6 +28,17 @@ export class ApplyLeaveComponent implements OnInit { }); } + createNewForm(): void { + this.applyLeaveForm = this.formBuilder.group({ + leaveType: [''], + from: [''], + to: [''], + startTime: [''], + endTime:[''], + reason:[''] + }); + } + onSubmitForm():void{ this.showAlertBox = true; } @@ -27,4 +46,12 @@ export class ApplyLeaveComponent implements OnInit { onReviewSubmit():void{ this.router.navigate(['flexiLeave']); } -} + + selectLeave(type:any):void{ + console.log(type); + } + + onChangeHour(event:any) { + console.log('event', event); + } +} \ No newline at end of file diff --git a/src/app/current-screen/current-screen.component.html b/src/app/current-screen/current-screen.component.html index 0501cf14..8443fa66 100644 --- a/src/app/current-screen/current-screen.component.html +++ b/src/app/current-screen/current-screen.component.html @@ -1,4 +1,8 @@
+
@@ -28,8 +32,8 @@
- +
@@ -52,4 +56,5 @@
+
\ No newline at end of file diff --git a/src/app/current-screen/current-screen.component.ts b/src/app/current-screen/current-screen.component.ts index 9947fbd7..29e01925 100644 --- a/src/app/current-screen/current-screen.component.ts +++ b/src/app/current-screen/current-screen.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; import { Router } from '@angular/router'; import { TranslationContentService } from 'src/constants/language/TranslationContentService'; import { RouterService } from '../shared/services/routerService'; @@ -14,7 +15,11 @@ export class CurrentScreenComponent implements OnInit { public success:string = 'success'; public pending:string = 'pending'; public showLeaveStatus:string = 'showLeaveStatus'; - constructor(private translationContentService:TranslationContentService, private routerService: RouterService, private router: Router) { } + leaveForm!: FormGroup; + + constructor(private formBuilder: FormBuilder, private translationContentService:TranslationContentService, private routerService: RouterService, private router: Router) { + this.createNewForm(); + } ngOnInit(): void { this.translationContentService.getContent().subscribe((content: any) => { @@ -22,6 +27,12 @@ export class CurrentScreenComponent implements OnInit { }); } + createNewForm(): void { + this.leaveForm = this.formBuilder.group({ + searchCalendar: [''], + }); + } + applyLeave(): void{ this.router.navigate(['applyLeave']); }