From fb363b00959d013d393ac8bc9d5076bec1a77033 Mon Sep 17 00:00:00 2001 From: connoratrug <47183404+connoratrug@users.noreply.github.com> Date: Fri, 6 Dec 2024 09:55:49 +0100 Subject: [PATCH] feat(directory) add service to cart from service details page (#4543) feat: add/remove service from service details page --- apps/directory/src/components/Button.vue | 30 ++++++++++++ .../ServiceSection.vue | 13 ++--- .../directory/src/functions/bookmarkMapper.ts | 1 - apps/directory/src/stores/checkoutStore.ts | 25 ++++++++++ apps/directory/src/views/ServiceReport.vue | 48 +++++++++++++++++-- .../add-remove-from-service-detail.spec.ts | 19 ++++++++ 6 files changed, 121 insertions(+), 15 deletions(-) create mode 100644 apps/directory/src/components/Button.vue create mode 100644 apps/directory/tests/add-remove-from-service-detail.spec.ts diff --git a/apps/directory/src/components/Button.vue b/apps/directory/src/components/Button.vue new file mode 100644 index 0000000000..d80226a000 --- /dev/null +++ b/apps/directory/src/components/Button.vue @@ -0,0 +1,30 @@ + + + diff --git a/apps/directory/src/components/biobankcards-components/ServiceSection.vue b/apps/directory/src/components/biobankcards-components/ServiceSection.vue index 07cc3a9e20..075bff8655 100644 --- a/apps/directory/src/components/biobankcards-components/ServiceSection.vue +++ b/apps/directory/src/components/biobankcards-components/ServiceSection.vue @@ -2,15 +2,10 @@
- -
- {{ services.length }} collections available -
- +
+ {{ services.length }} collections available +
+
, serviceCart: Record ) { - console.log("createBookmark", filters, collectionCart, serviceCart); const filtersStore = useFiltersStore(); const bookmark: Record = {}; const matchAll = []; diff --git a/apps/directory/src/stores/checkoutStore.ts b/apps/directory/src/stores/checkoutStore.ts index ed1af32283..4ab5413845 100644 --- a/apps/directory/src/stores/checkoutStore.ts +++ b/apps/directory/src/stores/checkoutStore.ts @@ -423,6 +423,30 @@ export const useCheckoutStore = defineStore("checkoutStore", () => { window.location.href = body.redirectUrl; } + function isInCart(identifier: string) { + for (const biobank in selectedCollections.value) { + const collectionSelection = selectedCollections.value[biobank]; + + for (const collection of collectionSelection) { + if (collection.value === identifier) { + return true; + } + } + } + + for (const biobank in selectedServices.value) { + const serviceSelection = selectedServices.value[biobank]; + + for (const service of serviceSelection) { + if (service.value === identifier) { + return true; + } + } + } + + return false; + } + return { nToken, setSearchHistory, @@ -439,5 +463,6 @@ export const useCheckoutStore = defineStore("checkoutStore", () => { removeCollectionsFromSelection, removeServicesFromSelection, removeAllFromSelection, + isInCart, }; }); diff --git a/apps/directory/src/views/ServiceReport.vue b/apps/directory/src/views/ServiceReport.vue index 467c66495d..4e6044833c 100644 --- a/apps/directory/src/views/ServiceReport.vue +++ b/apps/directory/src/views/ServiceReport.vue @@ -18,12 +18,21 @@
- - -
+
+ +
+
+
+ @@ -148,15 +157,16 @@ import { computed, ref } from "vue"; import QueryEMX2 from "../../../molgenis-components/src/queryEmx2/queryEmx2"; // @ts-ignore import { Breadcrumb } from "molgenis-components"; -import { IServices } from "../interfaces/directory"; +import { IBiobanks, IServices } from "../interfaces/directory"; import { useSettingsStore } from "../stores/settingsStore"; import { useRoute } from "vue-router"; import ReportTitle from "../components/report-components/ReportTitle.vue"; -import ReportDescription from "../components/report-components/ReportDescription.vue"; import CheckOut from "../components/checkout-components/CheckOut.vue"; import string from "../components/generators/view-components/string.vue"; import Quality from "../components/generators/view-components/quality.vue"; import ContactInformation from "../components/report-components/ContactInformation.vue"; +import Button from "../components/Button.vue"; +import { useCheckoutStore } from "../stores/checkoutStore"; const service = ref(null); @@ -235,4 +245,32 @@ const qualityProps = computed(() => { }), }; }); + +const isInCart = computed(() => + useCheckoutStore().isInCart(service.value?.id ?? "") +); + +function toggleSelection() { + if (!service.value) { + throw new Error("Service is not loaded yet"); + } + const bookmark = false; + + if (isInCart.value) { + useCheckoutStore().removeServicesFromSelection( + { name: service.value.biobank.name }, + [service.value.id], + bookmark + ); + } else { + useCheckoutStore().addServicesToSelection( + { + id: service.value.biobank.id, + name: service.value.biobank.name, + } as IBiobanks, + [{ label: service.value.name, value: service.value.id }], + bookmark + ); + } +} diff --git a/apps/directory/tests/add-remove-from-service-detail.spec.ts b/apps/directory/tests/add-remove-from-service-detail.spec.ts new file mode 100644 index 0000000000..221835013f --- /dev/null +++ b/apps/directory/tests/add-remove-from-service-detail.spec.ts @@ -0,0 +1,19 @@ +import { test, expect } from '@playwright/test'; +import { getSchemaName } from './getSchemaName'; + +const schemaName = getSchemaName(); + +test('add/remove service from service detaill page', async ({ page }) => { + await page.goto(`/${schemaName}/directory/`); + await page.getByRole('button', { name: 'Services' }).first().click(); + await page.getByRole('link', { name: 'Biobank Service' }).click(); + await expect(page.locator('h1')).toContainText('Biobank Service'); + await expect(page.getByRole('main')).toContainText('Add'); + await page.getByRole('button', { name: 'Add' }).click(); + // 1 is the number of services added + await expect(page.getByRole('main')).toContainText('1'); + await expect(page.getByRole('main')).toContainText('Remove'); + await page.getByRole('button', { name: 'Remove' }).click(); + // after removing the service, the text should be 'Add' + await expect(page.getByRole('main')).toContainText('Add'); +}); \ No newline at end of file