feat: make dataset selector also configurable to display topics instead

src/components/DatasetIdentifierSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!errorMessage">
-    <v-select v-if="(options !== null)" :items="options" item-title="title" item-value="metadata" label="Dataset Identifier"
+    <v-select v-if="(options !== null)" :items="options" :item-title="title" item-value="metadata" :label="label"
       v-model="selected" :readonly="readonly" :rules="rules"
       :hint="selected ? selected.description : 'Select dataset identifier'" persistent-hint :multiple="multiple"
       return-object variant="outlined" />
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, onBeforeMount, watch } from 'vue';
+import { defineComponent, ref, computed, onBeforeMount, watch } from 'vue';
 import { VSelect, VTextField } from 'vuetify/lib/components/index.mjs';
 
 
@@ -22,10 +22,22 @@ export default defineComponent({
   },
   props: {
     modelValue: {},
-    readonly: false,
-    multiple: false,
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
     rules: {
       type: Array
+    },
+    title: {
+      type: String,
+      default: "id",
+      rules: ["id", "topic"],
+      required: false
     }
   },
   emits: ["update:modelValue"],
@@ -35,22 +47,36 @@ export default defineComponent({
     const selected = ref([]);
     const errorMessage = ref(null);
 
+    // Computed
+    const label = computed(() => {
+      let label = "Dataset Identifier";
+      if (props.title === "topic") {
+        label = "Topic";
+      }
+      if (props.multiple) {
+        label += "s";
+      }
+      return label;
+    });
+
     const fetchOptions = async () => {
       // Get dataset IDs
       if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
         // If test mode enabled, show test IDs
         console.log("TEST_MODE is enabled");
         options.value = [
           {
-            title: "urn:wmo:md:test1-centre:core.test1.test1.test1",
+            id: "urn:wmo:md:test1-centre:core.test1.test1.test1",
+            topic: "origin/a/wis2/test1-centre/core/test1",
             metadata: {
               'id': "urn:wmo:md:test1-centre:core.test1.test1.test1",
               'topic': "origin/a/wis2/test1-centre/core/test1"
             },
             description: "Test 1 description"
           },
           {
-            title: "urn:wmo:md:test2-centre:core.test2.test2.test2",
+            id: "urn:wmo:md:test2-centre:core.test2.test2.test2",
+            topic: "origin/a/wis2/test1-centre/core/test1",
             metadata: {
               'id': "urn:wmo:md:test2-centre:core.test2.test2.test2",
               'topic': "origin/a/wis2/test1-centre/core/test1"
@@ -74,7 +100,8 @@ export default defineComponent({
               options.value = data.features.map(feature => {
                 if (feature.properties?.identifier) {
                   return {
-                    title: feature.properties.identifier,
+                    id: feature.properties.identifier,
+                    topic: feature.properties['wmo:topicHierarchy'],
                     metadata: {
                       "id": feature.properties.identifier,
                       "topic": feature.properties['wmo:topicHierarchy']
@@ -126,7 +153,7 @@ export default defineComponent({
       }
     });
 
-    return { selected, options, errorMessage };
+    return { label, selected, options, errorMessage };
   }
 });
 </script>

src/components/ImportOSCAR.vue

@@ -114,7 +114,7 @@
         <v-card-item><CodeListSelector codeList="territory" label="Territory or WMO member operating the station" defaultHint= "Select territory" v-model="station.properties.territory_name"/></v-card-item>
         <v-card-item><CodeListSelector codeList="operatingStatus" label="Operating status" defaultHint= "Select operating status" v-model="station.properties.status"/></v-card-item>
          <v-card-item>
-          <DatasetIdentifierSelector v-model="selectedDataset" multiple :rules="[rules.topic]" @change="station.properties.topics = selectedDataset.metadata.id" class="mt-2"/>
+          <DatasetIdentifierSelector v-model="selectedDataset" title="topic" multiple :rules="[rules.topic]" @change="station.properties.topics = selectedDataset.metadata.id" class="mt-2"/>
         </v-card-item>
         <v-card-item>
           <v-text-field :rules="[rules.token]" type="password" clearable v-model="token" label='wis2box auth token for "collections/stations"' hint='Enter wis2box auth token for "collections/stations"' persistent-token></v-text-field>

src/components/StationEditor.vue

@@ -92,7 +92,7 @@
           <CodeListSelector :readonly="readonly" codeList="WMORegion" label="WMO Region" defaultHint= "Select WMO region" v-model="station.properties.wmo_region"/>
           <CodeListSelector :readonly="readonly" codeList="territory" label="Territory or WMO member operating the station" defaultHint= "Select territory" v-model="station.properties.territory_name"/>
           <CodeListSelector :readonly="readonly" codeList="operatingStatus" label="Operating status" defaultHint= "Select operating status" v-model="station.properties.status"/>
-          <DatasetIdentifierSelector v-model="selectedDataset" multiple :readonly="readonly" :rules="[rules.topic]" @change="station.properties.topics = selectedDataset.metadata.topic" class="mt-2"/>
+          <DatasetIdentifierSelector v-model="selectedDataset" title="topic" multiple :readonly="readonly" :rules="[rules.topic]" @change="station.properties.topics = selectedDataset.metadata.topic" class="mt-2"/>
           <v-divider/>
           <v-text-field :rules="[rules.token]" type="password" clearable v-model="token" label='wis2box auth token for "collections/stations"' hint='Enter wis2box auth token for "collections/stations"' persistent-token variant="outlined" class="my-5"></v-text-field>
           <v-card-actions v-if="!readonly">