Skip to content

Commit b3007d3

Browse files
sagnolkamdemsagnolkamdem
committed
alert ok
1 parent f3814ef commit b3007d3

File tree

4 files changed

+67
-27
lines changed

4 files changed

+67
-27
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="pt-5 pb-16">
1+
<div class="pt-5 pb-16" (click)="isOpen = !isOpen ">
22
<!-- Actions panel -->
33
<section aria-labelledby="quick-links-title">
44
<div class="overflow-hidden divide-y rounded-lg bg-slate-200 divide-slate-200 dark:bg-gray-700 dark:divide-slate-700 sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0 lg:grid-cols-3">
@@ -170,4 +170,5 @@ <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>
173174
<alert-success [isOpen]="isOpen" (toggleShowAlert)="toggle($event)" message="Connecté avec succes!"></alert-success>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export class DashboardComponent implements OnInit {
88

99
isOpen: boolean = false;
1010

11+
errors = ['dfghjkl fghjkl', 'dfghjk fghjk', 'sdfghjkl;'];
12+
1113
constructor(private title: Title) { }
1214

1315
ngOnInit(): void {

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

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

34
@Component({
45
selector: 'alert-errors',
56
template: `
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>
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>
2943
</div>
3044
</div>
45+
3146
</div>
3247
</div>
3348
`,
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+
],
3460
})
3561
export class ErrorComponent {
3662
@Input() class!: string;
63+
64+
@Input('isOpen') showAlert!: boolean;
65+
3766
@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+
}
3875
@Input() errors: string[] = [];
3976
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from
2020
<p class="mt-1 text-sm text-gray-500">{{ description }}</p>
2121
</div>
2222
<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-indigo-500 focus:ring-offset-2">
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">
2424
<span class="sr-only">Close</span>
2525
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
2626
<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" />
@@ -60,6 +60,6 @@ export class SuccessComponent {
6060
toggle(){
6161
setTimeout(() => {
6262
this.toggleShowAlert.emit(false);
63-
}, 2000);
63+
}, 100);
6464
}
6565
}

0 commit comments

Comments
 (0)