From 1c5ebea70f8185bcc2cdb178c0e56ccfb6550c76 Mon Sep 17 00:00:00 2001
From: adityachandelgit <>
Date: Tue, 15 Apr 2025 15:09:37 -0600
Subject: [PATCH] Display Git Version in Angular UI via Build-Time Injection

---
 .github/workflows/docker-build-publish.yml    |  1 +
 Dockerfile                                    |  3 +
 .../layout-menu/app.menu.component.html       | 66 ++++++++++++-------
 .../layout-menu/app.menu.component.ts         | 11 ++++
 booklore-ui/src/environments/version.ts       |  1 +
 5 files changed, 58 insertions(+), 24 deletions(-)
 create mode 100644 booklore-ui/src/environments/version.ts

diff --git a/.github/workflows/docker-build-publish.yml b/.github/workflows/docker-build-publish.yml
index 9ace62357..b6fd82f10 100644
--- a/.github/workflows/docker-build-publish.yml
+++ b/.github/workflows/docker-build-publish.yml
@@ -100,6 +100,7 @@ jobs:
           docker buildx create --use
           docker buildx build \
             --platform linux/amd64,linux/arm64 \
+            --build-arg UI_VERSION=${{ env.image_tag }} \
             --tag ghcr.io/${{ github.actor }}/booklore-app:${{ env.image_tag }} \
             --push .
 
diff --git a/Dockerfile b/Dockerfile
index a475db088..59991d7df 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,6 +7,9 @@ COPY ./booklore-ui/package.json ./booklore-ui/package-lock.json ./
 RUN npm install --force
 COPY ./booklore-ui /angular-app/
 
+ARG UI_VERSION=development
+RUN echo "export const version = '${UI_VERSION}';" > /angular-app/src/environments/version.ts
+
 RUN npm run build --configuration=production
 
 # Stage 2: Build the Spring Boot app with Gradle
diff --git a/booklore-ui/src/app/layout/component/layout-menu/app.menu.component.html b/booklore-ui/src/app/layout/component/layout-menu/app.menu.component.html
index e8011363b..634e6c216 100644
--- a/booklore-ui/src/app/layout/component/layout-menu/app.menu.component.html
+++ b/booklore-ui/src/app/layout/component/layout-menu/app.menu.component.html
@@ -1,26 +1,44 @@
-<ul class="layout-menu">
-  <ng-container *ngIf="homeMenu$ | async as homeMenu">
-    <ng-container *ngFor="let item of homeMenu; let i = index;">
-      <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
-      <li *ngIf="item.separator" class="menu-separator"></li>
-    </ng-container>
-  </ng-container>
-</ul>
+<div class="flex flex-col h-full">
+  <div>
+    <ul class="layout-menu">
+      <ng-container *ngIf="homeMenu$ | async as homeMenu">
+        <ng-container *ngFor="let item of homeMenu; let i = index;">
+          <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
+          <li *ngIf="item.separator" class="menu-separator"></li>
+        </ng-container>
+      </ng-container>
+    </ul>
+
+    <ul class="layout-menu">
+      <ng-container *ngIf="libraryMenu$ | async as libraryMenu">
+        <ng-container *ngFor="let item of libraryMenu; let i = index;">
+          <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
+          <li *ngIf="item.separator" class="menu-separator"></li>
+        </ng-container>
+      </ng-container>
+    </ul>
+
+    <ul class="layout-menu">
+      <ng-container *ngIf="shelfMenu$ | async as shelfMenu">
+        <ng-container *ngFor="let item of shelfMenu; let i = index;">
+          <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
+          <li *ngIf="item.separator" class="menu-separator"></li>
+        </ng-container>
+      </ng-container>
+    </ul>
+  </div>
+
+  <p style="margin-top: auto;" class="p-4 text-center w-full">
+    <a
+      [href]="getVersionUrl(version)"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-gray-300 hover:underline hover:text-gray-500">
+      Version: {{ version }}
+    </a>
+  </p>
+</div>
+
+
 
-<ul class="layout-menu">
-  <ng-container *ngIf="libraryMenu$ | async as libraryMenu">
-    <ng-container *ngFor="let item of libraryMenu; let i = index;">
-      <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
-      <li *ngIf="item.separator" class="menu-separator"></li>
-    </ng-container>
-  </ng-container>
-</ul>
 
-<ul class="layout-menu">
-  <ng-container *ngIf="shelfMenu$ | async as shelfMenu">
-    <ng-container *ngFor="let item of shelfMenu; let i = index;">
-      <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
-      <li *ngIf="item.separator" class="menu-separator"></li>
-    </ng-container>
-  </ng-container>
-</ul>
diff --git a/booklore-ui/src/app/layout/component/layout-menu/app.menu.component.ts b/booklore-ui/src/app/layout/component/layout-menu/app.menu.component.ts
index 150dea48e..7a6e4136a 100644
--- a/booklore-ui/src/app/layout/component/layout-menu/app.menu.component.ts
+++ b/booklore-ui/src/app/layout/component/layout-menu/app.menu.component.ts
@@ -8,6 +8,7 @@ import {map} from 'rxjs/operators';
 import {ShelfService} from '../../../book/service/shelf.service';
 import {BookService} from '../../../book/service/book.service';
 import {LibraryShelfMenuService} from '../../../book/service/library-shelf-menu.service';
+import {version} from '../../../../environments/version';
 
 @Component({
   selector: 'app-menu',
@@ -24,6 +25,8 @@ export class AppMenuComponent implements OnInit {
   private bookService = inject(BookService);
   private libraryShelfMenuService = inject(LibraryShelfMenuService);
 
+  protected readonly version = version;
+
 
   ngOnInit(): void {
     this.libraryMenu$ = this.libraryService.libraryState$.pipe(
@@ -86,4 +89,12 @@ export class AppMenuComponent implements OnInit {
     );
   }
 
+  getVersionUrl(version: string): string {
+    if (version.startsWith('v')) {
+      return `https://github.com/adityachandelgit/BookLore/releases/tag/${version}`;
+    } else {
+      return `https://github.com/adityachandelgit/BookLore/commit/${version}`;
+    }
+  }
+
 }
diff --git a/booklore-ui/src/environments/version.ts b/booklore-ui/src/environments/version.ts
new file mode 100644
index 000000000..daed4622c
--- /dev/null
+++ b/booklore-ui/src/environments/version.ts
@@ -0,0 +1 @@
+export const version = 'v0.0.0';