feat: Update directory app with services #4501

connoratrug · 2024-11-18T10:10:02Z

What are the main changes you did

Update the app to allow user to request services

functional:

allow user to filter biobanks by service type
allow add services to the request/cart
add selected services to negotiator request
show service details in service report

non-functional:

switch touched files to typescript
fix issues found by typing
switch touched files to script setup
pullout ui components from 'smart' components
use ui components and containers to have consistent style
remove unused code

How to test

explain here what to do to test this (or point to unit tests)

Checklist

updated docs in case of new feature
added/updated tests
added/updated testplan to include a test for this fix, including ref to bug using # notation

Change Ontology.Capabilities.name and Ontology.Capabilities.label into [Schema].Services.name

…directory-service-model

- add checkbox to service card - move sections to bioback card folder - add typing to checkout store - setup stuff to add selected services

- remove unneeded imports - make table html valid

pass params direct as typed value, instead of wrapper object

- disable tab is list if empty

+ code cleanup

esthervanenckevort · 2024-12-02T12:29:06Z

Looking at the user interface changes I think this is 95% what we would like to see. The card with tabs for collections, services and organisation details is quite clean. Also good that you made the split between collections and services in the request cart.

Some improvements:

The services search facet must use the label instead of the name attribute to show the items.
The service types is quite a long list and the display could be improved by using the category to group the services in a tree. In the data model they all have a category, the category (Service Category ontology type) should be used as the top level of the tree.
The data that is passed to the Negotiator does not correctly fill in the 'humanReadable', it prepends the actions to the text "User actions taken: " It should append the text instead. See:

{
"url":"https://preview-emx2-pr-4501.dev.molgenis.org",
"humanReadable":"Biobank services: sample-collection, sample-data-management, sample-processing, sample-quality-control, sample-storage. User actions taken: ",
"resources":[{"id":"bbmri-eric:serviceID:DE_1234","name":"Biobank Service"}]}

connoratrug · 2024-12-02T12:35:08Z

The services search facet must use the label instead of the name attribute to show the items.

This a config thing in the current setup, ~~i'm not sure on how to do this ( or is its possible ) , maybe someone else does~~ i checked its in the config, i updated the initial config to use the label

The service types is quite a long list and the display could be improved by using the category to group the services in a tree. In the data model they all have a category, the category (Service Category ontology type) should be used as the top level of the tree.

Suggest to move this to a separate pr , as i'm not sure if this fits within the current filter model , again maybe someone else knows this ?

The data that is passed to the Negotiator does not correctly fill in the 'humanReadable', it prepends the actions to the text "User actions taken: " It should append the text instead. See:
{
"url":"https://preview-emx2-pr-4501.dev.molgenis.org",
"humanReadable":"Biobank services: sample-collection, sample-data-management, sample-processing, sample-quality-control, sample-storage. User actions taken: ",
"resources":[{"id":"bbmri-eric:serviceID:DE_1234","name":"Biobank Service"}]}

I do not think this pr changes this ( i'll check ), so if we want to change it a suggest a separate pr , to keep things moving

…directory-service-model

esthervanenckevort

Tested functionality:

Filtering works & services are shown on the main page and can be added to the cart
Few omissions:
Services are not shown on the biobank details page
Services details page does not have an add button
Service types in main page are not shown in hierarchy

connoratrug · 2024-12-04T08:58:29Z

Tested functionality:

Filtering works & services are shown on the main page and can be added to the cart
Few omissions:

Services are not shown on the biobank details page
Yes, i agree, propose to merge and then work on this en the next item as this used the same code , but needs a little refactor and cleanup to avoid code duplication

Services details page does not have an add button
Yes, i'm working on this , but due to needed refactor i propose to move it to its own pr

Service types in main page are not shown in hierarchy
where , how to you mean in de filter ? on the cards , could you elaborate , create a ticket ?

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

chinook25 · 2024-12-04T10:05:57Z

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

Group functions and computeds a bit more

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

chinook25 · 2024-12-04T10:20:12Z

apps/directory/src/components/cart/NegotiatorSelection.vue

+
+const emit = defineEmits(["update:modelValue"]);
+
+const errorMessage = ref(""); // New reactive error state


remove comment

apps/directory/src/components/cart/NegotiatorSelection.vue

chinook25 · 2024-12-04T10:29:51Z

apps/directory/src/functions/bookmarkMapper.ts

-
-export async function applyBookmark(watchedQuery) {
+export async function applyBookmark(watchedQuery: Record<string, string>) {
+  console.log("applying bookmark", watchedQuery);


remove debug line

apps/directory/src/functions/bookmarkMapper.ts

chinook25 · 2024-12-04T10:40:41Z

apps/directory/src/stores/checkoutStore.ts

+
+      if (bookmark) {
+        checkoutValid.value = true;
+        // todo need to add service stuff to the bookmark


chinook25 · 2024-12-04T10:42:06Z

apps/directory/src/stores/checkoutStore.ts

+            // todo: is this needed?
+            // organization: {
+            //   id: biobank.value,
+            //   externalId: biobank.id,
+            //   name: biobank.label,
+            // },


Expand comment to better explain why this is commented

Make issue for this

updated the todo and i'll create an issue

chinook25 · 2024-12-04T10:47:13Z

apps/directory/src/stores/filtersStore.ts

+    value?: IFilterOption[] | string | boolean,
+    fromBookmark?: boolean
+  ) {
+    console.log("updateFilter", unref(value));


apps/directory/src/views/ServiceReport.vue

chinook25 · 2024-12-04T10:52:19Z

apps/directory/vite.config.js

@@ -6,7 +6,7 @@ import monacoEditorPlugin from "vite-plugin-monaco-editor";

 const HOST =
  process.env.MOLGENIS_APPS_HOST || "https://bbmri-emx2-test.molgeniscloud.org";
-const SCHEMA = process.env.MOLGENIS_APPS_SCHEMA || "ERIC";
+const SCHEMA = process.env.MOLGENIS_APPS_SCHEMA || "directory";


the ERIC schema is no longer the up to date schema , i like to keep the schema name 'directory' to make it clear this is the app dev 'demo' schema

sonarqubecloud · 2024-12-04T12:04:01Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

connoratrug added 2 commits November 18, 2024 11:07

feat: update initial page query

1c9e614

Change Ontology.Capabilities.name and Ontology.Capabilities.label into [Schema].Services.name

cleanup: pull out header

2304d87

connoratrug changed the title ~~feat: update initial page query~~ feat: Update directory app with services Nov 18, 2024

connoratrug added 27 commits November 20, 2024 14:53

Merge branch 'master' of github.com:molgenis/molgenis-emx2 into feat/…

4453280

…directory-service-model

add generated types for directory schema

4002252

format generated types

5d49a2a

format again

aad739e

refactor BiobankCard to use script setup

8b3f38a

use tabs for section and pullout section

b2e3f0d

add service details to card

6a53fa4

style: switch to bootstrap tab component for styling

9627eda

fix: fix tab shadow

d9c7648

setup for add services to checkout store

9243eba

- add checkbox to service card - move sections to bioback card folder - add typing to checkout store - setup stuff to add selected services

handle add/remove service to store

cf20330

add service details page

10d7d2b

remove junk

ec0603a

chore: fix compiler warnings

e0b7464

- remove unneeded imports - make table html valid

update checkout count with service count

efccca8

refactor NegotiatorSelector to use types and prepare for services

af605bb

refactor checkout store

74339ce

pass params direct as typed value, instead of wrapper object

show selected services in cart

ddc6377

add service count to search results section

c21a5c0

cleanup collection count

c9f4662

show when card is in selection ( either via a collecton or service)

8daa196

fix quality label

8ed8a45

refactor remove all to include serves

32abf8f

more reactive tabs

d55e7ee

- disable tab is list if empty

always show non empty cart tab

6dd9249

+ code cleanup

fix removeAll function call on success

ad1d7ab

add service selection to the bookmark

90826e0

connoratrug marked this pull request as ready for review December 2, 2024 12:41

connoratrug added 4 commits December 2, 2024 13:46

chore: initialy use serviceType.label field as label

d9952c5

fix: menu breadcrumb dropdown icon theme css

4e49b85

Merge branch 'master' of github.com:molgenis/molgenis-emx2 into feat/…

7e25ca0

…directory-service-model

chore flip template and script tags

d678c7e

connoratrug requested review from chinook25, esthervanenckevort and mswertz December 4, 2024 08:00

esthervanenckevort approved these changes Dec 4, 2024

View reviewed changes