Taobin-Recipe-Manager/client/src/app/core/department/department.component.ts

import { Component } from "@angular/core";
import { CommonModule, NgOptimizedImage } from "@angular/common";
import { Router } from "@angular/router";
import { UserService } from "../services/user.service";
import { UserPermissions } from "../auth/userPermissions";
import { NotFoundHandler } from "src/app/shared/helpers/notFoundHandler";
import { AsyncStorage } from "src/app/shared/helpers/asyncStorage";
import { getCountryMapSwitcher } from "src/app/shared/helpers/recipe";

@Component({
  standalone: true,
  imports: [CommonModule, NgOptimizedImage],
  template: `
    <div
      class="flex flex-row sm:flex-col gap-5 items-center justify-center h-screen bg-[#EAE6E1]"
    >
      <h1 class="font-bold text-amber-950 text-3xl hidden sm:block">
        Select Product
      </h1>
      <div
        class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5"
      >
        <button
          *ngFor="let country of countries"
          class="transition-transform duration-300 ease-in-out transform shadow-lg hover:scale-110 hover:shadow-xl"
        >
          <img
            ngSrc="{{ country.img }}"
            alt="{{ country.id }}"
            width="200"
            height="225"
            priority="true"
            (click)="onClick(country.id)"
            *ngIf="acccessibleCountries.includes(country.id)"
          />
        </button>
      </div>
      <div
        class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5"
      >
        <button
          *ngFor="let alpha of alphas"
          class="transition-transform duration-300 ease-in-out transform hover:scale-110 hover:shadow-xl"
        >
          <img
            ngSrc="{{ alpha.img }}"
            alt="{{ alpha.id }}"
            width="200"
            height="225"
            priority="true"
            (click)="onClick(alpha.id)"
            *ngIf="acccessibleCountries.includes(alpha.id)"
          />
        </button>
      </div>
    </div>
  `,
})
export class DepartmentComponent {
  acccessibleCountries: string[] = [];

  // top row country
  countries: { id: string; img: string }[] = [
    {
      id: "tha",
      img: "assets/departments/tha_plate.png",
    },
    {
      id: "mys",
      img: "assets/departments/mys_plate.png",
    },
    {
      id: "aus",
      img: "assets/departments/aus_plate.png",
    },
    // add new country here!
    {
      id: "sgp",
      img: "assets/departments/sgp_plate.png",
    },
    {
      id: "counter",
      img: "assets/departments/counter01_plate.png",
    },
  ];

  // bottom row country
  alphas: { id: string; img: string }[] = [
    {
      id: "alpha-3",
      img: "assets/departments/alpha-3.png",
    },
    {
      id: "cocktail",
      img: "assets/departments/cocktail_tha.png",
    },
  ];

  //
  notfoundHandler = new NotFoundHandler();

  constructor(
    private router: Router,
    private _userService: UserService,
  ) {
    let perms = _userService.getCurrentUser()!.permissions;
    console.log("GainAccesses", perms);

    for (let perm of perms) {
      switch (perm) {
        case UserPermissions.THAI_PERMISSION:
          this.acccessibleCountries.push("tha");
          break;
        case UserPermissions.MALAY_PERMISSION:
          this.acccessibleCountries.push("mys");
          break;
        case UserPermissions.AUS_PERMISSION:
          this.acccessibleCountries.push("aus");
          break;
        case UserPermissions.ALPHA3_PERMISSION:
          this.acccessibleCountries.push("alpha-3");
          break;
        case UserPermissions.SINGAPORE_PERMISSION:
          this.acccessibleCountries.push("sgp");
          break;
        case UserPermissions.COUNTER_PERMISSION:
          this.acccessibleCountries.push("counter");
          break;
        case UserPermissions.DUBAI_PERMISSION:
          this.acccessibleCountries.push("dubai");
          break;
        case UserPermissions.COCKTAIL_PERMISSION:
          this.acccessibleCountries.push("cocktail");
          break;
        default:
          break;
      }
    }

    console.log("OK", this.acccessibleCountries);
  }

  onClick(id: string) {
    // add handler for redirect
    this.notfoundHandler.handleSwitchCountry(
      id,
      async () => {
        // set country
        await AsyncStorage.setItem(
          "currentRecipeCountry",
          getCountryMapSwitcher(id),
        );
        // set filename, don't know which file was a target so use default
        await AsyncStorage.setItem("currentRecipeFile", "default");
      },
      async () => {
        // set country to `tha`
        await AsyncStorage.setItem("currentRecipeCountry", "Thailand");
        // set filename, don't know which file was a target so use default
        await AsyncStorage.setItem("currentRecipeFile", "default");
        // safely return to recipes
      },
    );
    void this.router.navigate([`/${id}/recipes`]);
  }
}