refactor: unify UI codebase to use defineComponent

apps/admin/components.d.ts

@@ -3,6 +3,8 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core';
 
+export {};
+
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DataTablesActionBarActionBar: typeof import('./src/components/data-tables/action-bar/action-bar.vue')['default'];
@@ -156,5 +158,3 @@ declare module '@vue/runtime-core' {
     WebPushWebPush: typeof import('./src/components/web-push/web-push.vue')['default'];
   }
 }
-
-export {};

apps/admin/package.json

@@ -61,8 +61,8 @@
     "vite": "^2.9.14",
     "vite-plugin-fonts": "^0.5.0",
     "vite-plugin-html": "^3.2.0",
-    "vite-plugin-pwa": "^0.12.2",
-    "vue-tsc": "^0.38.3",
+    "vite-plugin-pwa": "^0.12.3",
+    "vue-tsc": "^0.38.4",
     "workbox-window": "^6.5.3"
   },
   "bundledDependencies": [

apps/admin/src/app.vue

@@ -66,7 +66,7 @@
           <span class="mr-2">{{ $t('user._') }}</span>
           <v-icon>$user</v-icon>
         </v-btn>
-        <confirm-dialog :label="$t('common.logout._')" @confirm="logout">
+        <confirm-dialog :label="$t('common.logout._').toString()" @confirm="logout">
           <template v-slot:activator="{ attrs, on }">
             <v-btn text v-bind="attrs" v-on="on">
               <span>{{ $t('common.logout._') }}</span>

apps/admin/src/components/data-tables/action-bar/action-bar.vue

@@ -14,20 +14,16 @@
 </template>
 
 <script lang="ts">
-import type { VueConstructor, PropType } from 'vue';
-import Vue from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import { useMessages } from '@intake24/admin/stores';
 import upperFirst from 'lodash/upperFirst';
 import Delete from './delete.vue';
 import Read from './read.vue';
 import Download from './download.vue';
 import Edit from './edit.vue';
 
-interface Actionable {
-  [key: string]: () => Promise<void>;
-}
-
-export default (Vue as VueConstructor<Vue & Actionable>).extend({
+export default defineComponent({
   name: 'ActionBar',
 
   components: {
@@ -60,14 +56,15 @@ export default (Vue as VueConstructor<Vue & Actionable>).extend({
       const { ownerId, securables } = this.item;
       return this.actions.filter((action) => this.can({ action, ownerId, securables }));
     },
-    route(): string {
+    route(): string | null | undefined {
       return this.routePrefix ?? this.$route.name;
     },
   },
 
   methods: {
-    onAction(action: string): void {
-      this[`on${upperFirst(action)}`]();
+    async onAction(action: string): Promise<void> {
+      //@ts-expect-error types
+      await this[`on${upperFirst(action)}`]();
     },
 
     async onDelete(): Promise<void> {
@@ -77,7 +74,7 @@ export default (Vue as VueConstructor<Vue & Actionable>).extend({
       this.onSuccess('deleted');
     },
 
-    onSuccess(action: string): void {
+    async onSuccess(action: string): Promise<void> {
       const { id, name } = this.item;
       useMessages().success(this.$t(`common.msg.${action}`, { name: name ?? id }).toString());
       this.$emit('refresh');

apps/admin/src/components/data-tables/action-bar/delete.vue

@@ -1,6 +1,6 @@
 <template>
   <confirm-dialog
-    :label="$t('common.action.delete')"
+    :label="$t('common.action.delete').toString()"
     color="error"
     icon
     icon-left="$delete"

apps/admin/src/components/data-tables/data-table.vue

@@ -49,8 +49,7 @@ import isEqual from 'lodash/isEqual';
 import type { Dictionary } from '@intake24/common/types';
 import type { Pagination, PaginationMeta } from '@intake24/common/types/models';
 import ToolBar from '@intake24/admin/components/toolbar/tool-bar.vue';
-import handlesLoading from '@intake24/admin/mixins/handles-loading';
-import hasResource from '@intake24/admin/mixins/has-resource';
+import { handlesLoading, resource } from '@intake24/admin/mixins';
 import { useResource } from '@intake24/admin/stores';
 import ActionBar from './action-bar/action-bar.vue';
 import DataTableFilter from './data-table-filter.vue';
@@ -60,7 +59,7 @@ export default defineComponent({
 
   components: { ActionBar, DataTableFilter, ToolBar },
 
-  mixins: [handlesLoading, hasResource],
+  mixins: [handlesLoading, resource],
 
   props: {
     actions: {

apps/admin/src/components/entry/detail-mixin.ts

@@ -2,12 +2,11 @@ import { defineComponent } from 'vue';
 import fetchEntry from './fetch-entry';
 import hasEntry from './has-entry';
 import Layout from './layout.vue';
-import mapRefs from './map-refs';
 
 export default defineComponent({
   name: 'DetailMixin',
 
   components: { Layout },
 
-  mixins: [fetchEntry, hasEntry, mapRefs],
+  mixins: [fetchEntry, hasEntry],
 });

apps/admin/src/components/entry/fetch-entry.ts

@@ -1,10 +1,8 @@
-import type { VueConstructor } from 'vue';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { mapActions } from 'pinia';
-import type { HasEntryMixin } from '@intake24/admin/types';
 import { useEntry } from '@intake24/admin/stores';
 
-export default (Vue as VueConstructor<Vue & HasEntryMixin>).extend({
+export default defineComponent({
   async beforeRouteUpdate(to, from, next) {
     if (from.params.id === to.params.id) {
       next();
@@ -23,7 +21,7 @@ export default (Vue as VueConstructor<Vue & HasEntryMixin>).extend({
     ...mapActions(useEntry, ['requestEntry']),
 
     async fetch(id?: string): Promise<void> {
-      await this.requestEntry({ id: id ?? this.id });
+      await this.requestEntry({ id: id ?? this.$route.params.id });
     },
   },
 });

apps/admin/src/components/entry/form-mixin.ts

@@ -1,37 +1,34 @@
-import type { VueConstructor } from 'vue';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
 import { mapActions } from 'pinia';
 import { copy } from '@intake24/common/util';
 import type { Dictionary, ValidationError } from '@intake24/common/types';
-import type { FormMixin } from '@intake24/admin/types';
 import { form } from '@intake24/admin/helpers';
 import { SubmitFooter } from '@intake24/admin/components/forms';
 import { useEntry, useMessages } from '@intake24/admin/stores';
 import fetchEntry from './fetch-entry';
 import hasEntry from './has-entry';
 import Layout from './layout.vue';
-import mapRefs from './map-refs';
 import watchEntry from './watch-entry';
 
-type Mixins = InstanceType<typeof watchEntry>;
+type Method = 'get' | 'post' | 'patch' | 'put' | 'delete';
 
-export default (Vue as VueConstructor<Vue & FormMixin & Mixins>).extend({
+export default defineComponent({
   name: 'FormMixin',
 
   components: { Layout, SubmitFooter },
 
-  mixins: [fetchEntry, hasEntry, mapRefs, watchEntry],
+  mixins: [fetchEntry, hasEntry, watchEntry],
 
   provide: () => ({
     editsResource: true,
   }),
 
   data() {
     return {
-      editMethod: 'put',
-      form: form({}),
+      editMethod: 'put' as Method,
+      form: form<Dictionary>({}),
       nonInputErrorKeys: [] as string[],
     };
   },

apps/admin/src/components/entry/has-entry.ts

@@ -1,7 +1,5 @@
 import { defineComponent } from 'vue';
-import { mapState } from 'pinia';
-import { useEntry } from '@intake24/admin/stores';
-import hasResource from '@intake24/admin/mixins/has-resource';
+import { resource } from '@intake24/admin/mixins';
 
 export default defineComponent({
   props: {
@@ -11,28 +9,14 @@ export default defineComponent({
     },
   },
 
-  mixins: [hasResource],
+  mixins: [resource],
 
   computed: {
-    ...mapState(useEntry, {
-      entry: 'data',
-      entryLoaded: 'dataLoaded',
-    }),
     isCreate(): boolean {
       return this.id === 'create';
     },
     isEdit(): boolean {
       return !this.isCreate;
     },
   },
-
-  methods: {
-    canHandleEntry(action: string): boolean {
-      if (this.isCreate) return false;
-
-      const { securables, ownerId } = this.entry;
-
-      return this.can({ action, securables, ownerId });
-    },
-  },
 });

apps/admin/src/components/entry/index.ts

@@ -0,0 +1,9 @@
+export * from './use-store-entry';
+
+export { default as detailMixin } from './detail-mixin';
+export { default as fetchEntry } from './fetch-entry';
+export { default as formMixin } from './form-mixin';
+export { default as hasEntry } from './has-entry';
+export { default as watchEntry } from './watch-entry';
+
+export { default as Layout } from './layout.vue';

apps/admin/src/components/entry/layout.vue

@@ -18,7 +18,7 @@
         <v-spacer></v-spacer>
         <confirm-dialog
           v-if="canHandleEntry('delete')"
-          :label="$t('common.action.delete')"
+          :label="$t('common.action.delete').toString()"
           color="error"
           icon-left="$delete"
           @confirm="remove"
@@ -84,7 +84,7 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import has from 'lodash/has';
 import { ConfirmDialog } from '@intake24/ui';
-import hasResource from '@intake24/admin/mixins/has-resource';
+import { resource } from '@intake24/admin/mixins';
 import { useMessages } from '@intake24/admin/stores';
 import type { RouteLeave } from '@intake24/admin/types';
 import type { Dictionary } from '@intake24/common/types';
@@ -94,7 +94,7 @@ export default defineComponent({
 
   components: { ConfirmDialog },
 
-  mixins: [hasResource],
+  mixins: [resource],
 
   inject: {
     editsResource: { default: false },

apps/admin/src/components/entry/use-store-entry.ts

@@ -0,0 +1,30 @@
+import { computed } from 'vue';
+import { useEntry, useUser } from '@intake24/admin/stores';
+import type { Dictionary } from '@intake24/common/types';
+
+export const useStoreEntry = <T = Dictionary, R = Dictionary>(id: string) => {
+  const entryStore = useEntry();
+
+  const entry = computed(() => entryStore.data as T);
+  const entryLoaded = computed(() => entryStore.dataLoaded);
+
+  const refs = computed(() => entryStore.refs as R);
+  const refsLoaded = computed(() => entryStore.refsLoaded);
+
+  const isCreate = computed(() => id === 'create');
+  const isEdit = computed(() => !isCreate.value);
+
+  const canHandleEntry = (action: string) => {
+    if (isCreate.value) return false;
+
+    const { securables, ownerId } = entryStore.data;
+
+    return useUser().can({ action, securables, ownerId });
+  };
+
+  const fetchEntry = async (entryId?: string) => {
+    await entryStore.requestEntry({ id: entryId ?? id });
+  };
+
+  return { canHandleEntry, entry, entryLoaded, fetchEntry, isCreate, isEdit, refs, refsLoaded };
+};

apps/admin/src/components/feedback/cards/card-list.vue

@@ -53,7 +53,7 @@
             </v-list-item-action>
             <v-list-item-action>
               <confirm-dialog
-                :label="$t('feedback-schemes.cards.remove')"
+                :label="$t('feedback-schemes.cards.remove').toString()"
                 color="error"
                 icon
                 icon-left="$delete"

apps/admin/src/components/feedback/cards/card-types/nutrient-group.vue

@@ -102,9 +102,11 @@ export default defineComponent({
     },
     high: {
       type: Object as PropType<NutrientGroup['high']>,
+      required: true,
     },
     low: {
       type: Object as PropType<NutrientGroup['low']>,
+      required: true,
     },
     unit: {
       type: Object as PropType<NutrientGroup['unit']>,

apps/admin/src/components/feedback/cards/partials/card-content.vue

@@ -18,7 +18,7 @@
       </template>
     </language-selector>
     <language-selector
-      :label="$t('feedback-schemes.cards.description')"
+      :label="$t('feedback-schemes.cards.description').toString()"
       :value="description"
       @input="update('description', $event)"
     >

apps/admin/src/components/feedback/cards/partials/card-thresholds.vue

@@ -24,7 +24,7 @@
                 v-model.number="item.threshold"
               ></v-slider>
               <language-selector
-                :label="$t('feedback-schemes.cards.thresholds.message')"
+                :label="$t('feedback-schemes.cards.thresholds.message').toString()"
                 v-model="item.message"
               >
                 <template v-for="lang in Object.keys(item.message)" v-slot:[`lang.${lang}`]>

apps/admin/src/components/feedback/cards/partials/card-unit.vue

@@ -1,6 +1,9 @@
 <template>
   <v-tab-item key="unit">
-    <language-selector :label="$t('feedback-schemes.cards.unit.name')" v-model="internalUnit.name">
+    <language-selector
+      :label="$t('feedback-schemes.cards.unit.name').toString()"
+      v-model="internalUnit.name"
+    >
       <template v-for="lang in Object.keys(internalUnit.name)" v-slot:[`lang.${lang}`]>
         <v-text-field
           v-model="internalUnit.name[lang]"
@@ -13,7 +16,7 @@
       </template>
     </language-selector>
     <language-selector
-      :label="$t('feedback-schemes.cards.unit.description')"
+      :label="$t('feedback-schemes.cards.unit.description').toString()"
       v-model="internalUnit.name"
     >
       <template v-for="lang in Object.keys(internalUnit.description)" v-slot:[`lang.${lang}`]>

apps/admin/src/components/feedback/cards/partials/character-sentiments.vue

@@ -36,7 +36,7 @@
               ></v-select>
             </v-col>
             <v-col cols="12">
-              <language-selector v-model="sentiment.name" :label="$t('common.name')">
+              <language-selector v-model="sentiment.name" :label="$t('common.name').toString()">
                 <template v-for="lang in Object.keys(sentiment.name)" v-slot:[`lang.${lang}`]>
                   <v-text-field
                     v-model="sentiment.name[lang]"

apps/admin/src/components/feedback/demographic-groups/demographic-group-list.vue

@@ -51,7 +51,7 @@
             </v-list-item-action>
             <v-list-item-action>
               <confirm-dialog
-                :label="$t('feedback-schemes.demographic-groups.remove')"
+                :label="$t('feedback-schemes.demographic-groups.remove').toString()"
                 color="error"
                 icon
                 icon-left="$delete"