Create view for stop listing

Author: suvikankare

ui/src/components/stop-registry/terminals/components/member-stops/StopAreaSection.tsx

@@ -0,0 +1,111 @@
+import { DateTime } from 'luxon';
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import { Path, routeDetails } from '../../../../../router/routeDetails';
+import { mapLngLatToPoint } from '../../../../../utils';
+import {
+  LocatorActionButton,
+  OpenDetailsPage,
+  ShowOnMap,
+} from '../../../components';
+import { StopTableRow } from '../../../search';
+import { StopSearchRow } from '../../../search/types';
+import { LocatableStop } from '../../../types/LocatableStop';
+
+const testIds = {
+  stopAreaHeader: 'TerminalDetailsPage::stopAreaHeader',
+};
+
+type StopAreaSectionProps = {
+  readonly privateCode: string;
+  readonly name: string;
+  readonly stops: ReadonlyArray<StopSearchRow>;
+  readonly observationDate: DateTime;
+};
+
+type StopAreaHeaderProps = {
+  readonly privateCode: string;
+  readonly name: string;
+  readonly observationDate: DateTime;
+};
+
+type StopRowProps = {
+  readonly stop: StopSearchRow;
+  readonly observationDate: DateTime;
+};
+
+const StopAreaHeader: FC<StopAreaHeaderProps> = ({
+  privateCode,
+  name,
+  observationDate,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <h3 className="mb-2 font-bold">
+      <Link
+        to={routeDetails[Path.stopAreaDetails].getLink(privateCode, {
+          observationDate,
+        })}
+        title={t('accessibility:stopAreas.showStopAreaDetails', {
+          areaLabel: name,
+        })}
+        data-testid={testIds.stopAreaHeader}
+      >
+        <span>{name}</span>
+        <i className="icon-open-in-new ml-1" aria-hidden="true" />
+      </Link>
+    </h3>
+  );
+};
+
+const StopRow: FC<StopRowProps> = ({ stop, observationDate }) => {
+  const locatableStop: LocatableStop = {
+    label: stop.label,
+    netextId: stop.quay.netexId ?? null,
+    location: mapLngLatToPoint(stop.measured_location.coordinates),
+  };
+  return (
+    <StopTableRow
+      key={stop.scheduled_stop_point_id}
+      actionButtons={<LocatorActionButton stop={locatableStop} />}
+      menuItems={[
+        <OpenDetailsPage key="OpenDetailsPage" stop={locatableStop} />,
+        <ShowOnMap key="ShowOnMap" stop={locatableStop} />,
+      ]}
+      observationDate={observationDate}
+      stop={stop}
+    />
+  );
+};
+
+export const StopAreaSection: FC<StopAreaSectionProps> = ({
+  privateCode,
+  name,
+  stops,
+  observationDate,
+}) => {
+  return (
+    <div className="mt-4" data-testid="TerminalDetailsPage::stopAreaSection">
+      <StopAreaHeader
+        privateCode={privateCode}
+        name={name}
+        observationDate={observationDate}
+      />
+      <table
+        className="w-full border-x border-x-light-grey"
+        data-testid="TerminalDetailsPage::stopAreaStopsTable"
+      >
+        <tbody>
+          {stops.map((stop) => (
+            <StopRow
+              key={stop.scheduled_stop_point_id}
+              stop={stop}
+              observationDate={observationDate}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

ui/src/components/stop-registry/terminals/components/member-stops/StopsListSection.tsx

@@ -0,0 +1,84 @@
+import { FC, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MemberStopQuayDetailsFragment } from '../../../../../generated/graphql';
+import { useObservationDateQueryParam } from '../../../../../hooks';
+import { EnrichedParentStopPlace } from '../../../../../types';
+import { StopSearchRow } from '../../../search/types';
+import { StopAreaSection } from './StopAreaSection';
+
+const testIds = {
+  stopsTitle: 'TerminalDetailsPage::stopsTitle',
+};
+
+type StopsProps = {
+  readonly terminal: EnrichedParentStopPlace;
+};
+
+type StopAreaData = {
+  readonly id: string;
+  readonly name: string;
+  readonly privateCode: string;
+  readonly stops: ReadonlyArray<StopSearchRow>;
+};
+
+function toStopSearchRow(
+  quay: MemberStopQuayDetailsFragment | null | undefined,
+): StopSearchRow | null {
+  const ssp = quay?.scheduled_stop_point;
+  if (!ssp) {
+    return null;
+  }
+  return {
+    ...ssp,
+    quay: {
+      netexId: quay?.id ?? null,
+      nameFin: quay?.description?.value ?? null,
+      nameSwe: null,
+    },
+  } as StopSearchRow;
+}
+
+function mapChildrenToStopAreas(
+  terminal: EnrichedParentStopPlace,
+): ReadonlyArray<StopAreaData> {
+  const children = terminal.children ?? [];
+  const sections = children.map((child) => ({
+    id: child?.id ?? '',
+    privateCode: child?.privateCode?.value ?? '',
+    name: child?.name?.value ?? '',
+    stops: (child?.quays ?? [])
+      .map(toStopSearchRow)
+      .filter((row): row is StopSearchRow => row !== null),
+  }));
+
+  sections.toSorted((a, b) => a.name.localeCompare(b.name));
+
+  return sections;
+}
+
+export const StopsListSection: FC<StopsProps> = ({ terminal }) => {
+  const { t } = useTranslation();
+
+  const { observationDate } = useObservationDateQueryParam({
+    initialize: false,
+  });
+
+  const stopAreas = useMemo(() => mapChildrenToStopAreas(terminal), [terminal]);
+
+  return (
+    <>
+      <h2 data-testid={testIds.stopsTitle}>
+        {t('terminalDetails.stops.title')}
+      </h2>
+      {stopAreas.map((section) => (
+        <StopAreaSection
+          key={section.id}
+          privateCode={section.privateCode}
+          name={section.name}
+          stops={section.stops}
+          observationDate={observationDate}
+        />
+      ))}
+    </>
+  );
+};

ui/src/components/stop-registry/terminals/useGetTerminalDetails.ts

@@ -93,6 +93,9 @@ const GQL_GET_PARENT_STOP_PLACE_DETAILS = gql`
     name {
       value
     }
+    privateCode {
+      value
+    }
     quays {
       ...member_stop_quay_details
     }
@@ -101,6 +104,13 @@ const GQL_GET_PARENT_STOP_PLACE_DETAILS = gql`
   fragment member_stop_quay_details on stop_registry_Quay {
     id
     publicCode
+    description {
+      lang
+      value
+    }
+    scheduled_stop_point {
+      ...scheduled_stop_point_detail_fields
+    }
     keyValues {
       key
       values