applyLeave styles update

src/app/apply-leave/apply-leave.component.html

@@ -1,54 +1,99 @@
 <div class="page-container" id="apply-leave">
-        <div class="align-middle">
-                <p class="txt-content font-body-xsmall-bold">{{languageConstants.apply}}</p>
-                <p class="txt-content font-body-xsmall-bold number-txt">{{languageConstants.leave}}</p>
+        <form id="applyLeaveFormId" class="add-leave-form" [formGroup]="applyLeaveForm">
+                <div class="align-middle title">
+                        <p class="txt-content font-body-xsmall-bold">{{languageConstants.apply}}<br/>{{languageConstants.leave}}</p>
                 </div>
                 <div class="align-middle alert-section" *ngIf="showAlertBox">
                         <p class="txt-content font-body-xsmall-bold">{{languageConstants.checkDetails}}</p>
                         <p class="txt-content font-body-xsmall-bold">{{languageConstants.casualSickLeave}}</p>
                         <p class="txt-content font-body-xsmall-bold">30/04/2021 - 05/05/2021G</p>
                         <div class="align-middle flex-row">
-                        <div class="flex-1 margin-top-3 margin-right-3">
-                                <button class="font-body-xsmall-bold" type="button" (click)="onReviewSubmit()">{{languageConstants.submit}}</button>
-                        </div>
-                        <div class="flex-1 margin-top-3 margin-right-3">
-                                <button class="font-body-xsmall-bold cancel-button" type="button" (click)="onSubmitForm()">{{languageConstants.cancel}}</button>
-                        </div>
+                                        <button class="font-body-xsmall-bold" type="button"
+                                                (click)="onReviewSubmit()">{{languageConstants.submit}}</button>
+                                        <button class="font-body-xsmall-bold cancel-button" type="button"
+                                                (click)="onSubmitForm()">{{languageConstants.cancel}}</button>
                         </div>
                 </div>
+                <div class="data-container">
                         <div class="align-middle">
-                <input type="text" id="leaveType"
-                formControlName="leaveType" class="user-input font-body-xsmall-bold" placeholder="{{languageConstants.leaveType}}" value=""/>
-                <p class="down-arrow"><img class="bike-card-arrow-dropdown" src="assets/svg/arrow-down.svg"></p>
+                                <mat-form-field class="input-field" appearance="fill">
+                                        <mat-label>{{languageConstants.leaveType}}</mat-label>
+                                        <mat-select (selectionChange)="selectLeave($event)">
+                                                <mat-option *ngFor="let leaveType of leaveTypeList" [value]="leaveType">
+                                                        {{leaveType}}
+                                                </mat-option>
+                                        </mat-select>
+                                </mat-form-field>
                         </div>
                         <div class="align-middle flex-row">
-                <div class="flex-1 margin-top-3 margin-right-3">
-                        <input type="text" id="leaveType"
-                        formControlName="leaveType" class="user-input font-body-xsmall-bold" placeholder="{{languageConstants.from}}" value=""/>
-                        <p class="calendar-icon"><img class="bike-card-arrow-dropdown" src="assets/svg/calendar-input.svg"></p>
-                </div>
-                <div class="flex-1 margin-top-3">
-                        <input type="text" id="leaveType"
-                        formControlName="leaveType" class="user-input font-body-xsmall-bold" placeholder="{{languageConstants.to}}" value=""/>
-                        <p class="calendar-icon"><img class="bike-card-arrow-dropdown" src="assets/svg/calendar-input.svg"></p>
-
+                                <!-- <div class="left-section">
+                                        <mat-form-field class="input-field" appearance="outline">
+                                                <mat-label>{{languageConstants.from}} </mat-label>
+                                                <input formControlName="from" matInput
+                                                        placeholder="{{languageConstants.from}}" value="">
+                                        </mat-form-field>
+                                        <span class="calendar-icon"><img class="bike-card-arrow-dropdown"
+                                                        src="assets/svg/calendar-input.svg"></span>
+                                </div>
+                                <div class="right-section">
+                                        <mat-form-field class="input-field" appearance="outline">
+                                                <mat-label>{{languageConstants.to}} </mat-label>
+                                                <input formControlName="to" matInput
+                                                        placeholder="{{languageConstants.to}}" value="">
+                                        </mat-form-field>
+                                        <span class="calendar-icon"><img class="bike-card-arrow-dropdown"
+                                                        src="assets/svg/calendar-input.svg"></span>
+                                </div> -->
+                                <div class="left-section">
+                        <mat-form-field class="input-field"  appearance="fill">
+                                <mat-label>{{languageConstants.from}}</mat-label>
+                                <!-- #docregion toggle -->
+                                <input matInput [matDatepicker]="fromPicker" [min]="todayDate" formControlName="from" required>
+                                <mat-datepicker-toggle matSuffix [for]="fromPicker"></mat-datepicker-toggle>
+                                <mat-datepicker #fromPicker></mat-datepicker>
+                                <!-- #enddocregion toggle -->
+                        </mat-form-field>
                                 </div>
+                                <div class="right-section">
+                                <mat-form-field class="input-field"  appearance="fill">
+                                        <mat-label>{{languageConstants.to}}</mat-label>
+                                        <!-- #docregion toggle -->
+                                        <input matInput [matDatepicker]="toPicker" [min]="todayDate" formControlName="to" required>
+                                        <mat-datepicker-toggle matSuffix [for]="toPicker"></mat-datepicker-toggle>
+                                        <mat-datepicker #toPicker></mat-datepicker>
+                                        <!-- #enddocregion toggle -->
+                                </mat-form-field>
+                                </div>
+
                         </div>
                         <div class="align-middle flex-row">
-                <div class="flex-1 margin-top-3 margin-right-3">
-                        <input type="text" id="leaveType"
-                        formControlName="leaveType" class="user-input font-body-xsmall-bold" placeholder="{{languageConstants.startTime}}" value=""/>
+                                <div class="left-section">
+                                        <mat-form-field class="input-field" appearance="outline">
+                                                <mat-label>{{languageConstants.startTime}} </mat-label>
+                                                <input formControlName="startTime" matInput
+                                                        placeholder="{{languageConstants.startTime}}" value="">
+                                        </mat-form-field>
                                 </div>
-                <div class="flex-1 margin-top-3">
-                        <input type="text" id="leaveType"
-                        formControlName="leaveType" class="user-input font-body-xsmall-bold" placeholder="{{languageConstants.endTime}}" value=""/>
+                                <div class="right-section">
+                                        <mat-form-field class="input-field" appearance="outline">
+                                                <mat-label>{{languageConstants.endTime}} </mat-label>
+                                                <input formControlName="endTime" matInput
+                                                        placeholder="{{languageConstants.endTime}}" value="">
+                                        </mat-form-field>
                                 </div>
                         </div>
-        <div class="margin-top-3 align-middle">
-                <input type="text" id="leaveType"
-                formControlName="leaveType" class="user-input font-body-xsmall-bold" placeholder="{{languageConstants.reason}}" value=""/>
+                        <div class="align-middle">
+                                <mat-form-field class="input-field" appearance="outline">
+                                        <mat-label>{{languageConstants.reason}} </mat-label>
+                                        <input formControlName="reason" matInput
+                                                placeholder="{{languageConstants.reason}}" value="">
+                                </mat-form-field>
                         </div>
-        <div class="margin-top-3 align-middle">
-                <button class="font-body-xsmall-bold" type="button" (click)="onSubmitForm()">{{languageConstants.review}}</button>
+                        <div class="align-middle">
+                                <button class="font-body-xsmall-bold" type="button"
+                                        (click)="onSubmitForm()">{{languageConstants.review}}</button>
+                        </div>
+
                 </div>
+        </form>
 </div>

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);
+.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;
-        padding-bottom: 5px;
-        width: 90%;
-        margin: 0% auto;
-        // .down-arrow{
-        //     position: absolute;
-        //     top: 29%;
-        //     right: 10%;
-        // }
-        .down-arrow{
+}
+.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{
+}
+.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;
-        }
-    }
+    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;
 }

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);
+  }
 }

src/app/current-screen/current-screen.component.html

@@ -1,4 +1,8 @@
 <div class="page-container" id="home-screen">
+    <form
+      id="leaveForm"
+      class="add-leave-form"
+      [formGroup]="leaveForm">
     <main class="main-container">
         <section class="content">
             <div class="card">
@@ -28,8 +32,8 @@
                     </div>
                 </div>
                 <div class="align-middle">
-                    <input type="text" id="mobileNumber"
-                        formControlName="mobileNumber" class="user-input font-body-xsmall-bold" placeholder="SEARCH FROM CALENDAR" value=""/>
+                    <input type="text" id="searchCalendar"
+                        formControlName="searchCalendar" class="user-input font-body-xsmall-bold" placeholder="SEARCH FROM CALENDAR" value=""/>
                     <div class="flex-row icons-position">
                         <img class="txtFld-icons" src="assets/images/applyLeaveFinal.png"/>
                         <img class="txtFld-icons" src="assets/svg/search.svg"/>
@@ -52,4 +56,5 @@
             </div>
         </section>
     </main>
+</form>
 </div>

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']);
   }