From 8f8da5ffd11ad1b05fb465980219150d1427774c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 31 Jan 2021 20:40:18 +0100
Subject: [PATCH] [Vue3] fixed some errors. first steps to reconstruct storage

---
 src/boot/plugins.ts                           |  4 ++-
 src/plugins/balance/components/BalanceAdd.vue | 31 +++++++++++++------
 .../balance/components/BalanceHeader.vue      | 10 ++++--
 .../balance/components/BalanceTransfer.vue    |  9 ++++--
 .../balance/components/Transaction.vue        | 30 ++++++++++--------
 src/plugins/balance/components/Widget.vue     | 14 +++++----
 src/plugins/balance/pages/Admin.vue           |  5 +--
 src/plugins/balance/pages/MainPage.vue        | 10 +++---
 src/plugins/balance/pages/Overview.vue        | 19 +++++++-----
 src/plugins/balance/store/balance.ts          | 17 ++++++++--
 src/plugins/schedule/components/Widget.vue    |  3 +-
 .../components/management/CreateEvent.vue     | 16 ++++------
 .../components/management/Eventtypes.vue      |  5 +--
 .../schedule/components/management/Job.vue    |  5 +--
 .../components/management/JobTypes.vue        |  5 +--
 src/plugins/schedule/pages/MainPage.vue       | 11 ++++---
 src/store/index.ts                            |  8 +++++
 tsconfig.json                                 |  8 +++++
 yarn.lock                                     | 24 +++++++-------
 19 files changed, 150 insertions(+), 84 deletions(-)

diff --git a/src/boot/plugins.ts b/src/boot/plugins.ts
index 81e9f62..fc56b65 100644
--- a/src/boot/plugins.ts
+++ b/src/boot/plugins.ts
@@ -233,7 +233,8 @@ export default boot<UserSessionState>(({ router, store, app }) => {
   };
 
   // get all plugins
-  const pluginsContext = require.context('src/plugins', true, /.+\/plugin.ts$/);
+  //const pluginsContext = require.context('src/plugins', true, /.+\/plugin.ts$/);
+  const pluginsContext = require['context']('src/plugins', true, /.+\/plugin.ts$/);
   pluginsContext.keys().forEach((fileName: string) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     plugins.push(pluginsContext(fileName).default);
@@ -298,5 +299,6 @@ export default boot<UserSessionState>(({ router, store, app }) => {
   loadedPlugins.routes.forEach((route) => router.addRoute(route));
 
   // save plugins in VM-variable
+  console.log(store);
   app.provide('flaschengeistPlugins', loadedPlugins);
 });
diff --git a/src/plugins/balance/components/BalanceAdd.vue b/src/plugins/balance/components/BalanceAdd.vue
index 57a6357..9e8d8fb 100644
--- a/src/plugins/balance/components/BalanceAdd.vue
+++ b/src/plugins/balance/components/BalanceAdd.vue
@@ -63,33 +63,43 @@
 <script lang="ts">
 import { computed, ref, defineComponent, onBeforeMount } from 'vue';
 import { hasPermission } from 'src/utils/permission';
-import { StateInterfaceBalance } from '../store/balance';
-import { Store } from 'vuex';
+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 },
-  setup(_, { root, emit }) {
+  setup(_, { emit }) {
     onBeforeMount(() => {
       void store.dispatch('balance/getShortcuts');
-      if (store.state.balance.transactions.length == 0)
+      if ((<FG.Transaction[]>balanceGatters.transactions())?.length == 0)
         // No transaction, load at most six since yesterday
         void store.dispatch('balance/getTransactions', {
           filter: { limit: 6, from: new Date(new Date().setDate(new Date().getDate() - 1)) },
         });
     });
-    const store = <Store<StateInterfaceBalance>>root.$store;
+    //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(store.state.user.currentUser);
-    const shortCuts = ref(store.state.balance.shortcuts);
+    //const user = ref(userState.currentUser);
+    const user = computed(() => <FG.User>userGetters.currentUser());
+    //const shortCuts = ref(balanceState.shortcuts);
+    const shortCuts = computed(() => <number[]>balanceGatters.shortcuts());
 
-    const canAddCredit = computed(() => hasPermission(PERMISSIONS.CREDIT, store));
+    const canAddCredit = computed(() => hasPermission(PERMISSIONS.CREDIT));
     const showSelector = computed(
-      () => hasPermission(PERMISSIONS.DEBIT, store) || hasPermission(PERMISSIONS.CREDIT, store)
+      () => hasPermission(PERMISSIONS.DEBIT) || hasPermission(PERMISSIONS.CREDIT)
     );
 
     function addShortcut() {
@@ -99,7 +109,8 @@ export default defineComponent({
       void store.dispatch('balance/removeShortcut', shortcut);
     }
     function userUpdated(selectedUser: FG.User) {
-      user.value = selectedUser;
+      //TODO:
+      //user.value = selectedUser;
     }
     function changeBalance(amount: number) {
       store
diff --git a/src/plugins/balance/components/BalanceHeader.vue b/src/plugins/balance/components/BalanceHeader.vue
index 31a6751..d1f5875 100644
--- a/src/plugins/balance/components/BalanceHeader.vue
+++ b/src/plugins/balance/components/BalanceHeader.vue
@@ -17,7 +17,9 @@
 import { ref, computed, defineComponent, onBeforeMount } from 'vue';
 import UserSelector from 'src/plugins/user/components/UserSelector.vue';
 import { StateInterfaceBalance } from '../store/balance';
-import { Store } from 'vuex';
+import { Store, useStore } from 'vuex';
+import { UserStateInterface } from 'src/plugins/user/store/user';
+import { StateInterface } from 'src/store';
 
 interface Props {
   showSelector: boolean;
@@ -29,7 +31,9 @@ export default defineComponent({
   props: ['showSelector'],
   setup(props: Props, { root, emit }) {
     onBeforeMount(() => void store.dispatch('balance/getBalance'));
-    const store = <Store<StateInterfaceBalance>>root.$store;
+    //const store = <Store<StateInterfaceBalance>>root.$store;
+    const store = useStore<StateInterfaceBalance>();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     const user = ref(<FG.User>store.state.user.currentUser);
     const balance = computed(() => {
       const balances = store.state.balance.balances;
@@ -43,10 +47,12 @@ export default defineComponent({
     function userUpdated(selectedUser: FG.User) {
       void store.dispatch('balance/getBalance', 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');
     }
 
diff --git a/src/plugins/balance/components/BalanceTransfer.vue b/src/plugins/balance/components/BalanceTransfer.vue
index 7d6a687..969ef19 100644
--- a/src/plugins/balance/components/BalanceTransfer.vue
+++ b/src/plugins/balance/components/BalanceTransfer.vue
@@ -30,19 +30,22 @@
 import { computed, ref, defineComponent } from 'vue';
 import { hasPermission } from 'src/utils/permission';
 import { StateInterfaceBalance } from '../store/balance';
-import { Store } 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';
 
 export default defineComponent({
   name: 'BalanceTransfer',
   components: { BalanceHeader, UserSelector },
   setup(_, { root, emit }) {
-    const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
+    //const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
+    const store = useStore<Store<StateInterface>>();
+    const userState = <UserStateInterface>store.state.user;
 
     const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER, store));
-    const sender = ref(store.state.user.currentUser);
+    const sender = ref(userState.currentUser);
     const receiver = ref<FG.User | undefined>(undefined);
     const amount = ref<number>(0);
 
diff --git a/src/plugins/balance/components/Transaction.vue b/src/plugins/balance/components/Transaction.vue
index 6800ebf..a620112 100644
--- a/src/plugins/balance/components/Transaction.vue
+++ b/src/plugins/balance/components/Transaction.vue
@@ -1,13 +1,13 @@
 <template>
-<div>
-  <q-card flat square>
-    <q-card-section class="row items-center justify-between" horizontal>
-      <div class="col-5 text-left q-px-sm">
-        <div
-          :class="{ 'text-negative': isNegative() }"
-          class="text-weight-bold text-h6"
-        >
-          <span v-if="isNegative()">-</span>{{ transaction.amount.toFixed(2) }}&#8239;€
+  <div>
+    <q-card flat square>
+      <q-card-section class="row items-center justify-between" horizontal>
+        <div class="col-5 text-left q-px-sm">
+          <div :class="{ 'text-negative': isNegative() }" class="text-weight-bold text-h6">
+            <span v-if="isNegative()">-</span>{{ transaction.amount.toFixed(2) }}&#8239;€
+          </div>
+          <div class="text-caption">{{ text }}</div>
+          <div class="text-caption">{{ timeStr }}</div>
         </div>
         <div class="col-5 q-px-sm text-center">
           <div class="text-subtitle1" v-if="isReversed">Storniert</div>
@@ -34,7 +34,9 @@ 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 { Store } from 'vuex';
+import { Store, useStore } from 'vuex';
+import { StateInterface } from 'src/store';
+import { UserStateInterface } from 'src/plugins/user/store/user';
 
 interface Props {
   transaction: FG.Transaction;
@@ -52,13 +54,15 @@ export default defineComponent({
   setup(props: Props, { root, emit }) {
     const now = ref(Date.now());
     const ival = setInterval(() => (now.value = Date.now()), 1000);
-    const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
+    //const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
+    const store = useStore<Store<StateInterface>>();
+    const userState = <UserStateInterface>store.state.user;
     const text = ref('');
 
     onUnmounted(() => clearInterval(ival));
     onMounted(() => refreshText());
 
-    const isNegative = () => props.transaction.sender_id === store.state.user.currentUser?.userid;
+    const isNegative = () => props.transaction.sender_id === userState.currentUser?.userid;
 
     const refreshText = async () => {
       if (isNegative()) {
@@ -88,7 +92,7 @@ export default defineComponent({
       () =>
         !isReversed.value &&
         (hasPermission('balance_reversal', store) ||
-          (props.transaction.sender_id === store.state.user.currentUser?.userid &&
+          (props.transaction.sender_id === userState.currentUser?.userid &&
             now.value - props.transaction.time.getTime() < 10000))
     );
 
diff --git a/src/plugins/balance/components/Widget.vue b/src/plugins/balance/components/Widget.vue
index 4d3c67a..8d95383 100644
--- a/src/plugins/balance/components/Widget.vue
+++ b/src/plugins/balance/components/Widget.vue
@@ -8,8 +8,9 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeMount } from 'vue';
-import { StateInterfaceBalance } from 'src/plugins/balance/store/balance';
-import { Store } from 'vuex';
+import { BalanceInterface, StateInterfaceBalance } from 'src/plugins/balance/store/balance';
+import { Store, useStore } from 'vuex';
+import { UserStateInterface } from 'src/plugins/user/store/user';
 
 export default defineComponent({
   name: 'BalanceWidget',
@@ -20,12 +21,13 @@ export default defineComponent({
       });
     });
 
-    const store = <Store<StateInterfaceBalance>>root.$store;
+    //const store = <Store<StateInterfaceBalance>>root.$store;
+    const store = useStore<Store<StateInterface>>();
+    const balanceState = <BalanceInterface>store.state.balance;
+    const userState = <UserStateInterface>store.state.user;
 
     const balance = computed(
-      () =>
-        store.state.balance.balances.get((<FG.User>store.state.user.currentUser).userid)?.balance ||
-        NaN
+      () => balanceState.balances.get(userState.currentUser.userid)?.balance || NaN
     );
 
     return { balance };
diff --git a/src/plugins/balance/pages/Admin.vue b/src/plugins/balance/pages/Admin.vue
index b7f591d..480e58a 100644
--- a/src/plugins/balance/pages/Admin.vue
+++ b/src/plugins/balance/pages/Admin.vue
@@ -15,11 +15,12 @@
 
 import { ref, defineComponent, onMounted } from 'vue';
 import { StateInterfaceBalance, BalancesResponse } from '../store/balance';
-import { Store } from 'vuex';
+import { Store, useStore } from 'vuex';
 export default defineComponent({
   // name: 'PageName'
   setup(_, { root }) {
-    const store = <Store<StateInterfaceBalance>>root.$store;
+    //const store = <Store<StateInterfaceBalance>>root.$store;
+    const store = useStore();
 
     onMounted(
       () =>
diff --git a/src/plugins/balance/pages/MainPage.vue b/src/plugins/balance/pages/MainPage.vue
index 4cc7769..723cd38 100644
--- a/src/plugins/balance/pages/MainPage.vue
+++ b/src/plugins/balance/pages/MainPage.vue
@@ -68,20 +68,22 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, onMounted } from 'vue';
-import { Store } from 'vuex';
+import { Store, useStore } from 'vuex';
 import { hasPermissions, 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 { StateInterfaceBalance } from '../store/balance';
+import { BalanceInterface, StateInterfaceBalance } from '../store/balance';
 
 export default defineComponent({
   name: 'BalanceManage',
   components: { BalanceAdd, BalanceTransfer, Transaction },
   setup(_, { root }) {
-    const store = <Store<StateInterfaceBalance>>root.$store;
+    //const store = <Store<StateInterfaceBalance>>root.$store;
+    const store = useStore<Store<StateInterface>>();
+    const balanceState = <BalanceInterface>store.state.balance;
     const now = new Date();
     onMounted(() => {
       void store.dispatch('balance/getTransactions', {
@@ -89,7 +91,7 @@ export default defineComponent({
       });
     });
     const transactions = computed(() => {
-      const a = store.state.balance.transactions
+      const a = balanceState.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));
diff --git a/src/plugins/balance/pages/Overview.vue b/src/plugins/balance/pages/Overview.vue
index ec3ec44..571b5f7 100644
--- a/src/plugins/balance/pages/Overview.vue
+++ b/src/plugins/balance/pages/Overview.vue
@@ -33,14 +33,19 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from 'vue';
-import { StateInterfaceBalance, TransactionsResponse } from '../store/balance';
-import { Store } from 'vuex';
+import { BalanceInterface, StateInterfaceBalance, TransactionsResponse } from '../store/balance';
+import { 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 }) {
-    const store = <Store<StateInterfaceBalance>>root.$store;
+    //const store = <Store<StateInterfaceBalance>>root.$store;
+    const store = useStore<Store<StateInterface>>();
+    const userState = <UserStateInterface>store.state.user;
+    const balanceState = <BalanceInterface>store.state.balance;
 
     onMounted(() => {
       void store.dispatch('balance/getBalance');
@@ -102,9 +107,7 @@ export default defineComponent({
     }
 
     const balance = computed(
-      () =>
-        store.state.balance.balances.get((<FG.User>store.state.user.currentUser).userid)?.balance ||
-        NaN
+      () => balanceState.balances.get(userState.currentUser.userid)?.balance || NaN
     );
 
     const columns = [
@@ -138,7 +141,7 @@ export default defineComponent({
           else {
             if (row.receiver_id == null) return 'Angeschrieben';
             else {
-              if (row.receiver_id === store.state.user.currentUser?.userid) return 'Bekommen von X';
+              if (row.receiver_id === userState.currentUser?.userid) return 'Bekommen von X';
               else return 'Gesendet an X';
             }
           }
@@ -155,7 +158,7 @@ export default defineComponent({
         label: 'Benutzer',
         field: 'author_id',
         format: (val: string) => {
-          const user = store.state.user.users.filter((x) => x.userid == val);
+          const user = userState.users.filter((x) => x.userid == val);
           if (user.length > 0) return user[0].display_name;
           else return val;
         },
diff --git a/src/plugins/balance/store/balance.ts b/src/plugins/balance/store/balance.ts
index 797a1b0..428bd23 100644
--- a/src/plugins/balance/store/balance.ts
+++ b/src/plugins/balance/store/balance.ts
@@ -1,4 +1,5 @@
 import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
+//import store, { StateInterface } from 'src/store';
 import store, { StateInterface } from 'src/store';
 import { axios } from 'src/boot/axios';
 import { AxiosResponse } from 'axios';
@@ -29,7 +30,8 @@ export interface BalanceInterface {
   loading: number;
 }
 
-export interface StateInterfaceBalance extends StateInterface {
+//export interface StateInterfaceBalance extends StateInterface {
+export interface StateInterfaceBalance {
   balance: BalanceInterface;
 }
 
@@ -89,6 +91,7 @@ const mutations: MutationTree<BalanceInterface> = {
 };
 
 const actions: ActionTree<BalanceInterface, StateInterface> = {
+  //const actions: ActionTree<BalanceInterface, any> = {
   addShortcut({ commit, state, rootState }, shortcut) {
     const sc = [...state.shortcuts, shortcut];
     sc.sort();
@@ -219,7 +222,17 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
   },
 };
 
-const getters: GetterTree<BalanceInterface, StateInterface> = {};
+const getters: GetterTree<BalanceInterface, StateInterface> = {
+  balances: ({ balances }) => {
+    return balances;
+  },
+  shortcuts: ({ shortcuts }) => {
+    return shortcuts;
+  },
+  transactions: ({ transactions }) => {
+    return transactions;
+  },
+};
 
 const balance: Module<BalanceInterface, StateInterface> = {
   namespaced: true,
diff --git a/src/plugins/schedule/components/Widget.vue b/src/plugins/schedule/components/Widget.vue
index a1890d9..84650c3 100644
--- a/src/plugins/schedule/components/Widget.vue
+++ b/src/plugins/schedule/components/Widget.vue
@@ -2,7 +2,8 @@
   <q-card class="row justify-center content-center" style="text-align: center">
     <q-card-section>
       <div class="text-h6 col-12">Dienste diesen Monat: {{ jobs }}</div>
-      <div class="text-h6 col-12">Nächster Dienst: {{ nextJob | date }}</div>
+      <!--TODO: Filters are deprecated! -->
+      <!--<div class="text-h6 col-12">Nächster Dienst: {{ nextJob | date }}</div>-->
     </q-card-section>
   </q-card>
 </template>
diff --git a/src/plugins/schedule/components/management/CreateEvent.vue b/src/plugins/schedule/components/management/CreateEvent.vue
index 896a77b..d20a888 100644
--- a/src/plugins/schedule/components/management/CreateEvent.vue
+++ b/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 } from 'vuex';
+import { Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
 import { ScheduleInterface } from '../../store/schedule';
 import { date } from 'quasar';
@@ -76,7 +76,8 @@ export default defineComponent({
   name: 'CreateEvent',
   components: { IsoDateInput, Job },
   setup(_, { root }) {
-    const store = <Store<StateInterface>>root.$store;
+    //const store = <Store<StateInterface>>root.$store;
+    const store = useStore<Store<StateInterface>>();
     const state = <ScheduleInterface>store.state.schedule;
     const eventtypes = computed(() => state.eventTypes);
     const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
@@ -140,14 +141,9 @@ export default defineComponent({
 
     function save() {
       console.log('Event:', event);
-      void store
-        .dispatch('schedule/addEvent', event.value)
-        .catch((error) => {
-          console.warn(error);
-        })
-        .then(() => {
-          reset();
-        });
+      store.dispatch('schedule/addEvent', event.value).catch((error) => {
+        console.warn(error);
+      });
     }
 
     function reset() {
diff --git a/src/plugins/schedule/components/management/Eventtypes.vue b/src/plugins/schedule/components/management/Eventtypes.vue
index 88ed89b..f799f17 100644
--- a/src/plugins/schedule/components/management/Eventtypes.vue
+++ b/src/plugins/schedule/components/management/Eventtypes.vue
@@ -46,14 +46,15 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, onBeforeMount } from 'vue';
-import { Store } from 'vuex';
+import { Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
 import { ScheduleInterface, EventType } from '../../store/schedule';
 export default defineComponent({
   name: 'EventTypes',
   components: {},
   setup(_, { root }) {
-    const store = <Store<StateInterface>>root.$store;
+    //const store = <Store<StateInterface>>root.$store;
+    const store = useStore<Store<StateInterface>>();
     const state = <ScheduleInterface>store.state.schedule;
     const newEventType = ref('');
     const edittype = ref(false);
diff --git a/src/plugins/schedule/components/management/Job.vue b/src/plugins/schedule/components/management/Job.vue
index 3143d86..35300d1 100644
--- a/src/plugins/schedule/components/management/Job.vue
+++ b/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 } from 'vuex';
+import { Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
 import { ScheduleInterface } from '../../store/schedule';
 import { date } from 'quasar';
@@ -91,7 +91,8 @@ export default defineComponent({
   },
 
   setup(props: Props, { root, emit }) {
-    const store = <Store<StateInterface>>root.$store;
+    //const store = <Store<StateInterface>>root.$store;
+    const store = useStore<Store<StateInterafce>>();
     const state = <ScheduleInterface>store.state.schedule;
     const jobtypes = computed(() => state.jobTypes);
     // job = computed(() => job);
diff --git a/src/plugins/schedule/components/management/JobTypes.vue b/src/plugins/schedule/components/management/JobTypes.vue
index 02d9836..2e4cb87 100644
--- a/src/plugins/schedule/components/management/JobTypes.vue
+++ b/src/plugins/schedule/components/management/JobTypes.vue
@@ -46,14 +46,15 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, onBeforeMount } from 'vue';
-import { Store } from 'vuex';
+import { Store, useStore } from 'vuex';
 import { StateInterface } from 'src/store';
 import { ScheduleInterface, JobType } from '../../store/schedule';
 export default defineComponent({
   name: 'JobTypes',
   components: {},
   setup(_, { root }) {
-    const store = <Store<StateInterface>>root.$store;
+    //const store = <Store<StateInterface>>root.$store;
+    const store = useStore<Store<StateInterface>>();
     const state = <ScheduleInterface>store.state.schedule;
     const newJob = ref('');
     const edittype = ref(false);
diff --git a/src/plugins/schedule/pages/MainPage.vue b/src/plugins/schedule/pages/MainPage.vue
index e3c79dd..030747a 100644
--- a/src/plugins/schedule/pages/MainPage.vue
+++ b/src/plugins/schedule/pages/MainPage.vue
@@ -24,20 +24,23 @@
 import { computed, defineComponent } from 'vue';
 import EssentialLink from 'src/components/navigation/EssentialLink.vue';
 import mainRoutes from 'src/plugins/schedule/routes';
-import { Store } from 'vuex';
+import { Store, useStore } 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(_, { root }) {
-    const store = <Store<StateInterface>>root.$store;
+  setup(_) {
+    //const store = <Store<StateInterface>>root.$store;
+    const store = useStore<Store<StateInterface>>();
+    const route = useRoute();
     const loading = computed(() => {
       return (<BalanceInterface>store.state.balance).loading > 0;
     });
     const checkMain = computed(() => {
-      return root.$route.matched.length == 2;
+      return route.matched.length == 2;
     });
 
     setLoadingBar(loading);
diff --git a/src/store/index.ts b/src/store/index.ts
index 02e6a17..3b33c54 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,5 +1,13 @@
 import { store } from 'quasar/wrappers';
 import { createStore } from 'vuex';
+import { UserStateInterface } from 'src/plugins/user/store/user';
+import { SessionStateInterface } from 'src/plugins/user/store/session';
+
+export interface StateInterface {
+  user: UserStateInterface;
+  session: SessionStateInterface;
+  [key: string]: any;
+}
 
 export default store(function (/* { ssrContext } */) {
   const Store = createStore({
diff --git a/tsconfig.json b/tsconfig.json
index d625cce..164e3b5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,5 +3,13 @@
   "target": "esnext",
   "compilerOptions": {
     "baseUrl": ".",
+    "lib": [
+      "es2020",
+      "dom"
+    ],
+    "types": [
+      "webpack-env",
+      "node"
+    ]
  }
 }
diff --git a/yarn.lock b/yarn.lock
index 8b028fa..7b72094 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1006,9 +1006,9 @@
   integrity sha1-FPzHEqUwA475vhzmlSMVqDn0Zqg=
 
 "@quasar/app@^3.0.0-alpha.8":
-  version "3.0.0-alpha.8"
-  resolved "https://registry.yarnpkg.com/@quasar/app/-/app-3.0.0-alpha.8.tgz#4e469763f5256c86291a04457a1153c9a344f2d8"
-  integrity sha512-t0ujMPeWrUGbSwzO7npUHx5Jmdhn7pqWliD8i+rqPF+62g0+Nd1ZRVCMLIYxb1DmNvlW3QOfCAELL94k8yxsQg==
+  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==
   dependencies:
     "@quasar/babel-preset-app" "2.0.1"
     "@quasar/fastclick" "1.1.4"
@@ -4160,9 +4160,9 @@ eslint-webpack-plugin@^2.4.3:
     schema-utils "^3.0.0"
 
 eslint@^7.18.0:
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.18.0.tgz#7fdcd2f3715a41fe6295a16234bd69aed2c75e67"
-  integrity sha512-fbgTiE8BfUJZuBeq2Yi7J3RB3WGUQ9PNuNbmgi6jt9Iv8qrkxfy19Ds3OpL1Pm7zg3BtTVhvcUZbIRQ0wmSjAQ==
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.19.0.tgz#6719621b196b5fad72e43387981314e5d0dc3f41"
+  integrity sha512-CGlMgJY56JZ9ZSYhJuhow61lMPPjUzWmChFya71Z/jilVos7mR/jPgaEfVGgMBY5DshbKdG8Ezb8FDCHcoMEMg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     "@eslint/eslintrc" "^0.3.0"
@@ -8198,9 +8198,9 @@ qs@~6.5.2:
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
 quasar@^2.0.0-alpha.15:
-  version "2.0.0-alpha.15"
-  resolved "https://registry.yarnpkg.com/quasar/-/quasar-2.0.0-alpha.15.tgz#a0ae3c29179d594b79180a6a0d898f2f59fcf63e"
-  integrity sha512-kn5sXqv2+hvNUXevCBnihh1s7UNBoPKoRYnQU8RrHrWl31ABRelb3qVu6VLcd8KCyxWw9AC+120fWaAWo+Qqng==
+  version "2.0.0-alpha.17"
+  resolved "https://registry.yarnpkg.com/quasar/-/quasar-2.0.0-alpha.17.tgz#07de6767e8e55bdba708f512fd44ca8379b0aeb5"
+  integrity sha512-/KTxPdSD6sxSasVz03t24va7jMLXt+CVz80jmsJRDGJJifSIXag1cVdEhWpDTtke8p5nOMoCLHMk3yW4CyCCxA==
 
 query-string@^4.1.0:
   version "4.3.4"
@@ -8417,9 +8417,9 @@ regjsgen@^0.5.1:
   integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
 
 regjsparser@^0.6.4:
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.6.tgz#6d8c939d1a654f78859b08ddcc4aa777f3fa800a"
-  integrity sha512-jjyuCp+IEMIm3N1H1LLTJW1EISEJV9+5oHdEyrt43Pg9cDSb6rrLZei2cVWpl0xTjmmlpec/lEQGYgM7xfpGCQ==
+  version "0.6.7"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.7.tgz#c00164e1e6713c2e3ee641f1701c4b7aa0a7f86c"
+  integrity sha512-ib77G0uxsA2ovgiYbCVGx4Pv3PSttAx2vIwidqQzbL2U5S4Q+j00HdSAneSBuyVcMvEnTXMjiGgB+DlXozVhpQ==
   dependencies:
     jsesc "~0.5.0"