Implement customization modal

Author: Garrett Jones

components/language-chooser/common/language-chooser-controller/src/view-models/language-chooser.ts

@@ -2,10 +2,11 @@ import {
   asyncSearchForLanguage,
   createTagFromOrthography,
   defaultDisplayName,
-  ICustomizableLanguageDetails,
-  ILanguage,
-  IOrthography,
-  IScript,
+  type ICustomizableLanguageDetails,
+  type ILanguage,
+  type IOrthography,
+  type IRegion,
+  type IScript,
   isManuallyEnteredTagLanguage,
   isUnlistedLanguage,
   isValidBcp47Tag,
@@ -72,6 +73,19 @@ export class LanguageChooserViewModel {
 
   readonly translations: Field<LanguageChooserTranslations>;
 
+  readonly showUnlistedLanguageModal = new Field<
+    ((populateWith: { name?: string; region?: IRegion }) => void) | undefined
+  >(undefined);
+
+  readonly showCustomizeLanguageModal = new Field<
+    | ((populateWith: {
+        script?: IScript;
+        region?: IRegion;
+        dialect?: string;
+      }) => void)
+    | undefined
+  >(undefined);
+
   #currentSearchId = 0;
 
   private onSearchStringUpdated() {
@@ -221,6 +235,54 @@ export class LanguageChooserViewModel {
     this.listedLanguages.value = [];
     this.appendLanguages(languages);
   }
+
+  public onCustomizeButtonClicked() {
+    if (
+      this.selectedLanguage.value &&
+      this.selectedLanguage.value.languageSubtag !== "qaa" &&
+      this.showCustomizeLanguageModal.value
+    ) {
+      this.showCustomizeLanguageModal.value({
+        script: this.selectedScript.value,
+      });
+    } else if (this.showUnlistedLanguageModal.value) {
+      this.showUnlistedLanguageModal.value({
+        name: this.customizations.value?.dialect,
+        region: this.customizations.value?.region,
+      });
+    }
+  }
+
+  public submitUnlistedLanguageModal({
+    name,
+    region,
+  }: {
+    name: string;
+    region: IRegion;
+  }) {
+    this.customizations.requestUpdate({
+      customDisplayName: name,
+      dialect: name,
+      region,
+    });
+  }
+
+  public submitCustomizeLangaugeModal({
+    script,
+    region,
+    dialect,
+  }: {
+    script?: IScript;
+    region?: IRegion;
+    dialect?: string;
+  }) {
+    this.customizations.requestUpdate({
+      region,
+      dialect,
+      customDisplayName: this.customizations.value?.customDisplayName,
+    });
+    this.selectedScript.requestUpdate(script);
+  }
 }
 
 function hasValidDisplayName(selection: IOrthography) {

components/language-chooser/common/language-chooser-controller/test/language-chooser.spec.ts

@@ -1,7 +1,7 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { LanguageChooserViewModel } from "../src/view-models/language-chooser";
 import { fakeLanguage } from "./fake-utils";
-import { ILanguage, UNLISTED_LANGUAGE } from "@ethnolib/find-language";
+import { type ILanguage, UNLISTED_LANGUAGE } from "@ethnolib/find-language";
 import { NorthernUzbekLanguage, WaataLanguage } from "./sample-data/languages";
 import { AndorraRegion } from "./sample-data/regions";
 import { LanguageChooserTranslations } from "../src/view-models/translations";
@@ -457,3 +457,121 @@ describe("translations", () => {
     ).toBe("Una");
   });
 });
+
+describe("unlisted language modal", () => {
+  it("opens on customize button clicked when no language is selected", () => {
+    const t = new TestHeper();
+    const spy = vi.fn();
+    t.viewModel.showUnlistedLanguageModal.requestUpdate(spy);
+    t.viewModel.onCustomizeButtonClicked();
+    expect(spy).toHaveBeenCalledWith({});
+  });
+
+  it("sets language to unlisted language on submit", () => {
+    const t = new TestHeper();
+    t.viewModel.submitUnlistedLanguageModal({
+      name: "hello",
+      region: AndorraRegion,
+    });
+    expect(t.viewModel.selectedLanguage.value).toEqual(UNLISTED_LANGUAGE);
+  });
+
+  it("sets display name on submit", () => {
+    const t = new TestHeper();
+    t.viewModel.submitUnlistedLanguageModal({
+      name: "hello",
+      region: AndorraRegion,
+    });
+    expect(t.viewModel.displayName.value).toBe("hello");
+  });
+
+  it("sets dialect on submit", () => {
+    const t = new TestHeper();
+    t.viewModel.submitUnlistedLanguageModal({
+      name: "hello",
+      region: AndorraRegion,
+    });
+    expect(t.viewModel.customizations.value?.dialect).toBe("hello");
+  });
+
+  it("sets region on submit", () => {
+    const t = new TestHeper();
+    t.viewModel.submitUnlistedLanguageModal({
+      name: "hello",
+      region: AndorraRegion,
+    });
+    expect(t.viewModel.customizations.value?.region).toEqual(AndorraRegion);
+  });
+
+  it("opens on customize button clicked when unlisted language is selected", () => {
+    const t = new TestHeper();
+    const spy = vi.fn();
+    t.viewModel.showUnlistedLanguageModal.requestUpdate(spy);
+    t.viewModel.submitUnlistedLanguageModal({
+      name: "hello",
+      region: AndorraRegion,
+    });
+    t.viewModel.onCustomizeButtonClicked();
+    expect(spy).toHaveBeenCalledWith({ name: "hello", region: AndorraRegion });
+  });
+});
+
+describe("customize language modal", () => {
+  it("opens customize language modal when a language is selected", () => {
+    const t = new TestHeper({ initialLanguages: [NorthernUzbekLanguage] });
+    const spy = vi.fn();
+    t.viewModel.showCustomizeLanguageModal.requestUpdate(spy);
+
+    t.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
+    t.viewModel.onCustomizeButtonClicked();
+
+    expect(spy).toHaveBeenCalledWith({});
+  });
+
+  it("populates script when a script is selected", () => {
+    const t = new TestHeper({ initialLanguages: [NorthernUzbekLanguage] });
+    const spy = vi.fn();
+    t.viewModel.showCustomizeLanguageModal.requestUpdate(spy);
+
+    t.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
+    const scriptViewModel = t.viewModel.listedScripts.value[0];
+    scriptViewModel.isSelected.requestUpdate(true);
+    t.viewModel.onCustomizeButtonClicked();
+
+    expect(spy).toHaveBeenCalledWith({ script: scriptViewModel.script });
+  });
+
+  it("sets customizations on submit", () => {
+    const t = new TestHeper({ initialLanguages: [NorthernUzbekLanguage] });
+    t.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
+    t.viewModel.displayName.requestUpdate("mylang");
+
+    t.viewModel.submitCustomizeLangaugeModal({
+      region: AndorraRegion,
+      dialect: "abc",
+    });
+
+    expect(t.viewModel.customizations.value).toEqual({
+      customDisplayName: "mylang",
+      dialect: "abc",
+      region: AndorraRegion,
+    });
+  });
+
+  it("sets script on submit", () => {
+    const t = new TestHeper({ initialLanguages: [NorthernUzbekLanguage] });
+    t.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
+
+    t.viewModel.submitCustomizeLangaugeModal({
+      script: {
+        code: "abc",
+        name: "ABC Script",
+      },
+    });
+
+    expect(t.viewModel.selectedScript.value).toEqual({
+      code: "abc",
+      name: "ABC Script",
+    });
+  });
+});

components/language-chooser/svelte/language-chooser-svelte/src/lib/CustomizationForm.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import {
+    getAllRegions,
+    type IScript,
+    type IRegion,
+    getAllScripts,
+  } from "@ethnolib/find-language";
+
+  let {
+    onSubmitClicked = $bindable(),
+    submit,
+  }: {
+    onSubmitClicked: () => void;
+    submit: (script?: IScript, region?: IRegion, name?: string) => void;
+  } = $props();
+
+  const regions = getAllRegions().sort((a, b) => a.name.localeCompare(b.name));
+  const scripts = getAllScripts().sort((a, b) => a.name.localeCompare(b.name));
+
+  let scriptCode: string | undefined = $state();
+  let regionCode: string | undefined = $state();
+  let name: string | undefined = $state();
+
+  onSubmitClicked = () => {
+    const region = regions.find((r) => r.code === regionCode);
+    const script = scripts.find((s) => s.code === scriptCode);
+    submit(script, region, name);
+  };
+</script>
+
+<div class="mb-4">
+  <label>
+    <span class="font-semibold opacity-70">Script</span>
+    <select class="select w-full" bind:value={scriptCode}>
+      <option selected value=""></option>
+      {#each scripts as script}
+        <option value={script.code}>{script.name}</option>
+      {/each}
+    </select>
+  </label>
+</div>
+
+<div class="mb-4">
+  <label>
+    <span class="font-semibold opacity-70">Country</span>
+    <select class="select w-full" bind:value={regionCode}>
+      <option selected value=""></option>
+      {#each regions as region}
+        <option value={region.code}>{region.name}</option>
+      {/each}
+    </select>
+  </label>
+</div>
+
+<div class="mb-4">
+  <label>
+    <span class="font-semibold opacity-70">Variant (dialect)</span>
+    <input class="input w-full" bind:value={name} />
+  </label>
+</div>

components/language-chooser/svelte/language-chooser-svelte/src/lib/CustomizationModal.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { IRegion, IScript } from "@ethnolib/find-language";
+  import UnlistedLanguageForm from "./UnlistedLanguageForm.svelte";
+  import CustomizationForm from "./CustomizationForm.svelte";
+  import type { SvelteViewModel } from "@ethnolib/state-management-svelte";
+  import { LanguageChooserViewModel } from "@ethnolib/language-chooser-controller";
+
+  let modal: HTMLDialogElement;
+
+  let {
+    languageChooser,
+  }: {
+    languageChooser: SvelteViewModel<LanguageChooserViewModel>;
+  } = $props();
+
+  let isCreatingUnlisted = $state(false);
+
+  languageChooser.showUnlistedLanguageModal = () => {
+    isCreatingUnlisted = true;
+    modal.showModal();
+  };
+
+  languageChooser.showCustomizeLanguageModal = () => {
+    isCreatingUnlisted = false;
+    modal.showModal();
+  };
+
+  let title = $derived(
+    isCreatingUnlisted ? "Unlisted Language Tag" : "Custom Language Tag"
+  );
+
+  function onDismiss() {
+    modal.close();
+  }
+
+  let onOk = $state(() => {});
+
+  function submitUnlisted(name: string, region: IRegion) {
+    languageChooser.submitUnlistedLanguageModal({ name, region });
+    modal.close();
+  }
+
+  function submitCustomization(
+    script?: IScript,
+    region?: IRegion,
+    dialect?: string
+  ) {
+    languageChooser.submitCustomizeLangaugeModal({ script, region, dialect });
+    modal.close();
+  }
+</script>
+
+<dialog bind:this={modal} class="modal">
+  <div class="modal-box">
+    <h3 class="text-xl font-semibold mb-4">{title}</h3>
+
+    {#if isCreatingUnlisted}
+      <UnlistedLanguageForm
+        bind:onSubmitClicked={onOk}
+        submit={submitUnlisted}
+      />
+    {:else}
+      <CustomizationForm
+        bind:onSubmitClicked={onOk}
+        submit={submitCustomization}
+      />
+    {/if}
+
+    <div class="modal-action">
+      <button class="btn btn-primary w-24" onclick={onOk}>Ok</button>
+      <button class="btn w-24" onclick={onDismiss}>Cancel</button>
+    </div>
+  </div>
+</dialog>

components/language-chooser/svelte/language-chooser-svelte/src/lib/LanguageChooser.svelte

@@ -8,6 +8,7 @@
   import SearchIcon from "./SearchIcon.svelte";
   import { LanguageChooserViewModel } from "@ethnolib/language-chooser-controller";
   import { useViewModel } from "@ethnolib/state-management-svelte";
+  import CustomizationModal from "./CustomizationModal.svelte";
 
   const {
     onDismiss,
@@ -70,8 +71,21 @@
         <div
           class="card card-xs card-border border-base-300 bg-base-100 hover:bg-base-300 shadow-xl w-48 pl-2"
         >
-          <button class="card-body text-left" onclick={() => console.log("hi")}>
-            <p class="card-title uppercase">Customize</p>
+          <button
+            class="card-body text-left"
+            onclick={() => {
+              console.log(viewModel.onCustomizeButtonClicked);
+              console.log(viewModel.displayName);
+              viewModel.onCustomizeButtonClicked();
+            }}
+          >
+            <p class="card-title uppercase">
+              {#if viewModel.selectedLanguage}
+                Customize
+              {:else}
+                Unlisted Language
+              {/if}
+            </p>
             <div class="flex">
               <p class="flex-1 font-mono text-sm opacity-60">
                 {viewModel.tagPreview}
@@ -113,3 +127,5 @@
     </div>
   </div>
 </div>
+
+<CustomizationModal languageChooser={viewModel} />