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

package/lib/components/form/AutocompleteSearchBarServer.tsx

@@ -0,0 +1,257 @@
+import { useState, useEffect, useRef } from "react";
+import { useClickAway } from "react-use";
+import { MdExpandLess, MdExpandMore } from "react-icons/md";
+import { InputField, IOptionItem, useFederationContext } from "../../main";
+
+interface OptionListProps {
+  options: IOptionItem[];
+  selectedOptionIndex: number;
+  handleOptionClick: (option: IOptionItem) => void;
+  label?: string;
+}
+
+const AutocompleteSearchBarServer: React.FC<{
+  label: string;
+  name: string;
+  required?: boolean;
+  disabled?: boolean;
+  description?: string;
+  fetchUrl?: string;
+  valueKey: string;
+  labelKey: string | ((item: any) => string);
+  onChange: (value: any) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+  placeholder?: string;
+  value?: string;
+  initOptions?: IOptionItem[];
+  clearable?: boolean;
+  returnObject: boolean;
+}> = ({
+  label,
+  name,
+  disabled,
+  description,
+  fetchUrl,
+  valueKey,
+  labelKey,
+  onChange,
+  onFocus,
+  onBlur,
+  placeholder,
+  returnObject,
+  value,
+  required,
+}) => {
+  const [query, setQuery] = useState("");
+  const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);
+  const [selectedOption, setSelectedOption] = useState<IOptionItem | null>(
+    null
+  );
+  const [searchResults, setSearchResults] = useState<IOptionItem[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const ref = useRef(null);
+  const federationContext = useFederationContext();
+  const [isFocused, setIsFocused] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  // const [errors] = useState<any>({});
+
+  useEffect(() => {
+    if (!value) {
+      setQuery("");
+      setSelectedOption(null);
+    }
+  }, [value]);
+
+  //fetch options
+  useEffect(() => {
+    const fetchOptions = async () => {
+      setIsLoading(true);
+      const { data } = await federationContext.apiClient.get(fetchUrl + query);
+      setIsLoading(false);
+      const tmpData = data.content || data;
+
+      setSearchResults(
+        tmpData.map((item: any) => ({
+          value: item[valueKey],
+          label: labelKey instanceof Function ? labelKey(item) : item[labelKey],
+        }))
+      );
+    };
+    setSearchResults([]);
+
+    if (query && valueKey && labelKey && fetchUrl && !selectedOption) {
+      fetchOptions();
+    }
+  }, [query, valueKey, labelKey, fetchUrl, federationContext.apiClient]);
+
+  useClickAway(ref, () => {
+    if (isFocused) {
+      setIsLoading(false);
+      setSearchResults([]);
+      setQuery("");
+      if (!selectedOption) {
+        onChange(null);
+      }
+      onBlur();
+      setIsFocused(false);
+    }
+  });
+
+  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value == selectedOption?.label) {
+      return;
+    } else if (event.target.value) {
+      setIsFocused(true);
+      setSearchResults([]);
+      setQuery(event.target.value);
+
+      setSelectedOption(null);
+      setSelectedOptionIndex(-1);
+    } else {
+      //clear handler
+      onChange(null);
+      setQuery("");
+      setSelectedOption(null);
+      setTimeout(() => {
+        setSelectedOptionIndex(-1);
+        setSearchResults([]);
+      }, 100);
+      setIsFocused(false);
+    }
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+    setSearchResults([]);
+    onFocus();
+    inputRef.current?.select(); // Add this line
+  };
+
+  const handleOptionClick = (option: IOptionItem) => {
+    setSelectedOption(option);
+    setSearchResults([]);
+    setSelectedOptionIndex(-1);
+    setQuery("");
+    onChange(returnObject ? option : option.value);
+    setIsFocused(false);
+  };
+  const handleBlur = () => {
+    setSearchResults([]);
+    setTimeout(() => {
+      if (!selectedOption) {
+        setQuery("");
+        onChange(null);
+      }
+    }, 1);
+
+    onBlur();
+    setIsFocused(false);
+  };
+
+  return (
+    <div
+      className="w-full  flex-col justify-start items-start gap-1.5 inline-flex relative"
+      ref={ref}
+    >
+      <InputField
+        manualRef={inputRef}
+        label={label}
+        name={String(name) + "_InputField"}
+        onInputChange={handleQueryChange}
+        required={required}
+        type="text"
+        value={selectedOption?.label || query}
+        disabled={disabled}
+        clearable
+        className=" min-w-[100px] px-0 "
+        rounded={true}
+        placeholder={placeholder}
+        debounceTimeout={1000}
+        description={description}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        disableAutocomplete
+      >
+        {isFocused && (
+          <div className=" h-6 w-6 items-center flex  justify-center  hover:bg-gray-100  rounded-full text-lg  cursor-pointer">
+            <MdExpandLess />
+            {false && !isFocused && <MdExpandMore />}
+          </div>
+        )}
+      </InputField>
+      {searchResults.length == 0 && isFocused && !query && (
+        <div
+          className={`absolute text-sm py-2 px-4  w-full outline-4 bg-white text-gray-400 border border-gray-200 drop-shadow-xl  z-50 ${label ? "top-[68px]" : "top-[40px]"}`}
+        >
+          Začněte psát...
+        </div>
+      )}
+      {searchResults.length == 0 && isFocused && query && (
+        <div
+          className={`absolute  text-sm  py-2 px-4 w-full outline-4 bg-white border text-gray-400 border-gray-200 drop-shadow-xl  z-50 ${label ? "top-[68px]" : "top-[40px]"}`}
+        >
+          {!isLoading && "Nic nenalezeno"}
+        </div>
+      )}
+      {searchResults.length > 0 && isFocused && query && (
+        <OptionList
+          options={searchResults}
+          selectedOptionIndex={selectedOptionIndex}
+          handleOptionClick={handleOptionClick}
+          label={label}
+        />
+      )}
+    </div>
+  );
+};
+
+const OptionList: React.FC<OptionListProps> = ({
+  options,
+  selectedOptionIndex,
+  handleOptionClick,
+  label,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Ensure the selected option is scrolled into view
+    if (selectedOptionIndex >= 0 && selectedOptionIndex < options.length) {
+      const selectedElement = containerRef.current?.children[
+        selectedOptionIndex
+      ] as HTMLDivElement;
+      selectedElement?.scrollIntoView({
+        behavior: "instant",
+        block: "nearest",
+      });
+    }
+  }, [selectedOptionIndex, options.length]);
+  const handleMouseDown = (event: any) => {
+    event.preventDefault();
+  };
+  return (
+    <div
+      ref={containerRef}
+      className={`overflow-y-auto resultOptionContainer w-full max-h-96 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl  z-50 ${label ? "top-[68px]" : "top-[40px]"}  *:
+         
+            `}
+    >
+      {options?.map((option, index) => (
+        <div
+          key={option.value as string}
+          className={`py-2 px-4 flex items-center justify-between gap-8 hover:bg-gray-200 cursor-pointer text-sm ${
+            selectedOptionIndex === index ? "bg-gray-200" : ""
+          }`}
+          onClick={(e) => {
+            e.preventDefault();
+            handleOptionClick(option);
+          }}
+          onMouseDown={handleMouseDown}
+        >
+          <p className="font-normal">{option.label}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AutocompleteSearchBarServer;

package/lib/components/form/DateField.tsx

@@ -0,0 +1,124 @@
+import Datepicker from "react-tailwindcss-datepicker";
+import { ChangeEvent, useMemo } from "react";
+import { IFormFieldGlobalProps } from "../../types";
+
+export interface IDateInputFieldProps extends IFormFieldGlobalProps {
+  minDate?: string;
+  maxDate?: string;
+  [key: string]: any;
+}
+
+export default function DateField({
+  label,
+  name,
+  value,
+  description,
+  required,
+  onInputChange,
+  placeholder,
+  className,
+  register,
+  disabled,
+  minDate,
+  maxDate,
+  errors = {},
+  rounded = true,
+  ...rest
+}: IDateInputFieldProps) {
+  // Utility function to create a mock ChangeEvent
+  const createMockChangeEvent = (
+    name: string,
+    value: any
+  ): ChangeEvent<any> => {
+    return {
+      target: { name, value },
+      currentTarget: { name, value },
+      preventDefault: () => {},
+      stopPropagation: () => {},
+      nativeEvent: new Event("change"),
+      bubbles: true,
+      cancelable: true,
+      defaultPrevented: false,
+      eventPhase: 0,
+      isTrusted: true,
+      timeStamp: Date.now(),
+      type: "change",
+      persist: () => {},
+    } as ChangeEvent<any>;
+  };
+
+  const handleValueChange = (newValue: any) => {
+    const startEvent = createMockChangeEvent(name, newValue.startDate);
+    onInputChange(startEvent);
+  };
+
+  const localValue = useMemo(() => {
+    return {
+      startDate: value,
+      endDate: value,
+    };
+  }, [value]);
+
+  return (
+    <>
+      <div
+        className={
+          "min-h-30 flex-col justify-start items-start gap-1.5  w-full relative min-w-[120px] " +
+          className
+        }
+      >
+        <div className="self-stretch flex-col justify-start items-start gap-1.5 flex ">
+          {label && (
+            <div className="text-slate-700 text-sm font-medium  leading-tight">
+              {label} {required ? "*" : ""}
+            </div>
+          )}
+          <Datepicker
+            inputId={name}
+            primaryColor={"indigo"}
+            placeholder={placeholder}
+            startFrom={
+              localValue?.startDate ? new Date(localValue.startDate) : undefined
+            }
+            disabled={disabled}
+            startWeekOn="mon"
+            minDate={minDate ? new Date(minDate) : null}
+            maxDate={maxDate ? new Date(maxDate) : null}
+            useRange={false}
+            asSingle={true}
+            i18n={"cs"}
+            value={localValue}
+            onChange={handleValueChange}
+            displayFormat={"DD.MM.YYYY"}
+            inputClassName={(className) => {
+              return (
+                className +
+                `  focus:!ring-indigo-200 focus:!border-indigo-300  focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? " rounded-lg " : " !rounded-none "}`
+              );
+            }}
+            containerClassName={(className) => {
+              return className + " ";
+            }}
+            {...rest}
+          />
+        </div>
+        {description && (
+          <div
+            className="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>
+    </>
+  );
+}

package/lib/components/form/DateRangeField.tsx

@@ -0,0 +1,116 @@
+import Datepicker from "react-tailwindcss-datepicker";
+import { ChangeEvent } from "react";
+import { IFormFieldGlobalProps } from "../../types";
+
+export interface IInputFieldProps extends IFormFieldGlobalProps {
+  nameEnd: string;
+  [key: string]: any;
+}
+
+export default function DateRangeField({
+  label,
+  name,
+  nameEnd,
+  value,
+  description,
+  required,
+  onInputChange,
+  placeholder,
+  className,
+  register,
+  disabled,
+  errors = {},
+  rounded = true,
+  ...rest
+}: IInputFieldProps) {
+  // Utility function to create a mock ChangeEvent
+  const createMockChangeEvent = (
+    name: string,
+    value: any
+  ): ChangeEvent<any> => {
+    return {
+      target: { name, value },
+      currentTarget: { name, value },
+      preventDefault: () => {},
+      stopPropagation: () => {},
+      nativeEvent: new Event("change"),
+      bubbles: true,
+      cancelable: true,
+      defaultPrevented: false,
+      eventPhase: 0,
+      isTrusted: true,
+      timeStamp: Date.now(),
+      type: "change",
+      persist: () => {},
+    } as ChangeEvent<any>;
+  };
+  const handleValueChange = (newValue: any) => {
+    console.log("newValue:", newValue);
+
+    const startEvent = createMockChangeEvent(name, newValue.startDate);
+    const endEvent = createMockChangeEvent(nameEnd, newValue.endDate);
+
+    onInputChange(startEvent);
+    onInputChange(endEvent);
+  };
+
+  return (
+    <>
+      <div
+        className={
+          "min-h-30 flex-col justify-start items-start gap-1.5  w-full relative min-w-[180px] " +
+          className
+        }
+      >
+        <div className="self-stretch flex-col justify-start items-start gap-1.5 flex ">
+          {label && (
+            <div className="text-slate-700 text-sm font-medium  leading-tight">
+              {label} {required ? "*" : ""}
+            </div>
+          )}
+          <Datepicker
+            inputId={name}
+            primaryColor={"indigo"}
+            placeholder={placeholder}
+            startFrom={value?.startDate ? new Date(value.startDate) : undefined}
+            disabled={disabled}
+            startWeekOn="mon"
+            i18n={"cs"}
+            value={value}
+            onChange={handleValueChange}
+            popoverDirection={"down"}
+            displayFormat={"DD.MM.YYYY"}
+            inputClassName={(className) => {
+              return (
+                className +
+                `  focus:!ring-indigo-200 focus:!border-indigo-300  focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? " rounded-lg " : " !rounded-none "}`
+              );
+            }}
+            containerClassName={(className) => {
+              return className + " ";
+            }}
+            separator={"-"}
+            toggleClassName="absolute rounded-r-lg right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-80 disabled:cursor-not-allowed text-gray-900"
+            {...rest}
+          />
+        </div>
+        {description && (
+          <div
+            className="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>
+    </>
+  );
+}

package/lib/components/form/FileInput.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { handleErrors, useFederationContext } from "../../main";
+import { MdDeleteOutline, MdInsertDriveFile } from "react-icons/md";
+
+export interface FileData {
+  id: number;
+  mimeType: string;
+  size: number;
+  filename: string;
+  createdByEmpId: string;
+  created: string;
+}
+
+interface FileInputProps {
+  name: string;
+  label?: string;
+  initialFile?: FileData;
+  onFileChanged: (e: any) => void;
+  required?: boolean;
+  description?: string;
+  disabled?: boolean;
+  errors?: { [key: string]: { message: string } };
+}
+
+const FileInput: React.FC<FileInputProps> = ({
+  initialFile,
+  onFileChanged,
+  label,
+  name,
+  required,
+  description,
+  disabled,
+  errors = {},
+}) => {
+  const [fileData, setFileData] = useState<FileData | null>(
+    initialFile || null
+  );
+  const [isFocused, setIsFocused] = useState(false);
+
+  const federationContext = useFederationContext();
+  useEffect(() => {
+    if (initialFile) {
+      setFileData(initialFile);
+      onFileChanged({ target: { name, value: initialFile.id.toString() } });
+    }
+  }, [initialFile, onFileChanged, name]);
+
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      if (acceptedFiles.length > 0) {
+        const file = acceptedFiles[0];
+        const formData = new FormData();
+        formData.append("file", file);
+
+        federationContext.apiClient
+          .post<FileData>("/files/upload", formData, {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          })
+          .then((response) => {
+            setFileData(response.data);
+            onFileChanged({
+              target: { name, value: response.data.id.toString() },
+            });
+            setIsFocused(false);
+          })
+          .catch((error) => {
+            handleErrors(error, federationContext.emitter);
+            console.error("There was an error!", error);
+          });
+      }
+    },
+    [
+      federationContext.apiClient,
+      onFileChanged,
+      name,
+      federationContext.emitter,
+    ]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    disabled,
+    multiple: false,
+  });
+
+  const handleRemove = () => {
+    setFileData(null);
+    onFileChanged({ target: { name, value: 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 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-transparent"}`
+          }
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        >
+          <div className="flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-2 max-w-full ">
+            {!fileData ? (
+              <div
+                {...getRootProps()}
+                className={`w-full p-4 border-dashed border-2 rounded-lg text-center ${
+                  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 soubor"
+                    : "Klikněte pro nahrání, nebo nahrajte přetažením souboru"}
+                </p>
+              </div>
+            ) : (
+              <div className="w-full flex items-center justify-between p-2">
+                <div className=" flex">
+                  <MdInsertDriveFile style={{ fontSize: "2rem" }} />
+                  <a
+                    href={`/api/files/download/${fileData.id}`}
+                    className="pl-2 text-left underline text-primary"
+                    target="_blank"
+                  >
+                    {fileData.filename}
+                  </a>
+                </div>
+                {!disabled && (
+                  <div
+                    onClick={handleRemove}
+                    className="text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4"
+                  >
+                    <MdDeleteOutline
+                      style={{ fontSize: "1.5rem", margin: "15px" }}
+                    />
+                  </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 FileInput;