[Vue3] Fixed some more error and merge issues

package.json

@@ -14,7 +14,7 @@
     "axios": "^0.21.1",
     "cordova": "^10.0.0",
     "core-js": "^3.7.0",
-    "quasar": "^2.0.0-alpha.15",
+    "quasar": "^2.0.0-alpha.17",
     "vue-router": "4.0.3"
   },
   "prettier": {
@@ -24,7 +24,7 @@
     "arrowParens": "always"
   },
   "devDependencies": {
-    "@quasar/app": "^3.0.0-alpha.8",
+    "@quasar/app": "^3.0.0-alpha.9",
     "@quasar/quasar-app-extension-qcalendar": "^3.3.4",
     "@types/node": "^12.19.6",
     "@types/webpack": "^4.41.26",

src-cordova/cordova-flag.d.ts

@@ -1,8 +1,8 @@
 // THIS FEATURE-FLAG FILE IS AUTOGENERATED,
 //  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
+import 'quasar/dist/types/feature-flag';
 
-declare module "quasar/dist/types/feature-flag" {
+declare module 'quasar/dist/types/feature-flag' {
   interface QuasarFeatureFlags {
     cordova: true;
   }

src/components/about/Developer.vue

@@ -28,24 +28,28 @@ export default defineComponent({
   props: {
     pic: {
       default: 'logo-dark.svg',
+      type: String,
     },
     firstname: {
-      //required: true,
+      required: true,
-      default: 'firstname',
+      type: String,
     },
     lastname: {
-      //required: true,
+      required: true,
-      default: 'lastname',
+      type: String,
     },
     job: {
       default: 'student',
+      type: String,
     },
     club: {
       default: 'Studentenclub Wu5 e.V.',
+      type: String,
     },
     description: {
       default:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
+      type: String,
     },
   },
 });

src/components/navigation/EssentialLink.vue

@@ -25,23 +25,21 @@ export default defineComponent({
       type: String,
       required: true,
     },
-
     caption: {
       type: String,
       default: '',
     },
-
     link: {
       type: String,
       default: 'dashboard',
     },
-
     icon: {
       type: String,
       default: '',
     },
     permissions: {
-      default: undefined,
+      default: () => Array<string>(),
+      type: Array as () => Array<string>,
     },
   },
 
@@ -59,7 +57,7 @@ export default defineComponent({
       return props.title;
     });
 
-    const isGranted = computed(() => hasPermissions(props.permissions || []));
+    const isGranted = computed(() => hasPermissions(props.permissions));
 
     return { realTitle: title, isGranted };
   },

src/components/navigation/ShortCutLink.vue

@@ -19,6 +19,7 @@ export default defineComponent({
     },
     permissions: {
       default: undefined,
+      type: Array as () => Array<string>,
     },
   },
   setup(props) {

src/components/utils/IsoDateInput.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref, PropType } from 'vue';
 import { date } from 'quasar';
 
 export default defineComponent({
@@ -48,18 +48,14 @@ export default defineComponent({
       default: 'date',
       validator: (value: string) => ['date', 'time', 'datetime'].indexOf(value) !== -1,
     },
-    label: String,
+    label: { type: String, default: 'Datum' },
-    readonly: {
+    readonly: Boolean,
-      type: Boolean,
-      default: false,
-    },
-
     rules: {
-      default: () => {
+      type: Array as PropType<unknown[]>,
-        return [];
+      default: () => [],
-      },
     },
   },
+  emits: { input: (date: string) => date.length > 5 },
   setup(props, { emit }) {
     function getDateTime() {
       if (typeof props.value == 'object') {
@@ -108,7 +104,7 @@ export default defineComponent({
 
       if (/^\d{4}-\d\d-\d\d$/.test(dateString)) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        emit('input', new Date(`${_date.value} ${_time.value}`));
+        emit('input', new Date(`${_date.value} ${_time.value}`).toISOString());
       } else {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
         emit('input', dateString);
@@ -122,7 +118,7 @@ export default defineComponent({
       }
       if (/^\d\d:\d\d$/.test(timeString)) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        emit('input', new Date(`${_date.value} ${_time.value}`));
+        emit('input', new Date(`${_date.value} ${_time.value}`).toISOString());
       } else {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
         emit('input', timeString);
@@ -145,7 +141,7 @@ export default defineComponent({
           if (/^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(dateTimeString)) {
             console.log('dateTimeChanged');
             // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-            emit('input', new Date(`${_date.value} ${_time.value}`));
+            emit('input', new Date(`${_date.value} ${_time.value}`).toISOString());
           } else {
             // eslint-disable-next-line @typescript-eslint/no-unsafe-call
             emit('input', dateTimeString);

src/pages/PluginError.vue

@@ -38,7 +38,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'PluginError.vue',
+  name: 'PluginError',
 });
 </script>
 

src/plugins/balance/components/BalanceAdd.vue

@@ -63,16 +63,15 @@
 <script lang="ts">
 import { computed, ref, defineComponent, onBeforeMount } from 'vue';
 import { hasPermission } from 'src/utils/permission';
-import { BalanceInterface, StateInterfaceBalance } from '../store/balance';
 import { Store, useStore, mapGetters } from 'vuex';
 import BalanceHeader from '../components/BalanceHeader.vue';
 import PERMISSIONS from '../permissions';
-import { UserStateInterface } from 'src/plugins/user/store/user';
 import { StateInterface } from 'src/store';
 
 export default defineComponent({
   name: 'BalanceAdd',
   components: { BalanceHeader },
+  emits: { 'open-history': () => true },
   setup(_, { emit }) {
     onBeforeMount(() => {
       void store.dispatch('balance/getShortcuts');
@@ -84,16 +83,12 @@ export default defineComponent({
     });
     //const store = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore<Store<StateInterface>>();
-    const userStore = useStore<Store<UserStateInterface>>();
-    //const userState = <UserStateInterface>store.state.user;
-    //const balanceState = <BalanceInterface>store.state.balance;
     const userGetters = mapGetters('users', ['currentUser', 'roles', 'users']);
     const balanceGatters = mapGetters('balance', ['balances', 'transactions', 'shortcuts']);
 
     const amount = ref<number>(0);
     const showAddShortcut = ref(false);
-    //const user = ref(userState.currentUser);
+    const user = ref(<FG.User>userGetters.currentUser());
-    const user = computed(() => <FG.User>userGetters.currentUser());
     //const shortCuts = ref(balanceState.shortcuts);
     const shortCuts = computed(() => <number[]>balanceGatters.shortcuts());
 
@@ -109,8 +104,7 @@ export default defineComponent({
       void store.dispatch('balance/removeShortcut', shortcut);
     }
     function userUpdated(selectedUser: FG.User) {
-      //TODO:
+      user.value = selectedUser;
-      //user.value = selectedUser;
     }
     function changeBalance(amount: number) {
       store

src/plugins/balance/components/BalanceHeader.vue

@@ -17,27 +17,19 @@
 import { ref, computed, defineComponent, onBeforeMount } from 'vue';
 import UserSelector from 'src/plugins/user/components/UserSelector.vue';
 import { StateInterfaceBalance, UserBalance } from '../store/balance';
-import { Store, useStore, mapGetters } from 'vuex';
+import { useStore, mapGetters } from 'vuex';
-import { UserStateInterface } from 'src/plugins/user/store/user';
-import { StateInterface } from 'src/store';
-
-interface Props {
-  showSelector: boolean;
-}
 
 export default defineComponent({
   name: 'BalanceHeader',
   components: { UserSelector },
-  props: ['showSelector'],
+  props: { showSelector: Boolean },
+  emits: { 'update:user': (u: FG.User) => !!u, 'open-history': () => true },
   setup(_, { emit }) {
     onBeforeMount(() => void store.dispatch('balance/getBalance'));
-    //const store = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore<StateInterfaceBalance>();
     const userGetters = mapGetters('users', ['currentUser']);
     const balanceGetters = mapGetters('balance', ['balances']);
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const user = ref(<FG.User>userGetters.currentUser());
-    //const user = ref(<FG.User>store.state.user.currentUser);
-    const user = computed(() => <FG.User>userGetters.currentUser());
     const balance = computed(() => {
       return (
         (<Map<string, UserBalance>>balanceGetters.balances()).get(user.value.userid) || {
@@ -53,14 +45,11 @@ export default defineComponent({
 
     function userUpdated(selectedUser: FG.User) {
       void store.dispatch('balance/getBalance', selectedUser);
-      //TODO:!!
+      user.value = selectedUser;
-      //user.value = selectedUser;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       emit('update:user', selectedUser);
     }
 
     function openHistory() {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       emit('open-history');
     }
 

src/plugins/balance/components/BalanceTransfer.vue

@@ -38,13 +38,13 @@ import { StateInterface } from 'src/store';
 export default defineComponent({
   name: 'BalanceTransfer',
   components: { BalanceHeader, UserSelector },
+  emits: { 'open-history': () => true },
   setup(_, { emit }) {
-    //const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore<Store<StateInterface>>();
     const userGetters = mapGetters('users', ['currentUser']);
 
     const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER));
-    const sender = computed(() => <FG.User>userGetters.currentUser());
+    const sender = ref(<FG.User>userGetters.currentUser());
     const receiver = ref<FG.User | undefined>(undefined);
     const amount = ref<number>(0);
 
@@ -59,8 +59,7 @@ export default defineComponent({
 
     function senderUpdated(selectedUser: FG.User) {
       console.log(selectedUser);
-      //TOOD:!!
+      sender.value = selectedUser;
-      //sender.value = selectedUser;
     }
     function receiverUpdated(selectedUser: FG.User) {
       receiver.value = selectedUser;

src/plugins/balance/components/Transaction.vue

@@ -30,30 +30,25 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, defineComponent, onUnmounted, onMounted } from 'vue';
+import { ref, computed, defineComponent, onUnmounted, onMounted, PropType } from 'vue';
 import { hasPermission } from 'src/utils/permission';
 import { formatDateTime } from 'src/utils/datetime';
 import { mapGetters, Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
-import { UserStateInterface } from 'src/plugins/user/store/user';
-
-interface Props {
-  transaction: FG.Transaction;
-}
 
 export default defineComponent({
   name: 'Transaction',
   props: {
     transaction: {
-      type: Object,
       required: true,
+      type: Object as PropType<FG.Transaction>,
     },
   },
+  emits: { 'update:transaction': (t: FG.Transaction) => !!t },
   watch: { transaction: 'refreshText' },
   setup(props, { emit }) {
     const now = ref(Date.now());
     const ival = setInterval(() => (now.value = Date.now()), 1000);
-    //const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore<Store<StateInterface>>();
     const userGetters = mapGetters('users', ['currentUser']);
     const text = ref('');
@@ -69,7 +64,7 @@ export default defineComponent({
         text.value = 'Anschreiben';
         if (props.transaction.receiver_id !== null) {
           const user = <FG.User>await store.dispatch('user/getUser', {
-            userid: <number>props.transaction.receiver_id,
+            userid: props.transaction.receiver_id,
           });
           text.value = `Gesendet an ${user.display_name}`;
         }
@@ -77,7 +72,7 @@ export default defineComponent({
         text.value = 'Gutschrift';
         if (props.transaction.sender_id !== null) {
           const user = <FG.User>await store.dispatch('user/getUser', {
-            userid: <number>props.transaction.sender_id,
+            userid: props.transaction.sender_id,
           });
           text.value = `Bekommen von ${user.display_name}`;
         }
@@ -93,7 +88,7 @@ export default defineComponent({
         !isReversed.value &&
         (hasPermission('balance_reversal') ||
           (props.transaction.sender_id === (<FG.User>userGetters.currentUser())?.userid &&
-            now.value - (<Date>props.transaction.time).getTime() < 10000))
+            now.value - props.transaction.time.getTime() < 10000))
     );
 
     function reverse() {
@@ -107,7 +102,7 @@ export default defineComponent({
     }
 
     const timeStr = computed(() => {
-      const elapsed = (now.value - (<Date>props.transaction.time).getTime()) / 1000;
+      const elapsed = (now.value - props.transaction.time.getTime()) / 1000;
       if (elapsed < 60) return `Vor ${elapsed.toFixed()} s`;
       return formatDateTime(props.transaction.time, elapsed > 12 * 60 * 60, true, true) + ' Uhr';
     });

src/plugins/balance/components/Widget.vue

@@ -8,13 +8,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeMount } from 'vue';
-import {
+import { UserBalance } from 'src/plugins/balance/store/balance';
-  BalanceInterface,
-  StateInterfaceBalance,
-  UserBalance,
-} from 'src/plugins/balance/store/balance';
 import { mapGetters, Store, useStore } from 'vuex';
-import { UserStateInterface } from 'src/plugins/user/store/user';
 import { StateInterface } from 'src/store';
 
 export default defineComponent({
@@ -26,7 +21,6 @@ export default defineComponent({
       });
     });
 
-    //const store = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore<Store<StateInterface>>();
     const balanceGetters = mapGetters('balance', ['balances']);
     const userGetters = mapGetters('user', ['currentUser']);

src/plugins/balance/pages/Admin.vue

@@ -14,12 +14,11 @@
 // TODO: Fill usefull data
 
 import { ref, defineComponent, onMounted } from 'vue';
-import { StateInterfaceBalance, BalancesResponse } from '../store/balance';
+import { BalancesResponse } from '../store/balance';
-import { Store, useStore } from 'vuex';
+import { useStore } from 'vuex';
 export default defineComponent({
   // name: 'PageName'
   setup() {
-    //const store = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore();
 
     onMounted(

src/plugins/balance/pages/MainPage.vue

@@ -33,7 +33,6 @@
       </q-list>
       <q-list v-if="show">
         <div v-for="(transaction, index) in transactions" :key="index" class="col-sm-12">
-          <!-- TODO: In Vue3 use v-model:transaction="..." -->
           <Transaction v-model:transaction="transactions[index]" />
         </div>
       </q-list>
@@ -69,13 +68,11 @@
 <script lang="ts">
 import { computed, defineComponent, ref, onMounted } from 'vue';
 import { mapGetters, Store, useStore } from 'vuex';
-import { hasPermissions, hasSomePermissions } from 'src/utils/permission';
+import { hasSomePermissions } from 'src/utils/permission';
 import PERMISSIONS from '../permissions';
-import { Screen } from 'quasar';
 import BalanceAdd from '../components/BalanceAdd.vue';
 import BalanceTransfer from '../components/BalanceTransfer.vue';
 import Transaction from '../components/Transaction.vue';
-import { BalanceInterface, StateInterfaceBalance } from '../store/balance';
 import { StateInterface } from 'src/store';
 
 export default defineComponent({
@@ -115,7 +112,7 @@ export default defineComponent({
         : []),
     ];
 
-    const drawer = ref<boolean>(false);
+    //const drawer = ref<boolean>(false);
 
     /*    const showDrawer = computed({
       get: () => {

src/plugins/balance/pages/Overview.vue

@@ -33,16 +33,10 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from 'vue';
-import {
+import { TransactionsResponse, UserBalance } from '../store/balance';
-  BalanceInterface,
-  StateInterfaceBalance,
-  TransactionsResponse,
-  UserBalance,
-} from '../store/balance';
 import { mapGetters, Store, useStore } from 'vuex';
 import { formatDateTime } from 'src/utils/datetime';
 import { StateInterface } from 'src/store';
-import { UserStateInterface } from 'src/plugins/user/store/user';
 
 export default defineComponent({
   // name: 'PageName'

src/plugins/balance/store/balance.ts

@@ -1,6 +1,6 @@
 import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
 //import store, { StateInterface } from 'src/store';
-import store, { StateInterface } from 'src/store';
+import { StateInterface } from 'src/store';
 import { axios } from 'src/boot/axios';
 import { AxiosResponse } from 'axios';
 

src/plugins/schedule/components/management/CreateEvent.vue

@@ -67,17 +67,15 @@
 import { defineComponent, ref, onBeforeMount, computed } from 'vue';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
 import Job from './Job.vue';
-import { mapGetters, Store, useStore } from 'vuex';
+import { mapGetters, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
-import { ScheduleInterface } from '../../store/schedule';
 import { date } from 'quasar';
 
 export default defineComponent({
   name: 'CreateEvent',
   components: { IsoDateInput, Job },
   setup() {
-    //const store = <Store<StateInterface>>root.$store;
+    const store = useStore<StateInterface>();
-    const store = useStore<Store<StateInterface>>();
     const scheduleGetters = mapGetters('schedule', ['eventTypes']);
     const eventtypes = computed(() => <FG.EventType[]>scheduleGetters.eventTypes());
     const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
@@ -115,8 +113,8 @@ export default defineComponent({
       data.job.comment = data.value;
     }
 
-    function setJobType(data: { job: FG.Job; value: FG.JobType }) {
+    function setJobType(job: FG.Job, value: FG.JobType) {
-      data.job.type = data.value;
+      job.type = value;
     }
 
     function setRequired(data: { job: FG.Job; value: number }) {
@@ -161,6 +159,7 @@ export default defineComponent({
     }
 
     function isAfterDate(val: Date) {
+      return !!val;
       // return event.value.jobsstart.getTime() > val.getTime() || 'Ende muss hinter dem Start liegen';
     }
     return {

src/plugins/schedule/components/management/Eventtypes.vue

@@ -48,7 +48,7 @@
 import { defineComponent, ref, computed, onBeforeMount } from 'vue';
 import { mapGetters, Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
-import { ScheduleInterface, EventType } from '../../store/schedule';
+import { EventType } from '../../store/schedule';
 export default defineComponent({
   name: 'EventTypes',
   components: {},

src/plugins/schedule/components/management/Job.vue

@@ -62,62 +62,54 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from 'vue';
+import { defineComponent, computed, ref, PropType } from 'vue';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
-import { mapGetters, Store, useStore } from 'vuex';
+import { mapGetters } from 'vuex';
-import { StateInterface } from 'src/store';
-import { ScheduleInterface } from '../../store/schedule';
 import { date } from 'quasar';
-interface Props {
+
-  job: FG.Job;
-  jobCanDelete: boolean;
-}
 export default defineComponent({
   name: 'Job',
   components: { IsoDateInput },
   props: {
     job: {
       required: true,
+      type: Object as PropType<FG.Job>,
     },
-    jobCanDelete: {
+    jobCanDelete: Boolean,
-      default: false,
   },
+  emits: {
+    'set-start': (d: Date) => !!d,
+    'remove-job': () => true,
+    'set-end': (d: Date) => !!d,
+    'set-comment': (c: string) => !!c,
+    'set-job-type': (jt: FG.JobType) => !!jt,
+    'set-required': (r: number) => isFinite(r),
   },
   setup(props, { emit }) {
-    //const store = <Store<StateInterface>>root.$store;
-    const store = useStore<Store<StateInterface>>();
     const scheduleGetters = mapGetters('schedule', ['jobTypes']);
     const jobtypes = computed(() => <FG.JobType[]>scheduleGetters.jobTypes());
 
     function setStart(value: Date) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('set-start', value);
-      emit('set-start', { job: props.job, value });
     }
 
     function setEnd(value: Date) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('set-end', value);
-      emit('set-end', { job: props.job, value });
     }
 
     function setComment(value: string) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('set-comment', value);
-      emit('set-comment', { job: props.job, value });
     }
 
     function setJobType(value: FG.JobType) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('set-job-type', value);
-      console.log('setJobType', value);
-      emit('set-job-type', { job: props.job, value });
-      refresh();
     }
 
     function setRequired(value: number) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('set-required', value);
-      emit('set-required', { job: props.job, value });
     }
 
     function removeJob() {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       emit('remove-job');
     }
 
@@ -130,8 +122,8 @@ export default defineComponent({
     }
 
     function isAfterDate(val: Date) {
-      console.log('isAfterDate', (<FG.Job>props.job).start, val);
+      console.log('isAfterDate', props.job.start, val);
-      return (<FG.Job>props.job).start < new Date(val) || 'Ende muss hinter dem Start liegen';
+      return props.job.start < new Date(val) || 'Ende muss hinter dem Start liegen';
     }
 
     const refreshKey = ref(0);

src/plugins/schedule/components/management/JobTypes.vue

@@ -48,7 +48,7 @@
 import { defineComponent, ref, computed, onBeforeMount } from 'vue';
 import { mapGetters, Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
-import { ScheduleInterface, JobType } from '../../store/schedule';
+import { JobType } from '../../store/schedule';
 export default defineComponent({
   name: 'JobTypes',
   components: {},

src/plugins/schedule/pages/MainPage.vue

@@ -24,17 +24,13 @@
 import { computed, defineComponent } from 'vue';
 import EssentialLink from 'src/components/navigation/EssentialLink.vue';
 import mainRoutes from 'src/plugins/schedule/routes';
-import { mapGetters, Store, useStore } from 'vuex';
+import { mapGetters } from 'vuex';
-import { BalanceInterface } from 'src/plugins/balance/store/balance';
 import setLoadingBar from 'src/utils/loading';
-import { StateInterface } from 'src/store';
 import { useRoute } from 'vue-router';
 export default defineComponent({
   // name: 'PageName'
   components: { EssentialLink },
-  setup(_) {
+  setup() {
-    //const store = <Store<StateInterface>>root.$store;
-    const store = useStore<Store<StateInterface>>();
     const balanceGetters = mapGetters('balance', ['loading']);
     const route = useRoute();
     const loading = computed(() => {

src/plugins/user/components/settings/MainUserSettings.vue

@@ -107,14 +107,12 @@
 </template>
 
 <script lang="ts">
-// https://github.com/vuejs/vue-next/issues/3130
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useStore } from 'vuex';
 import { Notify } from 'quasar';
 import { UserSessionState } from '../../store';
 import { hasPermission } from 'src/utils/permission';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
-import { defineComponent, computed, ref, onBeforeMount } from 'vue';
+import { defineComponent, computed, ref, onBeforeMount, Prop } from 'vue';
 
 export default defineComponent({
   name: 'MainUserSettings',
@@ -123,7 +121,7 @@ export default defineComponent({
     user: {
       required: true,
       type: Object,
-    },
+    } as Prop<FG.User>,
     newUser: { type: Boolean, required: true },
   },
   emits: {
@@ -131,7 +129,7 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const store = useStore<UserSessionState>();
-    const user_model = ref(<FG.User>props.user);
+    const user_model = ref(props.user);
 
     onBeforeMount(() => {
       store.dispatch('users/getRoles', false).catch((error) => {
@@ -140,7 +138,7 @@ export default defineComponent({
     });
 
     const isCurrentUser = computed(
-      () => user_model.value.userid === store.state.users.currentUser?.userid
+      () => user_model.value?.userid === store.state.users.currentUser?.userid
     );
 
     const canSetRoles = computed(() => hasPermission('users_set_roles'));
@@ -164,7 +162,7 @@ export default defineComponent({
     const new_password2 = ref('');
 
     function save() {
-      let changed: FG.User = user_model.value;
+      let changed = <FG.User>user_model.value;
       if (typeof changed.birthday === 'string') changed.birthday = new Date(changed.birthday);
       changed = Object.assign(changed, {
         password: password.value,
@@ -194,8 +192,7 @@ export default defineComponent({
     }
 
     function reset() {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      user_model.value = props.user;
-      user_model.value = <FG.User>props.user;
       password.value = '';
       new_password.value = '';
       new_password2.value = '';

src/store/index.ts

@@ -6,7 +6,7 @@ import { SessionStateInterface } from 'src/plugins/user/store/session';
 export interface StateInterface {
   user: UserStateInterface;
   session: SessionStateInterface;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 export default store(function (/* { ssrContext } */) {

tsconfig.json

@@ -8,8 +8,9 @@
       "dom"
     ],
     "types": [
+      "node",
       "webpack-env",
-      "node"
+      "@quasar/app"
     ]
  }
 }

yarn.lock

@@ -1005,7 +1005,7 @@
   resolved "https://registry.yarnpkg.com/@positron/stack-trace/-/stack-trace-1.0.0.tgz#14fcc712a530038ef9be1ce6952315a839f466a8"
   integrity sha1-FPzHEqUwA475vhzmlSMVqDn0Zqg=
 
-"@quasar/app@^3.0.0-alpha.8":
+"@quasar/app@^3.0.0-alpha.9":
   version "3.0.0-alpha.9"
   resolved "https://registry.yarnpkg.com/@quasar/app/-/app-3.0.0-alpha.9.tgz#2a5cbf51d79d26b51489201245a9422b6081edfd"
   integrity sha512-R6vln7x7tcEmv5Xn2439UCQNUBXkaaN3TwPVKOb5J3CAnldpdy1QdEEKXv4uT3f1kir2YOOz0NiWM1xrr+01UA==
@@ -2380,15 +2380,15 @@ browserify-zlib@^0.2.0:
     pako "~1.0.5"
 
 browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.1:
-  version "4.16.1"
+  version "4.16.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.1.tgz#bf757a2da376b3447b800a16f0f1c96358138766"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717"
-  integrity sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==
+  integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==
   dependencies:
-    caniuse-lite "^1.0.30001173"
+    caniuse-lite "^1.0.30001181"
     colorette "^1.2.1"
-    electron-to-chromium "^1.3.634"
+    electron-to-chromium "^1.3.649"
     escalade "^3.1.1"
-    node-releases "^1.1.69"
+    node-releases "^1.1.70"
 
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
@@ -2600,7 +2600,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001173:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181:
   version "1.0.30001181"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001181.tgz#4f0e5184e1ea7c3bf2727e735cbe7ca9a451d673"
   integrity sha512-m5ul/ARCX50JB8BSNM+oiPmQrR5UmngaQ3QThTTp5HcIIQGP/nPBs82BYLE+tigzm3VW+F4BJIhUyaVtEweelQ==
@@ -3887,7 +3887,7 @@ electron-osx-sign@^0.4.11:
     minimist "^1.2.0"
     plist "^3.0.1"
 
-electron-to-chromium@^1.3.634:
+electron-to-chromium@^1.3.649:
   version "1.3.649"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.649.tgz#3aa8be052d4d268ede45d8e98d0cd60ffefad607"
   integrity sha512-ojGDupQ3UMkvPWcTICe4JYe17+o9OLiFMPoduoR72Zp2ILt1mRVeqnxBEd6s/ptekrnsFU+0A4lStfBe/wyG/A==
@@ -6942,7 +6942,7 @@ node-loader@1.0.2:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-node-releases@^1.1.69:
+node-releases@^1.1.70:
   version "1.1.70"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.70.tgz#66e0ed0273aa65666d7fe78febe7634875426a08"
   integrity sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==
@@ -8197,7 +8197,7 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-quasar@^2.0.0-alpha.15:
+quasar@^2.0.0-alpha.17:
   version "2.0.0-alpha.17"
   resolved "https://registry.yarnpkg.com/quasar/-/quasar-2.0.0-alpha.17.tgz#07de6767e8e55bdba708f512fd44ca8379b0aeb5"
   integrity sha512-/KTxPdSD6sxSasVz03t24va7jMLXt+CVz80jmsJRDGJJifSIXag1cVdEhWpDTtke8p5nOMoCLHMk3yW4CyCCxA==