7 affichage affichant les id des calculs à demander

application/frontend/angular.json

@@ -43,7 +43,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
             ],
             "scripts": []
           },
@@ -103,7 +104,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
             ],
             "scripts": []
           }
@@ -112,6 +114,6 @@
     }
   },
   "cli": {
-    "analytics": false
+    "analytics": "f28b05e5-cf70-4172-80b1-f6858d7f061a"
   }
 }

application/frontend/package.json

@@ -17,6 +17,7 @@
     "@angular/forms": "^17.3.0",
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
+    "@angular/material": "^17.3.0",
     "@angular/router": "^17.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

application/frontend/src/app/app.component.html

@@ -1 +1,2 @@
 <app-calculator></app-calculator>
+<request-list></request-list>

application/frontend/src/app/app.component.scss

@@ -0,0 +1,4 @@
+:host{
+    display: flex;
+    gap: 7rem;
+}

application/frontend/src/app/app.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { CalculatorComponent } from './features/calculator/calculator.component';
+import { RequestListComponent } from './features/requestList/requestList.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet,CalculatorComponent],
+  imports: [RouterOutlet,CalculatorComponent, RequestListComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

application/frontend/src/app/app.config.ts

@@ -1,8 +1,11 @@
-import { ApplicationConfig } from '@angular/core';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [
+    provideRouter(routes),
+    importProvidersFrom([BrowserAnimationsModule])
+  ]
 };

application/frontend/src/app/features/requestList/Request.ts

@@ -0,0 +1,14 @@
+export class QueryRequest{
+  calcul: string;
+  result: string = "-------";
+  status: QueryStatus = QueryStatus.PENDING;
+  UUID: string = "Default-UUID";
+
+  constructor(calcul: string){
+    this.calcul = calcul;
+  }
+}
+export enum QueryStatus {
+    PENDING = 'PENDING',
+    DONE = 'DONE'
+}

application/frontend/src/app/features/requestList/requestList.component.html

@@ -0,0 +1,43 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+    <!--- Note that these columns can be defined in any order.
+          The actual rendered columns are set as a property on the row definition" -->
+
+    <!-- Position Column -->
+    <ng-container matColumnDef="calcul">
+      <th mat-header-cell *matHeaderCellDef> Calcul </th>
+      <td mat-cell *matCellDef="let element"> {{element.calcul}} </td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="result">
+      <th mat-header-cell *matHeaderCellDef> Result </th>
+      <td mat-cell *matCellDef="let element" > 
+        {{element.result}}
+      </td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef> Status </th>
+      <td mat-cell *matCellDef="let element" > 
+          <mat-icon>{{element.status == "DONE" ? 'check_circle' : 'hourglass_empty'}}</mat-icon>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="action">
+      <th mat-header-cell *matHeaderCellDef> Action </th>
+      <td mat-cell *matCellDef="let element">
+        @if (element.status === 'PENDING') {
+          <button mat-flat-button (click)="requestResult(element.calcul)">Request result</button>
+        }
+        <button mat-icon-button (click)="deleteRequest(element)" ><mat-icon>delete</mat-icon></button>
+        <button mat-icon-button aria-label="Copy" (click)="openSnackBar(element.UUID,'OK')">
+          <mat-icon>content_copy</mat-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>

application/frontend/src/app/features/requestList/requestList.component.scss

@@ -0,0 +1,5 @@
+table {
+    width: 100%;
+  }
+
+

application/frontend/src/app/features/requestList/requestList.component.ts

@@ -0,0 +1,48 @@
+import { Component, inject } from '@angular/core';
+import { MatTableModule } from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { QueryRequest } from './Request';
+
+const ELEMENT_DATA: QueryRequest[] = [
+  new QueryRequest("1+3"),
+  new QueryRequest("1+3"),
+  new QueryRequest("1+4"),
+  new QueryRequest("1+3"),
+  new QueryRequest("3+3"),
+  new QueryRequest("1+3"),
+  new QueryRequest("1+3"),
+  new QueryRequest("1+3"),
+  new QueryRequest("1+3"),
+  new QueryRequest("1+3"),
+  new QueryRequest("1+3")
+];
+
+@Component({
+  selector: 'request-list',
+  standalone: true,
+  styleUrls: ['requestList.component.scss'],
+  templateUrl: 'requestList.component.html',
+  imports: [MatTableModule, MatButtonModule, MatIcon],
+})  
+
+export class RequestListComponent {
+
+  private _snackBar = inject(MatSnackBar);
+
+  displayedColumns: string[] = ['calcul','result', 'status', 'action'];
+  dataSource = ELEMENT_DATA;
+
+  openSnackBar(message: string, action: string) {
+    this._snackBar.open(message + " copied in clipboard", action);
+  }
+
+  requestResult(request: string) {
+    this._snackBar.open(request + " has been sent", "OK");
+  }
+
+  deleteRequest(request : QueryRequest){
+    this.dataSource = this.dataSource.filter(item => item !== request);
+  }
+}

application/frontend/src/styles.scss

@@ -1,3 +1,6 @@
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+
+
 /* You can add global styles to this file, and also import other style files */
 html,
 body {