Skip to content

Commit

Permalink
fix(catalogue): menu (#4334)
Browse files Browse the repository at this point in the history
 fix: Catalogue menu

Add typing the menu items data fetch
Fix usage of menu items data fetch ( use same filter as page)

Closes #4322
  • Loading branch information
connoratrug authored Oct 11, 2024
1 parent b84ce11 commit 4ff7727
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 65 deletions.
33 changes: 18 additions & 15 deletions apps/nuxt3-ssr/components/header/Catalogue.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
<script setup lang="ts">
import type { UIResource, UIResourceType } from "~/interfaces/types";
const route = useRoute();
const config = useRuntimeConfig();
const props = defineProps<{
catalogue: any;
catalogue?: UIResource;
variableCount: number;
resourceTypes: UIResourceType[];
}>();
const cohortOnly = computed(() => {
Expand All @@ -23,18 +26,16 @@ if (route.params.resourceType) {
});
}
if (props.catalogue.resources_groupBy?.length) {
props.catalogue.resources_groupBy.forEach(
(sub: { type: { name: string }; count: string }) => {
const resourceTypeMetadata = getResourceMetadataForType(sub.type.name);
menu.push({
label: resourceTypeMetadata.plural,
link:
`/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}/` +
resourceTypeMetadata.path,
});
}
);
if (props.resourceTypes.length > 0) {
props.resourceTypes.forEach((resourceType) => {
const resourceTypeMetadata = getResourceMetadataForType(
resourceType.type.name
);
menu.push({
label: resourceTypeMetadata.plural,
link: `/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}/${resourceTypeMetadata.path}`,
});
});
}
if (!cohortOnly.value && props.variableCount > 0)
Expand Down Expand Up @@ -73,7 +74,9 @@ if (!cohortOnly.value) {
<div class="items-center justify-between hidden xl:flex h-25">
<Logo
:link="`/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}`"
:image="catalogueRouteParam === 'all' ? null : catalogue?.logo?.url"
:image="
catalogueRouteParam === 'all' ? undefined : catalogue?.logo?.url
"
/>
<MainNavigation :navigation="menu" :invert="true" />
<!-- <div class="w-[450px]">
Expand All @@ -91,7 +94,7 @@ if (!cohortOnly.value) {
<LogoMobile
:link="`/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}`"
:image="
catalogueRouteParam === 'all' ? null : catalogue?.logo?.url
catalogueRouteParam === 'all' ? undefined : catalogue?.logo?.url
"
/>
</div>
Expand Down
7 changes: 3 additions & 4 deletions apps/nuxt3-ssr/components/layouts/DetailPage.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<script setup lang="ts">
const route = useRoute();
const headerData = await useHeaderData();
const catalogue = headerData.catalogue;
const variableCount = headerData.variableCount;
const bannerData = await useBannerData();
const bannerHtml = computed(() => {
Expand All @@ -15,8 +13,9 @@ const bannerHtml = computed(() => {

<HeaderCatalogue
v-if="route.params.catalogue"
:catalogue="catalogue"
:variableCount="variableCount"
:catalogue="headerData.catalogue"
:variableCount="headerData.variableCount"
:resourceTypes="headerData.resourceTypes"
/>

<HeaderGlobal v-else />
Expand Down
8 changes: 3 additions & 5 deletions apps/nuxt3-ssr/components/layouts/LandingPage.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
<script setup lang="ts">
const route = useRoute();
const headerData = await useHeaderData();
const catalogue = headerData.catalogue;
const variableCount = headerData.variableCount;
const bannerData = await useBannerData();
const bannerHtml = computed(() => {
return bannerData.data;
Expand All @@ -15,8 +12,9 @@ const bannerHtml = computed(() => {

<HeaderCatalogue
v-if="route.params.catalogue"
:catalogue="catalogue"
:variableCount="variableCount"
:catalogue="headerData.catalogue"
:variableCount="headerData.variableCount"
:resourceTypes="headerData.resourceTypes"
/>
<HeaderGlobal v-else />
<Container>
Expand Down
8 changes: 3 additions & 5 deletions apps/nuxt3-ssr/components/layouts/SearchPage.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
<script setup>
const route = useRoute();
const headerData = await useHeaderData();
const catalogue = headerData.catalogue;
const variableCount = headerData.variableCount;
const bannerData = await useBannerData();
const bannerHtml = computed(() => {
return bannerData.data;
Expand All @@ -15,8 +12,9 @@ const bannerHtml = computed(() => {

<HeaderCatalogue
v-if="route.params.catalogue"
:catalogue="catalogue"
:variableCount="variableCount"
:catalogue="headerData.catalogue"
:variableCount="headerData.variableCount"
:resourceTypes="headerData.resourceTypes"
/>

<HeaderGlobal v-else />
Expand Down
99 changes: 64 additions & 35 deletions apps/nuxt3-ssr/composables/useHeaderData.ts
Original file line number Diff line number Diff line change
@@ -1,57 +1,86 @@
import type { UIResource, UIResourceType } from "~/interfaces/types";

interface Resp<T> {
data: T;
error?: any;
}

interface IHeaderQuery {
Resources: UIResource[];
Variables_agg: { count: number };
Resources_groupBy: UIResourceType[];
}

export async function useHeaderData() {
const route = useRoute();
const scoped = route.params.catalogue !== "all";
const catalogueRouteParam = route.params.catalogue;

const { data, error } = await $fetch(`/${route.params.schema}/graphql`, {
key: `header-${route.params.catalogue}`,
method: "POST",
body: {
query: `
query HeaderQuery($networksFilter:ResourcesFilter, $variablesFilter:VariablesFilter) {
Resources(filter:$networksFilter) {
const { data, error } = await $fetch<Resp<IHeaderQuery>>(
`/${route.params.schema}/graphql`,
{
method: "POST",
body: {
query: `
query HeaderQuery($resourceFilter:ResourcesFilter, $variablesFilter:VariablesFilter) {
Resources(filter:$resourceFilter) {
id,
resources_agg { count }
resources_groupBy { count , type {name}}
logo { url }
}
Variables_agg(filter:$variablesFilter) {
}
Variables_agg(filter:$variablesFilter) {
count
}
Resources_groupBy(filter:$resourceFilter) {
type { name, definition }
count
}
}`,
variables: {
networksFilter: scoped
? { id: { equals: catalogueRouteParam } }
: undefined,
variablesFilter: scoped
? {
_or: [
{ resource: { id: { equals: catalogueRouteParam } } },
//also include network of networks
{
resource: {
type: { name: { equals: "Network" } },
}
}`,
variables: {
resourceFilter: scoped
? {
_or: [
{ partOfResources: { id: { equals: catalogueRouteParam } } },
{
partOfResources: {
id: { equals: catalogueRouteParam },
partOfResources: { id: { equals: catalogueRouteParam } },
},
},
],
}
: undefined,
variablesFilter: scoped
? {
_or: [
{ resource: { id: { equals: catalogueRouteParam } } },
//also include network of networks
{
resource: {
type: { name: { equals: "Network" } },
partOfResources: {
id: { equals: catalogueRouteParam },
},
},
},
},
],
}
: //should only include harmonised variables
{ resource: { type: { name: { equals: "Network" } } } },
],
}
: //should only include harmonised variables
{ resource: { type: { name: { equals: "Network" } } } },
},
},
},
});
}
);

if (error) {
const contextMsg = "Error on fetching page header data";
logError(error, contextMsg);
throw new Error(contextMsg);
}

const catalogue = data.Resources ? data.Resources[0] : null;
const catalogue = data.Resources ? data.Resources[0] : undefined;
const variableCount = data.Variables_agg.count || 0;
const resourceTypes = data.Resources_groupBy.filter(
(resourceType: { count: number }) => resourceType.count > 0
);

return { catalogue, variableCount };
return { catalogue, variableCount, resourceTypes };
}
13 changes: 13 additions & 0 deletions apps/nuxt3-ssr/interfaces/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -468,3 +468,16 @@ export type IResourceTypeMetadata = {
path: string;
description?: string;
};

export interface UIResourceType {
type: {
name: string;
definition?: string;
};
count: number;
}

export interface UIResource {
id: string;
logo: { url: string };
}
9 changes: 8 additions & 1 deletion apps/nuxt3-ssr/tests/header-items.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,12 @@ test("should show variables in menu if there are variables", async ({
goto,
}) => {
await goto("/catalogue-demo/ssr-catalogue/all", { waitUntil: "hydration" });
await expect(page.getByRole("navigation")).toContainText("Variables");
await expect(page.getByRole("navigation")).toContainText("Resources");
await expect(page.getByRole("navigation")).toContainText("Cohort studies");
await expect(page.getByRole("navigation")).toContainText("Cohort studies");
await expect(page.getByRole("navigation")).toContainText("Data sources");
await expect(page.getByRole("navigation")).toContainText("Databanks");
await expect(page.getByRole("navigation")).toContainText("More");
await page.getByRole("button", { name: "More" }).hover();
await page.locator("li").filter({ hasText: "Variables" });
});

0 comments on commit 4ff7727

Please sign in to comment.