feat(directory): Add services to biobank detail view (#4551)

feat: show service details in biobank report view

Closes #4547

apps/directory/package.json

@@ -11,8 +11,8 @@
     "preview": "vite preview",
     "test": "vitest",
     "test-ci": "vitest run",
-    "format": "prettier src  --write --config ../.prettierrc.js",
-    "checkFormat": "prettier src  --check --config ../.prettierrc.js",
+    "format": "prettier src tests  --write --config ../.prettierrc.js",
+    "checkFormat": "prettier src tests  --check --config ../.prettierrc.js",
     "e2e": "playwright test"
   },
   "dependencies": {

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

@@ -139,13 +139,16 @@ function handleRemoveServices(selectedServiceIds: string[]) {
 }
 
 const qualityInfo = computed(() => {
-  return biobankcardViewmodel.value.attributes
-    .find((attr) => attr.type === "quality")
-    .value.map((quality: Record<string, any>) => {
-      return (qualitiesStore.qualityStandardsDictionary as Record<string, any>)[
-        quality.quality_standard.name
-      ];
-    });
+  const qualityAttributes = biobankcardViewmodel.value.attributes.find(
+    (attr) => attr.type === "quality"
+  );
+  return qualityAttributes.value
+    ? qualityAttributes.value.map((quality: Record<string, any>) => {
+        return (
+          qualitiesStore.qualityStandardsDictionary as Record<string, any>
+        )[quality.quality_standard.name];
+      })
+    : [];
 });
 
 const biobankcardViewmodel = computed(() => {

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

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <div v-if="services.length === 0" class="pl-2">
+      This biobank has no services yet.
+    </div>
+
     <CardItem v-if="services.length > 1">
       <div class="d-flex">
         <h5 class="font-weight-light">

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

@@ -37,117 +37,87 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from "vue";
 import { useCheckoutStore } from "../../stores/checkoutStore";
 import { useSettingsStore } from "../../stores/settingsStore";
+import { IBiobanks, ICollections } from "../../interfaces/directory";
 
-export default {
-  setup() {
-    const checkoutStore = useCheckoutStore();
-    const settingsStore = useSettingsStore();
-
-    return { checkoutStore, settingsStore };
-  },
-  props: {
-    biobankData: {
-      type: Object,
-      required: true,
-    },
-    collectionData: {
-      type: [Object, Array],
-      required: true,
-    },
-    iconOnly: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    bookmark: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    checkboxFaStyle: {
-      type: Object,
-      required: false,
-      default: function () {
-        return {
-          color: "var(--secondary)",
-        };
-      },
-    },
-    multi: {
-      type: Boolean,
-      required: false,
-      default: () => false,
-    },
-  },
-  data: () => {
-    return {
-      collections: [],
-      identifier: "",
-    };
-  },
-  methods: {
-    handleCollectionStatus(event) {
-      const { checked } = event.target;
-      if (checked) {
-        this.checkoutStore.addCollectionsToSelection(
-          this.biobankData,
-          this.collections.map((collection) => ({
-            label: collection.label,
-            value: collection.value,
-          })),
-          this.bookmark
-        );
-      } else {
-        this.checkoutStore.removeCollectionsFromSelection(
-          { name: this.biobankData.name },
-          this.collections.map((collection) => collection.value),
-          this.bookmark
-        );
-      }
-    },
-  },
-  computed: {
-    checkboxIdentifier() {
-      return this.identifier;
-    },
-    isChecked() {
-      const biobankIdentifier = this.biobankData.label || this.biobankData.name;
-      const selectedCollections =
-        this.checkoutStore.selectedCollections[biobankIdentifier];
-
-      if (selectedCollections) {
-        const selectedCollectionIds = selectedCollections.map((sc) => sc.value);
-
-        return this.collections
-          .map((collection) => collection.value)
-          .every((id) => selectedCollectionIds.includes(id));
-      }
-      return false;
-    },
-    uiText() {
-      return this.settingsStore.uiText;
-    },
-  },
-  mounted() {
-    let initialData;
-
-    if (Array.isArray(this.collectionData)) {
-      initialData = this.collectionData;
-      this.identifier = `selector-${Math.random().toString().substring(2)}`;
-    } else {
-      initialData = [this.collectionData];
-      this.identifier = this.collectionData.id;
-    }
-
-    this.collections = initialData.map((collection) => ({
-      label: collection.label || collection.name,
-      value: collection.id,
-    }));
-  },
-};
+const checkoutStore = useCheckoutStore();
+const settingsStore = useSettingsStore();
+
+const props = withDefaults(
+  defineProps<{
+    biobankData: IBiobanks;
+    collectionData: ICollections | ICollections[];
+    iconOnly?: boolean;
+    bookmark?: boolean;
+    checkboxFaStyle?: any;
+    multi?: boolean;
+  }>(),
+  {
+    iconOnly: false,
+    bookmark: false,
+    checkboxFaStyle: { color: "var(--secondary)" },
+    multi: false,
+  }
+);
+
+const uiText = computed(() => settingsStore.uiText);
+
+const checkboxIdentifier = computed(() =>
+  Array.isArray(props.collectionData)
+    ? `selector-${Math.random().toString().substring(2)}`
+    : props.collectionData.id
+);
+
+const initialData = computed(() =>
+  Array.isArray(props.collectionData)
+    ? props.collectionData
+    : [props.collectionData]
+);
+
+const collections = computed(() =>
+  initialData.value.map((collection) => ({
+    label: collection.name,
+    value: collection.id,
+  }))
+);
+
+function handleCollectionStatus(event: any) {
+  console.log(event);
+  const { checked } = event.target;
+  if (checked) {
+    checkoutStore.addCollectionsToSelection(
+      props.biobankData,
+      collections.value.map((collection) => ({
+        label: collection.label,
+        value: collection.value,
+      })),
+      props.bookmark
+    );
+  } else {
+    checkoutStore.removeCollectionsFromSelection(
+      { name: props.biobankData.name },
+      collections.value.map((collection) => collection.value),
+      props.bookmark
+    );
+  }
+}
+
+const isChecked = computed(() => {
+  const selectedCollections =
+    checkoutStore.selectedCollections[props.biobankData.name];
+
+  if (selectedCollections) {
+    const selectedCollectionIds = selectedCollections.map((sc) => sc.value);
+
+    return collections.value
+      .map((collection) => collection.value)
+      .every((id) => selectedCollectionIds.includes(id));
+  }
+  return false;
+});
 </script>
 
 <style scoped>

apps/directory/src/components/generators/ViewGenerator.vue

@@ -99,6 +99,5 @@ export default {
 <style>
 .layout-table {
   border-collapse: unset;
-  /* override theme */
 }
 </style>