Skip to content

Commit

Permalink
chore: add time-picker demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@vapkse
vapkse committed Jul 9, 2024
1 parent faad4f5 commit 436e5e8
Show file tree
Hide file tree
Showing 9 changed files with 318 additions and 32 deletions.
6 changes: 6 additions & 0 deletions projects/demo-app/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ <h1 class="demo-app-name">hug/ngx-components Demo</h1>
<span mat-line>Splitter</span>
</mat-list-item>
</mat-nav-list>
<mat-nav-list>
<mat-list-item title="Timpe Picker" routerLink="/time-picker" routerLinkActive="active">
<mat-icon mat-list-icon>access_time</mat-icon>
<span mat-line>Timpe Picker</span>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>

<mat-sidenav-content>
Expand Down
1 change: 1 addition & 0 deletions projects/demo-app/src/app/app.routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@ export const appRoutes: Routes = [
{ path: 'overlay', loadComponent: () => import('./overlay/overlay-demo.component').then(m => m.OverlayDemoComponent), data: { title: 'Overlay' } },
{ path: 'snackbar', loadComponent: () => import('./snackbar/snackbar-demo.component').then(m => m.SnackbarDemoComponent), data: { title: 'Snackbar' } },
{ path: 'splitter', loadComponent: () => import('./splitter/splitter-demo.component').then(m => m.SplitterDemoComponent), data: { title: 'Splitter' } },
{ path: 'time-picker', loadComponent: () => import('./time-picker/time-picker-demo.component').then(m => m.TimePickerDemoComponent), data: { title: 'Time Picker' } },
{ path: '**', redirectTo: 'message-box', pathMatch: 'prefix' }
];
4 changes: 2 additions & 2 deletions projects/demo-app/src/app/message-box/message-box-demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ import { Subject, switchMap, takeUntil } from 'rxjs';
]
})
export class MessageBoxDemoComponent extends Destroy {
public tabIndex = 1;
protected tabIndex = 1;

public closeAction = [
protected closeAction = [
{
action: (): void => alert('test action'),
icon: 'clear'
Expand Down
32 changes: 16 additions & 16 deletions projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { Destroy } from '@hug/ngx-core';
import { NumericStepperComponent } from '@hug/ngx-numeric-stepper';
import { debounceTime, distinctUntilChanged, map, Subject, takeUntil } from 'rxjs';
import { Subject, debounceTime, distinctUntilChanged, map, takeUntil } from 'rxjs';

interface NumberFormControls {
numberValue3: FormControl<number>;
Expand Down Expand Up @@ -47,19 +47,19 @@ const numberValidator = (control: AbstractControl): string[] | null => {
]
})
export class NumericStepperDemoComponent extends Destroy {
public tabIndex = 1;
protected tabIndex = 1;

public value1 = 90;
public value2 = 9.5;
public value3 = 5;
public value4 = 1;
public value5 = 1;
public value6 = 1;
public value6min = 0;
public value6max = 20;
protected value1 = 90;
protected value2 = 9.5;
protected value3 = 5;
protected value4 = 1;
protected value5 = 1;
protected value6 = 1;
protected value6min = 0;
protected value6max = 20;

public numberForm: FormGroup<NumberFormControls>;
public onInput1Change$ = new Subject<Event>();
protected numberForm: FormGroup<NumberFormControls>;
protected onInput1Change$ = new Subject<Event>();

private changeDetectorRef = inject(ChangeDetectorRef);
private formBuilder = inject(FormBuilder);
Expand All @@ -85,19 +85,19 @@ export class NumericStepperDemoComponent extends Destroy {
});
}

public changeValue3(step: number): void {
protected changeValue3(step: number): void {
this.numberForm.controls.numberValue3.setValue(+this.numberForm.controls.numberValue3.value + step);
}

public changeValue4(step: number): void {
protected changeValue4(step: number): void {
this.numberForm.controls.numberValue4.setValue(+this.numberForm.controls.numberValue4.value + step);
}

public changeValue5(step: number): void {
protected changeValue5(step: number): void {
this.numberForm.controls.numberValue5.setValue(+this.numberForm.controls.numberValue5.value + step);
}

public changeValue6(step: number): void {
protected changeValue6(step: number): void {
const value = Math.max(Math.min(+this.numberForm.controls.numberValue6.value + step, this.value6max), this.value6min);
this.numberForm.controls.numberValue6.setValue(value);
}
Expand Down
10 changes: 5 additions & 5 deletions projects/demo-app/src/app/overlay/overlay-demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,21 @@ export class OverlayDemoComponent {
@ViewChild('contextMenu')
private contextMenu?: OverlayComponent;

public selected = '';
public items = [
protected selected = '';
protected items = [
{ text: 'Refresh' },
{ text: 'Settings' },
{ text: 'Help', disabled: true },
{ text: 'Sign Out' }
];

public tabIndex = 1;
protected tabIndex = 1;

public select(text: string): void {
protected select(text: string): void {
this.selected = text;
}

public onContextMenu(event: MouseEvent): boolean {
protected onContextMenu(event: MouseEvent): boolean {
const parent = event.currentTarget as HTMLElement;
const parentRect = parent.getBoundingClientRect();
this.contextMenu?.show(event.pageX - parentRect.left, event.pageY - parentRect.top);
Expand Down
18 changes: 9 additions & 9 deletions projects/demo-app/src/app/snackbar/snackbar-demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
import { MessageBoxComponent } from '@hug/ngx-message-box';
import { SnackbarComponent } from '@hug/ngx-snackbar';
import { StatusService, StatusType } from '@hug/ngx-status';
import { defaultIfEmpty, filter, from, interval, map, Observable, scan, shareReplay } from 'rxjs';
import { Observable, defaultIfEmpty, filter, from, interval, map, scan, shareReplay } from 'rxjs';

class Message {
public constructor(public content = 'Some snackbar', public gate = true) { }
Expand All @@ -34,21 +34,21 @@ class Message {
]
})
export class SnackbarDemoComponent {
public tabIndex = 1;
protected tabIndex = 1;
/*
The example below demonstrate how you can dynamically add snackbars using *ngFor structural directive.
Here the Observable simulate items being push from the server
*/
public messages$: Observable<Message[]>;
protected messages$: Observable<Message[]>;

public dangers$: Observable<Message[]>;
public warnings$: Observable<Message[]>;
public successes$: Observable<Message[]>;
public infos$: Observable<Message[]>;
protected dangers$: Observable<Message[]>;
protected warnings$: Observable<Message[]>;
protected successes$: Observable<Message[]>;
protected infos$: Observable<Message[]>;

public push = new EventEmitter<string>();
protected push = new EventEmitter<string>();

public simpleGate = false;
protected simpleGate = false;

private statusService = inject(StatusService);

Expand Down
101 changes: 101 additions & 0 deletions projects/demo-app/src/app/time-picker/time-picker-demo.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<mat-tab-group [selectedIndex]="tabIndex" (selectedTabChange)="tabIndex = $event.index">
<mat-tab label="API REFERENCE"></mat-tab>
<mat-tab label="EXAMPLES"></mat-tab>
</mat-tab-group>

<mat-card class="demo-card demo-basic" *ngIf="tabIndex === 0">
<!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/time-picker/readme.md'"></markdown> -->
</mat-card>

<div *ngIf="tabIndex === 1">
<mat-card class="demo-card">
<mat-toolbar color="primary">Basic Time Picker with ngModel and ngModelChange event</mat-toolbar>
<mat-card-content>
<div class="flex-layout">
<div>
<h3>Without initial hours and minutes (null)</h3>
<div class="flex-layout-center">
<time-picker [ngModel]="date0" (ngModelChange)="date0Changed($event)" mode="fullTime"></time-picker>
</div>
<p>Selected : {{ date0 | date: 'HH:mm' }}</p>
</div>
<div>
<h3>With initial hours and minutes (09:05)</h3>
<div class="flex-layout-center">
<time-picker appearance="legacy" [ngModel]="date1" (ngModelChange)="date1Changed($event)" mode="fullTime"></time-picker>
</div>
<p>Selected : {{ date1 | date: 'HH:mm' }}</p>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card class="demo-card">
<mat-toolbar color="primary">Time Picker modes</mat-toolbar>
<mat-card-content>
<div class="flex-layout">
<div>
<h3>With hours disabled</h3>
<div class="flex-layout-center">
<time-picker [ngModel]="date2" (ngModelChange)="date2Changed($event)" [step]="5" mode="fullTimeWithHoursDisabled"></time-picker>
</div>
<p>Selected date : {{ date2 | date: 'HH:mm' }}</p>
</div>
<div>
<h3>With minutes disabled</h3>
<div class="flex-layout-center">
<time-picker [ngModel]="date3" (ngModelChange)="date3Changed($event)" mode="fullTimeWithMinutesDisabled"></time-picker>
</div>
<p>Selected date : {{ date3 | date: 'HH:mm' }}</p>
</div>
<div>
<h3>With hours displayed only</h3>
<div class="flex-layout-center">
<time-picker [ngModel]="date4" (ngModelChange)="date4Changed($event)" mode="hoursOnly"></time-picker>
</div>
<p>Selected date : {{ date4 | date: 'HH:mm' }}</p>
</div>
<div>
<h3>With minutes displayed only inline in a form</h3>
<div class="flex-layout-center">
<time-picker inform [ngModel]="date5" (ngModelChange)="date5Changed($event)" mode="minutesOnly"></time-picker>
<mat-form-field appearance="outline">
<input matInput name="fakeInput" [(ngModel)]="fakeInput" />
</mat-form-field>
</div>
<p>Selected date : {{ date5 | date: 'HH:mm' }}</p>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card class="demo-card">
<mat-toolbar color="primary">Time Picker disable</mat-toolbar>
<mat-card-content>
<div class="flex-layout">
<div>
<h3>Time Picker disabled</h3>
<div class="flex-layout-center">
<time-picker [ngModel]="date6" (ngModelChange)="date6Changed($event)" [disabled]="disable6"></time-picker>
</div>
<p>
<mat-checkbox name="disable-checkbox" [(ngModel)]="disable6">Disable time-picker</mat-checkbox>
</p>
<p>Selected date : {{ date6 | date: 'HH:mm' }}</p>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card class="demo-card">
<mat-toolbar color="primary">Time Picker form control</mat-toolbar>
<mat-card-content>
<div class="flex-layout">
<form [formGroup]="dateForm">
<h3>Time Picker form control</h3>
<div class="flex-layout-center">
<time-picker formControlName="date7"></time-picker>
</div>
<p>Selected date : {{ dateForm.controls.date7.value | date: 'HH:mm' }}</p>
</form>
</div>
</mat-card-content>
</mat-card>
</div>
42 changes: 42 additions & 0 deletions projects/demo-app/src/app/time-picker/time-picker-demo.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
app-time-picker-demo {
.flex-layout {
display: flex;
flex-direction: row;
justify-content: space-between;

> div,
> form {
flex: 1 1 auto;
}
}

.flex-layout-center {
display: flex;
align-items: center;
}

.time-picker-actions {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}

/* Override Material datepicker style */
.mat-calendar-body-cell-content.mat-focus-indicator {
position: absolute !important;
}

.mat-datepicker-content-container {
flex-direction: row !important;
}

.mat-datepicker-actions {
margin-left: 64px !important;
}

time-picker[inform] {
padding-right: 1rem;
}
}
Loading

0 comments on commit 436e5e8

Please sign in to comment.