fix(directory): add the select all buttons (#4556)

fix(directory): add the select all buttons

apps/directory/package.json

@@ -13,7 +13,8 @@
     "test-ci": "vitest run",
     "format": "prettier src tests  --write --config ../.prettierrc.js",
     "checkFormat": "prettier src tests  --check --config ../.prettierrc.js",
-    "e2e": "playwright test"
+    "e2e": "playwright test",
+    "codegen": "playwright codegen"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.5.2",

apps/directory/src/components/checkout-components/CheckOut.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <button
-      class="btn btn-primary"
+      class="btn btn-primary text-nowrap"
       @click="showCart = !showCart"
       :disabled="disableButton"
     >

apps/directory/src/components/partial-views/ApplicationHeaderPartialView.vue

@@ -1,20 +1,59 @@
 <template>
   <div class="px-3 pt-1 headerbar card sticky-top border-0 shadow-sm">
     <div class="row my-2">
-      <div class="col-8" aria-label="action-bar">
+      <div class="col px-2" aria-label="action-bar">
         <div class="search-container mr-2 mb-2">
           <SearchFilter />
         </div>
       </div>
-      <div class="col-4 d-flex justify-content-end">
-        <router-link
-          v-if="showSettings"
-          class="btn btn-light border mr-2 align-self-start"
-          to="/configuration"
-        >
-          <span class="mr-2">Settings</span>
-          <span class="fa-solid fa-gear" />
-        </router-link>
+
+      <div class="col d-flex filterbar justify-content-end">
+        <div>
+          <button
+            v-if="
+              hasActiveFilters &&
+              biobanksStore.biobankCardsCollectionCount +
+                biobanksStore.biobankCardsSubcollectionCount >
+                0
+            "
+            @click="selectAllCollections"
+            type="button"
+            class="btn btn-secondary mb-3 text-nowrap"
+          >
+            Select all collections
+            <span class="badge badge-light ml-2">
+              {{
+                biobanksStore.biobankCardsCollectionCount +
+                biobanksStore.biobankCardsSubcollectionCount
+              }}</span
+            >
+          </button>
+        </div>
+        <div>
+          <button
+            v-if="
+              hasActiveFilters && biobanksStore.biobankCardsServicesCount > 0
+            "
+            @click="selectAllServices"
+            type="button"
+            class="btn btn-secondary mb-3 text-nowrap"
+          >
+            Select all services
+            <span class="badge badge-light ml-2">
+              {{ biobanksStore.biobankCardsServicesCount }}</span
+            >
+          </button>
+        </div>
+        <div>
+          <router-link
+            v-if="showSettings"
+            class="btn btn-light border mr-2 mb-3 text-nowrap"
+            to="/configuration"
+          >
+            <span class="mr-2">Settings</span>
+            <span class="fa-solid fa-gear" />
+          </router-link>
+        </div>
         <check-out :bookmark="true" />
       </div>
     </div>
@@ -50,7 +89,6 @@
         :key="toggleFilter.name"
         v-bind="toggleFilter"
       />
-
       <button
         v-if="hasActiveFilters"
         @click="clearAllFilters"
@@ -137,6 +175,38 @@ export default {
     clearAllFilters() {
       this.filtersStore.clearAllFilters();
     },
+    selectAllServices() {
+      const allSelections = this.biobanksStore.biobankCards.map((biobank) => ({
+        biobank: { id: biobank.id, name: biobank.name },
+        services: biobank.services.map((service) => ({
+          label: service.name,
+          value: service.id,
+        })),
+      }));
+      allSelections.forEach((item) => {
+        this.checkoutStore.addServicesToSelection(
+          item.biobank,
+          item.services,
+          true
+        );
+      });
+    },
+    selectAllCollections() {
+      const allSelections = this.biobanksStore.biobankCards.map((biobank) => ({
+        biobank: { id: biobank.id, name: biobank.name },
+        collections: biobank.collections.map((collection) => ({
+          label: collection.name,
+          value: collection.id,
+        })),
+      }));
+      allSelections.forEach((item) => {
+        this.checkoutStore.addCollectionsToSelection(
+          item.biobank,
+          item.collections,
+          true
+        );
+      });
+    },
     filterSelectionCount(facetIdentifier) {
       const options = this.filtersStore.filters[facetIdentifier];
       if (!options || !options.length) {
@@ -166,6 +236,6 @@ export default {
   display: inline-flex;
   position: relative;
   top: 2px; /* aligning it with the dropwdowns */
-  width: 44%;
+  width: 60%;
 }
 </style>

apps/directory/tests/select-all-buttons.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from "@playwright/test";
+import { getAppRoute } from "./getAppRoute";
+
+test("select all collections and services", async ({ page }) => {
+  await page.goto(getAppRoute());
+  await page.getByRole("checkbox").check();
+  await page.getByRole("button", { name: "Select all collections" }).click();
+  await expect(page.getByRole("main")).toContainText("2");
+  await page.getByRole("button", { name: "Select all services" }).click();
+  await expect(page.getByRole("main")).toContainText("6");
+});