Skip to content

Commit

Permalink
chore: add status demo
Browse files Browse the repository at this point in the history
  • Loading branch information
vapkse committed Jul 9, 2024
1 parent 4eccfde commit dff1b45
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,12 @@
<button mat-raised-button background="warning" (click)="push.emit('warning')">Warning</button>
<button mat-raised-button background="success" (click)="push.emit('success')">Success</button>
<button mat-raised-button background="info" (click)="push.emit('info')">Info</button>
<button mat-raised-button (click)="simpleGate = true">Simple</button>
<button mat-raised-button class="spaced" (click)="simpleGate = true">Simple</button>
<button mat-raised-button background="danger" (click)="showStatus('danger')">Status Danger</button>
<button mat-raised-button background="warning" (click)="showStatus('warn')">Status Warn</button>
<button mat-raised-button background="success" (click)="showStatus('success')">Status Success</button>
<button mat-raised-button background="primary" (click)="showStatus('primary')">Status Primary</button>
<button mat-raised-button (click)="showStatus('info')">Status Info</button>
</div>

<!-- simple use case, single snackbar -->
Expand Down
13 changes: 12 additions & 1 deletion projects/demo-app/src/app/snackbar/snackbar-demo.component.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
@use '@angular/material' as mat;
@use '../../../../core/src/styles/themeVariables' as themeVariables;

$primary: map-get(themeVariables.$theme, primary);

:host {
.container {
Expand All @@ -12,10 +15,14 @@
}

.btn-container {
width: 500px;
width: 1000px;
margin: auto;
margin-bottom: 12px;

.spaced {
margin-right: 12px;
}

[background='danger'] {
background: mat.get-color-from-palette(mat.$red-palette, 400);
}
Expand All @@ -35,6 +42,10 @@
[background='default'] {
background: mat.get-color-from-palette(mat.$grey-palette, 900);
}

[background='primary'] {
background: mat.get-color-from-palette($primary);
}
}

.push-section {
Expand Down
33 changes: 25 additions & 8 deletions projects/demo-app/src/app/snackbar/snackbar-demo.component.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { AsyncPipe, NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MessageBoxComponent } from '@hug/ngx-message-box';
import { SnackbarComponent } from '@hug/ngx-snackbar';
import { Observable, defaultIfEmpty, filter, from, interval, map, scan, shareReplay } from 'rxjs';
import { StatusService, StatusType } from '@hug/ngx-status';
import { defaultIfEmpty, filter, from, interval, map, Observable, scan, shareReplay } from 'rxjs';

class Message {
public constructor(public content = 'Some snackbar', public gate = true) { }
Expand All @@ -34,7 +35,6 @@ class Message {
})
export class SnackbarDemoComponent {
public 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
Expand All @@ -50,44 +50,61 @@ export class SnackbarDemoComponent {

public simpleGate = false;

private statusService = inject(StatusService);

public constructor() {
this.dangers$ = from(this.push).pipe(
filter(type => type === 'danger'),
map(() => new Message('Danger snackbar')),
scan((acc, curr) => [...acc, curr], [] as Message[]),
defaultIfEmpty([] as Message[]),
shareReplay({ bufferSize: 1, refCount: false})
shareReplay({ bufferSize: 1, refCount: false })
);

this.warnings$ = from(this.push).pipe(
filter(type => type === 'warning'),
map(() => new Message('Warning snackbar')),
scan((acc, curr) => [...acc, curr], [] as Message[]),
defaultIfEmpty([] as Message[]),
shareReplay({ bufferSize: 1, refCount: false})
shareReplay({ bufferSize: 1, refCount: false })
);

this.successes$ = from(this.push).pipe(
filter(type => type === 'success'),
map(() => new Message('Success snackbar')),
scan((acc, curr) => [...acc, curr], [] as Message[]),
defaultIfEmpty([] as Message[]),
shareReplay({ bufferSize: 1, refCount: false})
shareReplay({ bufferSize: 1, refCount: false })
);

this.infos$ = from(this.push).pipe(
filter(type => type === 'info'),
map(() => new Message('Info snackbar')),
scan((acc, curr) => [...acc, curr], [] as Message[]),
defaultIfEmpty([] as Message[]),
shareReplay({ bufferSize: 1, refCount: false})
shareReplay({ bufferSize: 1, refCount: false })
);

this.messages$ = interval(2000).pipe(
map(() => new Message('Server push snackbar')),
scan((acc, curr) => [...acc, curr], [] as Message[]),
defaultIfEmpty([] as Message[]),
shareReplay({ bufferSize: 1, refCount: false})
shareReplay({ bufferSize: 1, refCount: false })
);
}

protected showStatus(statusType: StatusType): void {
const status = {
type: statusType,
title: 'Title',
text: 'This is a status message, click on the info icon for more.',
technicalText: `
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, lacus nec imperdiet pretium, purus nisi hendrerit velit, non laoreet est velit sit amet arcu. Cras eget malesuada tortor. Aliquam vitae libero tellus. Quisque at velit sed arcu feugiat imperdiet ut quis augue. Cras laoreet eleifend tellus varius laoreet. Vestibulum vulputate sagittis sapien, eget euismod metus. Sed ut lacus at risus tristique blandit. Cras at nibh augue. Nam felis felis, facilisis sed fringilla a, porta id magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc eget velit a enim pharetra volutpat quis eget lacus. Donec imperdiet magna metus, auctor pretium nibh dictum eu. Sed pharetra tristique sodales. Nam dapibus porta imperdiet. Pellentesque elementum
tristique molestie. Sed at dolor et mauris vehicula vestibulum. Maecenas cursus vulputate convallis. Quisque eu imperdiet nunc. Nunc ut feugiat eros. Integer aliquam nibh nec est sollicitudin dictum at et diam. Aliquam neque magna, condimentum non dolor in, faucibus malesuada mauris. Sed dictum massa neque, quis venenatis justo consequat sed. Fusce imperdiet purus nec neque vestibulum, vel placerat enim porta. Duis turpis purus, suscipit vitae scelerisque sed, sollicitudin a sem. Nullam orci risus, suscipit non mollis non, semper sit amet enim. In vel eros justo. Etiam gravida dolor vitae commodo tincidunt. Ut consequat id odio ac scelerisque. Phasellus fringilla et nisi at convallis. Nunc efficitur est in luctus interdum. Curabitur risus turpis, gravida in ex
id, elementum convallis augue. Duis laoreet condimentum purus, sit amet vulputate dolor finibus ac. Proin consectetur ullamcorper orci ut ullamcorper. Vivamus ornare leo vel urna molestie porta. Vivamus malesuada velit eros, non rutrum urna elementum ut. Pellentesque sed lorem tempor, consectetur sem in, condimentum justo. Vivamus eu nunc interdum, mattis turpis nec, accumsan neque. Integer convallis porttitor turpis feugiat placerat. Nulla sodales ex in neque lobortis, vel mollis turpis interdum. Mauris pharetra ex a justo maximus, at semper metus feugiat. Nullam aliquet tortor nec tortor auctor venenatis. Proin id laoreet eros, id sodales mi. Vestibulum mollis orci nec orci posuere dapibus. Integer placerat, nisl id aliquam interdum, diam est vestibulum purus,
non venenatis turpis lacus in felis. Vestibulum pulvinar velit tortor, ut convallis turpis condimentum ut. Nunc auctor hendrerit augue, sed malesuada quam. Etiam varius interdum risus, eget gravida libero convallis sed. Aliquam tempor orci at ex ullamcorper mollis. Fusce imperdiet ut ex in gravida. Curabitur iaculis non diam vel consequat. Praesent a magna posuere, feugiat mauris nec, sollicitudin ligula. Sed faucibus viverra velit eget porttitor. Suspendisse a sem gravida, tincidunt lacus vitae, lobortis ante. Nulla nisl quam, ultrices non nunc eget, commodo luctus metus. Curabitur nulla erat, gravida in nulla vel, commodo vestibulum ligula. Quisque quis lectus vel urna luctus gravida eget id risus.
`
};
this.statusService.showStatus(status);
}
}

0 comments on commit dff1b45

Please sign in to comment.