Feature/integration

angular.json

@@ -1,5 +1,8 @@
 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "cli": {
+ "analytics": "28bf0e25-7262-4cd2-8008-6af8c18cc349"
+ },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {

package.json

@@ -14,6 +14,7 @@
  "private": true,
  "dependencies": {
  "@angular/animations": "~13.3.0",
+ "@angular/cdk": "^13.3.9",
  "@angular/common": "~13.3.0",
  "@angular/compiler": "~13.3.0",
  "@angular/core": "~13.3.0",

src/app/core/components/network-status/network-status.component.ts

@@ -40,7 +40,9 @@ import { fromEvent, Observable, Subscription } from 'rxjs';
  stroke-linejoin="round" />
  </svg>
  </div>
- <div class="ml-3 w-0 flex-1 pt-0.5">
+ <div
+ *ngIf="networkStatus === 'online'"
+ class="ml-3 w-0 flex-1 pt-0.5">
  <p class="text-sm font-medium text-slate-900 capitalize">
  {{ networkStatus }}
  </p>

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

@@ -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">
@@ -168,4 +168,6 @@ <h3 class="text-lg font-medium text-slate-900 dark:text-white">
 
  </div>
  </section>
-</div>
+</div>
+
+<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

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
-import { Title } from '@angular/platform-browser';
 
 @Component({
  templateUrl: './dashboard.component.html',
 })
 export class DashboardComponent {
- constructor(private title: Title) {}
+ isOpen: boolean = false;
+
+ toggle(value: boolean) {
+ this.isOpen = value;
+ }
 }

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

@@ -36,4 +36,4 @@ export class ErrorComponent {
  @Input() class!: string;
  @Input() message!: string;
  @Input() errors: string[] = [];
-}
+}

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

@@ -28,4 +28,4 @@ import { Component, Input } from '@angular/core';
 export class SuccessComponent {
  @Input() class!: string;
  @Input() message!: string;
-}
+}

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SimpleNotificationComponent } from './simple-notification.component';
+
+const COMPONENTS = [SimpleNotificationComponent];
+
+@NgModule({
+ declarations: [COMPONENTS],
+ imports: [CommonModule],
+ exports: [COMPONENTS],
+})
+export class NotificationsModule {}

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

@@ -0,0 +1,135 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+type NotificationType = 'success' | 'error' | 'info' | 'warning';
+
+@Component({
+ selector: 'simple-notification',
+ template: `
+ <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">
+ <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-white dark:bg-gray-800 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
+ *ngIf="type === 'success'"
+ 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">
+ <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" />
+ </svg>
+ <svg
+ *ngIf="type === 'error'"
+ class="w-6 h-6 text-red-400"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor">
+ <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" />
+ </svg>
+ <svg
+ *ngIf="type === 'info'"
+ class="w-6 h-6 text-blue-400"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor">
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ 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" />
+ </svg>
+ <svg
+ *ngIf="type === 'warning'"
+ class="w-6 h-6 text-yellow-400"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor">
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ 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" />
+ </svg>
+ </div>
+ <div class="ml-3 w-0 flex-1 pt-0.5">
+ <p
+ *ngIf="title"
+ class="text-sm font-medium text-slate-900 dark:text-white">
+ {{ title }}
+ </p>
+ <p
+ [ngClass]="{ 'mt-1': title }"
+ class="text-sm text-slate-500 dark:text-slate-400">
+ {{ message }}
+ </p>
+ </div>
+ <div class="ml-4 flex flex-shrink-0">
+ <button
+ (click)="toggle()"
+ type="button"
+ 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">
+ <span class="sr-only" i18n>Fermer</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 SimpleNotificationComponent {
+ @Input('isOpen') showNotification!: boolean;
+ @Input() class!: string;
+ @Input() title!: string | null;
+ @Input() message!: string;
+ @Input() type: NotificationType = 'success';
+
+ @Output() toggleShowNotification: EventEmitter<boolean> =
+ new EventEmitter<boolean>();
+
+ toggle() {
+ setTimeout(() => {
+ this.toggleShowNotification.emit(false);
+ }, 100);
+ }
+}

src/app/shared/shared.module.ts

@@ -13,6 +13,7 @@ import { TextareaModule } from './components/textarea/textarea.module';
 import { ClickOutsideDirective } from './directives/click-outside.directive';
 import { StatusColorPipe } from './pipes/status-color.pipe';
 import { StatusValuePipe } from './pipes/status-value.pipe';
+import { NotificationsModule } from './components/notifications/notifications.module';
 
 const DECLARATIONS = [ClickOutsideDirective, StatusColorPipe, StatusValuePipe];
 const MODULES = [
@@ -24,6 +25,7 @@ const MODULES = [
  SkeletonModule,
  SnippetModule,
  TextareaModule,
+ NotificationsModule
 ];
 
 @NgModule({