define stuff

bcc-code · Feb 23, 2024 · c428cad · c428cad
1 parent d07d169
commit c428cad
Showing 1 changed file with 23 additions and 5 deletions.
diff --git a/pages/upload/bmm.vue b/pages/upload/bmm.vue
@@ -1,8 +1,11 @@
 <template>
     <div
-        class="mx-auto flex h-screen max-w-screen-md flex-col gap-4 rounded-lg bg-stone-300 p-8 text-black"
+        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>
+        <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>
@@ -11,16 +14,31 @@
                     {{ l.value }}
                 </option>
             </BccSelect>
-            <BccButton type="submit">Submit</BccButton>
+            <BccButton type="submit">Next</BccButton>
         </form>
-        <SelectFile v-model="selectedFile" />
-        <FileUploader v-model="selectedFile" endpoint="/api/files/upload/bmm" />
+        <div
+            class="flex flex-col gap-4 p-4 transition"
+            :class="[
+                {
+                    'pointer-events-none opacity-50': !metadataIsSet,
+                },
+            ]"
+        >
+            <h3 class="text-lg font-bold">Upload File</h3>
+            <SelectFile v-model="selectedFile" />
+            <FileUploader
+                v-model="selectedFile"
+                endpoint="/api/files/upload/bmm"
+            />
+        </div>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { BccButton, BccInput, BccSelect } from "@bcc-code/design-library-vue";
 
+const metadataIsSet = ref(false);
+
 const selectedFile = ref<File | null>(null);
 
 const languages = [