Force reload components (#91)

client/package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@aion-dk/js-client": "4.2.0",
-    "@assemblyvoting/ui-library": "^3.1.23",
+    "@assemblyvoting/ui-library": "^3.1.24",
     "@pinia/testing": "^0.0.15",
     "@playwright/test": "^1.32.3",
     "@rushstack/eslint-patch": "^1.1.4",

client/src/App.vue

@@ -142,7 +142,9 @@ const setTheme = async (conferenceClient: any) => {
       @changeLocale="updateLocale"
     />
     <main class="DBAS__Content" id="main">
-      <RouterView />
+      <RouterView
+        :key="`${route.fullPath}-${configStore.pageRefreshIterator}`"
+      />
     </main>
     <Footer />
   </div>

client/src/components/Header.vue

@@ -2,9 +2,9 @@
 import { computed, onMounted, onBeforeUnmount, ref } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 import DropDown from "./DropDown.vue";
-import i18n from "../lib/i18n";
+import i18n from "@/lib/i18n";
 import type { DropdownOption } from "@/Types";
-import useConfigStore from "../stores/useConfigStore";
+import useConfigStore from "@/stores/useConfigStore";
 
 const { t } = i18n.global;
 const configStore = useConfigStore();
@@ -33,7 +33,8 @@ const props = defineProps({
 
 const isMenuOpened = ref<boolean>(false);
 
-const toggleMenu = () => {
+const toggleMenu = (force = false) => {
+  if (force) configStore.pageReloaded();
   isMenuOpened.value = !isMenuOpened.value;
 };
 
@@ -94,7 +95,7 @@ onBeforeUnmount(() => {
         class="Header__Link"
         role="menuitem"
         :to="`/${locale}/${route.params.organisationSlug}/${route.params.electionSlug}/verify`"
-        @click="toggleMenu"
+        @click="toggleMenu(true)"
       >
         {{ $t("header.verification") }}
       </RouterLink>
@@ -103,7 +104,7 @@ onBeforeUnmount(() => {
         class="Header__Link"
         role="menuitem"
         :to="`/${locale}/${route.params.organisationSlug}/${route.params.electionSlug}/track`"
-        @click="toggleMenu"
+        @click="toggleMenu(true)"
       >
         {{ $t("header.tracking") }}
       </RouterLink>
@@ -112,7 +113,7 @@ onBeforeUnmount(() => {
         role="menuitem"
         class="Header__Link"
         :to="`/${locale}/${route.params.organisationSlug}/${route.params.electionSlug}/logs`"
-        @click="toggleMenu"
+        @click="toggleMenu()"
       >
         {{ $t("header.logs") }}
       </RouterLink>
@@ -121,7 +122,7 @@ onBeforeUnmount(() => {
         role="menuitem"
         class="Header__Link"
         :to="`/${locale}/${route.params.organisationSlug}/${route.params.electionSlug}/help`"
-        @click="toggleMenu"
+        @click="toggleMenu()"
       >
         {{ $t("header.help") }}
       </RouterLink>
@@ -150,7 +151,7 @@ onBeforeUnmount(() => {
           ? $t('header.close_menu_aria_label')
           : $t('header.open_menu_aria_label')
       "
-      @click="toggleMenu"
+      @click="toggleMenu()"
     >
       <AVIcon
         v-if="isMenuOpened"

client/src/stores/useBoardStore.ts

@@ -1,12 +1,12 @@
 import type { LatestConfigurationConfig } from "@aion-dk/js-client/dist/lib/av_client/types";
 import { defineStore } from "pinia";
-import { ref } from "vue";
-import { api } from "../lib/api";
-import type { Meta } from "../Types";
+import { ref, reactive } from "vue";
+import { api } from "@/lib/api";
+import type { Meta } from "@/Types";
 
 export default defineStore("boardStore", () => {
   const items = ref<LatestConfigurationConfig[]>([]);
-  const meta = ref<Meta>({});
+  const meta = reactive<Meta>({});
   const currentPage = ref<number>(null);
   const currentFilter = ref<string[]>([]);
 
@@ -18,7 +18,11 @@ export default defineStore("boardStore", () => {
     const { data } = await api.get(url);
 
     items.value = data.items;
-    meta.value = data.meta;
+    meta.current_page = data.meta?.current_pag;
+    meta.next_page = data.meta?.next_page;
+    meta.prev_page = data.meta?.prev_page;
+    meta.total_count = data.meta?.total_count;
+    meta.total_pages = data.meta?.total_pages;
     currentPage.value = page;
   };
 

client/src/stores/useConfigStore.ts

@@ -14,6 +14,7 @@ export default defineStore("useConfigStore", () => {
   const bcTimeout = computed(() => election.value?.content?.bcTimeout);
   const electionStatus = ref<ElectionStatus | null>(null);
   const electionTheme = ref<string>(null);
+  const pageRefreshIterator = ref<number>(0);
 
   const setBoardSlug = (newBoardSlug: string) => {
     boardSlug.value = newBoardSlug;
@@ -74,6 +75,8 @@ export default defineStore("useConfigStore", () => {
     electionTheme.value = newTheme;
   };
 
+  const pageReloaded = () => pageRefreshIterator.value++;
+
   return {
     latestConfig,
     boardSlug,
@@ -87,5 +90,7 @@ export default defineStore("useConfigStore", () => {
     electionTheme,
     setElectionTheme,
     setBoardSlug,
+    pageRefreshIterator,
+    pageReloaded,
   };
 });

client/src/views/BallotTrackingLanding.vue

@@ -116,7 +116,7 @@ const button = computed(() => {
             :input-label="$t('views.tracking.receipt_input_label')"
             :tooltip-text="$t('views.tracking.receipt_input_tooltip')"
             accept=".pdf"
-            :error="error"
+            :error="!!error"
             :disabled="receiptInputDisabled"
             :show-preview="false"
             @update="updateReceipt"
@@ -128,7 +128,7 @@ const button = computed(() => {
             :input-label="$t('views.tracking.tracking_input_label')"
             :tooltip-text="$t('views.tracking.tracking_input_tooltip')"
             :placeholder="$t('views.tracking.tracking_input_placeholder')"
-            :error="error"
+            :error="!!error"
             :disabled="trackingInputDisabled"
           />
 

client/src/views/BallotVerificationLanding.vue

@@ -87,7 +87,7 @@ watch(verificationStore, async (newStore) => {
           :placeholder="$t('views.verification.placeholder')"
           :disabled="disabled"
           input-label="Testing code"
-          :error="error"
+          :error="!!error"
           :tooltip-text="$t('views.verification.tooltip_text')"
         />
 

client/src/views/HelpView.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import ContentLayout from "../components/ContentLayout.vue";
-import MainIcon from "../components/MainIcon.vue";
-import ExpandableSection from "../components/ExpandableSection.vue";
-import { onMounted, ref, watch } from "vue";
-import i18n from "../lib/i18n";
-import useConfigStore from "../stores/useConfigStore";
+import ContentLayout from "@/components/ContentLayout.vue";
+import MainIcon from "@/components/MainIcon.vue";
+import ExpandableSection from "@/components/ExpandableSection.vue";
+import { onMounted, ref, watch, computed } from "vue";
+import i18n from "@/lib/i18n";
+import useConfigStore from "@/stores/useConfigStore";
+import type { Locale, DefineLocaleMessage } from "vue-i18n";
 
 const configStore = useConfigStore();
-const ballotTesterQuestions = ref(null);
-const ballotTrackerQuestions = ref(null);
-const logsQuestions = ref(null);
-const otherQuestions = ref(null);
+const ballotTesterQuestions = ref<DefineLocaleMessage>(null);
+const ballotTrackerQuestions = ref<DefineLocaleMessage>(null);
+const logsQuestions = ref<DefineLocaleMessage>(null);
+const otherQuestions = ref<DefineLocaleMessage>(null);
 const currentQuestions = ref(null);
 const currentTab = ref<Tabs>(null);
+const currentLocale = computed(() => i18n.global.locale);
 
 type Tabs = "tester" | "tracker" | "logs" | "other";
 
@@ -29,7 +31,7 @@ const loadTab = (newTab: Tabs) => {
   if (newTab === "other") currentQuestions.value = otherQuestions.value;
 };
 
-const updateQuestions = (locale: string) => {
+const updateQuestions = (locale: Locale) => {
   ballotTesterQuestions.value = (
     i18n.global.getLocaleMessage(locale) as any
   ).views.faq.questions.ballot_tester;
@@ -44,13 +46,13 @@ const updateQuestions = (locale: string) => {
   ).views.faq.questions.other;
 };
 
-watch(i18n, () => {
-  updateQuestions(i18n.global.locale);
+watch(currentLocale, () => {
+  updateQuestions(currentLocale.value);
   loadTab(currentTab.value);
 });
 
 onMounted(() => {
-  updateQuestions(i18n.global.locale);
+  updateQuestions(currentLocale.value);
   switchTab("tester");
 });
 </script>

client/src/views/LogsView.vue

@@ -1,44 +1,39 @@
 <script setup lang="ts">
-import { options } from "../lib/api";
-import useConfigStore from "../stores/useConfigStore";
-import useBoardStore from "../stores/useBoardStore";
+import { options } from "@/lib/api";
+import useConfigStore from "@/stores/useConfigStore";
+import useBoardStore from "@/stores/useBoardStore";
 import { onMounted, ref, watch, computed } from "vue";
 import { useRoute } from "vue-router";
-import BoardItem from "../components/BoardItem.vue";
-import ContentLayout from "../components/ContentLayout.vue";
-import MainIcon from "../components/MainIcon.vue";
+import BoardItem from "@/components/BoardItem.vue";
+import ContentLayout from "@/components/ContentLayout.vue";
+import MainIcon from "@/components/MainIcon.vue";
 import router from "@/router";
-import i18n from "../lib/i18n";
+import i18n from "@/lib/i18n";
 
 const route = useRoute();
 const configStore = useConfigStore();
 const boardStore = useBoardStore();
 const configItemsOnly = ref<boolean>(false);
-const disableFirst = ref<boolean>(true);
-const disableLast = ref<boolean>(false);
-
-watch(configStore, () => loadPage(currentPage()));
-watch(route, () => {
-  route.params.page === "1"
-    ? (disableFirst.value = true)
-    : (disableFirst.value = false);
-  route.params.page === boardStore.meta.total_pages.toString()
-    ? (disableLast.value = true)
-    : (disableLast.value = false);
-  loadPage(currentPage());
-});
+
+const boardLink = computed(() => `${dbbLink.value}/board`);
+
+const disableFirst = computed(() => !boardStore.meta.prev_page);
+
+const disableLast = computed(() => !boardStore.meta.next_page);
+
+watch(configStore, () => loadPage(currentPage.value));
+
+watch(route, () => loadPage(currentPage.value));
+
 watch(configItemsOnly, () => loadPage(1));
 
 const dbbLink = computed(() => {
   return `${options.baseURL}/${configStore.boardSlug}`;
 });
 
-const currentPage = () => {
-  return parseInt(
-    (route.params.page || boardStore.currentPage || 1).toString(),
-    10
-  );
-};
+const currentPage = computed(() =>
+  parseInt((route.params.page || boardStore.currentPage || 1).toString(), 10)
+);
 
 const filter = () => {
   if (!configItemsOnly.value) return [];
@@ -78,10 +73,7 @@ const downloadAttachments = () => {
   window.location.href = `${dbbLink.value}/download_attachmets`;
 };
 
-const boardLink = computed(() => {
-  return `${dbbLink.value}/board`;
-});
-onMounted(() => loadPage(currentPage()));
+onMounted(() => loadPage(currentPage.value));
 </script>
 
 <template>

client/vite.config.ts

@@ -6,6 +6,9 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  define: {
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
+  },
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),