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

@@ -0,0 +1,30 @@
+<template>
+  <button type="button" class="btn px-2" :class="buttonClass">
+    {{ label }}
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+export type TButtonType = "outline" | "full";
+export type TButtonSize = "sm" | "md" | "lg";
+
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    type?: TButtonType;
+    size?: TButtonSize;
+  }>(),
+  {
+    type: "full",
+    size: "md",
+  }
+);
+
+const buttonClass = computed(() => {
+  return `btn-${props.type === "outline" ? "outline-" : ""}secondary btn-${
+    props.size
+  }`;
+});
+</script>

apps/directory/src/components/biobankcards-components/ServiceSection.vue

@@ -2,15 +2,10 @@
   <div>
     <CardItem v-if="services.length > 1">
       <div class="d-flex">
-        <router-link
-          :to="'/service/'"
-          title="Service details"
-          class="text-dark"
-        >
-          <h5 class="font-weight-light">
-            {{ services.length }} collections available
-          </h5>
-        </router-link>
+        <h5 class="font-weight-light">
+          {{ services.length }} collections available
+        </h5>
+
         <div class="ml-auto">
           <CheckBox
             id="ds"

apps/directory/src/functions/bookmarkMapper.ts

@@ -92,7 +92,6 @@ export function createBookmark(
   collectionCart: Record<string, labelValuePair[]>,
   serviceCart: Record<string, labelValuePair[]>
 ) {
-  console.log("createBookmark", filters, collectionCart, serviceCart);
   const filtersStore = useFiltersStore();
   const bookmark: Record<string, string> = {};
   const matchAll = [];

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,
   };
 });

apps/directory/src/views/ServiceReport.vue

@@ -18,12 +18,21 @@
 
       <div class="row">
         <div class="col p-0">
-          <ReportTitle type="Service" :name="service.name" />
-          <ReportDescription :description="service.description" />
-
           <div class="container p-0">
             <div class="row">
               <div class="col-md-8">
+                <div class="d-flex flex-row justify-content-between">
+                  <ReportTitle type="Service" :name="service.name" />
+                  <div>
+                    <Button
+                      type="outline"
+                      :label="isInCart ? 'Remove' : 'Add'"
+                      size="sm"
+                      @click="toggleSelection"
+                    />
+                  </div>
+                </div>
+
                 <table class="table-layout w-100">
                   <tbody>
                     <string :attribute="{ label: 'Id:', value: service.id }" />
@@ -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<IServices | null>(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
+    );
+  }
+}
 </script>

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');
+});