Add stop owner to search filters

Author: suvikankare

ui/src/components/stop-registry/search/by-stop/filtersToQueryVariables.ts

@@ -227,6 +227,16 @@ function buildInfoSpotsFilter({
   };
 }
 
+function buildStopOwnerFilter({
+  stopOwner,
+}: StopSearchFilters): StopsDatabaseQuayNewestVersionBoolExp {
+  if (stopOwner.includes(AllOptionEnum.All)) {
+    return {};
+  }
+
+  return { stop_owner: { _in: stopOwner } };
+}
+
 export function buildSearchStopsGqlQueryVariables(
   filters: StopSearchFilters,
   ...extraConditions: ReadonlyArray<StopsDatabaseQuayNewestVersionBoolExp>
@@ -246,6 +256,7 @@ export function buildSearchStopsGqlQueryVariables(
   const shelterFilter = buildShelterFilter(filters);
   const electricityFilter = buildElectricityFilter(filters);
   const infoSpotsFilter = buildInfoSpotsFilter(filters);
+  const stopOwnerFilter = buildStopOwnerFilter(filters);
 
   return {
     _and: [
@@ -259,6 +270,7 @@ export function buildSearchStopsGqlQueryVariables(
       shelterFilter,
       electricityFilter,
       infoSpotsFilter,
+      stopOwnerFilter,
       ...extraConditions,
     ].filter((filter) => !isEmpty(filter)),
   };

ui/src/components/stop-registry/search/components/StopSearchBar/ExtraFilters/ExtraFilters.tsx

@@ -1,9 +1,10 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
-import { Visible } from '../../../../../../layoutComponents';
+import { Row, Visible } from '../../../../../../layoutComponents';
 import { ExpandedSearchButtons } from '../../../../../common';
 import { stopSearchBarTestIds } from '../stopSearchBarTestIds';
+import { MetaFilters } from './MetaFilters';
 import { StopPropertyFilters } from './StopPropertyFilters';
 
 type ExtraFiltersProps = {
@@ -34,13 +35,14 @@ export const ExtraFilters: FC<ExtraFiltersProps> = ({
       >
         <h2>{t('search.advancedSearchTitle')}</h2>
 
-        <StopPropertyFilters
-          className="border-b border-background pb-5 xl:w-2/3 xl:border-b-0 xl:border-r xl:pb-0 xl:pr-5"
-          notForStops={notForStops}
-        />
+        <Row className="flex flex-wrap xl:flex-nowrap">
+          <StopPropertyFilters
+            className="border-b border-background pb-5 xl:w-2/3 xl:border-b-0 xl:border-r xl:pb-0 xl:pr-5"
+            notForStops={notForStops}
+          />
 
-        {/* Future extended filters: Nousijamäärä, Päivitystiedot, ... */}
-        {/* <MetaFilters className="xl:w-1/3 xl:pt-5 xl:pl-5 pt-5  space-y-5" */}
+          <MetaFilters className="xl:w-1/3" notForStops={notForStops} />
+        </Row>
       </div>
 
       <ExpandedSearchButtons

ui/src/components/stop-registry/search/components/StopSearchBar/ExtraFilters/MetaFilters.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Row } from '../../../../../../layoutComponents';
+import { StopOwnerFilter } from './StopOwnerFilter';
+
+type MetaFilterProps = {
+  readonly className?: string;
+  readonly notForStops: boolean;
+};
+
+export const MetaFilters: FC<MetaFilterProps> = ({
+  className,
+  notForStops,
+}) => {
+  return (
+    <Row
+      className={twMerge('self-start xl:border-b xl:pb-4 xl:pl-4', className)}
+    >
+      <StopOwnerFilter className="w-full" disabled={notForStops} />
+    </Row>
+  );
+};

ui/src/components/stop-registry/search/components/StopSearchBar/ExtraFilters/StopOwnerFilter.tsx

@@ -0,0 +1,59 @@
+import { FC } from 'react';
+import { useController } from 'react-hook-form';
+import { mapStopOwnerToUiName } from '../../../../../../i18n/uiNameMappings';
+import { Column } from '../../../../../../layoutComponents';
+import { StopOwner } from '../../../../../../types/stop-registry';
+import { AllOptionEnum } from '../../../../../../utils';
+import { InputLabel, ValidationErrorList } from '../../../../../forms/common';
+import { StopSearchFilters } from '../../../types';
+import { stopSearchBarTestIds } from '../stopSearchBarTestIds';
+import { DisableableFilterProps } from '../Types/DisableableFilterProps';
+import { EnumFilter } from './EnumFilter';
+
+const options: ReadonlyArray<StopOwner | AllOptionEnum> = [
+  AllOptionEnum.All,
+  ...Object.values(StopOwner),
+];
+
+const uiNameMapper = mapStopOwnerToUiName.extend({
+  [AllOptionEnum.All]: (t) => t('all'),
+});
+
+const defaultValue: ReadonlyArray<StopOwner | AllOptionEnum> = [
+  AllOptionEnum.All,
+];
+
+export const StopOwnerFilter: FC<DisableableFilterProps> = ({
+  className,
+  disabled,
+}) => {
+  const {
+    field: { onChange, onBlur, value },
+  } = useController<StopSearchFilters, 'stopOwner'>({
+    name: 'stopOwner',
+    disabled,
+  });
+
+  return (
+    <Column className={className}>
+      <InputLabel<StopSearchFilters>
+        fieldPath="stopOwner"
+        translationPrefix="stopRegistrySearch.fieldLabels"
+      />
+
+      <EnumFilter
+        id="stopRegistrySearch.fieldLabels.stopOwner"
+        defaultValue={defaultValue}
+        disabled={disabled}
+        options={options}
+        onBlur={onBlur}
+        onChange={onChange}
+        testId={stopSearchBarTestIds.stopOwnerFilter}
+        uiNameMapper={uiNameMapper}
+        value={value}
+      />
+
+      <ValidationErrorList fieldPath="stopOwner" />
+    </Column>
+  );
+};

ui/src/components/stop-registry/search/components/StopSearchBar/stopSearchBarTestIds.ts

@@ -7,5 +7,6 @@ export const stopSearchBarTestIds = {
   searchForDropdown: 'StopSearchBar::SearchForDropdown',
   shelterFilter: 'StopSearchBar::shelterFilter',
   stopStateFilter: 'StopSearchBar::stopStateFilter',
+  stopOwnerFilter: 'StopSearchBar::stopOwnerFilter',
   prefix: 'StopSearchBar',
 };

ui/src/components/stop-registry/search/types/StopSearchFilters.ts

@@ -8,6 +8,7 @@ import {
 import { Priority } from '../../../../types/enums';
 import {
   JoreStopRegistryTransportModeType,
+  StopOwner,
   StopPlaceState,
 } from '../../../../types/stop-registry';
 import { AllOptionEnum, NullOptionEnum, areEqual } from '../../../../utils';
@@ -52,6 +53,7 @@ export const stopSearchFiltersSchema = z.object({
   shelter: zEnumArrayWithAllAndNull(StopRegistryShelterType),
   electricity: zEnumArrayWithAllAndNull(StopRegistryShelterElectricity),
   infoSpots: z.array(z.union([infoSpotSize, allEnum, nullEnum])),
+  stopOwner: zEnumArrayWithAll(StopOwner),
 });
 
 export type InfoSpotSize = z.infer<typeof infoSpotSize>;
@@ -70,6 +72,7 @@ export const defaultFilters: StopSearchFilters = {
   shelter: [AllOptionEnum.All],
   electricity: [AllOptionEnum.All],
   infoSpots: [AllOptionEnum.All],
+  stopOwner: [AllOptionEnum.All],
 };
 
 export function pickMeaningfulFilters(filters: StopSearchFilters) {

ui/src/components/stop-registry/search/utils/useStopSearchRouterState.ts

@@ -86,6 +86,7 @@ export const filterSerializers: UrlStateSerializers<StopSearchFilters> = {
   shelter: serializeArray,
   electricity: serializeArray,
   infoSpots: serializeInfoSpots,
+  stopOwner: serializeArray,
 };
 
 const serializers: UrlStateSerializers<StopSearchUrlFlatState> = {
@@ -183,6 +184,9 @@ const parseShelter = parseEnumArrayWithAllAndNullOptions(
 const parseElectricity = parseEnumArrayWithAllAndNullOptions(
   stopSearchFiltersSchema.shape.electricity,
 );
+const parseStopOwner = parseEnumArrayWithAllOption(
+  stopSearchFiltersSchema.shape.stopOwner,
+);
 
 function parseInfoSpots(value: string): StopSearchFilters['infoSpots'] {
   return splitString(value).map((size) => {
@@ -225,6 +229,7 @@ export const filterDeserializers: UrlStateDeserializers<StopSearchFilters> = {
   shelter: parseShelter,
   electricity: parseElectricity,
   infoSpots: parseInfoSpots,
+  stopOwner: parseStopOwner,
 };
 
 const deserializers: UrlStateDeserializers<StopSearchUrlFlatState> = {

ui/src/components/stop-registry/stops/stop-details/maintenance/StopOwnerViewCard.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { mapStopOwnerToUiName } from '../../../../../i18n/uiNameMappings';
+import { StopOwner } from '../../../../../types/stop-registry';
 
 const testIds = {
   stopOwner: 'MaintenanceViewCard::stopOwner',
@@ -9,7 +10,7 @@ const testIds = {
 };
 
 type StopOwnerViewCardProps = {
-  readonly stopOwner: string | null;
+  readonly stopOwner: StopOwner | null;
 };
 
 export const StopOwnerViewCard: FC<StopOwnerViewCardProps> = ({

ui/src/i18n/uiNameMappings.ts

@@ -26,6 +26,7 @@ import {
 } from '../types/enums';
 import {
   JoreStopRegistryTransportModeType,
+  StopOwner,
   StopPlaceSignType,
   StopPlaceState,
 } from '../types/stop-registry';
@@ -446,6 +447,18 @@ export const mapInfoSpotPurposeToUiName =
       t('stopDetails.infoSpots.purposes.other'),
   });
 
-export const mapStopOwnerToUiName = (t: TFunction, value: string): string => {
-  return t(`stopDetails.maintenance.stopOwnerOptions.${value}`);
-};
+export const mapStopOwnerToUiName = genTranslationMapper<StopOwner>({
+  [StopOwner.Municipality]: (t) =>
+    t('stopDetails.maintenance.stopOwnerOptions.municipality'),
+  [StopOwner.Finavia]: (t) =>
+    t('stopDetails.maintenance.stopOwnerOptions.finavia'),
+  [StopOwner.Hkl]: (t) => t('stopDetails.maintenance.stopOwnerOptions.hkl'),
+  [StopOwner.Hkr]: (t) => t('stopDetails.maintenance.stopOwnerOptions.hkr'),
+  [StopOwner.Vr]: (t) => t('stopDetails.maintenance.stopOwnerOptions.vr'),
+  [StopOwner.Ely]: (t) => t('stopDetails.maintenance.stopOwnerOptions.ely'),
+  [StopOwner.FinnishTransportAgency]: (t) =>
+    t('stopDetails.maintenance.stopOwnerOptions.finnishTransportAgency'),
+  [StopOwner.PrivateRoad]: (t) =>
+    t('stopDetails.maintenance.stopOwnerOptions.privateRoad'),
+  [StopOwner.Other]: (t) => t('stopDetails.maintenance.stopOwnerOptions.other'),
+});

ui/src/locales/en-US/common.json

@@ -795,7 +795,8 @@
       "stopState": "Stop state",
       "shelter": "Shelter",
       "electricity": "Electricity",
-      "infoSpots": "Info spots"
+      "infoSpots": "Info spots",
+      "stopOwner": "Stop owner"
     },
 
     "noOptions": {