bmm form

components/BmmSingleMetadata.vue

@@ -3,16 +3,20 @@ import { BccButton, BccInput } from "@bcc-code/design-library-vue";
 
 const form = defineModel<BMMSingleForm>({ required: true });
 
+const albumId = computedProperty(form, "albumId");
+const trackId = computedProperty(form, "trackId");
 const language = computedProperty(form, "language");
 const originalTitle = computedProperty(form, "originalTitle");
 
 defineEmits<{
-    submit: [];
+    set: [];
 }>();
 </script>
 <template>
-    <form class="flex flex-col gap-4 p-4" @submit.prevent="$emit('submit')">
+    <form class="flex flex-col gap-4 p-4" @submit.prevent="$emit('set')">
         <h3 class="text-lg font-bold">BMM Upload</h3>
+        <BccInput v-model="albumId" :label="$t('album')" />
+        <BccInput v-model="trackId" :label="$t('track')" />
         <BccInput
             v-model="originalTitle"
             :label="$t('originalTitle')"

locales/en.json

@@ -2,5 +2,7 @@
     "dragAndDropFileHere": "Drag and drop file here or click to browse",
     "originalTitle": "Original title",
     "language": "Language",
-    "selectAnOption": "Select an option..."
+    "selectAnOption": "Select an option...",
+    "album": "Album",
+    "track": "Track"
 }

pages/upload/bmm.vue

@@ -2,7 +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"
     >
-        <BmmSingleMetadata v-model="form" @submit="metadataIsSet = true" />
+        <BmmSingleMetadata v-model="form" @set="metadataIsSet = true" />
         <div
             class="flex flex-col gap-4 p-4 transition"
             :class="[

utils/bmm.ts

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