From 4e531ae68dee7e466c2f1f9e550782a8833db3f5 Mon Sep 17 00:00:00 2001 From: Yaacov Date: Mon, 10 Feb 2025 15:57:01 +0100 Subject: [PATCH 1/4] fix buggy refresh (patch) (#948) --- .../src/pages/audit/AuditGenerationPage.vue | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue index 990350dc..4210ef9d 100644 --- a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue +++ b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue @@ -1,6 +1,6 @@ @@ -69,17 +176,21 @@ watch(currentTab, (currentTab) => { --> diff --git a/confiture-web-app/src/components/audit/AraTabsPanel.vue b/confiture-web-app/src/components/audit/AraTabsPanel.vue new file mode 100644 index 00000000..29fe3c1c --- /dev/null +++ b/confiture-web-app/src/components/audit/AraTabsPanel.vue @@ -0,0 +1,27 @@ + + + diff --git a/confiture-web-app/src/components/audit/AraTabsTabData.ts b/confiture-web-app/src/components/audit/AraTabsTabData.ts new file mode 100644 index 00000000..856482fd --- /dev/null +++ b/confiture-web-app/src/components/audit/AraTabsTabData.ts @@ -0,0 +1,32 @@ +import { type Component } from "vue"; + +import LayoutIcon from "../../components/icons/LayoutIcon.vue"; +import { slugify } from "../../utils"; + +export class AraTabsTabData { + label: string; + #slug: string; // do not allow slug to be defined from outside + icon: typeof LayoutIcon | undefined; + component: Component; + componentParams: object | undefined; + + constructor(data: { + label: string; + icon?: typeof LayoutIcon; + component: Component; + componentParams?: object; + }) { + const label = data.label; + this.label = label; + this.#slug = slugify(label); + this.icon = data.icon; + this.component = data.component; + this.componentParams = data.componentParams; + } + + // TODO: check how to expose "slug" to DevTools + // Currently it is not exposed because #slug is private + public get slug(): string { + return this.#slug; + } +} diff --git a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue index b37f3ec7..3a75c2af 100644 --- a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue +++ b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue @@ -289,7 +289,7 @@ onMounted(() => {
    diff --git a/confiture-web-app/src/components/audit/AuditSettingsForm.vue b/confiture-web-app/src/components/audit/AuditSettingsForm.vue index be36ed49..5da06b39 100644 --- a/confiture-web-app/src/components/audit/AuditSettingsForm.vue +++ b/confiture-web-app/src/components/audit/AuditSettingsForm.vue @@ -3,6 +3,7 @@ import { computed, nextTick, ref, toRaw, watch } from "vue"; import { useRoute } from "vue-router"; import { usePreviousRoute } from "../../composables/usePreviousRoute"; +import router from "../../router"; import { useAccountStore } from "../../store/account"; import { AuditPage, AuditType, CreateAuditRequestData } from "../../types"; import { formatEmail } from "../../utils"; @@ -112,7 +113,7 @@ const backLinkLabel = computed(() => { :label="backLinkLabel" :to="{ name: previousRoute.route?.name || 'audit-overview', - params: { uniqueId: route.params.uniqueId } + params: previousRoute.route?.params }" /> @@ -189,15 +190,12 @@ const backLinkLabel = computed(() => { Enregistrer les modifications - Annuler - +
diff --git a/confiture-web-app/src/components/layout/SiteHeader.vue b/confiture-web-app/src/components/layout/SiteHeader.vue index e6183fe1..bdc26bdd 100644 --- a/confiture-web-app/src/components/layout/SiteHeader.vue +++ b/confiture-web-app/src/components/layout/SiteHeader.vue @@ -16,7 +16,7 @@ const route = useRoute(); * - if the user is connected */ const headerComponent = computed(() => { - if (route.name === "report" || route.name === "a11y-statement") { + if (route.name === "report-full" || route.name === "a11y-statement") { return DeliverableHeader; } diff --git a/confiture-web-app/src/components/report/ReportCriteria.vue b/confiture-web-app/src/components/report/ReportCriteria.vue index ac158535..dd927ded 100644 --- a/confiture-web-app/src/components/report/ReportCriteria.vue +++ b/confiture-web-app/src/components/report/ReportCriteria.vue @@ -1,6 +1,7 @@ diff --git a/confiture-web-app/src/router.ts b/confiture-web-app/src/router.ts index f1b89e21..6fe43526 100644 --- a/confiture-web-app/src/router.ts +++ b/confiture-web-app/src/router.ts @@ -1,5 +1,12 @@ -import { createRouter, createWebHistory } from "vue-router"; +import { + createRouter, + createWebHistory, + RouteLocationNormalized +} from "vue-router"; +import AraTabsPanel from "./components/audit/AraTabsPanel.vue"; +import { useResizeObserver } from "./composables/useResizeObserver"; +import { FirstTab } from "./enums"; import AccountDashboardPage from "./pages/account/AccountDashboardPage.vue"; import AccountDeletionFeedback from "./pages/account/AccountDeletionFeedback.vue"; import AccountSettingsPage from "./pages/account/AccountSettingsPage.vue"; @@ -28,6 +35,7 @@ import ReportPage from "./pages/report/ReportPage.vue"; import RoadmapPage from "./pages/RoadmapPage.vue"; import StatementPage from "./pages/StatementPage.vue"; import { useAccountStore, useAuditStore } from "./store"; +import { ScrollPosition } from "./types"; declare module "vue-router" { interface RouteMeta { @@ -208,12 +216,30 @@ const router = createRouter({ } }, { - path: "/audits/:uniqueId/generation/:tab?", + path: "/audits/:uniqueId/generation", name: "audit-generation", + redirect: (to: any) => { + return { + name: "audit-generation-full", + params: { + uniqueId: to.params.uniqueId, + tabSlug: FirstTab.AUDIT_SLUG + } + }; + }, component: AuditGenerationPage, + children: [ + { + path: ":tabSlug", + name: "audit-generation-full", + component: AraTabsPanel, + props: true + } + ], meta: { name: "Mon audit" - } + }, + props: true }, { path: "/audits/:uniqueId/declaration", @@ -242,22 +268,40 @@ const router = createRouter({ }, // Report pages { - path: "/rapport/:uniqueId/:tab?", + path: "/rapport/:uniqueId/", name: "report", + redirect: (to: any) => { + return { + name: "report-full", + params: { + uniqueId: to.params.uniqueId, + tabSlug: FirstTab.REPORT_SLUG + } + }; + }, component: ReportPage, + children: [ + { + name: "report-full", + path: ":tabSlug", + component: AraTabsPanel, + props: true + } + ], meta: { name: "Rapport d’audit", hideHomeLink: true - } + }, + props: true }, // TODO: remove this redirect in few months (17/04/2024) - { - path: "/rapports/:uniqueId/:tab?", - name: "report-old", - redirect: () => { - return { name: "report" }; - } - }, + // { + // path: "/rapports/:uniqueId/:tabSlug?", + // name: "report-old", + // redirect: () => { + // return { name: "report" }; + // } + // }, // a11y statement { path: "/declaration/:uniqueId", @@ -319,10 +363,36 @@ const router = createRouter({ } ], history, - scrollBehavior(to) { - if (!to.hash) { - return { top: 0 }; + scrollBehavior(to, from, savedPosition) { + if (to.hash) { + return scrollToHash(to.hash); } + + if (savedPosition) { + return scrollToSavedPosition(savedPosition); + } + + // When navigating between tabs, scroll to display tabs + // at the top of the screen + if (isTabNavigation(to, from)) { + const tabs = document.querySelector(".tabs-wrapper") as HTMLElement; + if (!tabs) { + console.warn( + 'When navigating between tabs with the "tabSlug" route parameter, \ + there should be an Element with class "tabs-wrapper"' + ); + } else { + const behavior = tabs.dataset.panelScrollBehavior; + if (behavior === "tabsTop") { + return scrollToTabPanelTop(tabs); + } else { + // behavior === "sameCriteria" + return scrollToElement(tabs); + } + } + } + + return scrollToTop(); } }); @@ -359,10 +429,119 @@ router.afterEach(async (to, from) => { }, 2000); } - document.body.setAttribute("tabindex", "-1"); - document.body.focus(); - document.body.removeAttribute("tabindex"); + if (!to.hash && !isTabNavigation(to, from)) { + document.body.setAttribute("tabindex", "-1"); + document.body.focus(); + document.body.removeAttribute("tabindex"); + } } }); +/** Functions */ + +function isTabNavigation( + to: RouteLocationNormalized, + from: RouteLocationNormalized +) { + return ( + to.name === from.name && + to.params.tabSlug !== undefined && + to.params.tabSlug !== from.params.tabSlug + ); +} + +function scrollToTop() { + console.info(`⬆ scroll to top`); + return { top: 0 }; +} + +function scrollToHash(hash: string) { + console.info(`⇣ scroll to hash(${hash})`); + return new Promise((resolve) => { + const { stop } = useResizeObserver(document.body, () => { + const hashEl = document.querySelector( + "#" + CSS.escape(hash.substring(1)) + ) as HTMLElement; + if (hashEl) { + // Force hash focus: usefull when hash element is not n the DOM on page load + hashEl.focus(); + const scrollMargin = parseFloat( + window.getComputedStyle(hashEl).scrollMargin + ); + resolve({ el: hashEl, top: scrollMargin }); + stop(); + } + }); + }) as Promise; +} + +function scrollToSavedPosition(savedPosition: ScrollPosition) { + const { left, top } = savedPosition; + console.info(`⇣ scroll to savedPosition {left: ${left}, top: ${top}}`); + + return new Promise((resolve) => { + const { stop } = useResizeObserver(document.body, (entries) => { + if (entries[0].target.clientHeight >= top! + screen.height) { + resolve(savedPosition); + stop(); + } + }); + }) as Promise; +} + +function scrollToTabPanelTop(tabs: HTMLElement) { + console.info(`⬆ scroll to tabs panel top`); + + const panel = tabs.nextElementSibling as HTMLElement; + const tabComputedStyle = window.getComputedStyle(tabs); + + const behavior = + tabs.getBoundingClientRect().top > 0 ? getScrollBehavior() : "instant"; + + return new Promise((resolve) => { + const { stop } = useResizeObserver(document.body, async (entries) => { + const scrollMargin = + parseFloat(tabComputedStyle.top) + parseFloat(tabComputedStyle.height); + if (entries[0].target.clientHeight >= scrollMargin + screen.height) { + const scrollPosition = { + el: panel, + top: scrollMargin, + behavior + }; + resolve(scrollPosition); + stop(); + } + }); + }) as Promise; +} + +/** + * @todo TODO: scroll to a smart position (same criteria as previous tabSlug?) + */ +async function scrollToElement(el: HTMLElement) { + console.info(`⇣ scroll to element ${el}`); + + return new Promise((resolve) => { + const { stop } = useResizeObserver(document.body, async (entries) => { + const scrollMargin = parseFloat(window.getComputedStyle(el).top); + if (entries[0].target.clientHeight >= scrollMargin + screen.height) { + const scrollPosition = { + el, + top: scrollMargin, + behavior: getScrollBehavior() + }; + resolve(scrollPosition); + stop(); + } + }); + }) as Promise; +} + +function getScrollBehavior(): ScrollBehavior { + // Use smooth scrolling only if user does not dislike animations + return window.matchMedia("(prefers-reduced-motion: reduce)").matches + ? "instant" + : "smooth"; +} + export default router; diff --git a/confiture-web-app/src/types/types.ts b/confiture-web-app/src/types/types.ts index 3601ce9d..faeb9d00 100644 --- a/confiture-web-app/src/types/types.ts +++ b/confiture-web-app/src/types/types.ts @@ -118,3 +118,35 @@ export enum StoreName { AUDIT_STORE = "AUDIT_STORE", RESULTS_STORE = "RESULTS_STORE" } + +// Routing +export declare type ScrollPosition = + | ScrollPositionCoordinates + | ScrollPositionElement; + +/** + * Scroll position similar to + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions | `ScrollToOptions`}. + * Note that not all browsers support `behavior`. + */ +declare type ScrollPositionCoordinates = { + behavior?: ScrollOptions["behavior"]; + left?: number; + top?: number; +}; + +declare interface ScrollPositionElement extends ScrollToOptions { + /** + * A valid CSS selector. Note some characters must be escaped in id selectors (https://mathiasbynens.be/notes/css-escapes). + * @example + * Here are a few examples: + * + * - `.title` + * - `.content:first-child` + * - `#marker` + * - `#marker\~with\~symbols` + * - `#marker.with.dot`: selects `class="with dot" id="marker"`, not `id="marker.with.dot"` + * + */ + el: string | Element; +} From 6c8679f7708b0e306b5f21e4ec5462f367779228 Mon Sep 17 00:00:00 2001 From: Yaacov Date: Wed, 26 Feb 2025 11:17:35 +0100 Subject: [PATCH 3/4] fix(AraTabs): add missing LayoutIcon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit LayoutIcon is used on tab "Éléments transverses" --- confiture-web-app/src/components/audit/AraTabs.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/confiture-web-app/src/components/audit/AraTabs.vue b/confiture-web-app/src/components/audit/AraTabs.vue index c9b07b54..c30c7d14 100644 --- a/confiture-web-app/src/components/audit/AraTabs.vue +++ b/confiture-web-app/src/components/audit/AraTabs.vue @@ -12,6 +12,7 @@ import { onBeforeRouteUpdate, useRouter } from "vue-router"; import { useResizeObserver } from "../../composables/useResizeObserver"; import { useUniqueId } from "../../composables/useUniqueId"; +import LayoutIcon from "../icons/LayoutIcon.vue"; import { AraTabsTabData } from "./AraTabsTabData"; /** Types */ From dd5417bf2034c22f1223d33fb00438beabcaa78c Mon Sep 17 00:00:00 2001 From: Yaacov Date: Tue, 4 Mar 2025 11:57:50 +0100 Subject: [PATCH 4/4] rework(AraTabs): AraTabs tightly linked to router * it simplifies the architecture as selecting a new tab always changes the route * + Add some enums and use them to avoid using slugify to much --- .../src/components/audit/AraTabs.vue | 62 ++++++++----------- .../audit/AuditGenerationFilters.vue | 6 +- .../src/components/report/ReportCriteria.vue | 37 ++++++----- .../src/components/report/ReportErrors.vue | 11 ++-- .../components/report/ReportImprovements.vue | 12 ++-- .../src/components/report/ReportResults.vue | 12 ++-- confiture-web-app/src/enums.ts | 12 ++++ .../src/pages/audit/AuditGenerationPage.vue | 23 ++----- .../src/pages/report/ReportPage.vue | 23 ++----- confiture-web-app/src/router.ts | 27 ++++---- 10 files changed, 102 insertions(+), 123 deletions(-) diff --git a/confiture-web-app/src/components/audit/AraTabs.vue b/confiture-web-app/src/components/audit/AraTabs.vue index c30c7d14..36d7daa8 100644 --- a/confiture-web-app/src/components/audit/AraTabs.vue +++ b/confiture-web-app/src/components/audit/AraTabs.vue @@ -8,7 +8,7 @@ diff --git a/confiture-web-app/src/router.ts b/confiture-web-app/src/router.ts index 6fe43526..1d93d02e 100644 --- a/confiture-web-app/src/router.ts +++ b/confiture-web-app/src/router.ts @@ -232,8 +232,7 @@ const router = createRouter({ { path: ":tabSlug", name: "audit-generation-full", - component: AraTabsPanel, - props: true + component: AraTabsPanel } ], meta: { @@ -282,10 +281,9 @@ const router = createRouter({ component: ReportPage, children: [ { - name: "report-full", path: ":tabSlug", - component: AraTabsPanel, - props: true + name: "report-full", + component: AraTabsPanel } ], meta: { @@ -364,14 +362,14 @@ const router = createRouter({ ], history, scrollBehavior(to, from, savedPosition) { - if (to.hash) { - return scrollToHash(to.hash); - } - if (savedPosition) { return scrollToSavedPosition(savedPosition); } + if (to.hash) { + return scrollToHash(to.hash); + } + // When navigating between tabs, scroll to display tabs // at the top of the screen if (isTabNavigation(to, from)) { @@ -475,13 +473,14 @@ function scrollToHash(hash: string) { }) as Promise; } -function scrollToSavedPosition(savedPosition: ScrollPosition) { +async function scrollToSavedPosition(savedPosition: ScrollPosition) { const { left, top } = savedPosition; - console.info(`⇣ scroll to savedPosition {left: ${left}, top: ${top}}`); return new Promise((resolve) => { - const { stop } = useResizeObserver(document.body, (entries) => { - if (entries[0].target.clientHeight >= top! + screen.height) { + const { stop } = useResizeObserver(document.body, async () => { + const htmlEl = document.getElementsByTagName("html")[0]; + if (htmlEl.scrollHeight > htmlEl.clientHeight) { + console.info(`⇣ scroll to savedPosition {left: ${left}, top: ${top}}`); resolve(savedPosition); stop(); } @@ -519,7 +518,7 @@ function scrollToTabPanelTop(tabs: HTMLElement) { * @todo TODO: scroll to a smart position (same criteria as previous tabSlug?) */ async function scrollToElement(el: HTMLElement) { - console.info(`⇣ scroll to element ${el}`); + console.info(`⇣ scroll to element ${el.className || el.id}`); return new Promise((resolve) => { const { stop } = useResizeObserver(document.body, async (entries) => {