Select Environment (UAT, PROD)

src/app/portal-manage/home/home.component.html

@@ -354,4 +354,35 @@
       </div>
     </div> -->
   </div>
+
+  <!-- Environment Selection Modal -->
+  <div *ngIf="isEnvModalVisible" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center backdrop-blur-sm">
+    <div class="bg-white rounded-2xl shadow-xl p-8 w-full max-w-md transform transition-all duration-300 scale-100 animate-fade-in-up">
+      <h2 class="text-2xl font-bold mb-2 text-gray-800">เลือก Environment</h2>
+      <p class="text-gray-600 mb-6">สำหรับแอปพลิเคชัน <span class="font-semibold text-indigo-600">{{ selectedApp?.displayName }}</span></p>
+
+      <div class="space-y-4">
+        <label class="flex items-center p-4 border-2 rounded-lg cursor-pointer transition-all duration-200" [class.border-blue-500]="selectedEnvironment === 'uat'" [class.bg-blue-50]="selectedEnvironment === 'uat'">
+          <input type="radio" name="environment" value="uat" [(ngModel)]="selectedEnvironment" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300">
+          <div class="ml-4">
+            <span class="text-lg font-semibold text-gray-800">UAT</span>
+            <p class="text-sm text-gray-500">User Acceptance Testing environment</p>
+          </div>
+        </label>
+        <label class="flex items-center p-4 border-2 rounded-lg cursor-pointer transition-all duration-200" [class.border-red-500]="selectedEnvironment === 'prod'" [class.bg-red-50]="selectedEnvironment === 'prod'">
+          <input type="radio" name="environment" value="prod" [(ngModel)]="selectedEnvironment" class="h-5 w-5 text-red-600 focus:ring-red-500 border-gray-300">
+          <div class="ml-4">
+            <span class="text-lg font-semibold text-gray-800">PROD</span>
+            <p class="text-sm text-gray-500">Production environment</p>
+          </div>
+        </label>
+      </div>
+
+      <div class="mt-8 flex justify-end space-x-4">
+        <button (click)="cancelNavigation()" class="px-6 py-3 rounded-lg text-gray-700 bg-blue-600 hover:bg-blue-700 font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">ยกเลิก</button>
+        <button (click)="confirmNavigation()" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-sm font-semibold rounded-xl group-hover:from-indigo-600 group-hover:to-purple-700 transition-all duration-300 transform group-hover:scale-105">ยืนยัน</button>
+      </div>
+    </div>
+  </div>
+
 </div>

src/app/portal-manage/home/home.component.ts

@@ -8,6 +8,7 @@ import { MenuPermissionService } from '../services/menu-permission.service';
 import { UserRoleService } from '../services/user-role.service';
 import { EmployeeAuthService, Employee } from '../services/employee-auth.service';
 import { EmployeeFromJwt } from '../models/jwt-token.model';
+import { FormsModule } from '@angular/forms';
 
 interface AppModule {
   id: string;
@@ -54,7 +55,7 @@ interface UserInfo {
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.scss'],
     standalone: true,
-    imports: [RouterModule, CommonModule]
+    imports: [RouterModule, CommonModule, FormsModule]
 })
 export class HomeComponent implements OnInit {
   accessibleApps$: Observable<AppModule[]>;
@@ -63,6 +64,10 @@ export class HomeComponent implements OnInit {
   currentEmployee$: Observable<Employee | null>;
   currentJwtEmployee$: Observable<EmployeeFromJwt | null>;
 
+  isEnvModalVisible = false;
+  selectedApp: AppModule | null = null;
+  selectedEnvironment: 'uat' | 'prod' = 'uat';
+
   constructor(
     private router: Router,
     private tokenService: TokenService,
@@ -360,10 +365,27 @@ export class HomeComponent implements OnInit {
   }
 
   navigateToApp(app: AppModule) {
-    // เนื่องจากทุก path ตอนนี้เริ่มด้วย /portal-manage แล้ว
-    this.tokenService.saveAppToken(app.name);
-    this.router.navigate([app.path]);
-    window.sessionStorage.setItem("module", app.name);
+    // this.tokenService.saveAppToken(app.name);
+    // this.router.navigate([app.path]);
+    // window.sessionStorage.setItem("module", app.name);
+    this.selectedApp = app;
+    this.isEnvModalVisible = true;
+  }
+
+  confirmNavigation() {
+    if (this.selectedApp) {
+      window.sessionStorage.setItem('environment', this.selectedEnvironment);
+      this.tokenService.saveAppToken(this.selectedApp.name);
+      this.router.navigate([this.selectedApp.path]);
+      window.sessionStorage.setItem("module", this.selectedApp.name);
+    }
+    this.cancelNavigation(); // Close modal and reset state
+  }
+
+  cancelNavigation() {
+    this.isEnvModalVisible = false;
+    this.selectedApp = null;
+    this.selectedEnvironment = 'uat'; // Reset to default
   }
 
   getAppCardClass(app: AppModule): string {