From 049c8b09978bf994dfe7bb2d7d781f6168794a7a Mon Sep 17 00:00:00 2001 From: Quentin Bellanger Date: Thu, 25 Jan 2024 18:10:39 +0100 Subject: [PATCH] =?UTF-8?q?Permet=20de=20r=C3=A9ordonner=20les=20pages=20d?= =?UTF-8?q?e=20l'=C3=A9chantillon=20(#613)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add select to change pages order * update order or pages when updating select * focus endIndex select after order change * fix select label index * delete old css class * sort report pages in the correct order * add order property to audit pages * order pages in report statement and report errors * Update confiture-rest-api/src/audits/audit.service.ts Co-authored-by: Adrien Boutigny * Update confiture-rest-api/src/audits/audit.service.ts Co-authored-by: Adrien Boutigny * Update confiture-rest-api/src/audits/audit.service.ts Co-authored-by: Adrien Boutigny * remove order from dto * merge migrations * vocally announce page position changes * order tabs by pages order * fix page type * fix page type * simplfiy swapping pages * trigger heroku deployment * update changelog --------- Co-authored-by: Adrien Boutigny --- CHANGELOG.md | 4 + .../migration.sql | 2 + confiture-rest-api/prisma/schema.prisma | 11 +- .../src/audits/audit.service.ts | 26 ++-- .../src/audits/dto/audit-report.dto.ts | 1 + .../src/audits/dto/create-audit.dto.ts | 1 + .../audit/AuditGeneralInformationsForm.vue | 113 +++++++++++++++--- .../src/components/report/ReportErrors.vue | 50 ++++---- .../src/pages/audit/AuditGenerationPage.vue | 6 +- confiture-web-app/src/types/report.ts | 1 + confiture-web-app/src/types/types.ts | 7 +- 11 files changed, 161 insertions(+), 61 deletions(-) create mode 100644 confiture-rest-api/prisma/migrations/20240122095545_add_order_property_to_audited_pages/migration.sql diff --git a/CHANGELOG.md b/CHANGELOG.md index e51762e7..61ddae79 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c ## 25/01/2024 +### Nouvelles fonctionnalités 🚀 + +- Ajoute la possibilité de changer l’ordre des pages de l’échantilloon depuis les paramètres de l’audit ([#613](https://github.com/DISIC/Ara/pull/613)) + ### Corrections 🐛 - Corrige la navigation au clavier des onglets des pages de l’audit ([#625](https://github.com/DISIC/Ara/pull/625)) diff --git a/confiture-rest-api/prisma/migrations/20240122095545_add_order_property_to_audited_pages/migration.sql b/confiture-rest-api/prisma/migrations/20240122095545_add_order_property_to_audited_pages/migration.sql new file mode 100644 index 00000000..36a0bfe4 --- /dev/null +++ b/confiture-rest-api/prisma/migrations/20240122095545_add_order_property_to_audited_pages/migration.sql @@ -0,0 +1,2 @@ +-- AlterTable +ALTER TABLE "AuditedPage" ADD COLUMN "order" INTEGER NOT NULL DEFAULT 0; diff --git a/confiture-rest-api/prisma/schema.prisma b/confiture-rest-api/prisma/schema.prisma index 0595d873..4d0f73d9 100644 --- a/confiture-rest-api/prisma/schema.prisma +++ b/confiture-rest-api/prisma/schema.prisma @@ -103,9 +103,10 @@ model TestEnvironment { } model AuditedPage { - id Int @id @default(autoincrement()) - name String - url String + id Int @id @default(autoincrement()) + order Int @default(0) + name String + url String audit Audit? @relation(fields: [auditUniqueId], references: [editUniqueId], onDelete: Cascade) auditUniqueId String? @@ -220,11 +221,11 @@ model User { orgName String? /// @DtoEntityHidden - newEmail String? + newEmail String? /// @DtoEntityHidden newEmailVerificationJti String? } model ActiveFeedbackToken { uid String @id -} \ No newline at end of file +} diff --git a/confiture-rest-api/src/audits/audit.service.ts b/confiture-rest-api/src/audits/audit.service.ts index 65ea9eb2..bc3faba9 100644 --- a/confiture-rest-api/src/audits/audit.service.ts +++ b/confiture-rest-api/src/audits/audit.service.ts @@ -61,7 +61,9 @@ export class AuditService { pages: { createMany: { - data: data.pages + data: data.pages.map((p, i) => { + return { ...p, order: i }; + }) } }, @@ -183,8 +185,9 @@ export class AuditService { data: UpdateAuditDto ): Promise { try { - const updatedPages = data.pages.filter((p) => p.id); - const newPages = data.pages.filter((p) => !p.id); + const orderedPages = data.pages.map((p, i) => ({ ...p, order: i })); + const updatedPages = orderedPages.filter((p) => p.id); + const newPages = orderedPages.filter((p) => !p.id); const [audit] = await this.prisma.$transaction([ this.prisma.audit.update({ @@ -302,12 +305,14 @@ export class AuditService { update: updatedPages.map((p) => ({ where: { id: p.id }, data: { + order: p.order, name: p.name, url: p.url } })), createMany: { data: newPages.map((p) => ({ + order: p.order, name: p.name, url: p.url })) @@ -784,12 +789,15 @@ export class AuditService { browserVersion: e.browserVersion })), referencial: "RGAA Version 4.1", - samples: audit.pages.map((p, i) => ({ - name: p.name, - number: i + 1, - url: p.url, - id: p.id - })), + samples: audit.pages + .map((p, i) => ({ + name: p.name, + order: p.order, + number: i + 1, + url: p.url, + id: p.id + })) + .sort((p) => p.order), tools: audit.tools, technologies: audit.technologies }, diff --git a/confiture-rest-api/src/audits/dto/audit-report.dto.ts b/confiture-rest-api/src/audits/dto/audit-report.dto.ts index 007a51cc..f7baacf2 100644 --- a/confiture-rest-api/src/audits/dto/audit-report.dto.ts +++ b/confiture-rest-api/src/audits/dto/audit-report.dto.ts @@ -133,6 +133,7 @@ class ReportContext { class PageSample { id: number; number: number; + order: number; name: string; url: string; } diff --git a/confiture-rest-api/src/audits/dto/create-audit.dto.ts b/confiture-rest-api/src/audits/dto/create-audit.dto.ts index eedbbfe9..6fd5d293 100644 --- a/confiture-rest-api/src/audits/dto/create-audit.dto.ts +++ b/confiture-rest-api/src/audits/dto/create-audit.dto.ts @@ -18,6 +18,7 @@ export class CreateAuditPage { @IsNumber() @IsOptional() id?: number; + /** * @example "Page de contact" */ diff --git a/confiture-web-app/src/components/audit/AuditGeneralInformationsForm.vue b/confiture-web-app/src/components/audit/AuditGeneralInformationsForm.vue index ff668384..85a92165 100644 --- a/confiture-web-app/src/components/audit/AuditGeneralInformationsForm.vue +++ b/confiture-web-app/src/components/audit/AuditGeneralInformationsForm.vue @@ -137,6 +137,56 @@ async function deletePage(i: number) { } } +const pageOrderSelectRefs = ref(); + +const positionSuccessMessage = ref(""); + +/** + * Change the order of pages. Swap pages if it is adjacent. + * Otherwise, insert `startIndex` page at `endIndex` position. + * @param {number} startIndex + * @param {number} endIndex + * @example + * Given [1, 2, 3, 4] and if updatePageOrder(1, 3), new order will be [1, 4, 2, 3]. + */ +function updatePageOrder(startIndex: number, endIndex: number) { + positionSuccessMessage.value = ""; + pagesArePristine.value = false; + + const defaultState = [...pages.value]; + const startEl = defaultState[startIndex]; + + if (startIndex === endIndex + 1 || startIndex === endIndex - 1) { + // Swap 2 adjacent pages + const temp = pages.value[startIndex]; + pages.value[startIndex] = pages.value[endIndex]; + pages.value[endIndex] = temp; + } else { + // Insert startIndex and endIndex + pages.value = + startIndex < endIndex + ? [ + ...defaultState.slice(0, startIndex), + ...defaultState.slice(startIndex + 1, endIndex + 1), + startEl, + ...defaultState.slice(endIndex + 1) + ] + : [ + ...defaultState.slice(0, endIndex), + startEl, + ...defaultState.slice(endIndex, startIndex), + ...defaultState.slice(startIndex + 1) + ]; + } + + // Focus `endIndex` select + pageOrderSelectRefs.value?.at(endIndex)?.focus(); + + positionSuccessMessage.value = `Page déplacée en position ${ + endIndex + 1 + } sur ${pages.value.length}`; +} + /** * Dev function to avoid filling all fields manually */ @@ -159,7 +209,7 @@ function onSubmit() { emit("submit", { auditType: auditType.value!, procedureName: procedureName.value, - // remove leading/trailing whitespaces from urls, the browser valifation might accept those our backend won't ! + // remove leading/trailing whitespaces from urls, the browser validation might accept those our backend won't! pages: pages.value.map((p) => ({ ...p, url: p.url.trim() })), auditorName: procedureAuditorName.value, auditorEmail: formatEmail(procedureAuditorEmail.value) @@ -255,16 +305,44 @@ const previousRoute = usePreviousRoute();

Page {{ i + 1 }}

- +
+ + +
+ + + + +
+