Draft: Create stop version init

cypress/e2e/stop-registry/stopDetails.cy.ts

@@ -33,6 +33,7 @@ import {
   StopDetailsPage,
   Toast,
 } from '../../pageObjects';
+import { CreateStopVersionFormWrapper } from '../../pageObjects/stop-registry/stop-details/CreateStopVersionFormWrapper';
 import { UUID } from '../../types';
 import { SupportedResources, insertToDbHelper } from '../../utils';
 import { expectGraphQLCallToSucceed } from '../../utils/assertions';
@@ -2285,4 +2286,30 @@ describe('Stop details', () => {
     verifyInitialMeasurements();
     verifyInitialMaintenanceDetails();
   });
+
+  describe('Stop version', () => {
+    function initForm() {
+      return new CreateStopVersionFormWrapper();
+    }
+
+    it('should be able to copy stop to new version', () => {
+      stopDetailsPage.visit('H2003');
+      stopDetailsPage.page().shouldBeVisible();
+      stopDetailsPage.copyToNewVersionButton().shouldBeVisible();
+      stopDetailsPage.copyToNewVersionButton().click();
+
+      const formWrapper = initForm();
+      formWrapper.getFormContent().shouldBeVisible();
+      formWrapper.fillForm({
+        versionName: 'testVersion',
+        versionDescription: 'testNotImplementedVersionDescription',
+        priority: Priority.Standard,
+        startDate: DateTime.now().minus({ day: 1 }).toISODate(),
+        endDate: DateTime.now().plus({ day: 1 }).toISODate(),
+      });
+      formWrapper.getSubmitButton().click()
+
+      toast.expectSuccessToast('Versio tallennettu');
+    });
+  });
 });

cypress/pageObjects/stop-registry/StopDetailsPage.ts

@@ -66,4 +66,8 @@ export class StopDetailsPage {
   infoSpotsTabPanel() {
     return cy.getByTestId('StopDetailsPage::infoSpotsTabPanel');
   }
+
+  copyToNewVersionButton() {
+    return cy.getByTestId('calendar-button-createStopVersion');
+  }
 }

cypress/pageObjects/stop-registry/stop-details/CreateStopVersionFormWrapper.ts

@@ -0,0 +1,57 @@
+import { Priority } from '@hsl/jore4-test-db-manager';
+
+export interface CreateStopVersionStateWrapper {
+  versionName: string;
+  versionDescription: string;
+  priority: Priority;
+  startDate: string;
+  endDate?: string | null;
+  // TODO : indefinite
+}
+
+export class CreateStopVersionFormWrapper {
+
+  getFormContent() {
+    return cy.getByTestId('CreateStopVersionForm::content');
+  }
+
+  getVersionNameInput() {
+    return cy.getByTestId('CreateStopVersionForm::versionName');
+  }
+
+  getVersionDescriptionInput() {
+    return cy.getByTestId('CreateStopVersionForm::versionDescription');
+  }
+
+  getStartDateInput() {
+    return cy.getByTestId('CreateStopVersionForm::startDate');
+  }
+
+  getEndDateInput() {
+    return cy.getByTestId('CreateStopVersionForm::endDate');
+  }
+
+  getPriorityInput(priority: Priority) {
+    return cy.getByTestId(
+      `PriorityForm::${Priority[priority.valueOf()].toLowerCase()}PriorityButton`,
+    );
+  }
+
+  getSubmitButton() {
+    return cy.getByTestId('CreateStopVersionForm::submitButton');
+  }
+
+  getCancelButton() {
+    return cy.getByTestId('CreateStopVersionForm::submitButton');
+  }
+
+  fillForm(values: CreateStopVersionStateWrapper) {
+    this.getVersionNameInput().clear().type(values.versionName);
+    this.getVersionDescriptionInput().clear().type(values.versionDescription);
+    this.getStartDateInput().clear().type(values.startDate);
+    if (values.endDate) {
+      this.getEndDateInput().clear().type(values.endDate);
+    }
+    this.getPriorityInput(values.priority).click();
+  }
+}

ui/src/components/stop-registry/stops/stop-details/stop-version/CopyStopForm.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { FormProvider } from 'react-hook-form';
+import { StopWithDetails } from '../../../../../hooks';
+import { StopVersionForm } from './StopVersionForm';
+import { CreateStopVersionResult } from './types';
+import { useCopyStopFormUtils } from './utils';
+
+type CopyStopFormProps = {
+  readonly className?: string;
+  readonly onCancel: () => void;
+  readonly onCopyCreated: (result: CreateStopVersionResult) => void;
+  readonly originalStop: StopWithDetails;
+};
+
+export const CopyStopForm: FC<CopyStopFormProps> = ({
+  className,
+  onCancel,
+  onCopyCreated,
+  originalStop,
+}) => {
+  const { methods, onFormSubmit } = useCopyStopFormUtils(
+    originalStop,
+    onCopyCreated,
+  );
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...methods}>
+      <StopVersionForm
+        className={className}
+        onCancel={onCancel}
+        onSubmit={methods.handleSubmit(onFormSubmit)}
+      />
+    </FormProvider>
+  );
+};

ui/src/components/stop-registry/stops/stop-details/stop-version/CopyStopModal.tsx

@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  StopWithDetails,
+  useObservationDateQueryParam,
+} from '../../../../../hooks';
+import { Modal, ModalHeader } from '../../../../../uiComponents';
+import { LoadingWrapper } from '../../../../../uiComponents/LoadingWrapper';
+import { ModalBody } from '../../../../map/modal';
+import { CopyStopForm } from './CopyStopForm';
+import { CreateStopVersionResult } from './types';
+
+const testIds = {
+  loading: 'CopyStopModal::loading',
+};
+
+type CopyStopModalProps = {
+  readonly isOpen: boolean;
+  readonly onClose: () => void;
+  readonly originalStop: StopWithDetails | null;
+};
+
+export const CopyStopModal: FC<CopyStopModalProps> = ({
+  isOpen,
+  onClose,
+  originalStop,
+}) => {
+  const { t } = useTranslation();
+
+  const { setObservationDateToUrl } = useObservationDateQueryParam();
+
+  const onCopyCreated = (result: CreateStopVersionResult) => {
+    onClose();
+    if (result.stopPointInput.validity_start) {
+      setObservationDateToUrl(result.stopPointInput.validity_start);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalHeader
+        onClose={onClose}
+        heading={t('stopDetails.version.title.copy')}
+      />
+      <LoadingWrapper testId={testIds.loading} loading={!originalStop}>
+        {originalStop && (
+          <ModalBody>
+            <h4>{t('stopDetails.version.title.copySubTitle')}</h4>
+            <CopyStopForm
+              className="mt-4"
+              originalStop={originalStop}
+              onCancel={onClose}
+              onCopyCreated={onCopyCreated}
+            />
+          </ModalBody>
+        )}
+      </LoadingWrapper>
+    </Modal>
+  );
+};

ui/src/components/stop-registry/stops/stop-details/stop-version/StopVersionForm.tsx

@@ -0,0 +1,81 @@
+import { FC, FormEventHandler } from 'react';
+import { useTranslation } from 'react-i18next';
+import { twMerge } from 'tailwind-merge';
+import { Row } from '../../../../../layoutComponents';
+import { SimpleButton } from '../../../../../uiComponents';
+import {
+  FormRow,
+  InputField,
+  PriorityForm,
+  ValidityPeriodForm,
+} from '../../../../forms/common';
+import { StopVersionFormState } from './types';
+
+const testIds = {
+  content: 'StopVersionForm::content',
+  versionName: 'StopVersionForm::versionName',
+  versionDescription: 'StopVersionForm::versionDescription',
+  priority: 'StopVersionForm::priority',
+  startDate: 'StopVersionForm::startDate',
+  endDate: 'StopVersionForm::endDate',
+  indefinite: 'StopVersionForm::indefinite',
+  submitButton: 'StopVersionForm::submitButton',
+  cancelButton: 'StopVersionForm::cancelButton',
+};
+
+type StopVersionFormProps = {
+  readonly className?: string;
+  readonly onCancel: () => void;
+  readonly onSubmit: FormEventHandler<HTMLFormElement>;
+};
+
+export const StopVersionForm: FC<StopVersionFormProps> = ({
+  className,
+  onCancel,
+  onSubmit,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className={twMerge(`space-y-4`, className)}
+      data-testid={testIds.content}
+    >
+      <FormRow>
+        <InputField<StopVersionFormState>
+          type="text"
+          translationPrefix="stopDetails.version.fields"
+          fieldPath="versionName"
+          testId={testIds.versionName}
+        />
+      </FormRow>
+      <FormRow>
+        <InputField<StopVersionFormState>
+          type="text"
+          translationPrefix="stopDetails.version.fields"
+          fieldPath="versionDescription"
+          testId={testIds.versionDescription}
+          disabled
+        />
+      </FormRow>
+
+      <FormRow>
+        <PriorityForm />
+      </FormRow>
+
+      <FormRow>
+        <ValidityPeriodForm />
+      </FormRow>
+
+      <Row className="justify-end space-x-4">
+        <SimpleButton inverted onClick={onCancel} testId={testIds.cancelButton}>
+          {t('cancel')}
+        </SimpleButton>
+        <SimpleButton type="submit" testId={testIds.submitButton}>
+          {t('save')}
+        </SimpleButton>
+      </Row>
+    </form>
+  );
+};

ui/src/components/stop-registry/stops/stop-details/stop-version/errors/StopPlaceInsertFailed.ts

@@ -0,0 +1 @@
+export class StopPlaceInsertFailed extends Error {}

ui/src/components/stop-registry/stops/stop-details/stop-version/errors/StopPlaceRevertFailed.ts

@@ -0,0 +1 @@
+export class StopPlaceRevertFailed extends AggregateError {}

ui/src/components/stop-registry/stops/stop-details/stop-version/errors/StopPointInsertFailed.ts

@@ -0,0 +1 @@
+export class StopPointInsertFailed extends Error {}

ui/src/components/stop-registry/stops/stop-details/stop-version/errors/index.ts

@@ -0,0 +1,3 @@
+export * from './StopPlaceInsertFailed';
+export * from './StopPlaceRevertFailed';
+export * from './StopPointInsertFailed';

ui/src/components/stop-registry/stops/stop-details/stop-version/index.ts

@@ -0,0 +1 @@
+export * from './CopyStopModal';

ui/src/components/stop-registry/stops/stop-details/stop-version/types/CreateStopVersionResult.ts

@@ -0,0 +1,9 @@
+import { StopRegistryStopPlaceInput } from '../../../../../../generated/graphql';
+import { ScheduledStopPointSetInput } from '../../../../../../graphql';
+
+export type CreateStopVersionResult = {
+  readonly stopPlaceId: string;
+  readonly stopPlaceInput: StopRegistryStopPlaceInput;
+  readonly stopPointId: UUID;
+  readonly stopPointInput: ScheduledStopPointSetInput;
+};

ui/src/components/stop-registry/stops/stop-details/stop-version/types/StopVersionFormState.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod';
+import {
+  priorityFormSchema,
+  requiredString,
+  validityPeriodFormSchema,
+} from '../../../../../forms/common';
+
+export const stopVersionSchema = z
+  .object({
+    versionName: requiredString,
+    versionDescription: z.string().optional(), // Not implemented
+  })
+  .merge(validityPeriodFormSchema)
+  .merge(priorityFormSchema);
+
+export type StopVersionFormState = z.infer<typeof stopVersionSchema>;

ui/src/components/stop-registry/stops/stop-details/stop-version/types/index.ts

@@ -0,0 +1,2 @@
+export * from './StopVersionFormState';
+export * from './CreateStopVersionResult';

ui/src/components/stop-registry/stops/stop-details/stop-version/utils/index.ts

@@ -0,0 +1 @@
+export * from './useCopyStopFormUtils';