Make run button functional

components/ParameterForm.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div v-show="pageMounted">
     <CForm
       v-if="props.metadata && formData"
       class="inputs"
-      :data-test="JSON.stringify(formData)"
+      role="form"
       @submit.prevent="submitForm"
     >
       <div
@@ -22,7 +22,7 @@
             <CButtonGroup
               role="group"
               :aria-label="parameter.label"
-              :size="largeScreen ? 'lg' : undefined"
+              :size="appStore.largeScreen ? 'lg' : undefined"
             >
               <!-- This component's "v-model" prop type signature dictates we can't pass it a number. -->
               <CFormCheck
@@ -49,7 +49,7 @@
             :id="parameter.id"
             v-model="formData[parameter.id]"
             :aria-label="parameter.label"
-            class="form-select" :class="[largeScreen ? 'form-select-lg' : '']"
+            class="form-select" :class="[appStore.largeScreen ? 'form-select-lg' : '']"
           >
             <option
               v-for="(option) in parameter.options"
@@ -65,13 +65,14 @@
       <CButton
         id="run-button"
         color="primary"
-        :size="largeScreen ? 'lg' : undefined"
+        :size="appStore.largeScreen ? 'lg' : undefined"
         type="submit"
+        :disabled="formSubmitting || props.metadataFetchStatus === 'error'"
+        @click="submitForm"
       >
         Run
-        <CIcon
-          icon="cilArrowRight"
-        />
+        <CSpinner v-if="formSubmitting && props.metadataFetchStatus !== 'error'" size="sm" class="ms-1" />
+        <CIcon v-else icon="cilArrowRight" />
       </CButton>
     </CForm>
     <CAlert v-else-if="props.metadataFetchStatus === 'error'" color="warning">
@@ -84,8 +85,8 @@
 <script lang="ts" setup>
 import type { FetchError } from "ofetch";
 import { CIcon } from "@coreui/icons-vue";
-import type { Metadata, Parameter } from "@/types/daedalusApiResponseTypes";
-import { ParameterType } from "@/types/daedalusApiResponseTypes";
+import { ParameterType } from "@/types/apiResponseTypes";
+import type { Metadata, NewScenarioData, Parameter } from "@/types/apiResponseTypes";
 import type { AsyncDataRequestStatus } from "#app";
 
 const props = defineProps<{
@@ -94,14 +95,20 @@
   metadataFetchError: FetchError | null
 }>();
 
+// This is only a temporary piece of code, used until we implement numeric inputs.
+const allParametersOfImplementedTypes = computed(() => props.metadata?.parameters.filter(({ parameterType }) => parameterType !== ParameterType.Numeric));
+
 const formData = ref(
   // Create a new object with keys set to the id values of the metadata.parameters array of objects, and all values set to default values.
-  props.metadata?.parameters.reduce((acc, { id, defaultOption, options }) => {
+  allParametersOfImplementedTypes.value?.reduce((acc, { id, defaultOption, options }) => {
     acc[id] = defaultOption || options[0].id;
     return acc;
   }, {} as { [key: string]: string | number }),
 );
 
+const appStore = useAppStore();
+const pageMounted = ref(false);
+
 const optionsAreTerse = (parameter: Parameter) => {
   const eachOptionIsASingleWord = parameter.options.every((option) => {
     return !option.label.includes(" ");
@@ -118,26 +125,29 @@
   return parameter.parameterType === ParameterType.Select && optionsAreTerse(parameter);
 };
 
-const submitForm = () => {
-  // Not implemented yet
-};
+const formSubmitting = ref(false);
+
+const submitForm = async () => {
+  if (!formData.value) {
+    return;
+  };
 
-const largeScreen = ref(true);
-const breakpoint = 992; // CoreUI's "lg" breakpoint
-const setFieldSizes = () => {
-  if (window.innerWidth < breakpoint) {
-    largeScreen.value = false;
-  } else {
-    largeScreen.value = true;
+  formSubmitting.value = true;
+  const response = await $fetch<NewScenarioData>("/api/scenarios", {
+    method: "POST",
+    body: { parameters: formData.value },
+  }).catch((error: FetchError) => {
+    console.error(error);
+  });
+
+  if (response) {
+    const { runId } = response;
+    await navigateTo(`/scenarios/${runId}`);
   }
 };
 
 onMounted(() => {
-  setFieldSizes();
-  window.addEventListener("resize", setFieldSizes);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", setFieldSizes);
+  pageMounted.value = true;
 });
 </script>
 

components/SideBar.vue

@@ -1,8 +1,8 @@
 <template>
   <CSidebar
     :visible="visible"
-    :unfoldable="largeScreen"
-    :overlaid="largeScreen"
+    :unfoldable="appStore.largeScreen"
+    :overlaid="appStore.largeScreen"
     class="sidebar-fixed border-end"
     @hide="handleHide"
   >
@@ -57,7 +57,7 @@
 
 <script lang="ts" setup>
 import { CIcon } from "@coreui/icons-vue";
-import type { VersionData } from "@/types/daedalusApiResponseTypes";
+import type { VersionData } from "@/types/apiResponseTypes";
 
 const { data: versionData } = useFetch("/api/versions") as { data: Ref<VersionData> };
 
@@ -70,18 +70,11 @@ const versionTooltipContent = computed(() => {
 });
 
 const visible = defineModel("visible", { type: Boolean, required: true });
-const largeScreen = ref(true);
 
-const breakpoint = 992; // CoreUI's "lg" breakpoint
+const appStore = useAppStore();
+
 const resetSidebarPerScreenSize = () => {
-  // Set the default values for the sidebar based on the screen size.
-  if (window.innerWidth < breakpoint) {
-    visible.value = false;
-    largeScreen.value = false;
-  } else {
-    visible.value = true;
-    largeScreen.value = true;
-  }
+  visible.value = appStore.largeScreen;
 };
 
 const hideHasNeverBeenEmitted = ref(true);

layouts/default.vue

@@ -23,6 +23,27 @@
 function handleToggleSidebarVisibility() {
   sidebarVisible.value = !sidebarVisible.value;
 }
+
+const appStore = useAppStore(useNuxtApp().$pinia);
+
+const setScreenSize = () => {
+  // As this function uses window, it can only be run client-side, so we have to pass the $pinia instance
+  // to the useAppStore function: https://pinia.vuejs.org/ssr/nuxt.html#Awaiting-for-actions-in-pages
+  const breakpoint = 992; // CoreUI's "lg" breakpoint
+  if (window.innerWidth < breakpoint) {
+    appStore.largeScreen = false;
+  } else {
+    appStore.largeScreen = true;
+  }
+};
+
+onMounted(() => {
+  setScreenSize();
+  window.addEventListener("resize", setScreenSize);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", setScreenSize);
+});
 </script>
 
 <style lang="scss">