bnsubramaniyan
/
skgangaEkam
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity
Browse Source

applyLeave styles update

master
ganga satish kumar 3 years ago
parent
a139cb1154
commit
ce6c89bdb3
5 changed files with 212 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 141
      src/app/apply-leave/apply-leave.component.html
  2. 114
      src/app/apply-leave/apply-leave.component.scss
  3. 31
      src/app/apply-leave/apply-leave.component.ts
  4. 9
      src/app/current-screen/current-screen.component.html
  5. 13
      src/app/current-screen/current-screen.component.ts

141
src/app/apply-leave/apply-leave.component.html
View File

@ -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>
</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>
<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>
<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>
</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 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">
<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="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="data-container">
<div class="align-middle">
<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="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="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="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="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="align-middle">
<button class="font-body-xsmall-bold" type="button"
(click)="onSubmitForm()">{{languageConstants.review}}</button>
</div>
</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>
<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>
</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>
<div class="margin-top-3 align-middle">
<button class="font-body-xsmall-bold" type="button" (click)="onSubmitForm()">{{languageConstants.review}}</button>
</div>
</form>
</div>

114
src/app/apply-leave/apply-leave.component.scss
View File

@ -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;
}
}
}
.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;
}

31
src/app/apply-leave/apply-leave.component.ts
View File

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

9
src/app/current-screen/current-screen.component.html
View File

@ -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>

13
src/app/current-screen/current-screen.component.ts
View File

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

Write Preview
Loading…
Cancel
Save