Merge pull request #180 from LeadOn/develop

5.2.0

Author: LeadOn

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "gameon-front",
-  "version": "5.1.2",
+  "version": "5.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -10,33 +10,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.6",
-    "@angular/cdk": "^19.2.9",
-    "@angular/common": "^19.2.6",
-    "@angular/compiler": "^19.2.6",
-    "@angular/core": "^19.2.6",
-    "@angular/forms": "^19.2.6",
-    "@angular/platform-browser": "^19.2.6",
-    "@angular/platform-browser-dynamic": "^19.2.6",
-    "@angular/router": "^19.2.6",
+    "@angular/animations": "^19.2.7",
+    "@angular/cdk": "^19.2.10",
+    "@angular/common": "^19.2.7",
+    "@angular/compiler": "^19.2.7",
+    "@angular/core": "^19.2.7",
+    "@angular/forms": "^19.2.7",
+    "@angular/platform-browser": "^19.2.7",
+    "@angular/platform-browser-dynamic": "^19.2.7",
+    "@angular/router": "^19.2.7",
     "@fortawesome/angular-fontawesome": "^1.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@ngrx/store": "^19.1.0",
-    "@tailwindcss/postcss": "^4.1.3",
-    "chart.js": "^4.4.7",
-    "flowbite": "^3.0.0-beta.1",
+    "@tailwindcss/postcss": "^4.1.4",
+    "chart.js": "^4.4.9",
+    "flowbite": "^3.1.2",
     "keycloak-angular": "^19.0.2",
     "keycloak-js": "^26.0.7",
     "postcss": "^8.5.3",
-    "rxjs": "~7.8.1",
+    "rxjs": "^7.8.2",
     "tailwindcss-animated": "^2.0.0",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.7",
-    "@angular/cli": "^19.2.7",
-    "@angular/compiler-cli": "^19.2.6",
+    "@angular-devkit/build-angular": "^19.2.8",
+    "@angular/cli": "^19.2.8",
+    "@angular/compiler-cli": "^19.2.7",
     "@types/jasmine": "~5.1.0",
     "autoprefixer": "^10.4.20",
     "jasmine-core": "~5.1.0",
@@ -47,7 +47,7 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.1.3",
+    "tailwindcss": "^4.1.4",
     "typescript": "~5.7.2"
   }
 }

package.json

@@ -1,6 +1,47 @@
-<div class="bg-bgLightDarker dark:bg-bgDarkDarker h-screen lg:flex">
-  <nav class="bg-bgLight dark:bg-bgDark fixed bottom-0 left-0 z-50 h-16 w-full">
-    <div class="mx-auto grid h-full max-w-lg grid-cols-4 font-medium">
+<div class="bg-bgLightDarker dark:bg-bgDarkDarker flex h-screen flex-col">
+  <header
+    class="bg-bgLight dark:bg-bgDark flex h-16 min-h-16 w-full items-center justify-between self-center px-4"
+  >
+    <a
+      routerLink="/admin"
+      class="text-primaryDarker flex items-center justify-center self-center text-xl font-bold"
+      ><img
+        class="h-8 w-8"
+        src="assets/img/gameon-logo.webp"
+        alt="GameOn!'s logo"
+      />
+      <span class="dark:text-primaryDark ml-2 flex flex-col"
+        ><span>GameOn!</span>
+        <span
+          class="border-frenchRed bg-frenchRed rounded-full border px-2 text-center text-sm font-normal text-white drop-shadow-lg"
+          >Admin</span
+        >
+      </span></a
+    >
+
+    <button type="button" (click)="toggleDarkMode()">
+      <fa-icon
+        [icon]="lightIcon"
+        *ngIf="darkMode()"
+        class="text-customYellow text-lg"
+      ></fa-icon>
+      <fa-icon
+        [icon]="darkIcon"
+        *ngIf="!darkMode()"
+        class="text-frenchBlue text-lg"
+      ></fa-icon>
+    </button>
+  </header>
+
+  <section
+    id="admin-content"
+    class="bg-bgLightDarker dark:bg-bgDarkDarker grow overflow-y-scroll py-4"
+  >
+    <router-outlet></router-outlet>
+  </section>
+
+  <nav class="bg-bgLight dark:bg-bgDark z-50 h-16 min-h-16 w-full pt-2">
+    <div class="mx-auto grid grid-cols-4 font-medium">
       <button
         routerLink="/admin"
         type="button"
@@ -33,6 +74,22 @@
         >
       </button>
 
+      <button
+        routerLink="/admin/changelog"
+        type="button"
+        class="group inline-flex cursor-pointer flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800"
+      >
+        <fa-icon
+          [icon]="changelogIcon"
+          class="text-primary dark:text-primaryDark hover:text-frenchBlue"
+        ></fa-icon>
+
+        <span
+          class="text-primary dark:text-primaryDark hover:text-frenchBlue dark:group-hover:text-frenchBlue text-sm"
+          >Changelog</span
+        >
+      </button>
+
       <button
         routerLink="/"
         type="button"
@@ -46,46 +103,4 @@
       </button>
     </div>
   </nav>
-
-  <div class="lg:flex lg:w-full lg:flex-col">
-    <header
-      class="bg-bgLight dark:bg-bgDark flex h-16 items-center justify-between self-center px-4 lg:w-full"
-    >
-      <a
-        routerLink="/admin"
-        class="text-primaryDarker flex items-center justify-center self-center text-xl font-bold"
-        ><img
-          class="h-8 w-8"
-          src="assets/img/gameon-logo.webp"
-          alt="GameOn!'s logo"
-        />
-        <span class="dark:text-primaryDark ml-2 flex flex-col"
-          ><span>GameOn!</span>
-          <span
-            class="border-frenchRed bg-frenchRed rounded-full border px-2 text-center text-sm font-normal text-white drop-shadow-lg"
-            >Admin</span
-          >
-        </span></a
-      >
-
-      <button type="button" (click)="toggleDarkMode()">
-        <fa-icon
-          [icon]="lightIcon"
-          *ngIf="darkMode()"
-          class="text-customYellow text-lg"
-        ></fa-icon>
-        <fa-icon
-          [icon]="darkIcon"
-          *ngIf="!darkMode()"
-          class="text-frenchBlue text-lg"
-        ></fa-icon>
-      </button>
-    </header>
-
-    <div
-      class="bg-bgLightDarker dark:bg-bgDarkDarker pb-24 lg:overflow-y-scroll lg:pb-0"
-    >
-      <router-outlet></router-outlet>
-    </div>
-  </div>
 </div>

src/app/admin/admin-layout.component.html

@@ -1,6 +1,7 @@
 import { Component, effect, HostBinding, OnInit, signal } from '@angular/core';
 import { environment } from '../../environments/environment';
 import {
+  faClock,
   faCog,
   faComputer,
   faHome,
@@ -42,6 +43,7 @@ export class AdminLayoutComponent {
   isLoggedIn = false;
   isAdmin = false;
   platformIcon = faComputer;
+  changelogIcon = faClock;
 
   logoutIcon = faRightFromBracket;
   generalIcon = faCog;

src/app/admin/admin-layout.component.ts

@@ -15,6 +15,9 @@ import { AdminPlatformsComponent } from './general/platforms/admin-platforms.com
 import { AdminPlatformEditComponent } from './general/platforms/edit/admin-platform-edit.component';
 import { AdminPlayersComponent } from './general/players/admin-players.component';
 import { AdminPlayerEditComponent } from './general/players/edit/admin-player-edit.component';
+import { AdminChangelogHomeComponent } from './changelog/admin-changelog-home.component';
+import { AdminChangelogEditComponent } from './changelog/edit/admin-changelog-edit.component';
+import { AdminChangelogCreateComponent } from './changelog/create/admin-changelog-create.component';
 
 const routes: Routes = [
   {
@@ -75,6 +78,18 @@ const routes: Routes = [
         path: 'general/players/edit/:id',
         component: AdminPlayerEditComponent,
       },
+      {
+        path: 'changelog',
+        component: AdminChangelogHomeComponent,
+      },
+      {
+        path: 'changelog/create',
+        component: AdminChangelogCreateComponent,
+      },
+      {
+        path: 'changelog/edit/:id',
+        component: AdminChangelogEditComponent,
+      },
     ],
   },
 ];

src/app/admin/admin-routing.module.ts

@@ -17,6 +17,9 @@ import { AdminPlatformsComponent } from './general/platforms/admin-platforms.com
 import { AdminPlatformEditComponent } from './general/platforms/edit/admin-platform-edit.component';
 import { AdminPlayersComponent } from './general/players/admin-players.component';
 import { AdminPlayerEditComponent } from './general/players/edit/admin-player-edit.component';
+import { AdminChangelogHomeComponent } from './changelog/admin-changelog-home.component';
+import { AdminChangelogEditComponent } from './changelog/edit/admin-changelog-edit.component';
+import { AdminChangelogCreateComponent } from './changelog/create/admin-changelog-create.component';
 
 @NgModule({
   declarations: [
@@ -34,6 +37,9 @@ import { AdminPlayerEditComponent } from './general/players/edit/admin-player-ed
     AdminTournamentsComponent,
     AdminCreateTournamentComponent,
     AdminEditTournamentComponent,
+    AdminChangelogHomeComponent,
+    AdminChangelogCreateComponent,
+    AdminChangelogEditComponent,
   ],
   imports: [
     CommonModule,

src/app/admin/admin.module.ts

@@ -0,0 +1,58 @@
+<section class="px-4 pt-4">
+  <app-loading-spinner *ngIf="loading == true"></app-loading-spinner>
+</section>
+
+<div class="animate-fade flex space-x-2 px-4" *ngIf="loading == false">
+  <span class="text-primary dark:text-primaryDark text-lg font-semibold"
+    >Changelog
+  </span>
+</div>
+
+<section
+  id="admin-home-changelog"
+  class="animate-fade mt-4 flex w-full flex-col space-y-2 space-x-2 px-4"
+  *ngIf="loading == false"
+>
+  <a
+    class="bg-customGreen animate-fade flex cursor-pointer flex-row justify-center space-x-2 rounded-full p-2 transition delay-50 ease-in-out hover:bg-green-800"
+    *ngIf="loading == false"
+    routerLink="/admin/changelog/create"
+  >
+    <div
+      class="bg-secondary flex w-8 flex-col items-center justify-center rounded-full"
+    >
+      +
+    </div>
+    <span class="text-white">Créer un changelog</span>
+  </a>
+
+  <div class="mt-4 overflow-x-auto" *ngIf="loading == false">
+    <table class="w-full text-left text-sm text-gray-500 dark:text-gray-300">
+      <thead class="text-center text-xs text-gray-700 dark:text-gray-400">
+        <tr>
+          <th scope="col" class="px-6 py-3">Version</th>
+          <th scope="col" class="px-6 py-3">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="text-center">
+        <tr
+          class="border-b odd:bg-white even:bg-gray-50 odd:dark:bg-gray-900 even:dark:bg-gray-800"
+          *ngFor="let changelog of changelogs"
+        >
+          <th
+            class="px-6 py-4 text-center font-medium whitespace-nowrap text-gray-900 dark:text-gray-300"
+          >
+            {{ changelog.version }}
+          </th>
+          <td class="px-6 py-4">
+            <fa-icon
+              [icon]="editIcon"
+              class="text-primary dark:text-primaryDark cursor-pointer text-xl"
+              [routerLink]="['/admin/changelog/edit', changelog.id]"
+            ></fa-icon>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>

src/app/admin/changelog/admin-changelog-home.component.css

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { AdminDashboard } from '../shared/classes/AdminDashboard';
+import {
+  faComputer,
+  faEdit,
+  faRankingStar,
+  faSoccerBall,
+  faTrophy,
+  faUserCircle,
+  faVideo,
+} from '@fortawesome/free-solid-svg-icons';
+import { GameOnChangelogService } from '../../shared/services/common/gameon-changelog.service';
+import { Changelog } from '../../shared/classes/common/Changelog';
+
+@Component({
+  selector: 'app-admin-changelog-home',
+  templateUrl: './admin-changelog-home.component.html',
+  styleUrls: ['./admin-changelog-home.component.css'],
+  standalone: false,
+})
+export class AdminChangelogHomeComponent implements OnInit {
+  loading = true;
+  platformIcon = faComputer;
+  playerIcon = faUserCircle;
+  soccerIcon = faSoccerBall;
+  hightlightIcon = faVideo;
+  seasonIcon = faRankingStar;
+  tournamentIcon = faTrophy;
+  editIcon = faEdit;
+
+  changelogs: Changelog[] = [];
+
+  constructor(private changelogService: GameOnChangelogService) {}
+
+  ngOnInit(): void {
+    this.changelogService.getAll().subscribe(
+      (data) => {
+        this.loading = false;
+        this.changelogs = data;
+      },
+      (err) => {
+        this.loading = false;
+        alert(
+          'Une erreur est survenue lors de la récupération des nouveautés.',
+        );
+        console.error(err);
+      },
+    );
+  }
+}