Skip to content

Commit e223ad4

Browse files
sagnolkamdemsagnolkamdem
committed
update component
1 parent b3007d3 commit e223ad4

File tree

7 files changed

+194
-117
lines changed

7 files changed

+194
-117
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,5 +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>
174-
<alert-success [isOpen]="isOpen" (toggleShowAlert)="toggle($event)" message="Connecté avec succes!"></alert-success>
173+
<!-- <notification-error [isOpen]="isOpen" (toggleShowNotification)="tosggle($event)" message="Connecté avec succes!" description="qwertyuio rtyui wertyui ertyui"></notification-error> -->
174+
<!-- <notification-success [isOpen]="isOpen" (toggleShowNotification)="toggle($event)" message="Connecté avec succes!" description="qwertyuio rtyui wertyui ertyui"></notification-success> -->

‎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/error.component.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { animate, style, transition, trigger } from '@angular/animations';
2+
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
3+
4+
@Component({
5+
selector: 'notification-error',
6+
template: `
7+
<div *ngIf="showNotification" 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+
15+
<svg class="h-6 w-6 text-red-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
16+
<path stroke-linecap="round" stroke-linejoin="round" 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" />
17+
</svg>
18+
19+
</div>
20+
<div class="ml-3 w-0 flex-1 pt-0.5">
21+
<p class="text-sm font-medium text-red-700">{{ message }}</p>
22+
<p class="mt-1 text-sm text-red-500">{{ description }}</p>
23+
</div>
24+
<div class="ml-4 flex flex-shrink-0">
25+
<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">
26+
<span class="sr-only">Close</span>
27+
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
28+
<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" />
29+
</svg>
30+
</button>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
36+
</div>
37+
</div>
38+
`,
39+
animations: [
40+
trigger('showHideNotification', [
41+
transition('void => *', [
42+
style({ transform: "translateX(0.5rem)", opacity: 0 }),
43+
animate(300, style({ transform: "translateX(0)", opacity: 1 }))
44+
]),
45+
transition('* => void', [
46+
animate(100, style({ opacity: 0 }))
47+
])
48+
]),
49+
],
50+
})
51+
export class ErrorComponent {
52+
@Input() class!: string;
53+
54+
@Input('isOpen') showNotification!: boolean;
55+
56+
@Output() toggleShowNotification: EventEmitter<boolean> = new EventEmitter<boolean>();
57+
58+
@Input() message!: string;
59+
60+
@Input() description!: string;
61+
62+
toggle(){
63+
setTimeout(() => {
64+
this.toggleShowNotification.emit(false);
65+
}, 100);
66+
}
67+
}

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

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

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
2+
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
3+
4+
@Component({
5+
selector: 'notification-success',
6+
template: `
7+
<div *ngIf="showNotification" 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>
32+
</div>
33+
34+
</div>
35+
</div>
36+
`,
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+
],
48+
})
49+
export class SuccessComponent {
50+
@Input() class!: string;
51+
52+
@Input('isOpen') showNotification!: boolean;
53+
54+
@Output() toggleShowNotification: EventEmitter<boolean> = new EventEmitter<boolean>();
55+
56+
@Input() message!: string;
57+
58+
@Input() description!: string;
59+
60+
toggle(){
61+
setTimeout(() => {
62+
this.toggleShowNotification.emit(false);
63+
}, 100);
64+
}
65+
}

‎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)