[Vue3] can now compile

src/plugins/balance/components/BalanceHeader.vue

@@ -16,8 +16,8 @@
 <script lang="ts">
 import { ref, computed, defineComponent, onBeforeMount } from 'vue';
 import UserSelector from 'src/plugins/user/components/UserSelector.vue';
-import { StateInterfaceBalance } from '../store/balance';
+import { StateInterfaceBalance, UserBalance } from '../store/balance';
-import { Store, useStore } from 'vuex';
+import { Store, useStore, mapGetters } from 'vuex';
 import { UserStateInterface } from 'src/plugins/user/store/user';
 import { StateInterface } from 'src/store';
 
@@ -29,15 +29,22 @@ export default defineComponent({
   name: 'BalanceHeader',
   components: { UserSelector },
   props: ['showSelector'],
-  setup(props: Props, { root, emit }) {
+  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>store.state.user.currentUser);
+    //const user = ref(<FG.User>store.state.user.currentUser);
+    const user = computed(() => <FG.User>userGetters.currentUser());
     const balance = computed(() => {
-      const balances = store.state.balance.balances;
+      return (
-      return balances.get(user.value.userid) || { balance: 0, limit: null };
+        (<Map<string, UserBalance>>balanceGetters.balances()).get(user.value.userid) || {
+          balance: 0,
+          limit: null,
+        }
+      );
     });
 
     const isLocked = computed(
@@ -46,7 +53,8 @@ export default defineComponent({
 
     function userUpdated(selectedUser: FG.User) {
       void store.dispatch('balance/getBalance', selectedUser);
-      user.value = selectedUser;
+      //TODO:!!
+      //user.value = selectedUser;
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       emit('update:user', selectedUser);
     }

src/plugins/balance/components/BalanceTransfer.vue

@@ -29,23 +29,22 @@
 <script lang="ts">
 import { computed, ref, defineComponent } from 'vue';
 import { hasPermission } from 'src/utils/permission';
-import { StateInterfaceBalance } from '../store/balance';
+import { mapGetters, Store, useStore } from 'vuex';
-import { Store, useStore } from 'vuex';
 import UserSelector from 'src/plugins/user/components/UserSelector.vue';
 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: 'BalanceTransfer',
   components: { BalanceHeader, UserSelector },
-  setup(_, { root, emit }) {
+  setup(_, { emit }) {
     //const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore<Store<StateInterface>>();
-    const userState = <UserStateInterface>store.state.user;
+    const userGetters = mapGetters('users', ['currentUser']);
 
-    const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER, store));
+    const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER));
-    const sender = ref(userState.currentUser);
+    const sender = computed(() => <FG.User>userGetters.currentUser());
     const receiver = ref<FG.User | undefined>(undefined);
     const amount = ref<number>(0);
 
@@ -60,7 +59,8 @@ export default defineComponent({
 
     function senderUpdated(selectedUser: FG.User) {
       console.log(selectedUser);
-      sender.value = selectedUser;
+      //TOOD:!!
+      //sender.value = selectedUser;
     }
     function receiverUpdated(selectedUser: FG.User) {
       receiver.value = selectedUser;

src/plugins/balance/components/Transaction.vue

@@ -33,8 +33,7 @@
 import { ref, computed, defineComponent, onUnmounted, onMounted } from 'vue';
 import { hasPermission } from 'src/utils/permission';
 import { formatDateTime } from 'src/utils/datetime';
-import { StateInterfaceBalance } from 'src/plugins/balance/store/balance';
+import { mapGetters, Store, useStore } from 'vuex';
-import { Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
 import { UserStateInterface } from 'src/plugins/user/store/user';
 
@@ -51,25 +50,26 @@ export default defineComponent({
     },
   },
   watch: { transaction: 'refreshText' },
-  setup(props: Props, { root, emit }) {
+  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 userState = <UserStateInterface>store.state.user;
+    const userGetters = mapGetters('users', ['currentUser']);
     const text = ref('');
 
     onUnmounted(() => clearInterval(ival));
     onMounted(() => refreshText());
 
-    const isNegative = () => props.transaction.sender_id === userState.currentUser?.userid;
+    const isNegative = () =>
+      props.transaction.sender_id === (<FG.User>userGetters.currentUser())?.userid;
 
     const refreshText = async () => {
       if (isNegative()) {
         text.value = 'Anschreiben';
         if (props.transaction.receiver_id !== null) {
           const user = <FG.User>await store.dispatch('user/getUser', {
-            userid: props.transaction.receiver_id,
+            userid: <number>props.transaction.receiver_id,
           });
           text.value = `Gesendet an ${user.display_name}`;
         }
@@ -77,7 +77,7 @@ export default defineComponent({
         text.value = 'Gutschrift';
         if (props.transaction.sender_id !== null) {
           const user = <FG.User>await store.dispatch('user/getUser', {
-            userid: props.transaction.sender_id,
+            userid: <number>props.transaction.sender_id,
           });
           text.value = `Bekommen von ${user.display_name}`;
         }
@@ -91,9 +91,9 @@ export default defineComponent({
     const canReverse = computed(
       () =>
         !isReversed.value &&
-        (hasPermission('balance_reversal', store) ||
+        (hasPermission('balance_reversal') ||
-          (props.transaction.sender_id === userState.currentUser?.userid &&
+          (props.transaction.sender_id === (<FG.User>userGetters.currentUser())?.userid &&
-            now.value - props.transaction.time.getTime() < 10000))
+            now.value - (<Date>props.transaction.time).getTime() < 10000))
     );
 
     function reverse() {
@@ -107,7 +107,7 @@ export default defineComponent({
     }
 
     const timeStr = computed(() => {
-      const elapsed = (now.value - props.transaction.time.getTime()) / 1000;
+      const elapsed = (now.value - (<Date>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,18 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeMount } from 'vue';
-import { BalanceInterface, StateInterfaceBalance } from 'src/plugins/balance/store/balance';
+import {
-import { Store, useStore } from 'vuex';
+  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({
   name: 'BalanceWidget',
-  setup(_, { root }) {
+  setup() {
     onBeforeMount(() => {
       store.dispatch('balance/getBalance').catch((err) => {
         console.warn(err);
@@ -23,11 +28,14 @@ export default defineComponent({
 
     //const store = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore<Store<StateInterface>>();
-    const balanceState = <BalanceInterface>store.state.balance;
+    const balanceGetters = mapGetters('balance', ['balances']);
-    const userState = <UserStateInterface>store.state.user;
+    const userGetters = mapGetters('user', ['currentUser']);
 
     const balance = computed(
-      () => balanceState.balances.get(userState.currentUser.userid)?.balance || NaN
+      () =>
+        (<Map<string, UserBalance>>balanceGetters.balances()).get(
+          (<FG.User>userGetters.currentUser()).userid
+        )?.balance || NaN
     );
 
     return { balance };

src/plugins/balance/pages/Admin.vue

@@ -18,7 +18,7 @@ import { StateInterfaceBalance, BalancesResponse } from '../store/balance';
 import { Store, useStore } from 'vuex';
 export default defineComponent({
   // name: 'PageName'
-  setup(_, { root }) {
+  setup() {
     //const store = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore();
 

src/plugins/balance/pages/MainPage.vue

@@ -68,7 +68,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, onMounted } from 'vue';
-import { Store, useStore } from 'vuex';
+import { mapGetters, Store, useStore } from 'vuex';
 import { hasPermissions, hasSomePermissions } from 'src/utils/permission';
 import PERMISSIONS from '../permissions';
 import { Screen } from 'quasar';
@@ -76,14 +76,15 @@ 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({
   name: 'BalanceManage',
   components: { BalanceAdd, BalanceTransfer, Transaction },
-  setup(_, { root }) {
+  setup() {
     //const store = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore<Store<StateInterface>>();
-    const balanceState = <BalanceInterface>store.state.balance;
+    const balanceGetters = mapGetters('balance', ['balances', 'transactions']);
     const now = new Date();
     onMounted(() => {
       void store.dispatch('balance/getTransactions', {
@@ -91,7 +92,7 @@ export default defineComponent({
       });
     });
     const transactions = computed(() => {
-      const a = balanceState.transactions
+      const a = (<FG.Transaction[]>balanceGetters.transactions())
         .filter((t) => t.original_id == undefined)
         .filter((t) => t.time > new Date(now.getFullYear(), now.getMonth(), now.getDate()))
         .sort((a, b) => (a.time >= b.time ? -1 : 1));
@@ -100,7 +101,7 @@ export default defineComponent({
     });
 
     const canAdd = () =>
-      hasSomePermissions([PERMISSIONS.DEBIT, PERMISSIONS.CREDIT, PERMISSIONS.DEBIT_OWN], store);
+      hasSomePermissions([PERMISSIONS.DEBIT, PERMISSIONS.CREDIT, PERMISSIONS.DEBIT_OWN]);
 
     interface Tab {
       name: string;
@@ -109,7 +110,7 @@ export default defineComponent({
 
     const tabs: Tab[] = [
       ...(canAdd() ? [{ name: 'add', label: 'Anschreiben' }] : []),
-      ...(hasSomePermissions([PERMISSIONS.SEND, PERMISSIONS.SEND_OTHER], store)
+      ...(hasSomePermissions([PERMISSIONS.SEND, PERMISSIONS.SEND_OTHER])
         ? [{ name: 'transfer', label: 'Übertragen' }]
         : []),
     ];

src/plugins/balance/pages/Overview.vue

@@ -33,19 +33,24 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from 'vue';
-import { BalanceInterface, StateInterfaceBalance, TransactionsResponse } from '../store/balance';
+import {
-import { Store, useStore } from 'vuex';
+  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'
-  setup(_, { root }) {
+  setup() {
     //const store = <Store<StateInterfaceBalance>>root.$store;
     const store = useStore<Store<StateInterface>>();
-    const userState = <UserStateInterface>store.state.user;
+    const userGetters = mapGetters('users', ['currentUser', 'users']);
-    const balanceState = <BalanceInterface>store.state.balance;
+    const balanceGetters = mapGetters('balace', ['balances', 'transactions']);
 
     onMounted(() => {
       void store.dispatch('balance/getBalance');
@@ -107,7 +112,10 @@ export default defineComponent({
     }
 
     const balance = computed(
-      () => balanceState.balances.get(userState.currentUser.userid)?.balance || NaN
+      () =>
+        (<Map<string, UserBalance>>balanceGetters.balances()).get(
+          (<FG.User>userGetters.currentUser()).userid
+        )?.balance || NaN
     );
 
     const columns = [
@@ -141,7 +149,8 @@ export default defineComponent({
           else {
             if (row.receiver_id == null) return 'Angeschrieben';
             else {
-              if (row.receiver_id === userState.currentUser?.userid) return 'Bekommen von X';
+              if (row.receiver_id === (<FG.User>userGetters.currentUser())?.userid)
+                return 'Bekommen von X';
               else return 'Gesendet an X';
             }
           }
@@ -158,7 +167,7 @@ export default defineComponent({
         label: 'Benutzer',
         field: 'author_id',
         format: (val: string) => {
-          const user = userState.users.filter((x) => x.userid == val);
+          const user = (<FG.User[]>userGetters.users()).filter((x) => x.userid == val);
           if (user.length > 0) return user[0].display_name;
           else return val;
         },

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

@@ -67,7 +67,7 @@
 import { defineComponent, ref, onBeforeMount, computed } from 'vue';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
 import Job from './Job.vue';
-import { Store, useStore } from 'vuex';
+import { mapGetters, Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
 import { ScheduleInterface } from '../../store/schedule';
 import { date } from 'quasar';
@@ -75,11 +75,11 @@ import { date } from 'quasar';
 export default defineComponent({
   name: 'CreateEvent',
   components: { IsoDateInput, Job },
-  setup(_, { root }) {
+  setup() {
     //const store = <Store<StateInterface>>root.$store;
     const store = useStore<Store<StateInterface>>();
-    const state = <ScheduleInterface>store.state.schedule;
+    const scheduleGetters = mapGetters('schedule', ['eventTypes']);
-    const eventtypes = computed(() => state.eventTypes);
+    const eventtypes = computed(() => <FG.EventType[]>scheduleGetters.eventTypes());
     const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
 
     const newJob = ref<FG.Job>(({

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

@@ -46,16 +46,16 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, onBeforeMount } from 'vue';
-import { Store, useStore } from 'vuex';
+import { mapGetters, Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
 import { ScheduleInterface, EventType } from '../../store/schedule';
 export default defineComponent({
   name: 'EventTypes',
   components: {},
-  setup(_, { root }) {
+  setup() {
     //const store = <Store<StateInterface>>root.$store;
     const store = useStore<Store<StateInterface>>();
-    const state = <ScheduleInterface>store.state.schedule;
+    const scheduleGetters = mapGetters('schedule', ['eventTypes']);
     const newEventType = ref('');
     const edittype = ref(false);
     const emptyEvent: EventType = { id: -1, name: '' };
@@ -69,7 +69,7 @@ export default defineComponent({
       console.log(store);
     });
 
-    const rows = computed(() => state.eventTypes);
+    const rows = computed(() => <FG.EventType[]>scheduleGetters.eventTypes());
 
     const columns = [
       {

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

@@ -64,7 +64,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
-import { Store, useStore } from 'vuex';
+import { mapGetters, Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
 import { ScheduleInterface } from '../../store/schedule';
 import { date } from 'quasar';
@@ -83,19 +83,12 @@ export default defineComponent({
       default: false,
     },
   },
-  watch: {
+  setup(props, { emit }) {
-    job: function () {
-      // this.type.name = this.type.name;
-      this.$props.job.type = this.$props.job.type;
-    },
-  },
-
-  setup(props: Props, { root, emit }) {
     //const store = <Store<StateInterface>>root.$store;
-    const store = useStore<Store<StateInterafce>>();
+    const store = useStore<Store<StateInterface>>();
-    const state = <ScheduleInterface>store.state.schedule;
+    const scheduleGetters = mapGetters('schedule', ['jobTypes']);
-    const jobtypes = computed(() => state.jobTypes);
+    const jobtypes = computed(() => <FG.JobType[]>scheduleGetters.jobTypes());
-    // job = computed(() => job);
+
     function setStart(value: Date) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       emit('set-start', { job: props.job, value });
@@ -137,8 +130,8 @@ export default defineComponent({
     }
 
     function isAfterDate(val: Date) {
-      console.log('isAfterDate', props.job.start, val);
+      console.log('isAfterDate', (<FG.Job>props.job).start, val);
-      return props.job.start < new Date(val) || 'Ende muss hinter dem Start liegen';
+      return (<FG.Job>props.job).start < new Date(val) || 'Ende muss hinter dem Start liegen';
     }
 
     const refreshKey = ref(0);

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

@@ -46,16 +46,16 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, onBeforeMount } from 'vue';
-import { Store, useStore } from 'vuex';
+import { mapGetters, Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
 import { ScheduleInterface, JobType } from '../../store/schedule';
 export default defineComponent({
   name: 'JobTypes',
   components: {},
-  setup(_, { root }) {
+  setup() {
     //const store = <Store<StateInterface>>root.$store;
     const store = useStore<Store<StateInterface>>();
-    const state = <ScheduleInterface>store.state.schedule;
+    const scheduleGetters = mapGetters('schedule', ['jobTypes']);
     const newJob = ref('');
     const edittype = ref(false);
     const emptyJob: JobType = { id: -1, name: '' };
@@ -66,7 +66,7 @@ export default defineComponent({
       void store.dispatch('schedule/getJobTypes');
     });
 
-    const rows = computed(() => state.jobTypes);
+    const rows = computed(() => <FG.JobType[]>scheduleGetters.jobTypes());
 
     const columns = [
       {

src/plugins/schedule/pages/MainPage.vue

@@ -24,7 +24,7 @@
 import { computed, defineComponent } from 'vue';
 import EssentialLink from 'src/components/navigation/EssentialLink.vue';
 import mainRoutes from 'src/plugins/schedule/routes';
-import { Store, useStore } from 'vuex';
+import { mapGetters, Store, useStore } from 'vuex';
 import { BalanceInterface } from 'src/plugins/balance/store/balance';
 import setLoadingBar from 'src/utils/loading';
 import { StateInterface } from 'src/store';
@@ -35,9 +35,10 @@ export default defineComponent({
   setup(_) {
     //const store = <Store<StateInterface>>root.$store;
     const store = useStore<Store<StateInterface>>();
+    const balanceGetters = mapGetters('balance', ['loading']);
     const route = useRoute();
     const loading = computed(() => {
-      return (<BalanceInterface>store.state.balance).loading > 0;
+      return balanceGetters.loading() > 0;
     });
     const checkMain = computed(() => {
       return route.matched.length == 2;