Enhance ApplicantsDialog by integrating game status fetching and updating card rendering logic. Introduced swarm configuration handling and improved person card rendering with tab support, ensuring a more dynamic user experience.

src/HSchool.Client/src/ui/applicantsDialog.ts

@@ -1,4 +1,5 @@
 import {
+  fetchGameStatus,
   fetchPerson,
   hireStaff,
   type PersonCard,
@@ -9,8 +10,7 @@ import { getLocale } from '../i18n/locale.ts';
 import { t, type MessageKey } from '../i18n/strings.ts';
 import { clear, el } from './dom.ts';
 import { Modal } from './modal.ts';
-import { formatPersonPlace } from './personCard.ts';
+import { formatPersonPlace, renderPersonCard, type PersonCardTab } from './personCard.ts';
-import { PersonCardHost } from './personCardHost.ts';
 import {
   actionError,
   fillSelect,
@@ -68,13 +68,20 @@ export class ApplicantsDialog {
   private sort: ApplicantSort = 'name';
   private dir: 'asc' | 'desc' = 'asc';
   private busy = false;
-  private readonly cardHost = new PersonCardHost();
+  private cardTab: PersonCardTab = 'overview';
+  private swarmConfigured = false;
   private painted: PersonCard | null = null;
 
   constructor(private readonly options: ApplicantsDialogOptions) {
     this.staffing = options.staffing;
     this.selectedId = options.selectedId ?? null;
-    this.cardHost.attach(options.schoolId);
+    void fetchGameStatus()
+      .then((status) => {
+        this.swarmConfigured = status.swarmUiConfigured;
+      })
+      .catch(() => {
+        this.swarmConfigured = false;
+      });
     this.error.hidden = true;
     this.ageMinInput.min = '0';
     this.ageMaxInput.min = '0';
@@ -310,12 +317,20 @@ export class ApplicantsDialog {
       return;
     }
 
-    this.cardHost.paint(
+    clear(this.card);
-      this.card,
+    renderPersonCard(this.card, card, {
-      card,
+      onRelative: (id) => this.openRelative(id),
-      (id) => this.openRelative(id),
+      place: this.placeOf(card.id),
-      this.placeOf(card.id),
+      schoolId: this.options.schoolId,
-    );
+      tab: this.cardTab,
+      onTabChange: (tab) => {
+        this.cardTab = tab;
+        if (this.painted !== null) {
+          this.paintCard(this.painted);
+        }
+      },
+      swarmConfigured: this.swarmConfigured,
+    });
     this.appendHireIfNeeded(this.card);
   }