selectors

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>

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>

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..."
 }

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>

utils/bmm.ts

@@ -0,0 +1,4 @@
+export type BMMSingleForm = {
+    originalTitle: string;
+    language?: (typeof bmmLanguages)[number];
+};

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;
+        },
+    });
+};

utils/languages.ts

@@ -0,0 +1 @@
+export const bmmLanguages = ["en", "no"] as const;