Migrate search and main views to options api

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
bcgov · Jan 8, 2025 · f84156e · f84156e
1 parent 4d041b7
commit f84156e
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 194 deletions.
diff --git a/src/components/about/OrgBookData.vue b/src/components/about/OrgBookData.vue
@@ -51,26 +51,25 @@
 import i18n from "@/i18n";
 import { ICredentialType } from "@/interfaces/api/v2/credential-type.interface";
 import { unwrapTranslations } from "@/utils/entity";
-import { Component, Vue } from "vue-property-decorator";
 import { mapGetters } from "vuex";
 
-@Component({
-  computed: {
-    ...mapGetters(["credentialTypesByIssuer"]),
-  },
-})
-export default class OrgBookData extends Vue {
-  formattedDescription(type: ICredentialType): string {
-    if (type?.format === "vc_di") {
-      // TODO: Eventually, this should be a translation from OCA
-      return type?.schema?.name;
-    }
-    return (
-      unwrapTranslations(type.schema_label)?.[i18n.locale]?.description ||
-      type?.description ||
-      ""
-    );
-  }
+export default {
+        computed: {
+                ...mapGetters(["credentialTypesByIssuer"]),
+        },
+        methods: {
+                formattedDescription(type: ICredentialType): string {
+                        if (type?.format === "vc_di") {
+                                // TODO: Eventually, this should be a translation from OCA
+                                return type?.schema?.name;
+                        }
+                        return (
+                                unwrapTranslations(type.schema_label)?.[i18n.locale]?.description ||
+                                        type?.description ||
+                                        ""
+                        );
+                }
+        }
 }
 </script>
 

diff --git a/src/components/about/ShowcaseLinks.vue b/src/components/about/ShowcaseLinks.vue
@@ -26,15 +26,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
 import { mapGetters } from "vuex";
 
-@Component({
-  computed: {
-    ...mapGetters(["showcaseLinks"]),
-  },
-})
-export default class ShowcaseLinks extends Vue {}
+export default {
+        computed: {
+                ...mapGetters(["showcaseLinks"]),
+        }
+}
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/contact/ContactForm.vue b/src/components/contact/ContactForm.vue
@@ -135,27 +135,9 @@ interface Data {
   alwaysRequired: Array<boolean | string | ((v: string) => string | boolean)>;
   condRequired: Array<boolean | string | ((v: string) => string | boolean)>;
 }
+const emailRegexp = RegExp(/.+@.+/)
 
-@Component({
-  computed: {
-    ...mapGetters(["loading", "credentialTypes", "getLikeStatus"]),
-  },
-  methods: {
-    ...mapActions(["setLoading", "sendContact"]),
-  },
-})
-export default class ContactForm extends Vue {
-  formData!: IContactRequest;
-  credentialTypes!: ICredentialType[];
-  additionalHelp!: boolean;
-  getLikeStatus!: "like" | "dislike" | "";
-  emailRules!: Array<boolean | string | ((v: string) => string | boolean)>;
-
-  setLoading!: (loading: boolean) => void;
-  sendContact!: (feedback: IContactRequest) => Promise<void>;
-  // eslint-disable-next-line
-  emailRegexp = RegExp(/.+@.+/);
-
+export default {
   data(): Data {
     return {
       formData: {
@@ -167,66 +149,74 @@ export default class ContactForm extends Vue {
       additionalHelp: false,
       emailRules: [
         // eslint-disable-next-line
-        (v: string) => this.emailRegexp.test(v) || "E-mail must be valid",
+        (v: string) => emailRegexp.test(v) || "E-mail must be valid",
       ],
       alwaysRequired: [(v: string) => !!v || "This field is required"],
       condRequired: [
         (v: string) => !!v || this.incorrectHidden || "This field is required",
       ],
     };
-  }
-
-  get requestTypes(): Array<{ text: string; value: string }> {
-    return Object.keys(contactReason).map((key) => ({
-      text: contactReason[key],
-      value: key,
-    }));
-  }
-
-  get formattedCredentialTypes(): Array<{ text: string; value: number }> {
-    return this.credentialTypes.map((credentialType) => ({
-      // TODO: remove unwrap translations functions after backend update
-      text:
-        unwrapTranslations(credentialType.schema_label)?.[this.$i18n.locale]
-          ?.label ??
-        credentialType.description ??
-        "",
-      value: credentialType.id,
-    }));
-  }
-
-  get incorrectHidden(): boolean {
-    return this.formData.reason !== "INCORRECT_INFO";
-  }
-
-  get labelMessage(): string {
-    return this.formData.reason === "INCORRECT_INFO"
-      ? "Describe the problem"
-      : "Message";
-  }
-
-  async submit(e: Event): Promise<void> {
-    e.preventDefault();
-    const isFormValid = (
-      this.$refs.form as Vue & { validate: () => boolean }
-    ).validate();
-    if (isFormValid) {
-      this.setLoading(true);
-      if (this.getLikeStatus !== "") {
-        this.formData.comments = `${this.getLikeStatus}:\n${this.formData.comments}`;
-      }
-      const data = { ...this.formData };
-      data.reason = contactReason[this.formData.reason];
-      if (this.formData.error !== undefined) {
-        data.error = this.formattedCredentialTypes.filter(
-          (type) => String(type.value) === this.formData.error
-        )[0]?.text;
+  },
+  methods: {
+    ...mapActions({
+      setLoading: "setLoading",
+      sendContact: "sendContact"
+    }),
+    async submit(e: Event): Promise<void> {
+      e.preventDefault();
+      const isFormValid = (
+        this.$refs.form as Vue & { validate: () => boolean }
+      ).validate();
+      if (isFormValid) {
+        this.setLoading(true);
+        if (this.getLikeStatus !== "") {
+          this.formData.comments = `${this.getLikeStatus}:\n${this.formData.comments}`;
+        }
+        const data = { ...this.formData };
+        data.reason = contactReason[this.formData.reason];
+        if (this.formData.error !== undefined) {
+          data.error = this.formattedCredentialTypes.filter(
+            (type) => String(type.value) === this.formData.error
+          )[0]?.text;
+        }
+        await this.sendContact(data);
+        this.setLoading(false);
+        router.push({ name: "Search" });
       }
-      await this.sendContact(data);
-      this.setLoading(false);
-      router.push({ name: "Search" });
     }
-  }
+
+  },
+  computed: {
+    ...mapGetters({
+      loading: "loading",
+      credentialTypes: "credentialTypes",
+      getLikeStatus: "getLikeStatus"
+    }),
+    requestTypes: function(): Array<{ text: string; value: string }> {
+      return Object.keys(contactReason).map((key) => ({
+        text: contactReason[key],
+        value: key,
+      }));
+    },
+    formattedCredentialTypes: function(): Array<{ text: string; value: number }> {
+      return this.credentialTypes.map((credentialType) => ({
+        // TODO: remove unwrap translations functions after backend update
+        text: unwrapTranslations(credentialType.schema_label)?.[this.$i18n.locale]
+          ?.label ??
+          credentialType.description ??
+          "",
+        value: credentialType.id,
+      }));
+    },
+    incorrectHidden: function(): boolean {
+      return this.formData.reason !== "INCORRECT_INFO";
+    },
+    labelMessage: function(): string {
+      return this.formData.reason === "INCORRECT_INFO"
+        ? "Describe the problem"
+        : "Message";
+    },
+  },
 }
 </script>
 

diff --git a/src/views/About.vue b/src/views/About.vue
@@ -16,46 +16,36 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
 import BackTo from "@/components/shared/BackTo.vue";
 import OrgBookData from "@/components/about/OrgBookData.vue";
 import SubHeader from "@/components/layout/header/SubHeader.vue";
 import ShowcaseLinks from "@/components/about/ShowcaseLinks.vue";
 import { mapActions, mapGetters } from "vuex";
 import { IDocRoute, IDocRouteData } from "@/interfaces/doc.interface";
 
-@Component({
-  components: {
-    BackTo,
-    OrgBookData,
-    SubHeader,
-    ShowcaseLinks,
-  },
+export default {
   computed: {
-    ...mapGetters(["docLinks", "docRoute", "showcaseLinks"]),
+    ...mapGetters({
+      docLinks: "docLinks",
+      docRoute: "docRoute",
+      showcaseLinks: "showcaseLinks"
+    }),
+    docRouteInfo: function(): IDocRoute {
+        return this.docRoute(this.$route.name || "");
+    },
+    docRouteData: function(): IDocRouteData | undefined {
+        return this.docRouteInfo?.data;
+    },
+    html: function(): string {
+        return this.docRouteData?.html || "";
+    },
   },
   methods: {
-    ...mapActions(["setLoading", "fetchCredentialTypes"]),
+    ...mapActions({
+      setLoading: "setLoading",
+      fetchCredentialTypes:  "fetchCredentialTypes"
+    })
   },
-})
-export default class About extends Vue {
-  docRoute!: (name: string) => IDocRoute;
-
-  setLoading!: (loading: boolean) => Promise<void>;
-  fetchCredentialTypes!: (paged: boolean) => Promise<void>;
-
-  get docRouteInfo(): IDocRoute {
-    return this.docRoute(this.$route.name || "");
-  }
-
-  get docRouteData(): IDocRouteData | undefined {
-    return this.docRouteInfo?.data;
-  }
-
-  get html(): string {
-    return this.docRouteData?.html || "";
-  }
-
   async created(): Promise<void> {
     this.setLoading(true);
     this.fetchCredentialTypes(false);

diff --git a/src/views/Contact.vue b/src/views/Contact.vue
@@ -14,24 +14,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
 import BackTo from "@/components/shared/BackTo.vue";
 import ContactForm from "@/components/contact/ContactForm.vue";
 import { mapActions } from "vuex";
 
-@Component({
-  components: {
-    BackTo,
-    ContactForm,
-  },
+export default {
   methods: {
-    ...mapActions(["setLoading", "fetchCredentialTypes"]),
+    ...mapActions({ setLoading: "setLoading", fetchCredentialTypes: "fetchCredentialTypes"}),
   },
-})
-export default class Contact extends Vue {
-  setLoading!: (loading: boolean) => void;
-  fetchCredentialTypes!: (paged: boolean) => Promise<void>;
-
   async created(): Promise<void> {
     this.setLoading(true);
     this.fetchCredentialTypes(false);

diff --git a/src/views/Entity.vue b/src/views/Entity.vue
@@ -12,18 +12,10 @@ import { mapActions } from "vuex";
 
 Component.registerHooks(["beforeRouteLeave"]);
 
-@Component({
-  components: {
-    EntityResult,
-  },
+export default {
   methods: {
-    ...mapActions(["clearFilter", "setScrollY"]),
+    ...mapActions({ clearFilter: "clearFilter", setScrollY: "setScrollY"}),
   },
-})
-export default class Entity extends Vue {
-  clearFilter!: () => Promise<void>;
-  setScrollY!: (top: number) => void;
-
   async beforeRouteLeave(
     to: Route,
     from: Route,