[Vue3][Quasar2] Migrated some more files.

src/components/navigation/EssentialLink.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+import { useStore } from 'vuex';
 import { computed, defineComponent } from 'vue';
 import { hasPermissions } from 'src/utils/permission';
 
@@ -44,19 +45,21 @@ export default defineComponent({
     },
   },
 
-  setup(props, { root }) {
+  setup(props) {
     let title = computed<string>(() => {
       if (props.title.includes('loadFromStore')) {
+        const store = useStore();
+
         const startIndex = props.title.indexOf('(') + 1;
         const endIndex = props.title.indexOf(')');
         const substring = props.title.substring(startIndex, endIndex).replace(/"/g, '');
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        return <string>root.$store.getters[substring];
+        return <string>store.getters[substring];
       }
       return props.title;
     });
 
-    const isGranted = computed(() => hasPermissions(props.permissions || [], root.$store));
+    const isGranted = computed(() => hasPermissions(props.permissions || []));
 
     return { realTitle: title, isGranted };
   },

src/components/navigation/ShortCutLink.vue

@@ -21,8 +21,8 @@ export default defineComponent({
       default: undefined,
     },
   },
-  setup(props, { root }) {
-    const isGranted = computed(() => hasPermissions(props.permissions || [], root.$store));
+  setup(props) {
+    const isGranted = computed(() => hasPermissions(props.permissions || []));
     return { isGranted };
   },
 });

src/components/utils/IsoDateInput.vue

@@ -38,6 +38,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
 import { date } from 'quasar';
+import { exception } from 'console';
 interface Props {
   value?: Date;
   label?: string;
@@ -49,26 +50,25 @@ interface Props {
 export default defineComponent({
   name: 'IsoDateInput',
   props: {
-    value: {
-      required: true,
+    value: { type: String, required: true },
+    type: {
+      type: String,
+      default: 'date',
+      validator: (value: string) => ['date', 'time', 'datetime'].indexOf(value) !== -1,
     },
-    label: {},
+    label: String,
     readonly: {
+      type: Boolean,
       default: false,
     },
-    type: {
-      default: 'date',
-      validator: function (value: string) {
-        return ['date', 'time', 'datetime'].indexOf(value) !== -1;
-      },
-    },
+
     rules: {
       default: () => {
         return [];
       },
     },
   },
-  setup(props: Props, { emit }: { emit: any }) {
+  setup(props, { emit }) {
     function getDateTime() {
       if (typeof props.value == 'object') {
         switch (props.type) {
@@ -107,6 +107,7 @@ export default defineComponent({
         case 'datetime':
           return 'YYYY-MM-DD HH:mm';
       }
+      throw exception;
     });
 
     function dateChanged(dateString: string) {

src/pages/Dashboard.vue

@@ -11,18 +11,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
+import { Component, defineComponent, onMounted, inject, ref } from 'vue';
 import { hasPermissions } from 'src/utils/permission';
-import { AsyncComponentPromise } from 'vue/types/options';
-
+import { FG_Plugin } from 'src/plugins';
 export default defineComponent({
   name: 'Dashboard',
-  setup(_, { root }) {
-    const widgets = ref<Array<AsyncComponentPromise>>([]);
+  setup() {
+    const widgets = ref<Array<Component>>([]);
+    const flaschengeistPlugins = inject<FG_Plugin.LoadedPlugins>('flaschengeistPlugins');
 
     onMounted(() => {
-      root.$flaschengeistPlugins.widgets.forEach((widget) => {
-        if (hasPermissions(widget.permissions, root.$store)) widgets.value.push(widget.widget);
+      flaschengeistPlugins?.widgets.forEach((widget) => {
+        if (hasPermissions(widget.permissions)) widgets.value.push(widget.widget);
       });
     });
 

src/pages/Login.vue

@@ -54,20 +54,25 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import { Loading, Notify } from 'quasar';
-import { setBaseUrl } from 'boot/axios';
+import { defineComponent, ref } from 'vue';
+import { setBaseUrl, api } from 'boot/axios';
+import { UserSessionState } from 'src/plugins/user/store';
 
 export default defineComponent({
   // name: 'PageName'
-  setup(_, { root }) {
+  setup() {
+    const store = useStore<UserSessionState>();
+    const router = useRouter();
     const mainRoute = { name: 'dashboard' };
 
     /* Stuff for the real login page */
     const userid = ref('');
     const password = ref('');
     const rules = [(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'];
-    const server = ref<string | undefined>(root.$axios.defaults.baseURL);
+    const server = ref<string | undefined>(api.defaults.baseURL);
     const visible = ref(false);
 
     function openServerSettings() {
@@ -84,15 +89,14 @@ export default defineComponent({
       Loading.show({
         message: 'Du wirst angemeldet',
       });
-      root.$store
+      store
         .dispatch('session/login', {
           userid: userid.value,
           password: password.value,
         })
-        .then(async (finished) => {
-          await finished;
-          const x = root.$route.query['redirect'];
-          void root.$router.push(typeof x === 'string' ? { path: x } : mainRoute);
+        .then(() => {
+          const x = router.currentRoute.value.query['redirect'];
+          void router.push(typeof x === 'string' ? { path: x } : mainRoute);
         })
         .catch((error: { status: number } | undefined) => {
           if (error && error.status === 401) {
@@ -124,7 +128,7 @@ export default defineComponent({
         });
         return;
       }
-      void root.$store
+      void store
         .dispatch('session/requestPasswordReset', {
           userid: userid.value,
         })

src/pages/Offline.vue

@@ -36,16 +36,18 @@
 
 <script lang="ts">
 import { defineComponent, ref, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
   name: 'Offline',
-  setup(_, { root }) {
+  setup() {
+    const router = useRouter();
     const reload = ref(10);
     const ival = setInterval(() => {
       reload.value -= 1;
       if (reload.value === 0) {
-        const path = <string | null>root.$route.query.redirect || '/login';
-        void root.$router.replace({ path: path });
+        const path = <string | null>router.currentRoute.value.query.redirect || '/login';
+        void router.replace({ path: path });
       }
     }, 1000);
     onUnmounted(() => clearInterval(ival));

src/pages/Reset.vue

@@ -34,13 +34,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-import { Loading, Notify } from 'quasar';
+import { useStore } from 'vuex';
 import { AxiosResponse } from 'axios';
+import { useRouter } from 'vue-router';
+import { Loading, Notify } from 'quasar';
+import { defineComponent, ref } from 'vue';
+import { UserSessionState } from 'src/plugins/user/store';
 
 export default defineComponent({
   // name: 'PageName'
-  setup(_, { root }) {
+  setup() {
+    const store = useStore<UserSessionState>();
+    const router = useRouter();
     const password = ref('');
     const password2 = ref('');
 
@@ -66,10 +71,10 @@ export default defineComponent({
       Loading.show({
         message: 'Das Passwort wird zurückgesetzt',
       });
-      root.$store
+      store
         .dispatch('session/resetPassword', {
           password: password.value,
-          token: root.$route.query.token,
+          token: router.currentRoute.value.query.token,
         })
         .catch((error: AxiosResponse) => {
           if (error.status == 403) {
@@ -85,7 +90,7 @@ export default defineComponent({
         })
         .finally(() => {
           Loading.hide();
-          void root.$router.replace({ name: 'login' });
+          void router.replace({ name: 'login' });
         });
     }
 

src/plugins/user/store/session.ts

@@ -191,7 +191,7 @@ const getters: GetterTree<SessionStateInterface, UserSessionState> = {
   },
 };
 
-const sessions: Module<SessionStateInterface, UserSessionState> = {
+const sessionsStore: Module<SessionStateInterface, UserSessionState> = {
   namespaced: true,
   state,
   mutations,
@@ -199,4 +199,4 @@ const sessions: Module<SessionStateInterface, UserSessionState> = {
   getters,
 };
 
-export default sessions;
+export default sessionsStore;

src/plugins/user/store/user.ts

@@ -264,7 +264,7 @@ const getters: GetterTree<UserStateInterface, UserSessionState> = {
   },
 };
 
-const userStore: Module<UserStateInterface, UserSessionState> = {
+const usersStore: Module<UserStateInterface, UserSessionState> = {
   namespaced: true,
   actions,
   getters,
@@ -272,4 +272,4 @@ const userStore: Module<UserStateInterface, UserSessionState> = {
   state,
 };
 
-export default userStore;
+export default usersStore;

src/utils/permission.ts

@@ -1,16 +1,19 @@
-import { Store } from 'vuex';
-import { StateInterface } from 'src/store';
+import { useStore } from 'vuex';
+import { UserSessionState } from 'src/plugins/user/store';
 
-export function hasPermission(permission: string, store: Store<StateInterface>) {
-  return store.state.user.currentPermissions.includes(permission);
+export function hasPermission(permission: string) {
+  const store = useStore<UserSessionState>();
+  return store.state.users.currentPermissions.includes(permission);
 }
 
-export function hasPermissions(needed: string[], store: Store<StateInterface>) {
-  const permissions = store.state.user.currentPermissions;
+export function hasPermissions(needed: string[]) {
+  const store = useStore<UserSessionState>();
+  const permissions = store.state.users.currentPermissions;
   return needed.every((value) => permissions.includes(value));
 }
 
-export function hasSomePermissions(needed: string[], store: Store<StateInterface>) {
-  const permissions = store.state.user.currentPermissions;
+export function hasSomePermissions(needed: string[]) {
+  const store = useStore<UserSessionState>();
+  const permissions = store.state.users.currentPermissions;
   return needed.some((value) => permissions.includes(value));
 }