feat: Update directory app with services (#4501)

Update the app to allow user to request services

- allow user to filter biobanks by service type
- allow user to add services to the request/cart
- add selected services to negotiator request
- show service details in service report
- update model with link back from service to biobank

apps/directory/package.json

@@ -3,7 +3,6 @@
   "version": "0.0.1",
   "description": "BBMRI Directory app, for browsing collections and biobanks in EMX2",
   "main": "index.js",
-  "author": "Jelmer Veen <https://github.com/jelmerveen>",
   "license": "LGPL3",
   "private": true,
   "scripts": {

apps/directory/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <Molgenis v-model="session">
+  <Molgenis v-model="session" style="background-color: white">
     <template v-if="banner" #banner>
       <div v-html="banner"></div>
     </template>
@@ -44,7 +44,11 @@ watch(
       newQuery &&
       Object.keys(newQuery).length === 0
     ) {
-      createBookmark(filtersStore.filters, checkoutStore.selectedCollections);
+      createBookmark(
+        filtersStore.filters,
+        checkoutStore.selectedCollections,
+        checkoutStore.selectedServices
+      );
       applyBookmark(newQuery);
     }
 

apps/directory/src/components/Card.vue

@@ -0,0 +1,55 @@
+<template>
+  <article>
+    <section class="d-flex flex-column align-items-center">
+      <div class="d-flex flex-column h-100 align-self-stretch">
+        <header class="border-0 biobank-card-header p-1">
+          <slot name="header"></slot>
+        </header>
+
+        <Tabs :tabs="tabs" @update:active-tab="updateTab" />
+
+        <slot></slot>
+      </div>
+    </section>
+  </article>
+</template>
+
+<script setup lang="ts">
+import Tabs from "./Tabs.vue";
+
+defineProps<{
+  tabs: Record<
+    string,
+    { id: string; label: string; active: boolean; disabled: boolean }
+  >;
+}>();
+
+const emit = defineEmits(["update:activeTab"]);
+
+function updateTab(tab: string) {
+  emit("update:activeTab", tab);
+}
+</script>
+
+<style>
+article {
+  padding: 0;
+  position: relative;
+  height: 28rem;
+}
+
+article {
+  box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132),
+    0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+}
+
+article section {
+  height: 100%;
+  width: 100%;
+}
+
+/* TODO put in theme */
+.biobank-card-header {
+  background-color: #efefef;
+}
+</style>

apps/directory/src/components/CardItem.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="card-item mx-1">
+    <div class="ml-1 pt-2 d-flex">
+      <slot name="title"></slot>
+    </div>
+
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+.card-item {
+  word-break: break-word;
+}
+
+.card-item th {
+  width: 25%;
+}
+</style>

apps/directory/src/components/CheckBox.vue

@@ -0,0 +1,24 @@
+<template>
+  <input
+    type="checkbox"
+    :id="id"
+    @change="emit('change', ($event.target as HTMLInputElement).checked)"
+    :checked="isChecked"
+    hidden
+  />
+  <label class="btn" :for="id">
+    <span v-show="!isChecked"><i class="fa-regular fa-lg fa-square"></i></span>
+    <span v-show="isChecked"
+      ><i class="fa-regular fa-lg fa-check-square"></i
+    ></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  id: string;
+  isChecked?: boolean;
+}>();
+
+const emit = defineEmits(["change"]);
+</script>

apps/directory/src/components/Tabs.vue

@@ -0,0 +1,26 @@
+<template>
+  <ul class="nav nav-tabs mb-2 mt-2 pl-2">
+    <li v-for="tab in Object.keys(tabs)" class="nav-item">
+      <button
+        type="button"
+        class="btn btn-link nav-link shadow-none"
+        :disabled="tabs[tab].disabled"
+        :class="{ active: tabs[tab].active }"
+        @click="() => $emit('update:activeTab', tab)"
+      >
+        {{ tabs[tab].label ?? tabs[tab].id }}
+      </button>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  tabs: Record<
+    string,
+    { id: string; label: string; active: boolean; disabled: boolean }
+  >;
+}>();
+
+defineEmits(["update:activeTab"]);
+</script>