From e4b266c22fa708d490d9d7c873926c935154e1df Mon Sep 17 00:00:00 2001 From: Adrien Boutigny Date: Fri, 8 Dec 2023 11:43:02 +0100 Subject: [PATCH] Rend sticky les onglets de l'audit * base structure of AraTabs add panels to component style tabs a bit focus selected tab when using arrows adjust tabs style make tabs scrollable add notes tab fix tabs focus style fix auditStepThree make tab panels focusable add Home/End shortcuts on tabs fix page title when changin tab remove tabs padding and update finished audit wording sync the tabs top property with the size of the sticky indicator sdmlkfj show left side border only on scroll adjust header actions * fix rebase artifacts * fix some pr feedback * only show bottom border when touching filters * adjust thematic anchors scroll margin * fix border appearing too soon on small viewports * update changelog --- confiture-web-app/package.json | 24 +- confiture-web-app/src/assets/CHANGELOG.md | 10 + confiture-web-app/src/components/AraTabs.vue | 231 +++ .../AuditGeneralInformationsForm.vue | 6 +- .../src/components/AuditGenerationFilters.vue | 18 +- .../src/components/AuditGenerationHeader.vue | 330 ++-- .../AuditGenerationPageCriteria.vue | 2 +- .../src/components/AuditProgressBar.vue | 2 +- .../src/components/StickyIndicators.vue | 10 +- .../src/pages/edit/EditAuditStepThreePage.vue | 219 +-- confiture-web-app/src/store/audit.ts | 2 +- confiture-web-app/src/store/filters.ts | 7 +- confiture-web-app/src/styles/main.css | 4 + confiture-web-app/src/utils.ts | 33 +- confiture-web-app/yarn.lock | 1377 ++++++++++------- 15 files changed, 1428 insertions(+), 847 deletions(-) create mode 100644 confiture-web-app/src/components/AraTabs.vue diff --git a/confiture-web-app/package.json b/confiture-web-app/package.json index eeb1a801f..2c7fb8e4e 100644 --- a/confiture-web-app/package.json +++ b/confiture-web-app/package.json @@ -24,7 +24,7 @@ "marked": "^4.2.4", "pinia": "^2.0.28", "slugify": "^1.6.5", - "vue": "^3.2.45", + "vue": "^3.3.8", "vue-matomo": "^4.2.0", "vue-router": "^4.2.5" }, @@ -34,16 +34,16 @@ "@types/lodash-es": "^4.17.6", "@types/marked": "^4.0.8", "@types/node": "^18.11.15", - "@typescript-eslint/eslint-plugin": "^5.46.1", - "@typescript-eslint/parser": "^5.46.1", - "@vitejs/plugin-vue": "^4.0.0", - "eslint": "^8.29.0", - "eslint-config-prettier": "^8.5.0", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-vue": "^9.8.0", - "prettier": "^2.8.1", - "typescript": "^4.9.4", - "vite": "^4.0.1", - "vue-tsc": "^1.0.13" + "@typescript-eslint/eslint-plugin": "^6.10.0", + "@typescript-eslint/parser": "^6.10.0", + "@vitejs/plugin-vue": "^4.4.1", + "eslint": "^8.53.0", + "eslint-config-prettier": "^9.0.0", + "eslint-plugin-prettier": "^5.0.1", + "eslint-plugin-vue": "^9.18.1", + "prettier": "^3.0.3", + "typescript": "^5.2.2", + "vite": "^4.5.0", + "vue-tsc": "^1.8.22" } } diff --git a/confiture-web-app/src/assets/CHANGELOG.md b/confiture-web-app/src/assets/CHANGELOG.md index b5fe44691..d8832fad8 100644 --- a/confiture-web-app/src/assets/CHANGELOG.md +++ b/confiture-web-app/src/assets/CHANGELOG.md @@ -2,6 +2,16 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée. +## 08/12/2023 + +### Nouvelles fonctionnalités 🚀 + +- Les onglets de page sur la page d'audit sont maintenant collés au haut de l'écran ([#541](https://github.com/DISIC/Ara/pull/541)) + +### Autres changements ⚙️ + +- Ajuste le layout de la barre d'actions sur la page d'audit ([#541](https://github.com/DISIC/Ara/pull/541)) + ## 06/12/2023 ### Corrections 🐛 diff --git a/confiture-web-app/src/components/AraTabs.vue b/confiture-web-app/src/components/AraTabs.vue new file mode 100644 index 000000000..1e6eafc58 --- /dev/null +++ b/confiture-web-app/src/components/AraTabs.vue @@ -0,0 +1,231 @@ + + + + + + + + + diff --git a/confiture-web-app/src/components/AuditGeneralInformationsForm.vue b/confiture-web-app/src/components/AuditGeneralInformationsForm.vue index 36068d3f3..5ac7bf145 100644 --- a/confiture-web-app/src/components/AuditGeneralInformationsForm.vue +++ b/confiture-web-app/src/components/AuditGeneralInformationsForm.vue @@ -53,13 +53,13 @@ const pages = ref( { name: "Plan du site", url: "" }, { name: "Aide", url: "" }, { name: "Authentification", url: "" }, - ] + ], ); const procedureAuditorName = ref( - props.defaultValues?.auditorName ?? accountStore.account?.name ?? "" + props.defaultValues?.auditorName ?? accountStore.account?.name ?? "", ); const procedureAuditorEmail = ref( - props.defaultValues?.auditorEmail ?? accountStore.account?.email ?? "" + props.defaultValues?.auditorEmail ?? accountStore.account?.email ?? "", ); const pageNameFieldRefs = ref[]>([]); diff --git a/confiture-web-app/src/components/AuditGenerationFilters.vue b/confiture-web-app/src/components/AuditGenerationFilters.vue index 24a7e2dac..ff3cb9940 100644 --- a/confiture-web-app/src/components/AuditGenerationFilters.vue +++ b/confiture-web-app/src/components/AuditGenerationFilters.vue @@ -21,7 +21,7 @@ const auditStore = useAuditStore(); const resultsCount = computed(() => filterStore.filteredTopics .map((t) => t.criteria.length) - .reduce((total, length) => (total += length), 0) + .reduce((total, length) => (total += length), 0), ); const search = ref(""); @@ -65,26 +65,26 @@ async function displayFilters() { watch( () => filterStore.hideEvaluatedCriteria, - () => filterStore.updateEvaluatedCriteria() + () => filterStore.updateEvaluatedCriteria(), ); const compliantCount = computed( () => resultStore.allResults?.filter( - (r) => r.status === CriteriumResultStatus.COMPLIANT - ).length + (r) => r.status === CriteriumResultStatus.COMPLIANT, + ).length, ); const notCompliantCount = computed( () => resultStore.allResults?.filter( - (r) => r.status === CriteriumResultStatus.NOT_COMPLIANT - ).length + (r) => r.status === CriteriumResultStatus.NOT_COMPLIANT, + ).length, ); const notApplicableCount = computed( () => resultStore.allResults?.filter( - (r) => r.status === CriteriumResultStatus.NOT_APPLICABLE - ).length + (r) => r.status === CriteriumResultStatus.NOT_APPLICABLE, + ).length, ); @@ -93,7 +93,7 @@ const notApplicableCount = computed( v-if="!showFilters" ref="displayFiltersRef" type="button" - class="fr-btn fr-btn--sm fr-btn--tertiary fr-icon-arrow-right-s-line-double toggle-column-button" + class="fr-btn fr-btn--sm fr-btn--tertiary fr-icon-arrow-right-s-line-double toggle-column-button fr-mr-3v" @click="displayFilters" > Afficher la colonne des filtres diff --git a/confiture-web-app/src/components/AuditGenerationHeader.vue b/confiture-web-app/src/components/AuditGenerationHeader.vue index 9d8e85e72..49d0013aa 100644 --- a/confiture-web-app/src/components/AuditGenerationHeader.vue +++ b/confiture-web-app/src/components/AuditGenerationHeader.vue @@ -1,21 +1,27 @@