wip

application/angular/src/app/app.module.ts

@@ -1,4 +1,6 @@
 import { NgModule } from '@angular/core';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatTableModule } from '@angular/material/table';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { HttpClientModule } from '@angular/common/http';
@@ -8,7 +10,7 @@ import { BoardGameListComponent } from './boardgame/boardgame-list/boardgame-lis
 
 @NgModule({
   declarations: [AppComponent, BoardGameListComponent],
-  imports: [BrowserModule, HttpClientModule],
+  imports: [BrowserModule, HttpClientModule, MatTableModule, MatChipsModule],
   providers: [provideAnimationsAsync()],
   bootstrap: [AppComponent],
 })

application/angular/src/app/boardgame/boardgame-list/boardgame-list.component.html

@@ -1,18 +1,42 @@
-<table>
-  <thead>
-    <tr>
-      <th>ID</th>
-      <th>Name</th>
-      <th>Release Year</th>
-      <th>Categories</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let game of boardGames">
-      <td>{{ game.id }}</td>
-      <td>{{ game.name }}</td>
-      <td>{{ game.releaseYear }}</td>
-      <td>{{ game.categories.join(", ") }}</td>
-    </tr>
-  </tbody>
-</table>
+<mat-table [dataSource]="boardGames">
+  <!-- ID Column -->
+  <ng-container matColumnDef="id">
+    <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
+    <mat-cell *matCellDef="let game">{{ game.id }}</mat-cell>
+  </ng-container>
+
+  <!-- Image Column -->
+  <ng-container matColumnDef="image">
+    <mat-header-cell *matHeaderCellDef>Image</mat-header-cell>
+    <mat-cell *matCellDef="let game">
+      <img [src]="'assets/images/' + game.id + '.png'" alt="{{ game.name }}" />
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let game">{{ game.name }}</mat-cell>
+  </ng-container>
+
+  <!-- Release Year Column -->
+  <ng-container matColumnDef="releaseYear">
+    <mat-header-cell *matHeaderCellDef>Release Year</mat-header-cell>
+    <mat-cell *matCellDef="let game">{{ game.releaseYear }}</mat-cell>
+  </ng-container>
+
+  <!-- Categories Column -->
+  <ng-container matColumnDef="categories">
+    <mat-header-cell *matHeaderCellDef>Categories</mat-header-cell>
+    <mat-cell *matCellDef="let game">
+      <mat-chip-set>
+        <mat-chip *ngFor="let category of game.categories">{{
+          category
+        }}</mat-chip>
+      </mat-chip-set>
+    </mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

application/angular/src/app/boardgame/boardgame-list/boardgame-list.component.ts

@@ -25,4 +25,8 @@ export class BoardGameListComponent implements OnInit {
       }
     );
   }
+
+  get displayedColumns() {
+    return ['id', 'image', 'name', 'releaseYear', 'categories'];
+  }
 }

application/angular/src/app/boardgame/boardgame-list/boardgame-list.scss

@@ -0,0 +1,12 @@
+.mat-mdc-chip-set {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.mat-mdc-chip {
+  margin: 2px;
+}
+
+.mat-column-categories {
+  flex: 0 0 250px; /* Adjust this value based on your needs */
+}

application/backend/pom.xml → application/common-backend/pom.xml

@@ -3,7 +3,7 @@
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
     <modelVersion>4.0.0</modelVersion>
 
-    <artifactId>backend</artifactId>
+    <artifactId>common-backend</artifactId>
 
     <parent>
         <groupId>fr.sciam.backtofront</groupId>

application/javafx/pom.xml

@@ -12,11 +12,15 @@
     <artifactId>javafx</artifactId>
     <name>JavaFX</name>
 
+    <properties>
+        <quarkusfx.version>0.4.2</quarkusfx.version>
+    </properties>
+
     <dependencies>
         <dependency>
             <groupId>io.quarkiverse.fx</groupId>
             <artifactId>quarkus-fx</artifactId>
-            <version>0.4.2</version>
+            <version>${quarkusfx.version}</version>
         </dependency>
         <dependency>
             <groupId>org.projectlombok</groupId>
@@ -25,7 +29,7 @@
         </dependency>
         <dependency>
             <groupId>fr.sciam.backtofront</groupId>
-            <artifactId>backend</artifactId>
+            <artifactId>common-backend</artifactId>
             <version>${project.version}</version>
         </dependency>
         <dependency>

application/pom.xml

@@ -13,7 +13,7 @@
     <description>Projet multi-modules avec une partie commune et 4 parties spécifiques</description>
 
     <modules>
-        <module>backend</module>
+        <module>common-backend</module>
         <module>javafx</module>
         <module>vaadin</module>
         <module>jsf</module>

slides/src/main/asciidoc/parts/intro.adoc

@@ -3,4 +3,41 @@
 
 Hello
 
+= Application Structure Diagram
 
+This diagram illustrates the structure of our application, including the common backend, specific backends, corresponding frontends, the JavaFX application, and the Angular application.
+
+[plantuml]
+....
+@startuml
+
+package "Backend" {
+  [common-backend]
+  [jsf-backend]
+  [htmx-backend]
+  [vaadin-backend]
+}
+
+package "Frontend" {
+  [jsf-frontend]
+  [htmx-frontend]
+  [vaadin-frontend]
+  [angular-frontend]
+}
+
+[javafx-app]
+
+[common-backend] <|-- [jsf-backend]
+[common-backend] <|-- [htmx-backend]
+[common-backend] <|-- [vaadin-backend]
+
+[jsf-backend] <-- [jsf-frontend] : consumes
+[htmx-backend] <-- [htmx-frontend] : consumes
+[vaadin-backend] <-- [vaadin-frontend] : consumes
+[common-backend] <-- [angular-frontend] : consumes
+
+[common-backend] <-- [javafx-app] : uses
+
+
+@enduml
+....