From 782431a223c7cc4cbdf05c61a9824e03e528072e Mon Sep 17 00:00:00 2001 From: Mats Eriksson Date: Tue, 3 Dec 2024 20:06:59 +0200 Subject: [PATCH] fix: search filters use the non paged endpoints, options sorting --- apps/ui/gql/gql-types.ts | 127 ++++++++++++++++++----------- apps/ui/hooks/useOptions.ts | 66 +++++++++------ apps/ui/modules/queries/params.tsx | 16 ++-- apps/ui/modules/search.ts | 25 ++++-- packages/common/gql/gql-types.ts | 4 + tilavaraus.graphql | 4 + 6 files changed, 153 insertions(+), 89 deletions(-) diff --git a/apps/ui/gql/gql-types.ts b/apps/ui/gql/gql-types.ts index 8cd09c06a6..d654c1eff9 100644 --- a/apps/ui/gql/gql-types.ts +++ b/apps/ui/gql/gql-types.ts @@ -2416,8 +2416,12 @@ export type QueryUnitsAllArgs = { nameSv?: InputMaybe; nameSv_Icontains?: InputMaybe; nameSv_Istartswith?: InputMaybe; + onlyDirectBookable?: InputMaybe; + onlySeasonalBookable?: InputMaybe; onlyWithPermission?: InputMaybe; orderBy?: InputMaybe>>; + ownReservations?: InputMaybe; + publishedReservationUnits?: InputMaybe; unit?: InputMaybe>>; }; @@ -5317,7 +5321,27 @@ export type ReservationInfoCardFragment = { }>; }; -export type OptionsQueryVariables = Exact<{ [key: string]: never }>; +export type OptionsQueryVariables = Exact<{ + reservationUnitTypesOrderBy?: InputMaybe< + | Array> + | InputMaybe + >; + purposesOrderBy?: InputMaybe< + | Array> + | InputMaybe + >; + unitsOrderBy?: InputMaybe< + Array> | InputMaybe + >; + equipmentsOrderBy?: InputMaybe< + | Array> + | InputMaybe + >; + reservationPurposesOrderBy?: InputMaybe< + | Array> + | InputMaybe + >; +}>; export type OptionsQuery = { reservationUnitTypes?: { @@ -5374,17 +5398,20 @@ export type OptionsQuery = { } | null; } | null>; } | null; - equipments?: { - edges: Array<{ - node?: { - id: string; - pk?: number | null; - nameFi?: string | null; - nameEn?: string | null; - nameSv?: string | null; - } | null; - } | null>; - } | null; + equipmentsAll?: Array<{ + id: string; + pk?: number | null; + nameFi?: string | null; + nameEn?: string | null; + nameSv?: string | null; + }> | null; + unitsAll?: Array<{ + id: string; + pk?: number | null; + nameFi?: string | null; + nameSv?: string | null; + nameEn?: string | null; + }> | null; }; export type ApplicationSectionReservationFragment = { @@ -5991,17 +6018,13 @@ export type SearchFormParamsUnitQueryVariables = Exact<{ }>; export type SearchFormParamsUnitQuery = { - units?: { - edges: Array<{ - node?: { - id: string; - pk?: number | null; - nameFi?: string | null; - nameEn?: string | null; - nameSv?: string | null; - } | null; - } | null>; - } | null; + unitsAll?: Array<{ + id: string; + pk?: number | null; + nameFi?: string | null; + nameEn?: string | null; + nameSv?: string | null; + }> | null; }; export type ReservationUnitPurposesQueryVariables = Exact<{ @@ -8650,8 +8673,14 @@ export const BannerNotificationCommonFragmentDoc = gql` } `; export const OptionsDocument = gql` - query Options { - reservationUnitTypes { + query Options( + $reservationUnitTypesOrderBy: [ReservationUnitTypeOrderingChoices] + $purposesOrderBy: [PurposeOrderingChoices] + $unitsOrderBy: [UnitOrderingChoices] + $equipmentsOrderBy: [EquipmentOrderingChoices] + $reservationPurposesOrderBy: [ReservationPurposeOrderingChoices] + ) { + reservationUnitTypes(orderBy: $reservationUnitTypesOrderBy) { edges { node { id @@ -8662,7 +8691,7 @@ export const OptionsDocument = gql` } } } - purposes { + purposes(orderBy: $purposesOrderBy) { edges { node { id @@ -8673,7 +8702,7 @@ export const OptionsDocument = gql` } } } - reservationPurposes { + reservationPurposes(orderBy: $reservationPurposesOrderBy) { edges { node { id @@ -8705,16 +8734,19 @@ export const OptionsDocument = gql` } } } - equipments { - edges { - node { - id - pk - nameFi - nameEn - nameSv - } - } + equipmentsAll(orderBy: $equipmentsOrderBy) { + id + pk + nameFi + nameEn + nameSv + } + unitsAll(orderBy: $unitsOrderBy) { + id + pk + nameFi + nameSv + nameEn } } `; @@ -8731,6 +8763,11 @@ export const OptionsDocument = gql` * @example * const { data, loading, error } = useOptionsQuery({ * variables: { + * reservationUnitTypesOrderBy: // value for 'reservationUnitTypesOrderBy' + * purposesOrderBy: // value for 'purposesOrderBy' + * unitsOrderBy: // value for 'unitsOrderBy' + * equipmentsOrderBy: // value for 'equipmentsOrderBy' + * reservationPurposesOrderBy: // value for 'reservationPurposesOrderBy' * }, * }); */ @@ -9443,22 +9480,18 @@ export const SearchFormParamsUnitDocument = gql` $onlySeasonalBookable: Boolean $orderBy: [UnitOrderingChoices] ) { - units( + unitsAll( publishedReservationUnits: $publishedReservationUnits ownReservations: $ownReservations onlyDirectBookable: $onlyDirectBookable onlySeasonalBookable: $onlySeasonalBookable orderBy: $orderBy ) { - edges { - node { - id - pk - nameFi - nameEn - nameSv - } - } + id + pk + nameFi + nameEn + nameSv } } `; diff --git a/apps/ui/hooks/useOptions.ts b/apps/ui/hooks/useOptions.ts index cf9cb90260..1e89639ac9 100644 --- a/apps/ui/hooks/useOptions.ts +++ b/apps/ui/hooks/useOptions.ts @@ -1,6 +1,12 @@ import { gql } from "@apollo/client"; import { useTranslation } from "next-i18next"; -import { type Maybe, useOptionsQuery, type OptionsQuery } from "@gql/gql-types"; +import { + type Maybe, + type OptionsQuery, + ReservationPurposeOrderingChoices, + ReservationUnitTypeOrderingChoices, + useOptionsQuery, +} from "@gql/gql-types"; import { participantCountOptions } from "@/modules/const"; import { filterNonNullable, getLocalizationLang } from "common/src/helpers"; import { getParameterLabel } from "@/modules/util"; @@ -8,8 +14,14 @@ import { getParameterLabel } from "@/modules/util"; // There is a duplicate in admin-ui but it doesn't have translations // export so we can use this on SSR export const OPTIONS_QUERY = gql` - query Options { - reservationUnitTypes { + query Options( + $reservationUnitTypesOrderBy: [ReservationUnitTypeOrderingChoices] + $purposesOrderBy: [PurposeOrderingChoices] + $unitsOrderBy: [UnitOrderingChoices] + $equipmentsOrderBy: [EquipmentOrderingChoices] + $reservationPurposesOrderBy: [ReservationPurposeOrderingChoices] + ) { + reservationUnitTypes(orderBy: $reservationUnitTypesOrderBy) { edges { node { id @@ -20,7 +32,7 @@ export const OPTIONS_QUERY = gql` } } } - purposes { + purposes(orderBy: $purposesOrderBy) { edges { node { id @@ -31,7 +43,7 @@ export const OPTIONS_QUERY = gql` } } } - reservationPurposes { + reservationPurposes(orderBy: $reservationPurposesOrderBy) { edges { node { id @@ -63,16 +75,19 @@ export const OPTIONS_QUERY = gql` } } } - equipments { - edges { - node { - id - pk - nameFi - nameEn - nameSv - } - } + equipmentsAll(orderBy: $equipmentsOrderBy) { + id + pk + nameFi + nameEn + nameSv + } + unitsAll(orderBy: $unitsOrderBy) { + id + pk + nameFi + nameSv + nameEn } } `; @@ -124,7 +139,12 @@ function sortAgeGroups(ageGroups: AgeGroup[]): AgeGroup[] { export function useOptions() { const { i18n } = useTranslation(); - const { data, loading: isLoading } = useOptionsQuery(); + const { data, loading: isLoading } = useOptionsQuery({ + variables: { + reservationUnitTypesOrderBy: ReservationUnitTypeOrderingChoices.RankAsc, + reservationPurposesOrderBy: ReservationPurposeOrderingChoices.RankAsc, + }, + }); const ageGroups = filterNonNullable( data?.ageGroups?.edges?.map((edge) => edge?.node) ); @@ -138,13 +158,6 @@ export function useOptions() { data?.reservationPurposes?.edges?.map((edge) => edge?.node) ); - const params = { - ageGroups, - cities, - reservationUnitTypes, - purposes, - }; - const lang = getLocalizationLang(i18n.language); const ageGroupOptions = filterNonNullable(sortAgeGroups(ageGroups)).map( (v) => ({ @@ -180,5 +193,12 @@ export function useOptions() { participantCountOptions, }; + const params = { + ageGroups, + cities, + reservationUnitTypes, + purposes, + }; + return { isLoading, options, params }; } diff --git a/apps/ui/modules/queries/params.tsx b/apps/ui/modules/queries/params.tsx index 9eba1b2f52..f51ea7441c 100644 --- a/apps/ui/modules/queries/params.tsx +++ b/apps/ui/modules/queries/params.tsx @@ -8,22 +8,18 @@ export const SEARCH_FORM_PARAMS_UNIT = gql` $onlySeasonalBookable: Boolean $orderBy: [UnitOrderingChoices] ) { - units( + unitsAll( publishedReservationUnits: $publishedReservationUnits ownReservations: $ownReservations onlyDirectBookable: $onlyDirectBookable onlySeasonalBookable: $onlySeasonalBookable orderBy: $orderBy ) { - edges { - node { - id - pk - nameFi - nameEn - nameSv - } - } + id + pk + nameFi + nameEn + nameSv } } `; diff --git a/apps/ui/modules/search.ts b/apps/ui/modules/search.ts index cf34a1371c..076526d799 100644 --- a/apps/ui/modules/search.ts +++ b/apps/ui/modules/search.ts @@ -11,8 +11,12 @@ import { ReservationUnitOrderingChoices, type OptionsQuery, OptionsDocument, - type SearchFormParamsUnitQueryVariables, - type SearchFormParamsUnitQuery, + EquipmentOrderingChoices, + UnitOrderingChoices, + ReservationUnitTypeOrderingChoices, + PurposeOrderingChoices, + SearchFormParamsUnitQuery, + SearchFormParamsUnitQueryVariables, SearchFormParamsUnitDocument, } from "@gql/gql-types"; import { filterNonNullable } from "common/src/helpers"; @@ -297,16 +301,22 @@ export async function getSearchOptions( const lang = convertLanguageCode(locale ?? ""); const { data: optionsData } = await apolloClient.query({ query: OptionsDocument, + variables: { + reservationUnitTypesOrderBy: ReservationUnitTypeOrderingChoices.RankAsc, + purposesOrderBy: PurposeOrderingChoices.RankAsc, + unitsOrderBy: UnitOrderingChoices.NameFiAsc, + equipmentsOrderBy: EquipmentOrderingChoices.CategoryRankAsc, + }, }); + const reservationUnitTypes = filterNonNullable( optionsData?.reservationUnitTypes?.edges?.map((edge) => edge?.node) ); const purposes = filterNonNullable( optionsData?.purposes?.edges?.map((edge) => edge?.node) ); - const equipments = filterNonNullable( - optionsData?.equipments?.edges?.map((edge) => edge?.node) - ); + const equipments = filterNonNullable(optionsData?.equipmentsAll); + const units = filterNonNullable(optionsData?.unitsAll); const reservationUnitTypeOptions = reservationUnitTypes.map((n) => ({ value: n.pk ?? 0, @@ -320,7 +330,6 @@ export async function getSearchOptions( value: n.pk ?? 0, label: getTranslationSafe(n, "name", lang), })); - const { data: unitData } = await apolloClient.query< SearchFormParamsUnitQuery, SearchFormParamsUnitQueryVariables @@ -332,9 +341,7 @@ export async function getSearchOptions( ...(page === "seasonal" ? { onlySeasonalBookable: true } : {}), }, }); - const unitOptions = filterNonNullable( - unitData?.units?.edges?.map((e) => e?.node) - ).map((node) => ({ + const unitOptions = filterNonNullable(unitData?.unitsAll).map((node) => ({ value: node.pk ?? 0, label: getTranslationSafe(node, "name", lang), })); diff --git a/packages/common/gql/gql-types.ts b/packages/common/gql/gql-types.ts index 52c4c61262..9f0b2abc92 100644 --- a/packages/common/gql/gql-types.ts +++ b/packages/common/gql/gql-types.ts @@ -2416,8 +2416,12 @@ export type QueryUnitsAllArgs = { nameSv?: InputMaybe; nameSv_Icontains?: InputMaybe; nameSv_Istartswith?: InputMaybe; + onlyDirectBookable?: InputMaybe; + onlySeasonalBookable?: InputMaybe; onlyWithPermission?: InputMaybe; orderBy?: InputMaybe>>; + ownReservations?: InputMaybe; + publishedReservationUnits?: InputMaybe; unit?: InputMaybe>>; }; diff --git a/tilavaraus.graphql b/tilavaraus.graphql index c7688a6af2..197999ec54 100644 --- a/tilavaraus.graphql +++ b/tilavaraus.graphql @@ -2570,11 +2570,15 @@ type Query { nameSv: String nameSv_Icontains: String nameSv_Istartswith: String + onlyDirectBookable: Boolean + onlySeasonalBookable: Boolean onlyWithPermission: Boolean """ Järjestä """ orderBy: [UnitOrderingChoices] + ownReservations: Boolean + publishedReservationUnits: Boolean unit: [Int] ): [UnitAllNode!] user(