Build(deps-dev): Bump @vue/compiler-sfc from 3.4.37 to 3.4.38 in /fro…

…ntend (#812) * Build(deps-dev): Bump @vue/compiler-sfc in /frontend Bumps [@vue/compiler-sfc](https://github.com/vuejs/core/tree/HEAD/packages/compiler-sfc) from 3.4.37 to 3.4.38. - [Release notes](https://github.com/vuejs/core/releases) - [Changelog](https://github.com/vuejs/core/blob/v3.4.38/CHANGELOG.md) - [Commits](https://github.com/vuejs/core/commits/v3.4.38/packages/compiler-sfc) --- updated-dependencies: - dependency-name: "@vue/compiler-sfc" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * fix: update vue, compat & compiler sfc * experimental: change router/I18n to Composition API --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Dan1el <[email protected]>
Sybit-Education · Aug 21, 2024 · 74af1e4 · 74af1e4
1 parent 29343eb
commit 74af1e4
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 168 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,7 +15,7 @@
     "@toast-ui/editor": "^3.2.2",
     "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
     "@types/sockjs-client": "^1.5.4",
-    "@vue/compat": "^3.4.37",
+    "@vue/compat": "^3.4.38",
     "axios": "^1.7.4",
     "bootstrap": "^4.6.1",
     "bootstrap-vue": "^2.23.1",
@@ -31,7 +31,7 @@
     "register-service-worker": "^1.7.1",
     "sockjs-client": "^1.6.1",
     "uuid": "^9.0.1",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
     "vue-axios": "^3.5.2",
     "vue-debounce": "^5.0.0",
     "vue-i18n": "^9.12.1",
@@ -55,7 +55,7 @@
     "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/cli-plugin-vuex": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
-    "@vue/compiler-sfc": "^3.4.37",
+    "@vue/compiler-sfc": "^3.4.38",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "babel-plugin-transform-remove-console": "^6.9.4",

diff --git a/frontend/src/components/MarkdownEditor.vue b/frontend/src/components/MarkdownEditor.vue
@@ -69,7 +69,7 @@ import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin
 
 import "@toast-ui/editor/dist/i18n/de-de";
 
-import {customRef, defineComponent} from "vue";
+import {customRef, defineComponent, ref} from "vue";
 import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all";
 import UiToastEditorWrapper from "@/components/UiToastEditorWrapper.vue";
 import { PropType } from "vue";
@@ -121,16 +121,17 @@ export default defineComponent({
     },
   },
   setup() {
-    const { t } = useI18n();
-    return { t };
+    const { locale } = useI18n();
+    const currentLocale = ref(locale.value);
+    return { currentLocale };
   },
   data() {
     return {
       editorOptions: {
         autofocus: false,
         height: "auto",
         minHeight: "200px",
-        language: this.$i18n.locale,
+        language: this.currentLocale,
         useCommandShortcut: true,
         usageStatistics: true,
         hideModeSwitch: false,

diff --git a/frontend/src/components/actions/SessionCloseButton.vue b/frontend/src/components/actions/SessionCloseButton.vue
@@ -30,6 +30,7 @@ import { defineComponent } from "vue";
 import Constants from "@/constants";
 import { useDiveniStore } from "@/store";
 import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
   name: "SessionCloseButton",
@@ -46,17 +47,18 @@ export default defineComponent({
   setup() {
     const store = useDiveniStore();
     const { t } = useI18n();
-    return { store, t };
+    const router = useRouter();
+    return { store, t, router };
   },
   methods: {
     closeSession() {
       this.sendCloseSessionCommand();
       window.localStorage.removeItem("adminCookie");
       if (this.userStoryMode !== "NO_US") {
-        this.$router.push({ name: "ResultPage" });
+        this.router.push({ name: "ResultPage" });
       } else {
         this.store.clearStore();
-        this.$router.push({ name: "LandingPage" });
+        this.router.push({ name: "LandingPage" });
       }
     },
     sendCloseSessionCommand() {

diff --git a/frontend/src/components/actions/SessionLeaveButton.vue b/frontend/src/components/actions/SessionLeaveButton.vue
@@ -20,6 +20,7 @@ import { defineComponent } from "vue";
 import Constants from "../../constants";
 import { useDiveniStore } from "@/store";
 import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
   name: "SessionLeaveButton",
@@ -29,15 +30,16 @@ export default defineComponent({
   setup() {
     const store = useDiveniStore();
     const { t } = useI18n();
-    return { store, t };
+    const router = useRouter();
+    return { store, t, router };
   },
   methods: {
     leaveSession() {
       const endPoint = `${Constants.webSocketUnregisterRoute}`;
       this.store.sendViaBackendWS(endPoint);
       this.store.clearStore();
       window.localStorage.removeItem("memberCookie");
-      this.$router.push({ name: "LandingPage" });
+      this.router.push({ name: "LandingPage" });
     },
   },
 });

diff --git a/frontend/src/components/navigation/LocaleDropdown.vue b/frontend/src/components/navigation/LocaleDropdown.vue
@@ -1,11 +1,11 @@
 <template>
   <ul style="list-style-type: none; padding: 0">
-    <b-nav-item-dropdown :text="locales[$i18n.locale]" right>
+    <b-nav-item-dropdown :text="locales[currentLocale]" right>
       <ul style="list-style-type: disc">
         <b-dropdown-item
           v-for="(locale, key) in locales"
           :key="key"
-          :active="$i18n.locale === key ? true : false"
+          :active="currentLocale === key"
           class="text-light"
           @click="setLocale(key)"
         >
@@ -21,17 +21,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "LocaleDropdown",
   setup() {
-    const { t } = useI18n();
-    return { t };
-  },
-  data() {
+    const { t, locale } = useI18n();
+    const currentLocale = ref(locale.value);
+
+    const setLocale = (newLocale: string) => {
+      locale.value = newLocale;
+      currentLocale.value = newLocale;
+      localStorage.setItem("locale", newLocale);
+    };
+
     return {
+      t,
       locales: {
         de: "Deutsch",
         en: "English",
@@ -42,13 +48,9 @@ export default defineComponent({
         pt: "Português",
         uk: "українська",
       },
+      currentLocale,
+      setLocale,
     };
   },
-  methods: {
-    setLocale(locale) {
-      this.$i18n.locale = locale;
-      localStorage.setItem("locale", locale);
-    },
-  },
 });
 </script>
diff --git a/frontend/src/views/JiraCallbackPage.vue b/frontend/src/views/JiraCallbackPage.vue
@@ -13,22 +13,24 @@ import apiService from "@/services/api.service";
 import { useDiveniStore } from "@/store";
 import { useToast } from "vue-toastification";
 import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
   name: "JiraCallbackPage",
   setup() {
     const store = useDiveniStore();
     const toast = useToast();
     const { t } = useI18n();
-    return { store, toast, t };
+    const router = useRouter();
+    return { store, toast, t, router };
   },
   created() {
     const urlSearchParams = new URLSearchParams(window.location.search);
     const params = Object.fromEntries(urlSearchParams.entries());
     const jiraStateId = localStorage.getItem("jiraStateId");
     if (!params.code || !params.state || !jiraStateId || jiraStateId !== params.state) {
       this.toast.error(this.t("session.notification.messages.issueTrackerLoginFailed"));
-      this.$router.push({ name: "PrepareSessionPage" });
+      this.router.push({ name: "PrepareSessionPage" });
       return;
     }
     this.verifyCode(params.code);
@@ -42,7 +44,7 @@ export default defineComponent({
       } catch (e) {
         this.showToast(e);
       }
-      this.$router.push({ name: "PrepareSessionPage", query: { tabIndex: "2" } });
+      this.router.push({ name: "PrepareSessionPage", query: { tabIndex: "2" } });
     },
     showToast(error) {
       if (error.message == "failed to retrieve access token") {

diff --git a/frontend/src/views/JoinPage.vue b/frontend/src/views/JoinPage.vue
@@ -25,6 +25,7 @@ import { BIconController } from "bootstrap-vue";
 import { useDiveniStore } from "@/store";
 import { useToast } from "vue-toastification";
 import { useI18n } from "vue-i18n";
+import { useRouter, useRoute } from "vue-router";
 
 export default defineComponent({
   name: "JoinPage",
@@ -36,7 +37,9 @@ export default defineComponent({
     const store = useDiveniStore();
     const toast = useToast();
     const { t } = useI18n();
-    return { store, toast, t };
+    const route = useRoute();
+    const router = useRouter();
+    return { store, toast, t, route, router };
   },
   data() {
     return {
@@ -74,7 +77,7 @@ export default defineComponent({
     },
   },
   created() {
-    const id = this.$route.query as unknown as { sessionID: string };
+    const id = this.route.query as unknown as { sessionID: string };
     if (id.sessionID) {
       this.sessionID = id.sessionID;
     }
@@ -154,7 +157,7 @@ export default defineComponent({
       this.store.subscribeOnBackendWSTimerStart();
     },
     goToEstimationPage() {
-      this.$router.push({
+      this.router.push({
         name: "MemberVotePage",
         state: {
           memberID: this.memberID,

diff --git a/frontend/src/views/LandingPage.vue b/frontend/src/views/LandingPage.vue
@@ -141,6 +141,8 @@ import { useDiveniStore } from "@/store";
 import { useI18n } from "vue-i18n";
 import CarouselComponent from "@/components/CarouselComponent.vue";
 import DownloadPWAModal from "@/components/DownloadPWAModal.vue";
+import { useRouter } from "vue-router";
+
 export default defineComponent({
   name: "LandingPage",
   components: {
@@ -152,7 +154,8 @@ export default defineComponent({
   setup() {
     const store = useDiveniStore();
     const { t } = useI18n();
-    return { store, t };
+    const router = useRouter();
+    return { store, t, router };
   },
   data() {
     return {
@@ -204,16 +207,16 @@ export default defineComponent({
       }
     },
     goToJoinPage() {
-      this.$router.push({ name: "JoinPage" });
+      this.router.push({ name: "JoinPage" });
     },
     goToPrepareSessionPage() {
-      this.$router.push({ name: "PrepareSessionPage" });
+      this.router.push({ name: "PrepareSessionPage" });
     },
     goToSessionPage() {
       this.store.setUserStories({
         stories: this.sessionWrapper.session.sessionConfig.userStories,
       });
-      this.$router.push({
+      this.router.push({
         name: "SessionPage",
         state: {
           sessionID: this.sessionWrapper.session.sessionID,

diff --git a/frontend/src/views/MemberVotePage.vue b/frontend/src/views/MemberVotePage.vue
@@ -217,6 +217,7 @@ import { defineComponent } from "vue";
 import { useDiveniStore } from "@/store";
 import { useToast } from "vue-toastification";
 import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 import UserStoryTitle from "@/components/UserStoryTitle.vue";
 
 export default defineComponent({
@@ -238,7 +239,8 @@ export default defineComponent({
     const store = useDiveniStore();
     const toast = useToast();
     const { t } = useI18n();
-    return { store, toast, t };
+    const router = useRouter();
+    return { store, toast, t, router };
   },
   data() {
     return {
@@ -408,11 +410,11 @@ export default defineComponent({
       );
     },
     goToJoinPage() {
-      this.$router.push({ name: "JoinPage" });
+      this.router.push({ name: "JoinPage" });
     },
     leaveMeeting() {
       window.localStorage.removeItem("memberCookie");
-      this.$router.push({ name: "LandingPage" });
+      this.router.push({ name: "LandingPage" });
     },
     reactOnHostLeave() {
       this.pauseSession = true;

diff --git a/frontend/src/views/PrepareSessionPage.vue b/frontend/src/views/PrepareSessionPage.vue
@@ -256,6 +256,7 @@ import { useDiveniStore } from "@/store";
 import { useToast } from "vue-toastification";
 import { useI18n } from "vue-i18n";
 import { Steppy } from "vue3-steppy";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
   name: "PrepareSessionPage",
@@ -270,8 +271,9 @@ export default defineComponent({
     const store = useDiveniStore();
     const toast = useToast();
     const { t } = useI18n();
+    const router = useRouter();
     const step = ref<number>(1);
-    return { store, toast, t, step };
+    return { store, toast, t, step, router };
   },
   data() {
     return {
@@ -400,7 +402,7 @@ export default defineComponent({
       }
     },
     goToSessionPage(session: Session) {
-      this.$router.push({
+      this.router.push({
         name: "SessionPage",
         state: {
           sessionID: session.sessionID,

diff --git a/frontend/src/views/ResultPage.vue b/frontend/src/views/ResultPage.vue
@@ -40,14 +40,16 @@ import { defineComponent } from "vue";
 import papaparse from "papaparse";
 import { useDiveniStore } from "@/store";
 import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
   name: "SessionPage",
   components: {},
   setup() {
     const store = useDiveniStore();
     const { t } = useI18n();
-    return { store, t };
+    const router = useRouter();
+    return { store, t, router };
   },
   computed: {
     userStories() {
@@ -72,7 +74,7 @@ export default defineComponent({
     goHome() {
       this.store.setUserStories({ stories: [] });
       this.store.clearStore();
-      this.$router.push({ name: "LandingPage" });
+      this.router.push({ name: "LandingPage" });
     },
   },
 });

diff --git a/frontend/src/views/SessionPage.vue b/frontend/src/views/SessionPage.vue
@@ -408,6 +408,7 @@ import GptModal from "@/components/GptModal.vue";
 import UserStoryTitle from "@/components/UserStoryTitle.vue";
 import j2m from "jira2md";
 import UserStory from "@/model/UserStory";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
   name: "SessionPage",
@@ -431,7 +432,8 @@ export default defineComponent({
     const store = useDiveniStore();
     const toast = useToast();
     const { t } = useI18n();
-    return { store, toast, t };
+    const router = useRouter();
+    return { store, toast, t, router };
   },
   data() {
     return {
@@ -773,7 +775,7 @@ export default defineComponent({
       );
     },
     goToLandingPage() {
-      this.$router.push({ name: "LandingPage" });
+      this.router.push({ name: "LandingPage" });
     },
     onPlanningStarted() {
       this.planningStart = true;