MirroredStop: Allow editing Trunk Line & Speed Tram status

Author: Huulivoide

ui/src/components/stop-registry/stops/stop-details/hybrid-stop/MirroredQuayDetailsCard.tsx

@@ -91,6 +91,8 @@ export const MirroredQuayDetailsCard: FC<MirroredQuayDetailsCardProps> = ({
 
   const defaultValues: Partial<MirroredQuayFormState> = {
     stopState: stopState ?? undefined,
+    trunkLineStop: details.quay.stopType.trunkLineStop,
+    speedTramStop: details.quay.stopType.speedTramStop,
     reasonForChange: '',
   };
 
@@ -138,6 +140,7 @@ export const MirroredQuayDetailsCard: FC<MirroredQuayDetailsCardProps> = ({
             onRemove={() => setShowRemoveDialog(true)}
             stop={pseudoStop}
             testIdPrefix="MirroredQuayDetails"
+            transportMode={transportMode}
           />
         ) : (
           <>

ui/src/components/stop-registry/stops/stop-details/hybrid-stop/mirrored-quay-form/MirroredQuayBasicDetailsForm.tsx

@@ -2,15 +2,16 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { ForwardRefRenderFunction, forwardRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { StopRegistryTransportModeType } from '../../../../../../generated/graphql';
 import { mapStopPlaceStateToUiName } from '../../../../../../i18n/uiNameMappings';
-import { Column } from '../../../../../../layoutComponents';
 import { StopWithDetails } from '../../../../../../types';
 import { StopPlaceState } from '../../../../../../types/stop-registry';
 import {
   EnumDropdown,
   FormActionButtons,
   FormColumn,
   FormRow,
+  InputElement,
   InputField,
   ReasonForChangeForm,
 } from '../../../../../forms/common';
@@ -20,6 +21,8 @@ import { MirroredQuayFormState, mirroredQuayFormSchema } from './schema';
 
 const testIds = {
   stopPlaceState: 'MirroredQuayForm::stopPlaceState',
+  trunkLineStop: 'StopBasicDetailsForm::trunkLineStop',
+  speedTramStop: 'StopBasicDetailsForm::speedTramStop',
 };
 
 type MirroredQuayBasicDetailsFormProps = {
@@ -29,13 +32,22 @@ type MirroredQuayBasicDetailsFormProps = {
   readonly onRemove: () => void;
   readonly stop: StopWithDetails;
   readonly testIdPrefix: string;
+  readonly transportMode: StopRegistryTransportModeType | null | undefined;
 };
 
 const MirroredQuayBasicDetailsFormComponent: ForwardRefRenderFunction<
   HTMLFormElement,
   MirroredQuayBasicDetailsFormProps
 > = (
-  { defaultValues, onSubmit, onCancel, onRemove, stop, testIdPrefix },
+  {
+    defaultValues,
+    onSubmit,
+    onCancel,
+    onRemove,
+    stop,
+    testIdPrefix,
+    transportMode,
+  },
   ref,
 ) => {
   const { t } = useTranslation();
@@ -47,14 +59,17 @@ const MirroredQuayBasicDetailsFormComponent: ForwardRefRenderFunction<
   useDirtyFormBlockNavigation(methods.formState, 'MirroredQuayForm');
   const { handleSubmit } = methods;
 
+  const isBusStop = transportMode === StopRegistryTransportModeType.Bus;
+  const isTramStop = transportMode === StopRegistryTransportModeType.Tram;
+
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)} ref={ref}>
         <FormColumn>
           <StopAreaDetailsSection stop={stop} />
           <FormRow mdColumns={4}>
-            <Column>
+            <FormColumn>
               <InputField<MirroredQuayFormState>
                 translationPrefix="stopDetails.basicDetails"
                 fieldPath="stopState"
@@ -72,7 +87,41 @@ const MirroredQuayBasicDetailsFormComponent: ForwardRefRenderFunction<
                   />
                 )}
               />
-            </Column>
+            </FormColumn>
+
+            <FormColumn className="justify-end">
+              <label
+                htmlFor="trunkLineStop"
+                className="inline-flex font-normal"
+              >
+                <InputElement<MirroredQuayFormState>
+                  type="checkbox"
+                  id="trunkLineStop"
+                  fieldPath="trunkLineStop"
+                  className="mr-3.5 h-6 w-6"
+                  testId={testIds.trunkLineStop}
+                  disabled={!isBusStop}
+                />
+                {t(($) => $.stopPlaceTypes.trunkLineStop)}
+              </label>
+            </FormColumn>
+
+            <FormColumn className="justify-end">
+              <label
+                htmlFor="speedTramStop"
+                className="inline-flex font-normal"
+              >
+                <InputElement<MirroredQuayFormState>
+                  type="checkbox"
+                  id="speedTramStop"
+                  fieldPath="speedTramStop"
+                  className="mr-3.5 h-6 w-6"
+                  testId={testIds.speedTramStop}
+                  disabled={!isTramStop}
+                />
+                {t(($) => $.stopPlaceTypes.speedTramStop)}
+              </label>
+            </FormColumn>
           </FormRow>
           <ReasonForChangeForm />
         </FormColumn>

ui/src/components/stop-registry/stops/stop-details/hybrid-stop/mirrored-quay-form/schema.ts

@@ -5,6 +5,8 @@ import { reasonForChangeFormSchema } from '../../../../../forms/common';
 export const mirroredQuayFormSchema = z
   .object({
     stopState: z.nativeEnum(StopPlaceState),
+    trunkLineStop: z.boolean(),
+    speedTramStop: z.boolean(),
   })
   .merge(reasonForChangeFormSchema);
 

ui/src/components/stop-registry/stops/stop-details/hybrid-stop/useEditMirroredQuayDetails.ts

@@ -38,6 +38,14 @@ export function useEditMirroredQuayDetails() {
               key: KnownValueKey.StopState,
               values: state.stopState ? [state.stopState] : [],
             },
+            {
+              key: KnownValueKey.TrunkLineStop,
+              values: state.stopState ? [state.trunkLineStop.toString()] : [],
+            },
+            {
+              key: KnownValueKey.SpeedTramStop,
+              values: state.stopState ? [state.speedTramStop.toString()] : [],
+            },
           ]),
           versionComment: state.reasonForChange,
         },