Convert class components to options components for filter

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>
 

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>

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>
 

src/components/entity/filter/CustomFilterFacetPanel.vue

@@ -10,12 +10,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component({
-  components: {},
-})
-export default class CustomFilterFacetPanel extends Vue {
-  @Prop({ default: "" }) title!: string;
+export default {
+        components: {},
+        props: {
+                title: {
+                        type:  String,
+                        default: ""
+                }
+        }
 }
 </script>

src/components/entity/filter/EntityFilterChips.vue

@@ -30,50 +30,52 @@ export interface EntityChips {
   filterString: string | boolean;
   filterField: string;
 }
-
-@Component({
-  computed: {
-    ...mapGetters(["getEntityFilters", "mdiClose"]),
-  },
-  methods: {
-    ...mapActions(["toggleEntityFilter"]),
-  },
-})
-export default class EntityFilterChips extends Vue {
-  getEntityFilters!: IEntityFilter;
-
-  get activeEntityFilters(): EntityChips[] {
-    var chips: EntityChips[] = [];
-    Object.keys(this.getEntityFilters).forEach((key) => {
-      if (Array.isArray(this.getEntityFilters[key])) {
-        chips.push(
-          ...(this.getEntityFilters[key] as string[]).map((item) => {
-            return { filterField: key, filterString: item };
-          })
-        );
-      } else if (
-        typeof this.getEntityFilters[key] === "string" &&
-        this.getEntityFilters[key] !== ""
-      ) {
-        let prefix = "";
-        if (key.startsWith("date")) {
-          prefix = key === "date_min" ? "From: " : "To: ";
-        }
-        chips.push({
-          filterField: key,
-          filterString: (prefix + this.getEntityFilters[key]) as string,
-        });
-      } else if (this.getEntityFilters[key]) {
-        chips.push({
-          filterField: key,
-          filterString:
+export default {
+        computed: {
+                ...mapGetters({
+                        getEntityFilters: "getEntityFilters",
+                        mdiClose: "mdiClose"
+                }),
+                activeEntityFilters: {
+                        get(): EntityChips[] {
+                                var chips: EntityChips[] = [];
+                                Object.keys(this.getEntityFilters).forEach((key) => {
+                                        if (Array.isArray(this.getEntityFilters[key])) {
+                                                chips.push(
+                                                        ...(this.getEntityFilters[key] as string[]).map((item) => {
+                                                                return { filterField: key, filterString: item };
+                                                        })
+                                                );
+                                        } else if (
+                                                typeof this.getEntityFilters[key] === "string" &&
+                                                        this.getEntityFilters[key] !== ""
+                                        ) {
+                                                let prefix = "";
+                                                if (key.startsWith("date")) {
+                                                        prefix = key === "date_min" ? "From: " : "To: ";
+                                                }
+                                                chips.push({
+                                                        filterField: key,
+                                                        filterString: (prefix + this.getEntityFilters[key]) as string,
+                                                });
+                                        } else if (this.getEntityFilters[key]) {
+                                                chips.push({
+                                                        filterField: key,
+                                                        filterString:
             key === "show_expired"
-              ? "Show Inactive Credentials"
-              : (key as string),
-        });
-      }
-    });
-    return chips;
-  }
+                    ? "Show Inactive Credentials"
+                    : (key as string),
+                                                });
+                                        }
+                                });
+                                return chips;
+                        }
+                },
+        },
+        methods: {
+                ...mapActions({
+                        toggleEntityFilter: "toggleEntityFilter"
+                }),
+        }
 }
 </script>

src/components/entity/filter/EntityFilterDialog.vue

@@ -39,28 +39,21 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
 import { mapGetters } from "vuex";
 import EntityFilterFacetPanels from "@/components/entity/filter/EntityFilterFacetPanels.vue";
 
 interface Data {
   dialog: boolean;
 }
-
-@Component({
-  components: {
-    EntityFilterFacetPanels,
-  },
-  computed: {
-    ...mapGetters(["loading", "mdiFilterOutline", "mdiClose"]),
-  },
-})
-export default class EntityFilterDialog extends Vue {
-  data(): Data {
-    return {
-      dialog: false,
-    };
-  }
+export default {
+        data(): Data {
+                return {
+                        dialog: false,
+                };
+        },
+        computed: {
+                ...mapGetters(["loading", "mdiFilterOutline", "mdiClose"]),
+        }
 }
 </script>