Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/integration #7

Merged
merged 11 commits into from
Oct 26, 2022
Prev Previous commit
Next Next commit
alert ok
  • Loading branch information
sagnolkamdem committed Oct 26, 2022
commit b3007d33ef4c8567bb0218b502d2ca995d7114dd
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="pt-5 pb-16">
<div class="pt-5 pb-16" (click)="isOpen = !isOpen ">
<!-- Actions panel -->
<section aria-labelledby="quick-links-title">
<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">
Expand Down Expand Up @@ -170,4 +170,5 @@ <h3 class="text-lg font-medium text-slate-900 dark:text-white">
</section>
</div>

<alert-errors [errors]="errors" [isOpen]="isOpen" (toggleShowAlert)="toggle($event)" message="Connecté avec succes!"></alert-errors>
<alert-success [isOpen]="isOpen" (toggleShowAlert)="toggle($event)" message="Connecté avec succes!"></alert-success>
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export class DashboardComponent implements OnInit {

isOpen: boolean = false;

errors = ['dfghjkl fghjkl', 'dfghjk fghjk', 'sdfghjkl;'];

constructor(private title: Title) { }

ngOnInit(): void {
Expand Down
85 changes: 61 additions & 24 deletions src/app/shared/components/alert/error.component.ts
Original file line number Diff line number Diff line change
@@ -1,39 +1,76 @@
import { Component, Input } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
selector: 'alert-errors',
template: `
<div class="p-4 rounded-md bg-red-50" [ngClass]="class">
<div class="flex">
<div class="shrink-0">
<svg
class="w-5 h-5 text-red-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true">
<path
fill-rule="evenodd"
clip-rule="evenodd"
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" />
</svg>
</div>
<div class="ml-3">
<h3 *ngIf="message" class="text-sm font-medium text-red-800">
{{ message }}
</h3>
<div *ngIf="errors.length" class="mt-2 text-sm text-red-700">
<ul role="list" class="pl-5 space-y-1 list-disc">
<li *ngFor="let error of errors">{{ error }}</li>
</ul>
<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">
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">

<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">
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg
class="w-5 h-5 text-red-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true">
<path
fill-rule="evenodd"
clip-rule="evenodd"
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" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<h3 class="text-sm font-medium text-red-800">{{ message }}</h3>
<div *ngIf="errors.length" class="mt-2 text-sm text-red-700">
<ul role="list" class="pl-5 space-y-1 list-disc">
<li *ngFor="let error of errors">{{ error }}</li>
</ul>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<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">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
</svg>
</button>
</div>
</div>
</div>
</div>

</div>
</div>
`,
animations: [
trigger('showHideNotification', [
transition('void => *', [
style({ transform: "translateX(0.5rem)", opacity: 0 }),
animate(300, style({ transform: "translateX(0)", opacity: 1 }))
]),
transition('* => void', [
animate(100, style({ opacity: 0 }))
])
]),
],
})
export class ErrorComponent {
@Input() class!: string;

@Input('isOpen') showAlert!: boolean;

@Input() message!: string;

@Output() toggleShowAlert: EventEmitter<boolean> = new EventEmitter<boolean>();

toggle(){
setTimeout(() => {
this.toggleShowAlert.emit(false);
}, 100);
}
@Input() errors: string[] = [];
}
4 changes: 2 additions & 2 deletions src/app/shared/components/alert/success.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from
<p class="mt-1 text-sm text-gray-500">{{ description }}</p>
</div>
<div class="ml-4 flex flex-shrink-0">
<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">
<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">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
Expand Down Expand Up @@ -60,6 +60,6 @@ export class SuccessComponent {
toggle(){
setTimeout(() => {
this.toggleShowAlert.emit(false);
}, 2000);
}, 100);
}
}