Skip to content

Commit 3c3ee9c

Browse files
mckenzieartsmckenziearts
committed
♻️ refactoring notification component
2 parents 6314732 + 7a6d372 commit 3c3ee9c

File tree

8 files changed

+199
-130
lines changed

8 files changed

+199
-130
lines changed

‎angular.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
33
"cli": {
4-
"analytics": false
4+
"analytics": "28bf0e25-7262-4cd2-8008-6af8c18cc349"
55
},
66
"version": 1,
77
"newProjectRoot": "projects",

‎src/app/modules/dashboard/pages/dashboard/dashboard.component.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,5 +170,4 @@ <h3 class="text-lg font-medium text-slate-900 dark:text-white">
170170
</section>
171171
</div>
172172

173-
<alert-errors [errors]="errors" [isOpen]="isOpen" (toggleShowAlert)="toggle($event)" message="Connecté avec succes!"></alert-errors>
174-
<alert-success [isOpen]="isOpen" (toggleShowAlert)="toggle($event)" message="Connecté avec succes!"></alert-success>
173+
<simple-notification [isOpen]="isOpen" (toggleShowNotification)="toggle($event)" type="warning" title="Connexion" message="Connecté avec succes!"></simple-notification>

‎src/app/modules/dashboard/pages/dashboard/dashboard.component.ts‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,12 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { Title } from '@angular/platform-browser';
1+
import { Component } from '@angular/core';
32

43
@Component({
54
templateUrl: './dashboard.component.html',
65
})
7-
export class DashboardComponent implements OnInit {
8-
6+
export class DashboardComponent {
97
isOpen: boolean = false;
108

11-
errors = ['dfghjkl fghjkl', 'dfghjk fghjk', 'sdfghjkl;'];
12-
13-
constructor(private title: Title) { }
14-
15-
ngOnInit(): void {
16-
}
17-
189
toggle(value: boolean) {
19-
this.isOpen = value
10+
this.isOpen = value;
2011
}
2112
}

‎src/app/shared/components/alert/error.component.ts‎

Lines changed: 25 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,39 @@
1-
import { animate, style, transition, trigger } from '@angular/animations';
2-
import { Component, EventEmitter, Input, Output } from '@angular/core';
1+
import { Component, Input } from '@angular/core';
32

43
@Component({
54
selector: 'alert-errors',
65
template: `
7-
<div *ngIf="showAlert" aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
8-
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
9-
10-
<div @showHideNotification class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-red-50 shadow-lg ring-1 ring-black ring-opacity-5" [ngClass]="class">
11-
<div class="p-4">
12-
<div class="flex items-start">
13-
<div class="flex-shrink-0">
14-
<svg
15-
class="w-5 h-5 text-red-400"
16-
xmlns="http://www.w3.org/2000/svg"
17-
viewBox="0 0 20 20"
18-
fill="currentColor"
19-
aria-hidden="true">
20-
<path
21-
fill-rule="evenodd"
22-
clip-rule="evenodd"
23-
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" />
24-
</svg>
25-
</div>
26-
<div class="ml-3 w-0 flex-1 pt-0.5">
27-
<h3 class="text-sm font-medium text-red-800">{{ message }}</h3>
28-
<div *ngIf="errors.length" class="mt-2 text-sm text-red-700">
29-
<ul role="list" class="pl-5 space-y-1 list-disc">
30-
<li *ngFor="let error of errors">{{ error }}</li>
31-
</ul>
32-
</div>
33-
</div>
34-
<div class="ml-4 flex flex-shrink-0">
35-
<button (click)="toggle()" type="button" class="inline-flex rounded-md bg-red-50 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
36-
<span class="sr-only">Close</span>
37-
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
38-
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
39-
</svg>
40-
</button>
41-
</div>
42-
</div>
6+
<div class="p-4 rounded-md bg-red-50" [ngClass]="class">
7+
<div class="flex">
8+
<div class="shrink-0">
9+
<svg
10+
class="w-5 h-5 text-red-400"
11+
xmlns="http://www.w3.org/2000/svg"
12+
viewBox="0 0 20 20"
13+
fill="currentColor"
14+
aria-hidden="true">
15+
<path
16+
fill-rule="evenodd"
17+
clip-rule="evenodd"
18+
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" />
19+
</svg>
20+
</div>
21+
<div class="ml-3">
22+
<h3 *ngIf="message" class="text-sm font-medium text-red-800">
23+
{{ message }}
24+
</h3>
25+
<div *ngIf="errors.length" class="mt-2 text-sm text-red-700">
26+
<ul role="list" class="pl-5 space-y-1 list-disc">
27+
<li *ngFor="let error of errors">{{ error }}</li>
28+
</ul>
4329
</div>
4430
</div>
45-
4631
</div>
4732
</div>
4833
`,
49-
animations: [
50-
trigger('showHideNotification', [
51-
transition('void => *', [
52-
style({ transform: "translateX(0.5rem)", opacity: 0 }),
53-
animate(300, style({ transform: "translateX(0)", opacity: 1 }))
54-
]),
55-
transition('* => void', [
56-
animate(100, style({ opacity: 0 }))
57-
])
58-
]),
59-
],
6034
})
6135
export class ErrorComponent {
6236
@Input() class!: string;
63-
64-
@Input('isOpen') showAlert!: boolean;
65-
6637
@Input() message!: string;
67-
68-
@Output() toggleShowAlert: EventEmitter<boolean> = new EventEmitter<boolean>();
69-
70-
toggle(){
71-
setTimeout(() => {
72-
this.toggleShowAlert.emit(false);
73-
}, 100);
74-
}
7538
@Input() errors: string[] = [];
76-
}
39+
}

‎src/app/shared/components/alert/success.component.ts‎

Lines changed: 19 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,31 @@
1-
import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
2-
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
1+
import { Component, Input } from '@angular/core';
32

43
@Component({
54
selector: 'alert-success',
65
template: `
7-
<div *ngIf="showAlert" aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
8-
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
9-
10-
<div @showHideNotification class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5" [ngClass]="class">
11-
<div class="p-4">
12-
<div class="flex items-start">
13-
<div class="flex-shrink-0">
14-
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
15-
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
16-
</svg>
17-
</div>
18-
<div class="ml-3 w-0 flex-1 pt-0.5">
19-
<p class="text-sm font-medium text-gray-900">{{ message }}</p>
20-
<p class="mt-1 text-sm text-gray-500">{{ description }}</p>
21-
</div>
22-
<div class="ml-4 flex flex-shrink-0">
23-
<button (click)="toggle()" type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
24-
<span class="sr-only">Close</span>
25-
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
26-
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
27-
</svg>
28-
</button>
29-
</div>
30-
</div>
31-
</div>
6+
<div class="p-4 rounded-md bg-green-50" [ngClass]="class">
7+
<div class="flex">
8+
<div class="shrink-0">
9+
<svg
10+
class="w-5 h-5 text-green-400"
11+
xmlns="http://www.w3.org/2000/svg"
12+
viewBox="0 0 20 20"
13+
fill="currentColor"
14+
aria-hidden="true">
15+
<path
16+
fill-rule="evenodd"
17+
clip-rule="evenodd"
18+
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" />
19+
</svg>
20+
</div>
21+
<div class="ml-3">
22+
<p class="text-sm font-medium text-green-800">{{ message }}</p>
3223
</div>
33-
3424
</div>
3525
</div>
3626
`,
37-
animations: [
38-
trigger('showHideNotification', [
39-
transition('void => *', [
40-
style({ transform: "translateX(0.5rem)", opacity: 0 }),
41-
animate(300, style({ transform: "translateX(0)", opacity: 1 }))
42-
]),
43-
transition('* => void', [
44-
animate(100, style({ opacity: 0 }))
45-
])
46-
]),
47-
],
4827
})
4928
export class SuccessComponent {
5029
@Input() class!: string;
51-
52-
@Input('isOpen') showAlert!: boolean;
53-
54-
@Output() toggleShowAlert: EventEmitter<boolean> = new EventEmitter<boolean>();
55-
5630
@Input() message!: string;
57-
58-
@Input() description!: string;
59-
60-
toggle(){
61-
setTimeout(() => {
62-
this.toggleShowAlert.emit(false);
63-
}, 100);
64-
}
65-
}
31+
}

‎src/app/shared/components/notifications/notifications.module.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
4+
import { SimpleNotificationComponent } from './simple-notification.component';
5+
6+
const COMPONENTS = [SimpleNotificationComponent];
7+
8+
@NgModule({
9+
declarations: [COMPONENTS],
10+
imports: [CommonModule],
11+
exports: [COMPONENTS],
12+
})
13+
export class NotificationsModule {}

‎src/app/shared/components/notifications/simple-notification.component.ts‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import { animate, style, transition, trigger } from '@angular/animations';
2+
import { Component, EventEmitter, Input, Output } from '@angular/core';
3+
4+
type NotificationType = 'success' | 'error' | 'info' | 'warning';
5+
6+
@Component({
7+
selector: 'simple-notification',
8+
template: `
9+
<div
10+
*ngIf="showNotification"
11+
aria-live="assertive"
12+
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
13+
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
14+
<div
15+
@showHideNotification
16+
class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5"
17+
[ngClass]="class">
18+
<div class="p-4">
19+
<div class="flex items-start">
20+
<div class="flex-shrink-0">
21+
<svg
22+
*ngIf="type === 'success'"
23+
class="h-6 w-6 text-green-400"
24+
xmlns="http://www.w3.org/2000/svg"
25+
fill="none"
26+
viewBox="0 0 24 24"
27+
stroke-width="1.5"
28+
stroke="currentColor"
29+
aria-hidden="true">
30+
<path
31+
stroke-linecap="round"
32+
stroke-linejoin="round"
33+
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
34+
</svg>
35+
<svg
36+
*ngIf="type === 'error'"
37+
class="w-6 h-6 text-red-400"
38+
xmlns="http://www.w3.org/2000/svg"
39+
fill="none"
40+
viewBox="0 0 24 24"
41+
stroke-width="1.5"
42+
stroke="currentColor">
43+
<path
44+
stroke-linecap="round"
45+
stroke-linejoin="round"
46+
d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
47+
</svg>
48+
<svg
49+
*ngIf="type === 'info'"
50+
class="w-6 h-6 text-blue-400"
51+
xmlns="http://www.w3.org/2000/svg"
52+
fill="none"
53+
viewBox="0 0 24 24"
54+
stroke-width="1.5"
55+
stroke="currentColor">
56+
<path
57+
stroke-linecap="round"
58+
stroke-linejoin="round"
59+
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
60+
</svg>
61+
<svg
62+
*ngIf="type === 'warning'"
63+
class="w-6 h-6 text-yellow-400"
64+
xmlns="http://www.w3.org/2000/svg"
65+
fill="none"
66+
viewBox="0 0 24 24"
67+
stroke-width="1.5"
68+
stroke="currentColor">
69+
<path
70+
stroke-linecap="round"
71+
stroke-linejoin="round"
72+
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
73+
</svg>
74+
</div>
75+
<div class="ml-3 w-0 flex-1 pt-0.5">
76+
<p
77+
*ngIf="title"
78+
class="text-sm font-medium text-slate-900 dark:text-white">
79+
{{ title }}
80+
</p>
81+
<p
82+
[ngClass]="{ 'mt-1': title }"
83+
class="text-sm text-slate-500 dark:text-slate-400">
84+
{{ message }}
85+
</p>
86+
</div>
87+
<div class="ml-4 flex flex-shrink-0">
88+
<button
89+
(click)="toggle()"
90+
type="button"
91+
class="inline-flex rounded-md bg-white text-slate-400 dark:bg-gray-900 dark:text-slate-300 dark:hover:text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
92+
<span class="sr-only" i18n>Fermer</span>
93+
<svg
94+
class="h-5 w-5"
95+
xmlns="http://www.w3.org/2000/svg"
96+
viewBox="0 0 20 20"
97+
fill="currentColor"
98+
aria-hidden="true">
99+
<path
100+
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
101+
</svg>
102+
</button>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
`,
110+
animations: [
111+
trigger('showHideNotification', [
112+
transition('void => *', [
113+
style({ transform: 'translateX(0.5rem)', opacity: 0 }),
114+
animate(300, style({ transform: 'translateX(0)', opacity: 1 })),
115+
]),
116+
transition('* => void', [animate(100, style({ opacity: 0 }))]),
117+
]),
118+
],
119+
})
120+
export class SimpleNotificationComponent {
121+
@Input('isOpen') showNotification!: boolean;
122+
@Input() class!: string;
123+
@Input() title!: string | null;
124+
@Input() message!: string;
125+
@Input() type: NotificationType = 'success';
126+
127+
@Output() toggleShowNotification: EventEmitter<boolean> =
128+
new EventEmitter<boolean>();
129+
130+
toggle() {
131+
setTimeout(() => {
132+
this.toggleShowNotification.emit(false);
133+
}, 100);
134+
}
135+
}

‎src/app/shared/shared.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { TextareaModule } from './components/textarea/textarea.module';
1313
import { ClickOutsideDirective } from './directives/click-outside.directive';
1414
import { StatusColorPipe } from './pipes/status-color.pipe';
1515
import { StatusValuePipe } from './pipes/status-value.pipe';
16+
import { NotificationsModule } from './components/notifications/notifications.module';
1617

1718
const DECLARATIONS = [ClickOutsideDirective, StatusColorPipe, StatusValuePipe];
1819
const MODULES = [
@@ -24,6 +25,7 @@ const MODULES = [
2425
SkeletonModule,
2526
SnippetModule,
2627
TextareaModule,
28+
NotificationsModule
2729
];
2830

2931
@NgModule({

0 commit comments

Comments
 (0)