From 2644367f8d98f3183ea1bb3c41a1b5258806ad0d Mon Sep 17 00:00:00 2001
From: Fredrik Vedvik <fredrik@vedvik.tech>
Date: Fri, 23 Feb 2024 13:12:02 +0100
Subject: [PATCH] selectors

---
 components/BmmSingleMetadata.vue | 24 ++++++++++++++++++++++
 components/LanguageSelector.vue  | 25 +++++++++++++++++++++++
 locales/en.json                  |  3 ++-
 pages/upload/bmm.vue             | 34 ++++----------------------------
 utils/bmm.ts                     |  4 ++++
 utils/computedProperty.ts        | 15 ++++++++++++++
 utils/languages.ts               |  1 +
 7 files changed, 75 insertions(+), 31 deletions(-)
 create mode 100644 components/BmmSingleMetadata.vue
 create mode 100644 components/LanguageSelector.vue
 create mode 100644 utils/bmm.ts
 create mode 100644 utils/computedProperty.ts
 create mode 100644 utils/languages.ts

diff --git a/components/BmmSingleMetadata.vue b/components/BmmSingleMetadata.vue
new file mode 100644
index 0000000..ed4eccc
--- /dev/null
+++ b/components/BmmSingleMetadata.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { BccButton, BccInput } from "@bcc-code/design-library-vue";
+
+const form = defineModel<BMMSingleForm>({ required: true });
+
+const language = computedProperty(form, "language");
+const originalTitle = computedProperty(form, "originalTitle");
+
+defineEmits<{
+    submit: [];
+}>();
+</script>
+<template>
+    <form class="flex flex-col gap-4 p-4" @submit.prevent="$emit('submit')">
+        <h3 class="text-lg font-bold">BMM Upload</h3>
+        <BccInput
+            v-model="originalTitle"
+            :label="$t('originalTitle')"
+            required
+        />
+        <LanguageSelector v-model="language" :languages="bmmLanguages" />
+        <BccButton type="submit">Next</BccButton>
+    </form>
+</template>
diff --git a/components/LanguageSelector.vue b/components/LanguageSelector.vue
new file mode 100644
index 0000000..eba6140
--- /dev/null
+++ b/components/LanguageSelector.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { BccSelect } from "@bcc-code/design-library-vue";
+
+defineProps<{
+    languages: readonly string[];
+}>();
+
+const value = defineModel<string>();
+
+const languageDisplay = (l: string) => {
+    if (typeof Intl.DisplayNames !== "undefined") {
+        const dn = new Intl.DisplayNames(["en"], { type: "language" });
+        return dn.of(l);
+    }
+};
+</script>
+
+<template>
+    <BccSelect v-model="value" :label="$t('language')">
+        <option disabled value="">{{ $t("selectAnOption") }}</option>
+        <option v-for="l in languages" :value="l">
+            {{ languageDisplay(l) }}
+        </option>
+    </BccSelect>
+</template>
diff --git a/locales/en.json b/locales/en.json
index 6ad6d27..9b7b1d8 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1,5 +1,6 @@
 {
     "dragAndDropFileHere": "Drag and drop file here or click to browse",
     "originalTitle": "Original title",
-    "language": "Language"
+    "language": "Language",
+    "selectAnOption": "Select an option..."
 }
\ No newline at end of file
diff --git a/pages/upload/bmm.vue b/pages/upload/bmm.vue
index 792ada3..57edbd6 100644
--- a/pages/upload/bmm.vue
+++ b/pages/upload/bmm.vue
@@ -2,20 +2,7 @@
     <div
         class="mx-auto flex h-screen max-w-screen-md flex-col gap-4 rounded-lg bg-stone-300 p-4 text-black"
     >
-        <form
-            class="flex flex-col gap-4 p-4"
-            @submit.prevent="metadataIsSet = true"
-        >
-            <h3 class="text-lg font-bold">BMM Upload</h3>
-            <BccInput :label="$t('originalTitle')" required />
-            <BccSelect :label="$t('language')" required>
-                <option disabled value="">Select an option...</option>
-                <option v-for="l in languages" :value="l.key">
-                    {{ l.value }}
-                </option>
-            </BccSelect>
-            <BccButton type="submit">Next</BccButton>
-        </form>
+        <BmmSingleMetadata v-model="form" @submit="metadataIsSet = true" />
         <div
             class="flex flex-col gap-4 p-4 transition"
             :class="[
@@ -35,24 +22,11 @@
 </template>
 
 <script lang="ts" setup>
-import { BccButton, BccInput, BccSelect } from "@bcc-code/design-library-vue";
+const form = ref<BMMSingleForm>({
+    originalTitle: "",
+});
 
 const metadataIsSet = ref(false);
 
 const selectedFile = ref<File | null>(null);
-
-const languages = [
-    {
-        key: "en",
-        value: "English",
-    },
-    {
-        key: "es",
-        value: "Spanish",
-    },
-    {
-        key: "fr",
-        value: "French",
-    },
-];
 </script>
diff --git a/utils/bmm.ts b/utils/bmm.ts
new file mode 100644
index 0000000..a66dd29
--- /dev/null
+++ b/utils/bmm.ts
@@ -0,0 +1,4 @@
+export type BMMSingleForm = {
+    originalTitle: string;
+    language?: (typeof bmmLanguages)[number];
+};
diff --git a/utils/computedProperty.ts b/utils/computedProperty.ts
new file mode 100644
index 0000000..7eaf7c8
--- /dev/null
+++ b/utils/computedProperty.ts
@@ -0,0 +1,15 @@
+export default <T extends {}>(ref: Ref<T | undefined>, property: keyof T) => {
+    return computed({
+        get() {
+            return ref.value?.[property];
+        },
+        set(v) {
+            ref.value = ref.value
+                ? {
+                      ...ref.value,
+                      [property]: v,
+                  }
+                : undefined;
+        },
+    });
+};
diff --git a/utils/languages.ts b/utils/languages.ts
new file mode 100644
index 0000000..a99fd47
--- /dev/null
+++ b/utils/languages.ts
@@ -0,0 +1 @@
+export const bmmLanguages = ["en", "no"] as const;