fix(catalogue): variable list should show +n when repeat info is set (#…

…4259)
molgenis · Oct 1, 2024 · 98ee5b0 · 98ee5b0
1 parent ff19771
commit 98ee5b0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/apps/nuxt3-ssr/components/VariableCard.vue b/apps/nuxt3-ssr/components/VariableCard.vue
@@ -14,6 +14,17 @@ const props = withDefaults(
 const variableKey = computed(() => getKey(props.variable));
 
 const resourcePathId = resourceIdPath(variableKey.value);
+
+const repeats = computed(() =>
+  props.variable.repeatMax
+    ? "repeated for " +
+      props.variable.repeatUnit?.name.toLowerCase() +
+      " " +
+      props.variable.repeatMin +
+      "-" +
+      props.variable.repeatMax
+    : undefined
+);
 </script>
 
 <template>
@@ -27,18 +38,13 @@ const resourcePathId = resourceIdPath(variableKey.value);
           >
             {{ variable?.name }}
           </NuxtLink>
-          <span
-            v-if="variable.repeats?.length"
-            v-tooltip="{
-              content:
-                variable.repeats.length +
-                (variable.repeats.length === 1 ? ' repeat' : 'repeats'),
-            }"
-            class="ml-1 bg-blue-50 text-title-contrast justify-center rounded-full px-2 py-1 font-bold text-heading-sm hover:cursor-help"
+          <div
+            v-if="repeats"
+            class="bg-blue-50 text-title-contrast justify-center rounded-full px-2 py-1 font-bold text-heading-sm hover:cursor-help"
             style="display: inline-flex; flex-wrap: wrap"
           >
-            + {{ variable.repeats?.length }}
-          </span>
+            {{ repeats }}
+          </div>
         </h2>
       </div>
       <div class="hidden md:flex md:basis-3/5">

diff --git a/apps/nuxt3-ssr/components/VariableDisplay.vue b/apps/nuxt3-ssr/components/VariableDisplay.vue
@@ -37,13 +37,16 @@ const items = computed(() => [
   },
   {
     label: "Repeated for",
-    content: variable.value?.repeatUnit?.name
-      ? variable.value?.repeatUnit?.name +
-        " " +
-        variable.value?.repeatMin +
-        "-" +
-        variable.value?.repeatMax
-      : undefined,
+    content:
+      variable.value?.repeatUnit?.name ||
+      variable.value?.repeatMin ||
+      variable.value?.repeatMax
+        ? variable.value?.repeatUnit?.name +
+          " " +
+          variable.value?.repeatMin +
+          "-" +
+          variable.value?.repeatMax
+        : undefined,
   },
 ]);
 </script>

diff --git a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/variables/index.vue b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/variables/index.vue
@@ -179,6 +179,9 @@ const query = computed(() => {
           id
         }
       }
+      repeatUnit {name}
+      repeatMin
+      repeatMax
       label
       description
       mappings ${moduleToString(mappingsFragment)}