💄 creation du component pour gerer les erreurs

Author: mckenziearts

src/app/shared/components/buttons/primary/primary.component.html

@@ -1,8 +1,14 @@
 <button 
   [type]="type"
-  [disabled]="disabled"
+  [disabled]="(loading$ | async)"
   [ngClass]="class"
   class="inline-flex items-center font-mono px-4 py-2 text-sm font-medium uppercase tracking-[1.25px] text-white bg-primary-600 border border-transparent rounded-md shadow-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-25 transition ease-in-out duration-150"
 >
+  <span *ngIf="(loading$ | async)" class="absolute inset-y-0 left-0 flex items-center pl-3">
+    <svg class="w-5 h-5 mr-3 -ml-1 text-white animate-spin" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
+    </svg>
+  </span>
   <ng-content></ng-content>
 </button>

src/app/shared/components/buttons/primary/primary.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'cosna-button-primary',
@@ -8,8 +9,8 @@ export class PrimaryComponent {
 
   @Input() type: string = 'button';
 
-  @Input() disabled: boolean = false;
+  @Input() loading$!: Observable<boolean>;
 
-  @Input() class: string = '';
+  @Input() class!: string;
 
 }

src/app/shared/components/error/error.component.html

@@ -0,0 +1,17 @@
+<div class="p-4 rounded-md bg-red-50" [ngClass]="class">
+  <div class="flex">
+    <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">
+      <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>
+    </div>
+  </div>
+</div>

src/app/shared/components/error/error.component.scss

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'cosna-errors',
+  templateUrl: './error.component.html',
+  styleUrls: ['./error.component.scss']
+})
+export class ErrorComponent implements OnInit {
+  @Input() class!: string;
+  @Input() message!: string;
+  @Input() errors: string[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}