added simple advanced search page

Signed-off-by: wadeking98 <wkingnumber2@gmail.com>

src/router/index.ts

@@ -10,7 +10,14 @@ const routes: Array<RouteConfig> = [
     name: "Search",
     component: Search,
   },
-
+  {
+    path: "/search/advanced",
+    name: "AdvancedSearch",
+    component: () =>
+      import(
+        /* webpackChunkName: "advancedSearch" */ "@/views/AdvancedSearch.vue"
+      ),
+  },
   {
     path: "/entity/:sourceId",
     name: "Entity",

src/views/AdvancedSearch.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <v-container :fluid="$vuetify.breakpoint.smAndDown" class="pa-5">
+      <BackTo />
+      <p class="font-weight-bold">Advanced Search</p>
+      <v-select
+        outlined
+        dense
+        v-model="selectedId"
+        :items="formattedCredentialTypes"
+        label="Credential Type"
+      ></v-select>
+      <router-link
+        :to="`/search?credential_type_id=${selectedId}&page=1`"
+        v-if="selectedId"
+      >
+        <v-btn
+          id="contactSubmitButton"
+          depressed
+          :disabled="loading"
+          aria-label="submit-button"
+          >Submit</v-btn
+        >
+      </router-link>
+    </v-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import BackTo from "@/components/shared/BackTo.vue";
+import { mapActions, mapGetters } from "vuex";
+import { ICredentialType } from "@/interfaces/api/v2/credential-type.interface";
+import { unwrapTranslations } from "@/utils/entity";
+
+interface Data {
+  selectedId: number;
+}
+
+@Component({
+  components: {
+    BackTo,
+  },
+  computed: {
+    ...mapGetters(["credentialTypes", "loading"]),
+  },
+  methods: {
+    ...mapActions(["setLoading", "fetchCredentialTypes"]),
+  },
+})
+export default class AdvancedSearch extends Vue {
+  setLoading!: (loading: boolean) => void;
+  fetchCredentialTypes!: (paged: boolean) => Promise<void>;
+  loading!: boolean;
+  credentialTypes!: ICredentialType[];
+
+  data(): Data {
+    return { selectedId: 0 };
+  }
+
+  get formattedCredentialTypes(): Array<{ text: string; value: number }> {
+    return this.credentialTypes.map((type) => ({
+      // TODO: remove unwrap translations functions after backend update
+      text: unwrapTranslations(type.schema_label)?.[this.$i18n.locale]?.label
+        ? (
+            unwrapTranslations(type.schema_label) as Record<
+              string,
+              { label: string; description: string }
+            >
+          )[this.$i18n.locale].label
+        : type.description,
+      value: type.id,
+    }));
+  }
+
+  async created(): Promise<void> {
+    this.setLoading(true);
+    this.fetchCredentialTypes(false);
+    this.setLoading(false);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#contactSubmitButton {
+  background: $primary-color !important;
+  color: $white !important;
+}
+</style>

src/views/Search.vue

@@ -10,6 +10,13 @@
               A public directory of organizations registered in BC
             </p>
             <SearchBar :query="q" class="flex-grow-1" />
+            <v-row>
+              <v-col cols="12" class="pl-0">
+                <router-link class="advanced-link" to="/search/advanced"
+                  >Advanced Search</router-link
+                >
+              </v-col>
+            </v-row>
           </v-col>
           <v-col class="flex-grow-0 pt-0 pb-0" cols="12" md="3">
             <SearchDescription
@@ -92,7 +99,7 @@ export default class Search extends Vue {
 
   async created(): Promise<void> {
     const query = this.$route.query as unknown as ISearchQuery;
-    if (query?.q) {
+    if (query?.q || query?.credential_type_id) {
       await this.extractQueryAndDispatchSearch(query);
     } else {
       this.resetSearch();
@@ -112,7 +119,7 @@ export default class Search extends Vue {
     // Need to call next first otherwise the URL is updated after the search completes
     next();
     const query = this.$route.query as unknown as ISearchQuery;
-    if (query?.q) {
+    if (query?.q || query?.credential_type_id) {
       await this.extractQueryAndDispatchSearch(query);
     } else {
       this.resetSearch();
@@ -143,4 +150,7 @@ export default class Search extends Vue {
   background: $secondary-color;
   color: $white;
 }
+.advanced-link {
+  color: $white;
+}
 </style>