Merge pull request #69 from ssciwr/fix_57_add_other_option_to_selects

Add free text other option for source/tumor type/platform

frontend/src/components/SelectWithOther.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { FwbSelect, FwbInput } from "flowbite-vue";
+const model = defineModel();
+const otherText = "Other (please specify)";
+const textInput = ref("");
+const selectInput = ref("");
+const showTextInput = ref(true);
+
+type OptionsType = {
+  name: string;
+  value: string;
+};
+
+watch([selectInput, textInput], ([newSelectInput, newTextInput]) => {
+  if (newSelectInput === otherText) {
+    showTextInput.value = true;
+    model.value = newTextInput;
+  } else {
+    showTextInput.value = false;
+    textInput.value = "";
+    model.value = newSelectInput;
+  }
+});
+
+function string_to_options(str: string): Array<OptionsType> {
+  const items = `${str};${otherText}`.split(";");
+  return items.map((x) => ({ value: x, name: x }));
+}
+
+const props = defineProps({
+  options: String,
+  id: String,
+  label: String,
+});
+
+const optionsArray = computed(() => {
+  if (!props.options) {
+    return [];
+  }
+  return string_to_options(props.options);
+});
+</script>
+
+<template>
+  <div class="flex flex-row mb-2">
+    <fwb-select
+      v-model="selectInput"
+      :options="optionsArray"
+      :id="id"
+      :label="label"
+      class="grow"
+    />
+    <fwb-input
+      v-if="showTextInput"
+      v-model="textInput"
+      label="Other"
+      class="ml-2 grow"
+    />
+  </div>
+</template>

frontend/src/views/SamplesView.vue

@@ -2,6 +2,7 @@
 import { ref, onUnmounted } from "vue";
 import SamplesTable from "@/components/SamplesTable.vue";
 import ListComponent from "@/components/ListComponent.vue";
+import SelectWithOther from "@/components/SelectWithOther.vue";
 import ListItem from "@/components/ListItem.vue";
 import { apiClient, logout } from "@/utils/api-client";
 import type { Sample } from "@/utils/types";
@@ -15,16 +16,8 @@ import {
   FwbCheckbox,
 } from "flowbite-vue";
 import { useSettingsStore } from "@/stores/settings";
-const settingsStore = useSettingsStore();
-
-type OptionsType = {
-  name: string;
-  value: string;
-};
 
-const tumor_types = ref([] as Array<OptionsType>);
-const sources = ref([] as Array<OptionsType>);
-const platforms = ref([] as Array<OptionsType>);
+const settingsStore = useSettingsStore();
 const required_columns = ref([] as Array<string>);
 
 function closeModalSubmit() {
@@ -103,14 +96,6 @@ async function on_csv_file_changed(event: Event) {
   }
 }
 
-function string_to_options(str: string): Array<OptionsType> {
-  const items = str.split(";");
-  return items.map((x) => ({ value: x, name: x }));
-}
-
-tumor_types.value = string_to_options(settingsStore.settings.tumor_types);
-sources.value = string_to_options(settingsStore.settings.sources);
-platforms.value = string_to_options(settingsStore.settings.platforms);
 required_columns.value = settingsStore.settings.csv_required_columns.split(";");
 
 const samples = ref([] as Sample[]);
@@ -211,26 +196,23 @@ function add_sample() {
               maxlength="128"
               class="mb-2"
             />
-            <fwb-select
+            <SelectWithOther
               v-model="tumor_type"
-              :options="tumor_types"
+              :options="settingsStore.settings.tumor_types"
               id="tumor_type"
               label="Tumor type"
-              class="mb-2"
             />
-            <fwb-select
+            <SelectWithOther
               v-model="source"
-              :options="sources"
+              :options="settingsStore.settings.sources"
               id="source"
               label="Source"
-              class="mb-2"
             />
-            <fwb-select
+            <SelectWithOther
               v-model="platform"
-              :options="platforms"
+              :options="settingsStore.settings.platforms"
               id="platform"
               label="Platform"
-              class="mb-2"
             />
             <fwb-file-input
               type="file"