Merge pull request #1908 from sanger/1898-y24-281-as-long-read-ont-we…

…-would-like-to-remove-the-basecalls-data-type-from-the-drop-down-in-the-general-reception-as-we-only-choose-basecalls-and-raw-data

Y24-281: Filter not to include basecalls

src/components/shared/DataTypeSelect.vue

@@ -1,56 +1,83 @@
 <template>
-  <traction-select
-    id="data-type"
-    :model-value="value"
-    data-attribute="data-type-list"
-    :options="dataTypes"
-    @update:model-value="handleInput"
-  ></traction-select>
+  <traction-field-group label="Data Type" label-for="data-type" layout="spacious">
+    <traction-select
+      id="data-type"
+      :model-value="dataType"
+      data-attribute="data-type-list"
+      :options="dataTypes"
+      @update:model-value="handleInput"
+    ></traction-select
+  ></traction-field-group>
 </template>
 
 <script>
 import useSWRV from 'swrv'
 import { filterByAttribute, mapAttribute } from '@/api/JsonApi'
 
+const encode = (value) => (value === undefined ? 'basecalls and raw data' : value)
+const decode = (value) => (value === '' ? null : value)
+
 export default {
   name: 'DataTypeSelect',
   props: {
     pipeline: {
-      // Filter to only list data_types for a given pipeline, leave null
-      // to apply no filters
       type: String,
       required: false,
       default: null,
     },
-    value: {
-      // The data type, we use value to allow us to simply bind it with v-model
+    modelValue: {
       type: String,
       default: undefined,
     },
   },
-  emits: ['input'],
+  emits: ['update:modelValue'],
   setup() {
     const baseURL = import.meta.env.VITE_TRACTION_BASE_URL
     const { data: remoteDataTypes } = useSWRV(
       `${baseURL}/v1/data_types?fields[data_types]=name,pipeline`,
     )
     return { remoteDataTypes }
   },
+  data() {
+    return {
+      dataType: encode(this.modelValue),
+    }
+  },
   computed: {
-    filters: ({ pipeline }) => (pipeline ? { pipeline } : {}),
+    // Same approach as src/components/shared/LibraryTypeSelect.vue
+    filters: ({ pipeline }) => (pipeline ? { pipeline, name: 'basecalls and raw data' } : {}),
     filteredDataTypes() {
       return filterByAttribute(this.remoteDataTypes?.data || [], this.filters)
     },
+    emptyOption: ({ allowNone }) => (allowNone ? [{ value: '', text: 'None' }] : []),
     dataTypes() {
-      return mapAttribute(this.filteredDataTypes, 'name')
+      const dataTypesOptions = mapAttribute(this.filteredDataTypes, 'name').map((val) => {
+        return {
+          text: val,
+          value: val,
+        }
+      })
+      return [...dataTypesOptions, ...this.emptyOption]
+    },
+  },
+  watch: {
+    remoteDataTypes: {
+      handler() {
+        this.setDataType()
+      },
+      immediate: true,
     },
   },
   methods: {
     handleInput(input) {
-      this.$emit('input', input)
+      this.$emit('update:modelValue', decode(input))
+    },
+    setDataType() {
+      if (this.dataTypes.length === 1) {
+        this.dataType = encode(this.dataTypes[0].value)
+        this.$emit('update:modelValue', this.dataTypes[0].value)
+      }
     },
   },
 }
 </script>
-
-<style></style>

src/views/GeneralReception.vue

@@ -101,14 +101,7 @@
             </traction-field-group>
           </div>
           <div v-if="pipeline == 'ONT'">
-            <traction-field-group
-              label="Data Type"
-              attribute="data_type"
-              for="data_type"
-              layout="spacious"
-            >
-              <DataTypeSelect v-model="requestOptions.data_type" pipeline="ont" />
-            </traction-field-group>
+            <DataTypeSelect v-model="requestOptions.data_type" pipeline="ont" />
             <traction-field-group
               label="Number of Flowcells"
               attribute="number_of_flowcells"

tests/unit/components/shared/DataTypeSelect.spec.js

@@ -19,29 +19,31 @@ describe('DataTypeSelect.vue', () => {
     it('lists the expected options', () => {
       const wrapper = buildWrapper()
       const select = wrapper.find('select')
-      expect(findOption('basecalls', { from: select })).toBeTruthy()
       expect(findOption('basecalls and raw data', { from: select })).toBeTruthy()
     })
 
     it('will not list data types from other pipelines', () => {
       const wrapper = buildWrapper({ pipeline: 'ont' })
       const select = wrapper.find('select')
-      expect(findOption('basecalls', { from: select })).toBeTruthy()
+      expect(findOption('basecalls and raw data', { from: select })).toBeTruthy()
       expect(findOption('dummy type', { from: select })).toBeFalsy()
     })
 
     it('will list data types from all pipelines unless specified', () => {
       const wrapper = buildWrapper({})
       const select = wrapper.find('select')
-      expect(findOption('basecalls', { from: select })).toBeTruthy()
+      expect(findOption('basecalls and raw data', { from: select })).toBeTruthy()
       expect(findOption('dummy type', { from: select })).toBeTruthy()
     })
 
+    // 'basecalls and raw data' is the default type.
+    // This test checks whether if the default type is changed to 'dummy type',
+    // the component will emit 'dummy type' when the user selects it.
     it('can emit a data type', async () => {
-      const wrapper = buildWrapper()
+      const wrapper = buildWrapper({})
       const select = wrapper.find('select')
-      await findOption('basecalls', { from: select }).setSelected()
-      expect(wrapper.emitted('input')).toEqual([['basecalls']])
+      await findOption('dummy type', { from: select }).setSelected()
+      expect(wrapper.emitted('update:modelValue')).toEqual([['dummy type']])
     })
   })
 })