@addsign/moje-agenda-shared-lib 1.0.60 → 2.0.0

package/lib/components/form/FileInputMultiple.tsx

@@ -0,0 +1,186 @@
+import React, { useState, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { MdDeleteOutline, MdInsertDriveFile } from "react-icons/md";
+import { IAttachment } from "../../types";
+import { handleErrors, useFederationContext } from "../../main";
+import { AxiosError } from "axios";
+
+interface FileInputMultipleProps {
+  name: string;
+  label?: string;
+  initialFiles?: IAttachment[];
+  onFilesChanged: (e: any) => void;
+  required?: boolean;
+  description?: string;
+  disabled?: boolean;
+  errors?: { [key: string]: { message: string } };
+}
+
+interface IAttachmentReadOnly extends IAttachment {
+  readonly?: boolean;
+}
+const FileInputMultiple: React.FC<FileInputMultipleProps> = ({
+  initialFiles = [],
+  onFilesChanged,
+  label,
+  name,
+  required,
+  description,
+  disabled,
+  errors = {},
+}) => {
+  const [fileDataList, setFileDataList] = useState<IAttachmentReadOnly[]>(
+    [...initialFiles].map((file) => ({ ...file, readonly: true }))
+  );
+  const federationContext = useFederationContext();
+
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      const uploadedFiles = await Promise.all(
+        acceptedFiles.map(async (file) => {
+          const formData = new FormData();
+          formData.append("file", file);
+
+          try {
+            const response =
+              await federationContext.apiClient.post<IAttachment>(
+                "/files/upload",
+                formData,
+                {
+                  headers: {
+                    "Content-Type": "multipart/form-data",
+                  },
+                }
+              );
+            return response.data;
+          } catch (error) {
+            handleErrors(error as AxiosError, federationContext.emitter);
+            console.error("There was an error!", error);
+            return null;
+          }
+        })
+      );
+
+      const validFiles = uploadedFiles.filter(
+        (file) => file !== null
+      ) as IAttachment[];
+      const updatedFileDataList = [...fileDataList, ...validFiles];
+      setFileDataList(updatedFileDataList);
+      onFilesChanged({
+        target: { name, value: updatedFileDataList.map((file) => file.id) },
+      });
+    },
+    [
+      fileDataList,
+      federationContext.apiClient,
+      onFilesChanged,
+      name,
+      federationContext.emitter,
+    ]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    disabled,
+  });
+
+  const handleRemove = (fileId: number) => {
+    const updatedFileDataList = fileDataList.filter(
+      (file) => file.id !== fileId
+    );
+    setFileDataList(updatedFileDataList);
+    onFilesChanged({
+      target: {
+        name,
+        value: updatedFileDataList.map((file) => file.id.toString()),
+      },
+    });
+  };
+  if (disabled === true && fileDataList.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary">
+      <div className="self-stretch flex-col justify-start items-start gap-1.5 flex">
+        {label && (
+          <label
+            className="text-slate-700 text-sm leading-tight font-medium"
+            htmlFor={name}
+          >
+            {label} {required ? "*" : ""}
+          </label>
+        )}
+        <div
+          className={
+            `self-stretch px-3 py-2 rounded-lg justify-start items-center gap-2  outline-none border bg-transparent ` +
+            ` ${errors[name]?.message ? "border-red-200" : "border-gray-300"} `
+          }
+        >
+          {!disabled && (
+            <div
+              {...getRootProps()}
+              className={`w-full p-4 border-dashed cursor-pointer 
+                border-2 rounded-lg text-center hover:bg-gray-100
+                ${isDragActive ? "border-indigo-300 bg-indigo-50" : "border-gray-300"}`}
+            >
+              <input {...getInputProps()} id={name} />
+              <p className="text-gray-500">
+                {isDragActive
+                  ? "Sem přetáhněte soubory"
+                  : "Klikněte pro nahrání, nebo nahrajte přetažením souborů"}
+              </p>
+            </div>
+          )}
+          <div className="w-full">
+            {fileDataList.map((file) => (
+              <div
+                key={file.id}
+                className="w-full flex items-center justify-between py-2 border-b "
+              >
+                <div className="flex items-center content-center">
+                  <MdInsertDriveFile style={{ fontSize: "2rem" }} />
+                  <a
+                    href={`/api/files/download/${file.id}`}
+                    className="pl-2 text-left underline text-primary"
+                    target="_blank"
+                  >
+                    {file.filename}
+                  </a>
+                </div>
+                {!disabled && file.readonly !== true && (
+                  <div
+                    onClick={() => handleRemove(file.id)}
+                    className="text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4"
+                  >
+                    <MdDeleteOutline
+                      style={{ fontSize: "1.5rem", margin: "10px" }}
+                    />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      {description && (
+        <div
+          className="HintText self-stretch text-slate-600 text-sm font-normal leading-tight"
+          id={name + ":description"}
+        >
+          {description}
+        </div>
+      )}
+      {errors[name] && (
+        <div
+          className="HintText self-stretch text-red-600 text-sm font-normal leading-tight"
+          id={name + ":error"}
+        >
+          {errors[name]?.message}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileInputMultiple;

package/lib/components/form/FormField.tsx

@@ -0,0 +1,371 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { MdClose } from "react-icons/md";
+import { IOptionItem, useFederationContext } from "../../main";
+
+export interface FormFieldProps {
+  label?: string;
+  description?: string;
+  name: string;
+  type: string;
+  value?: any;
+  register?: any;
+
+  errors?: any;
+  disabled?: boolean;
+  required?: boolean;
+  clearable?: boolean;
+  placeholder?: string;
+  options?: IOptionItem[];
+  children?: React.ReactNode;
+  fetchUrl?: string;
+  maxLength?: number;
+
+  className?: string;
+  valueKey?: string;
+  labelKey?: string;
+  minDate?: string;
+  maxDate?: string;
+  onInputChange: (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any
+    >
+  ) => void;
+}
+
+const FormField: React.FC<FormFieldProps> = ({
+  label,
+  name,
+  type,
+  register,
+  disabled,
+  errors = {},
+  required,
+  clearable,
+  value,
+  description,
+  onInputChange,
+  options,
+  placeholder,
+  children,
+  fetchUrl,
+  valueKey,
+  labelKey,
+  maxLength,
+  className,
+  minDate,
+  maxDate,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const [localOptions, setLocalOptions] = useState(options);
+  const fallbackRef = useRef(null); // Create a fallback ref
+  const {
+    ref: registeredRef = fallbackRef,
+    onBlur: formOnBlur = () => {} /* default function */,
+    ...rest
+  } = register ? register(name) : {};
+
+  const apiClient = useFederationContext()?.apiClient;
+  const ref = registeredRef || fallbackRef;
+  const focusInput = () => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  };
+  const handleMultiSelectChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const selectedOptions = Array.from(
+      event.target.selectedOptions,
+      (option) => option.value
+    );
+
+    onInputChange({
+      ...event,
+      target: {
+        value: selectedOptions,
+        name: event.target.name,
+      },
+    });
+  };
+
+  const handleCheckBoxChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    onInputChange({
+      ...event,
+      target: {
+        value: event.target.value == "on" ? true : false,
+        name: event.target.name,
+      },
+    });
+  };
+
+  const handleClear = (e: any) => {
+    value;
+    onInputChange({
+      ...e,
+      target: {
+        value: "",
+        name: name,
+      },
+    });
+  };
+  useEffect(() => {
+    const fetchOptions = async (fetchUrl: string) => {
+      const { data } = await apiClient.get(fetchUrl);
+
+      // Check if the first item in the data array is a number to determine the data type
+      const isArrayOfNumbers = typeof data[0] === "number";
+
+      // Transform data based on its type
+      const transformedOptions = data.map((item: any) => {
+        if (isArrayOfNumbers) {
+          // If it's a number, use the number for both value and label
+          return { value: item, label: item.toString() };
+        } else {
+          // Otherwise, extract using predefined keys or defaults
+          return {
+            value: item[valueKey || "id"],
+            label: item[labelKey || "name"],
+          };
+        }
+      });
+
+      setLocalOptions([
+        { value: null, label: " " }, // Add an empty option as the first item
+        ...transformedOptions,
+      ]);
+    };
+
+    if (fetchUrl) fetchOptions(fetchUrl);
+    if (options) setLocalOptions(options);
+  }, [fetchUrl, options, apiClient, valueKey, labelKey]); // ensure valueKey and labelKey are also in the dependency array if they are dynamic
+
+  const renderInput = () => {
+    switch (type) {
+      case "select":
+        return (
+          <>
+            <select
+              id={name}
+              className="grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full"
+              disabled={disabled}
+              value={value}
+              {...rest} // Spread the rest of register's return value
+              ref={ref}
+              onChange={onInputChange}
+              onFocus={() => setIsFocused(true)}
+              // Combine custom onBlur with form's onBlur
+              onBlur={(e) => {
+                formOnBlur(e); // Call React Hook Form's onBlur
+                setIsFocused(false); // Then call your custom onBlur logic
+              }}
+            >
+              {placeholder && <option label={placeholder}></option>}
+              {localOptions?.map((option, index) => (
+                <option
+                  key={index}
+                  value={
+                    option.value !== undefined && option.value !== null
+                      ? option.value.toString()
+                      : ""
+                  }
+                >
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </>
+        );
+      case "multiSelect":
+        return (
+          <>
+            <select
+              id={name}
+              multiple
+              className="grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-max-full "
+              disabled={disabled}
+              value={Array.isArray(value) ? value : []} // Ensure value is always an array
+              {...rest}
+              ref={ref}
+              onChange={handleMultiSelectChange} // Use the custom multi-select handler
+              onFocus={() => setIsFocused(true)}
+              onBlur={(e) => {
+                formOnBlur(e);
+                setIsFocused(false);
+              }}
+            >
+              {options?.map((option) => (
+                <option
+                  key={option.value}
+                  value={option.value ? option.value : undefined}
+                >
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </>
+        );
+      case "radioGroup":
+        return (
+          <div className="flex flex-col" id={name}>
+            {options?.map((option, index) => (
+              <label
+                key={index}
+                className="inline-flex items-center space-x-2 my-2"
+              >
+                <input
+                  type="radio"
+                  name={name}
+                  value={option.value}
+                  checked={value === option.value}
+                  disabled={disabled}
+                  {...register(name)} // Spread the rest of register's return value
+                  onChange={onInputChange}
+                  className="text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2"
+                />
+                <span className="text-gray-900 text-sm font-normal leading-tight">
+                  {option.label}
+                </span>
+              </label>
+            ))}
+          </div>
+        );
+      case "textarea":
+        return (
+          <textarea
+            id={name}
+            className="grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none  "
+            disabled={disabled}
+            value={value}
+            rows={3}
+            {...rest} // Spread the rest of register's return value
+            ref={ref}
+            onChange={onInputChange}
+            onFocus={() => setIsFocused(true)}
+            maxLength={maxLength || 4000}
+            // Combine custom onBlur with form's onBlur
+            onBlur={(e) => {
+              formOnBlur(e); // Call React Hook Form's onBlur
+              setIsFocused(false); // Then call your custom onBlur logic
+            }}
+          />
+        );
+      case "checkbox":
+        return (
+          <>
+            <input
+              type="checkbox"
+              id={name}
+              className="shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none"
+              checked={value}
+              disabled={disabled}
+              {...rest} // Spread the rest of register's return value
+              ref={ref}
+              onChange={handleCheckBoxChange}
+              onFocus={() => setIsFocused(true)}
+              // Combine custom onBlur with form's onBlur
+              onBlur={(e) => {
+                formOnBlur(e); // Call React Hook Form's onBlur
+                setIsFocused(false); // Then call your custom onBlur logic
+              }}
+            />
+            <label htmlFor={name}>{label}</label>
+          </>
+        );
+      default:
+        return (
+          <>
+            <input
+              className="grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full"
+              id={name}
+              readOnly={disabled}
+              value={value}
+              type={type}
+              {...rest} // Spread the rest of register's return value
+              ref={ref}
+              placeholder={placeholder}
+              onChange={onInputChange}
+              min={minDate}
+              max={maxDate}
+              maxLength={maxLength}
+              onFocus={() => setIsFocused(true)}
+              // Combine custom onBlur with form's onBlur
+              onBlur={(e) => {
+                formOnBlur(e); // Call React Hook Form's onBlur
+                setIsFocused(false); // Then call your custom onBlur logic
+              }}
+            />
+          </>
+        );
+    }
+  };
+
+  return (
+    <div className="w-full min-h-30 flex-col justify-start items-start gap-1.5  sharedLibrary">
+      <div className="self-stretch  flex-col justify-start items-start gap-1.5 flex ">
+        {label && (
+          <label
+            className="text-slate-700 text-sm leading-tight font-medium"
+            htmlFor={name}
+          >
+            {label} {required ? "*" : ""}
+          </label>
+        )}
+        <div
+          className={
+            `self-stretch px-3  py-1 rounded-lg justify-start items-center  inline-flex outline-none border  ` +
+            ` ${
+              isFocused && !errors[name]?.message
+                ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300"
+                : ""
+            }` +
+            ` ${
+              isFocused && errors[name]?.message
+                ? "outline-4 outline-red-200 outline-offset-0 border-none"
+                : ""
+            } ` +
+            ` ${!isFocused && errors[name]?.message ? "border-red-200" : ""} ` +
+            ` ${disabled ? "bg-gray-100" : "bg-white"}` +
+            " " +
+            className
+          }
+        >
+          <div className="flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-1 w-full  ">
+            {renderInput()}
+            {children && <div onClick={focusInput}>{children}</div>}
+            {clearable && value && (
+              <div className="flex items-center justify-center">
+                <MdClose
+                  onClick={handleClear}
+                  size={20}
+                  id={name + ":clear"}
+                ></MdClose>
+              </div>
+            )}{" "}
+          </div>
+        </div>
+      </div>
+      {description && (
+        <div
+          className="HintText self-stretch text-slate-600 text-sm font-normal leading-tight"
+          id={name + ":description"}
+        >
+          {description}
+        </div>
+      )}
+      {errors[name] && (
+        <div
+          className="HintText self-stretch text-red-600 text-sm font-normal leading-tight"
+          id={name + ":error"}
+        >
+          {errors[name]?.message}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FormField;