Add altid search functionality

Fixes #80 Add search functionality for alternative IDs in the search form and quick search. * **Search Form (`src/views/Search.vue`):** - Add a dropdown to toggle between `sdss_id` and `altid` input fields. - Add a new input field for `altid` with validation rules. - Update the form submission logic to handle `altid`. * **Quick Search (`src/components/HelloWorld.vue`):** - Add a dropdown to toggle between `sdss_id` and `altid` input fields. - Add a new input field for `altid` with validation rules. - Update the quick search logic to handle `altid`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/sdss/zora/issues/80?shareId=XXXX-XXXX-XXXX-XXXX).
sdss · Dec 4, 2024 · b82b73c · b82b73c
1 parent 4dad20e
commit b82b73c
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 2 deletions.
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -29,7 +29,13 @@
             <v-card-title>Know a SDSS target ID?</v-card-title>
             <v-card-text>
               Input the SDSS ID of your target to go directly there
+              <v-select
+                v-model="searchType"
+                label="Search Type"
+                :items="['id', 'altid']"
+              ></v-select>
               <v-text-field class="pt-2"
+                v-if="searchType === 'id'"
                 label="Enter SDSS ID"
                 outlined
                 dense
@@ -48,6 +54,27 @@
                   <v-btn color="primary" @click="navigateToTarget">Go</v-btn>
                 </template>
               </v-text-field>
+              <v-text-field class="pt-2"
+                v-if="searchType === 'altid'"
+                label="Enter Alternative ID"
+                outlined
+                dense
+                clearable
+                v-model="altId"
+                placeholder="apogee_id"
+                hint="Enter an alternative identifier"
+                :rules="altidRules"
+                @keyup.enter="navigateToTarget"
+              >
+                <template v-slot:prepend>
+                  <v-icon icon='mdi-help' size='small'
+                  v-tippy="{content:'The alternative ID is a unique identifier for a target in an alternative catalog',
+                  placement:'left'}"></v-icon>
+                </template>
+                <template v-slot:append-inner>
+                  <v-btn color="primary" @click="navigateToTarget">Go</v-btn>
+                </template>
+              </v-text-field>
             </v-card-text>
           </v-card>
         </v-col>
@@ -69,10 +96,20 @@ useStoredTheme()
 
 const router = useRouter();
 const targetId = ref('');
+const altId = ref('');
+const searchType = ref('id');
+
+const altidRules = [
+  (value: string) => !!value || 'Required field.',
+  (value: string) => /^[a-zA-Z0-9-]+$/.test(value) || 'Only alphanumeric characters and hyphens are allowed.',
+  (value: string) => /^[a-zA-Z0-9-]{1,50}$/.test(value) || 'Maximum length is 50 characters.',
+];
 
 const navigateToTarget = () => {
-  if (targetId.value) {
+  if (searchType.value === 'id' && targetId.value) {
     router.push(`/target/${targetId.value}`);
+  } else if (searchType.value === 'altid' && altId.value) {
+    router.push(`/target/${altId.value}`);
   }
 };
 

diff --git a/src/views/Search.vue b/src/views/Search.vue
@@ -42,7 +42,13 @@
         <v-row>
             <v-col cols="4" md="4">
             <!-- search id field -->
+            <v-select
+              v-model="searchType"
+              label="Search Type"
+              :items="['id', 'altid']"
+            ></v-select>
             <text-input
+              v-if="searchType === 'id'"
               v-model="formData.id"
               label="ID Search"
               placeholder="23326"
@@ -51,6 +57,16 @@
               id="id"
               :disabled="idDisabled"
             />
+            <text-input
+              v-if="searchType === 'altid'"
+              v-model="formData.altid"
+              label="Alternative ID Search"
+              placeholder="apogee_id"
+              hint="Enter an alternative identifier"
+              :rules="altidRules"
+              id="altid"
+              :disabled="idDisabled"
+            />
           </v-col>
           <!-- cartons and programs dropdown menus -->
           <v-col cols="4" md="4">
@@ -145,11 +161,17 @@ let radiusRules = [
   (value: number) => !isNaN(value) || 'Value must be a number.',
 ]
 
+let altidRules = [
+  (value: string) => !!value || 'Required field.',
+  (value: string) => /^[a-zA-Z0-9-]+$/.test(value) || 'Only alphanumeric characters and hyphens are allowed.',
+  (value: string) => /^[a-zA-Z0-9-]{1,50}$/.test(value) || 'Maximum length is 50 characters.',
+]
 
 // parameters
 let loading = ref(false)
 let coordsDisabled = ref(false)
 let idDisabled = ref(false)
+let searchType = ref('id')
 
 // create initial state of formData
 let initFormData = {
@@ -158,6 +180,7 @@ let initFormData = {
   dec: '',
   radius: '0.1',
   id: '',
+  altid: '',
   units: 'degree',
   release: store.release,
   carton: '',
@@ -178,7 +201,7 @@ watch(formData, async () => {
 
   // update id/coords disabled states
   idDisabled.value = !!formData.value.coords.trim()
-  coordsDisabled.value = !!formData.value.id.trim()
+  coordsDisabled.value = !!formData.value.id.trim() || !!formData.value.altid.trim()
 
   const formValid = await form.value.validate(); // validate the form
   valid.value = formValid.valid; // update the valid state

diff --git a/vite.config.ts.timestamp-1729616849795-71a83969c8603.mjs b/vite.config.ts.timestamp-1729616849795-71a83969c8603.mjs
@@ -0,0 +1,44 @@
+// vite.config.ts
+import vue from "file:///workspaces/zora/node_modules/@vitejs/plugin-vue/dist/index.mjs";
+import vuetify, { transformAssetUrls } from "file:///workspaces/zora/node_modules/vite-plugin-vuetify/dist/index.mjs";
+import { defineConfig } from "file:///workspaces/zora/node_modules/vite/dist/node/index.js";
+import { fileURLToPath, URL } from "node:url";
+var __vite_injected_original_import_meta_url = "file:///workspaces/zora/vite.config.ts";
+var vite_config_default = defineConfig({
+  plugins: [
+    vue({
+      template: { transformAssetUrls }
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    vuetify({
+      autoImport: true,
+      styles: {
+        configFile: "src/styles/settings.scss"
+      }
+    })
+  ],
+  define: { "process.env": {} },
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", __vite_injected_original_import_meta_url))
+    },
+    extensions: [
+      ".js",
+      ".json",
+      ".jsx",
+      ".mjs",
+      ".ts",
+      ".tsx",
+      ".vue"
+    ]
+  },
+  base: process.env.BASE_URL || "/",
+  server: {
+    port: 3e3,
+    host: "0.0.0.0"
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvd29ya3NwYWNlcy96b3JhXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvd29ya3NwYWNlcy96b3JhL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy93b3Jrc3BhY2VzL3pvcmEvdml0ZS5jb25maWcudHNcIjsvLyBQbHVnaW5zXG5pbXBvcnQgdnVlIGZyb20gJ0B2aXRlanMvcGx1Z2luLXZ1ZSdcbmltcG9ydCB2dWV0aWZ5LCB7IHRyYW5zZm9ybUFzc2V0VXJscyB9IGZyb20gJ3ZpdGUtcGx1Z2luLXZ1ZXRpZnknXG5cbi8vIFV0aWxpdGllc1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCB7IGZpbGVVUkxUb1BhdGgsIFVSTCB9IGZyb20gJ25vZGU6dXJsJ1xuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW1xuICAgIHZ1ZSh7XG4gICAgICB0ZW1wbGF0ZTogeyB0cmFuc2Zvcm1Bc3NldFVybHMgfVxuICAgIH0pLFxuICAgIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS92dWV0aWZ5anMvdnVldGlmeS1sb2FkZXIvdHJlZS9uZXh0L3BhY2thZ2VzL3ZpdGUtcGx1Z2luXG4gICAgdnVldGlmeSh7XG4gICAgICBhdXRvSW1wb3J0OiB0cnVlLFxuICAgICAgc3R5bGVzOiB7XG4gICAgICAgIGNvbmZpZ0ZpbGU6ICdzcmMvc3R5bGVzL3NldHRpbmdzLnNjc3MnLFxuICAgICAgfSxcbiAgICB9KSxcbiAgXSxcbiAgZGVmaW5lOiB7ICdwcm9jZXNzLmVudic6IHt9IH0sXG4gIHJlc29sdmU6IHtcbiAgICBhbGlhczoge1xuICAgICAgJ0AnOiBmaWxlVVJMVG9QYXRoKG5ldyBVUkwoJy4vc3JjJywgaW1wb3J0Lm1ldGEudXJsKSlcbiAgICB9LFxuICAgIGV4dGVuc2lvbnM6IFtcbiAgICAgICcuanMnLFxuICAgICAgJy5qc29uJyxcbiAgICAgICcuanN4JyxcbiAgICAgICcubWpzJyxcbiAgICAgICcudHMnLFxuICAgICAgJy50c3gnLFxuICAgICAgJy52dWUnLFxuICAgIF0sXG4gIH0sXG4gIGJhc2U6IHByb2Nlc3MuZW52LkJBU0VfVVJMIHx8IFwiL1wiLFxuICBzZXJ2ZXI6IHtcbiAgICBwb3J0OiAzMDAwLFxuICAgIGhvc3Q6IFwiMC4wLjAuMFwiXG4gIH0sXG59KVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUNBLE9BQU8sU0FBUztBQUNoQixPQUFPLFdBQVcsMEJBQTBCO0FBRzVDLFNBQVMsb0JBQW9CO0FBQzdCLFNBQVMsZUFBZSxXQUFXO0FBTnFHLElBQU0sMkNBQTJDO0FBU3pMLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVM7QUFBQSxJQUNQLElBQUk7QUFBQSxNQUNGLFVBQVUsRUFBRSxtQkFBbUI7QUFBQSxJQUNqQyxDQUFDO0FBQUE7QUFBQSxJQUVELFFBQVE7QUFBQSxNQUNOLFlBQVk7QUFBQSxNQUNaLFFBQVE7QUFBQSxRQUNOLFlBQVk7QUFBQSxNQUNkO0FBQUEsSUFDRixDQUFDO0FBQUEsRUFDSDtBQUFBLEVBQ0EsUUFBUSxFQUFFLGVBQWUsQ0FBQyxFQUFFO0FBQUEsRUFDNUIsU0FBUztBQUFBLElBQ1AsT0FBTztBQUFBLE1BQ0wsS0FBSyxjQUFjLElBQUksSUFBSSxTQUFTLHdDQUFlLENBQUM7QUFBQSxJQUN0RDtBQUFBLElBQ0EsWUFBWTtBQUFBLE1BQ1Y7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUFBLEVBQ0EsTUFBTSxRQUFRLElBQUksWUFBWTtBQUFBLEVBQzlCLFFBQVE7QUFBQSxJQUNOLE1BQU07QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNSO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K