feat: Aseta suunnittelusopimustiedot tallentumaan projektin tiedot -l…

…omakkeella * feat: Aseta suunnittelusopimustiedot tallentumaan projektin tiedot -lomakkeella * laita adaptSuunnitteluSopimusToSave palauttamaan null arvon, kun kannassa oleva suunnitteluSopimus on tarve poistaa * poista p-elementti, jossa sama teksti kuin alla olevan elementin sisällä * korjaa adaptSuunnitteluSopimusToSave toiminnallisuutta
finnishtransportagency · Jan 14, 2022 · 407ecae · 407ecae
1 parent 7e9811c
commit 407ecae
Show file tree

Hide file tree

Showing 17 changed files with 410 additions and 154 deletions.
diff --git a/backend/src/handler/projektiAdapter.ts b/backend/src/handler/projektiAdapter.ts
@@ -47,7 +47,7 @@ export class ProjektiAdapter {
         oid,
         muistiinpano,
         aloitusKuulutus,
-        suunnitteluSopimus,
+        suunnitteluSopimus: adaptSuunnitteluSopimusToSave(projekti, suunnitteluSopimus),
         kayttoOikeudet: kayttoOikeudetManager.getKayttoOikeudet(),
         lisakuulutuskieli,
         eurahoitus,
@@ -71,7 +71,18 @@ function adaptLiittyvatSuunnitelmat(suunnitelmat?: Suunnitelma[] | null): API.Su
   return suunnitelmat as undefined | null;
 }
 
-function adaptAloitusKuulutus(kuulutus?: AloitusKuulutus | null): API.AloitusKuulutus | undefined | null {
+function adaptSuunnitteluSopimusToSave(
+  projekti: DBProjekti,
+  suunnitteluSopimusInput?: API.SuunnitteluSopimusInput | null
+): API.SuunnitteluSopimusInput | null | undefined {
+  if (suunnitteluSopimusInput) {
+    const { logo, ...rest } = suunnitteluSopimusInput;
+    return { ...rest, logo: logo || projekti.suunnitteluSopimus?.logo };
+  }
+  return suunnitteluSopimusInput as null | undefined;
+}
+
+function adaptAloitusKuulutus(kuulutus?: AloitusKuulutus): API.AloitusKuulutus | undefined {
   if (kuulutus) {
     const { esitettavatYhteystiedot, ...otherKuulutusFields } = kuulutus;
     const yhteystiedot: API.Yhteystieto[] | undefined = esitettavatYhteystiedot?.map(

diff --git a/backend/src/handler/projektiHandler.ts b/backend/src/handler/projektiHandler.ts
@@ -87,7 +87,7 @@ async function createProjektiFromVelho(oid: string, vaylaUser: NykyinenKayttaja,
  */
 async function handleFiles(input: TallennaProjektiInput) {
   const logo = input.suunnitteluSopimus?.logo;
-  if (logo && input.suunnitteluSopimus) {
+  if (logo) {
     input.suunnitteluSopimus.logo = await fileService.persistFileToProjekti({
       uploadedFileSource: logo,
       oid: input.oid,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "pino": "7.6.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-dropzone": "^11.5.1",
     "react-hook-form": "7.12.2",
     "source-map-support": "0.5.19",
     "swr": "1.1.0",

diff --git a/src/__tests__/__snapshots__/Perusta.test.tsx.snap b/src/__tests__/__snapshots__/Perusta.test.tsx.snap
@@ -25,28 +25,36 @@ Array [
           <label>
             Asiatunnus
           </label>
-          <input
-            className=""
-            disabled={true}
-            maxLength={200}
-            onChange={[Function]}
-            type="text"
-          />
+          <div
+            className="flex flex-col"
+          >
+            <input
+              className=""
+              disabled={true}
+              maxLength={200}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
         </div>
         <div
           className="form-group"
         >
           <label>
             Projektin nimi
           </label>
-          <input
-            className=""
-            maxLength={100}
-            name="name"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="text"
-          />
+          <div
+            className="flex flex-col"
+          >
+            <input
+              className=""
+              maxLength={100}
+              name="name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
         </div>
         <div
           className="wrapper"

diff --git a/src/components/form/CheckBox.tsx b/src/components/form/CheckBox.tsx
@@ -1,30 +1,20 @@
-import classNames from "classnames";
 import React from "react";
-import { FieldError } from "react-hook-form";
 
 interface Props {
-  error?: FieldError;
   label?: string;
-  hideErrorMessage?: boolean;
-  hideLengthCounter?: boolean;
 }
 
 const CheckBox = (
   {
-    maxLength = 200,
-    error,
     label,
-    hideErrorMessage,
-    className,
-    hideLengthCounter = true,
     ...props
   }: Props & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">,
   ref: React.ForwardedRef<HTMLInputElement>
 ) => {
   return (
-    <label className="block" htmlFor={props?.id}>
-      <input type="checkbox" maxLength={maxLength} {...props} ref={ref} className={classNames(error && "error")} />
-      &nbsp;{label}
+    <label htmlFor={props?.id}>
+      <input type="checkbox" {...props} ref={ref} />
+      <span className="pl-3 pr-6">{label}</span>
     </label>
   );
 };

diff --git a/src/components/form/DatePicker.tsx b/src/components/form/DatePicker.tsx
@@ -8,6 +8,7 @@ interface Props {
   label?: string;
   hideErrorMessage?: boolean;
   hideLengthCounter?: boolean;
+  formGroupClassName?: string;
 }
 
 const DatePicker = (
@@ -17,19 +18,23 @@ const DatePicker = (
     label,
     hideErrorMessage,
     className,
-    hideLengthCounter = true,
+    formGroupClassName,
     ...props
   }: Props & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">,
   ref: React.ForwardedRef<HTMLInputElement>
 ) => {
   return (
-    <FormGroup label={label} errorMessage={hideErrorMessage ? undefined : error?.message} className={className}>
+    <FormGroup
+      label={label}
+      errorMessage={hideErrorMessage ? undefined : error?.message}
+      className={formGroupClassName}
+    >
       <input
         type="date"
         maxLength={maxLength}
         {...props}
         ref={ref}
-        className={classNames(error && "error", "md:max-w-min")}
+        className={classNames(className, error && "error")}
       />
     </FormGroup>
   );

diff --git a/src/components/form/FileInput.tsx b/src/components/form/FileInput.tsx
@@ -0,0 +1,65 @@
+import Button from "@components/button/Button";
+import React from "react";
+import { FieldError } from "react-hook-form";
+import FormGroup from "./FormGroup";
+import { DropzoneOptions, useDropzone } from "react-dropzone";
+import classNames from "classnames";
+
+type DropzoneProps = {
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  label?: string;
+  error?: FieldError;
+  bottomInfoText?: string;
+  hideErrorMessage?: boolean;
+} & DropzoneOptions;
+
+export const FileInput = ({
+  onChange,
+  label,
+  error,
+  bottomInfoText,
+  hideErrorMessage,
+  multiple = false,
+  noClick = true,
+  maxSize = 4500000,
+  accept = "image/jpeg, image/png",
+  ...otherDropzoneOptions
+}: DropzoneProps) => {
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    multiple,
+    noClick,
+    maxSize,
+    accept,
+    ...otherDropzoneOptions,
+  });
+
+  return (
+    <FormGroup label={label} errorMessage={hideErrorMessage ? undefined : error?.message}>
+      <div
+        {...getRootProps()}
+        className={classNames(
+          "border-dashed border border-gray py-4 flex flex-col justify-center items-center relative",
+          isDragActive &&
+            "before:inset-0 before:absolute before:bg-gray-light before:bg-opacity-50 before:z-50 before:pointer-events-none"
+        )}
+      >
+        <p className="mb-4 vayla-paragraph flex flex-wrap justify-center">
+          <span>Pudota tiedosto tähän tai</span>
+        </p>
+        <input {...getInputProps({ onChange })} />
+        <Button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            open();
+          }}
+        >
+          Valitse tiedosto
+        </Button>
+        <p className="mt-4 mb-0">{bottomInfoText}</p>
+      </div>
+    </FormGroup>
+  );
+};
+
+export default FileInput;
diff --git a/src/components/form/FormGroup.tsx b/src/components/form/FormGroup.tsx
@@ -9,6 +9,7 @@ interface Props {
   maxLength?: number;
   length?: number;
   bottomInfo?: ReactNode;
+  flexDirection?: "row" | "col";
 }
 
 export default function FormGroup({
@@ -17,13 +18,13 @@ export default function FormGroup({
   errorMessage,
   bottomInfo,
   className,
+  flexDirection = "col",
   ...props
 }: Props & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>): ReactElement {
   return (
     <div className={classNames(style["form-group"], className)} {...props}>
       {label && <label>{label}</label>}
-      {children}
-
+      <div className={classNames("flex", `flex-${flexDirection}`)}>{children}</div>
       {(bottomInfo || errorMessage) && (
         <div className="flex">
           {errorMessage && <span className="text-red">{errorMessage}</span>}