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

package/lib/components/form/InputField.tsx

@@ -0,0 +1,230 @@
+import * as React from "react";
+import { IFormFieldGlobalProps } from "../../types";
+import { MdClose } from "react-icons/md";
+import { useClickAway } from "react-use";
+import { FaSpinner } from "react-icons/fa";
+import SpinnerIcon from "../SpinnerIcon";
+
+export interface IInputFieldProps extends IFormFieldGlobalProps {
+  maxLength?: number;
+  debounceTimeout?: number;
+  manualRef?: React.RefObject<HTMLInputElement>;
+  disableAutocomplete?: boolean;
+}
+
+export default function InputField({
+  label,
+  name,
+  value,
+  description,
+  onInputChange,
+  placeholder,
+  className,
+  register,
+  type,
+  disabled,
+  maxLength,
+  errors = {},
+  rounded = true,
+  debounceTimeout,
+  required,
+  onFocus = () => {},
+  onBlur = () => {},
+  children,
+  disableAutocomplete,
+}: IInputFieldProps) {
+  const wrapperRef = React.useRef(null);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState(value || ""); // Local state for input value
+  const debounceTimeoutRef = React.useRef<NodeJS.Timeout | null>(null); // Ref to hold the debounce timeout
+  const [inputIsChanging, setInputIsChanging] = React.useState(false);
+
+  React.useEffect(() => {
+    setInputValue(value || "");
+  }, [value]);
+  const handleClear = (e: any) => {
+    setInputValue(""); // Clear local state
+    onInputChange({
+      ...e,
+      target: {
+        value: "",
+        name: name,
+      },
+    });
+  };
+  const fallbackRef = React.useRef(null);
+  const {
+    ref: registeredRef = fallbackRef,
+    onBlur: formOnBlur = () => {} /* default function */,
+    ...rest
+  } = register ? register(name) : {};
+
+  const ref = registeredRef || fallbackRef;
+  const handleSetFocus = () => {
+    setIsFocused(true);
+    ref?.current?.focus();
+  };
+  useClickAway(wrapperRef, () => {
+    if (isFocused) {
+      setIsFocused(false);
+    }
+  });
+
+  const handleDebouncedChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const { value } = e.target;
+      setInputValue(value); // Update local state
+      setInputIsChanging(true);
+
+      if (debounceTimeout) {
+        // Clear any previous debounce timeout
+        if (debounceTimeoutRef.current)
+          clearTimeout(debounceTimeoutRef.current);
+
+        // Set a new debounce timeout
+        debounceTimeoutRef.current = setTimeout(() => {
+          onInputChange(e);
+          setInputIsChanging(false);
+        }, debounceTimeout);
+      } else {
+        onInputChange(e);
+        setInputIsChanging(false);
+      }
+    },
+    [debounceTimeout, debounceTimeoutRef, onInputChange, setInputValue]
+  );
+
+  const handleBlur = (
+    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    formOnBlur(e); // Call React Hook Form's onBlur
+    setIsFocused(false); // Then call your custom onBlur logic
+
+    if (debounceTimeoutRef.current && inputIsChanging) {
+      clearTimeout(debounceTimeoutRef.current);
+      onInputChange(e);
+      setInputIsChanging(false);
+    }
+  };
+
+  const renderInput = () => {
+    switch (type) {
+      case "textarea":
+        return (
+          <textarea
+            id={name}
+            name={name}
+            className="grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none 
+            bg-white "
+            disabled={disabled}
+            value={inputValue}
+            rows={3}
+            {...rest} // Spread the rest of register's return value
+            //     ref={ref}
+            onChange={(e) => handleDebouncedChange(e)}
+            onFocus={() => {
+              setIsFocused(true);
+              onFocus();
+            }}
+            onBlur={(e) => {
+              handleBlur(e);
+              onBlur();
+            }}
+            maxLength={maxLength || 4000}
+          />
+        );
+      default:
+        return (
+          <>
+            <input
+              className={`text-gray-900 text-sm font-normal leading-normal 
+                text-ellipsis overflow-hidden w-full disabled:cursor-not-allowed bg-white`}
+              id={name}
+              name={name}
+              disabled={disabled}
+              type={type}
+              {...rest}
+              //      ref={ref}
+              value={inputValue} // Controlled value
+              placeholder={placeholder}
+              onChange={(e) => handleDebouncedChange(e)}
+              onFocus={() => {
+                setIsFocused(true);
+                onFocus();
+              }}
+              onBlur={(e) => {
+                handleBlur(e);
+                onBlur();
+              }}
+              autoComplete={disableAutocomplete ? "off" : "on"}
+            />
+          </>
+        );
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={
+          "min-h-30 flex-col justify-start items-start gap-1.5  w-full relative " +
+          className
+        }
+        ref={wrapperRef}
+        id="component"
+      >
+        <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>
+          )}
+          <div
+            className={`self-stretch w-full pl-3 pr-2  py-1    border justify-between items-center gap-0 inline-flex outline-none  bg-white
+               ${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 " : ""}
+               ${rounded ? " rounded-lg " : " rounded-none "}
+               ${disabled ? " !opacity-80 cursor-not-allowed " : ""}`}
+            onClick={handleSetFocus}
+          >
+            <div className="flex-grow  basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ">
+              {renderInput()}
+            </div>
+            <div className="items-center content-center flex-shrink flex">
+              {inputIsChanging === true && (
+                <div className="w-6 h-6 relative flex  items-center justify-center align-middle">
+                  <SpinnerIcon icon={<FaSpinner />} />
+                </div>
+              )}
+              {value && !disabled && (
+                <div
+                  className="w-6 h-6 relative flex cursor-pointer items-center justify-center align-middle hover:bg-gray-100 rounded-full text-lg"
+                  onClick={handleClear}
+                  id={name + ":clear"}
+                >
+                  <MdClose />
+                </div>
+              )}
+              {children}
+            </div>
+          </div>
+        </div>
+        {description && !isFocused && (
+          <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 mt-1"
+            id={name + ":error"}
+          >
+            {errors[name]?.message}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/lib/components/form/PositionsSelectorSingle.tsx

@@ -0,0 +1,266 @@
+import { useEffect, useState } from "react";
+import {
+  AutocompleteSearchBar,
+  Button,
+  FormField,
+  IPositionEmployee,
+  SectionTitle,
+  getFullName,
+} from "../../main";
+import { AxiosResponse } from "axios";
+import { CiEdit } from "react-icons/ci";
+
+import { useFederationContext } from "../../main";
+import { MdCheck } from "react-icons/md";
+
+interface IPositionsSelectorSingleProps {
+  label: string;
+  name: string;
+  onInputChange: (e: any) => void;
+  initPositionEmployee?: IPositionEmployee;
+  disabled?: boolean;
+  initDepartmentId?: string;
+  placeholder?: string;
+}
+function PositionsSelectorSingle({
+  label,
+  name,
+  onInputChange,
+  initPositionEmployee,
+  disabled,
+  initDepartmentId,
+  placeholder,
+}: IPositionsSelectorSingleProps) {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [department, setDepartment] = useState("");
+  const [positions, setPositions] = useState<IPositionEmployee[]>([]); // State to hold the original data
+  const [selectedPositionEmployee, setSelectedPositionEmployee] =
+    useState<IPositionEmployee>(); // State to hold the original data
+  const [storedPositionEmployee, setStoredPositionEmployee] =
+    useState<IPositionEmployee>(); // State to hold the original data
+
+  const apiClient = useFederationContext()?.apiClient;
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setModalOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  useEffect(() => {
+    setSelectedPositionEmployee(initPositionEmployee);
+    setStoredPositionEmployee(initPositionEmployee);
+    setDepartment(department);
+  }, [initPositionEmployee, department]);
+
+  //If I will get init department ID and not init position employee, I will use the init department ID as a default departmen
+  useEffect(() => {
+    if (initDepartmentId && !initPositionEmployee) {
+      setDepartment(initDepartmentId);
+    }
+  }, [initDepartmentId, initPositionEmployee]);
+
+  const handleSave = (
+    selectedPositionEmployee: IPositionEmployee | undefined
+  ) => {
+    onInputChange({
+      target: { name: name, value: selectedPositionEmployee || null },
+    });
+
+    setStoredPositionEmployee(selectedPositionEmployee);
+    setModalOpen(false);
+  };
+
+  const handleSelectedPositionEmployee = (position: IPositionEmployee) => {
+    console.log(
+      "%csrcsharedPositionsSelectorSingle.tsx:54 position",
+      "color: #007acc;",
+      position,
+      selectedPositionEmployee,
+      position.id == selectedPositionEmployee?.id
+    );
+    if (
+      !selectedPositionEmployee ||
+      position.id !== selectedPositionEmployee?.id
+    ) {
+      setSelectedPositionEmployee(position);
+    } else {
+      setSelectedPositionEmployee(undefined);
+    }
+  };
+  const handleDepartmentChange = (e: any) => {
+    console.log("%csrcsharedTransferListModal.tsx:109 e", "color: #007acc;", e);
+    setDepartment(e);
+  };
+
+  useEffect(() => {
+    if (department && isModalOpen) {
+      apiClient
+        .get(
+          "os/positions/employees?maxResults=1000&departmentId=" + department
+        )
+        .then((response: AxiosResponse) => {
+          setPositions(response.data?.content);
+        })
+        .catch((error: any) => {
+          console.error(
+            "There was an error fetching positions/employees",
+            error
+          );
+        });
+    }
+  }, [apiClient, department, isModalOpen]);
+
+  return (
+    <>
+      <div className="">
+        <p className="text-slate-700 text-sm leading-tight font-medium mb-2">
+          {label}:
+        </p>
+        <div className="w-full flex gap-5  ">
+          <FormField
+            placeholder={placeholder || "Zatím není určen"}
+            name={name}
+            onInputChange={() => {}}
+            type="text"
+            disabled
+            value={
+              storedPositionEmployee?.employee
+                ? getFullName(storedPositionEmployee?.employee, true, false)
+                : ""
+            }
+          ></FormField>
+          <Button
+            className={"text-xl " + (disabled ? "hidden" : "")}
+            variant="primary"
+            onClick={() => setModalOpen(true)}
+            disabled={disabled}
+          >
+            <CiEdit></CiEdit>
+          </Button>
+        </div>
+      </div>
+      {isModalOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center p-5"
+          style={{ zIndex: 50 }}
+        >
+          <div
+            className="bg-white rounded-lg shadow-xl m-4 overflow-auto max-h-full pointer-events-auto  "
+            style={{ width: "50vw" }}
+          >
+            <div className="flex flex-col gap-4 p-5">
+              <div className="">
+                <SectionTitle>{label} - Výběr pozice</SectionTitle>{" "}
+              </div>
+              <div className="">
+                <AutocompleteSearchBar
+                  name="departmentId"
+                  placeholder="Vyhledejte útvar"
+                  fetchUrl="os/departments?pageSize=5000"
+                  valueKey="departmentId"
+                  labelKey="nameLong"
+                  label="Útvar"
+                  onChange={handleDepartmentChange}
+                  onBlur={() => {}}
+                  onFocus={() => {}}
+                  value={department}
+                  showId={true}
+                ></AutocompleteSearchBar>
+              </div>
+              <div className=" max-h-[400px] overflow-auto">
+                <div className="pt-4 w-full  grid grid-cols-2  gap-x-4">
+                  <div className="text-slate-700 text-sm leading-tight font-medium my-4 col-span-2">
+                    Nalezené pozice:
+                  </div>
+                  {positions.map((position) => (
+                    <div
+                      key={position.id}
+                      className={`group flex justify-between items-center py-2 cursor-pointer ${
+                        position.id == selectedPositionEmployee?.id
+                          ? " bg-gray-100 hover:bg-gray-200 "
+                          : "hover:bg-gray-50"
+                      }  `}
+                      onClick={() => handleSelectedPositionEmployee(position)}
+                    >
+                      <div className=" ">
+                        {getFullName(position.employee, true)}
+                      </div>
+                      <div
+                        className={`   group-hover:text-gray-300 px-3 ${
+                          position.id == selectedPositionEmployee?.id
+                            ? " text-blue-500  group-hover:text-black  "
+                            : "text-transparent"
+                        }`}
+                      >
+                        <MdCheck size={25} />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="flex justify-between gap-4">
+                <div className=" w-1/2 group flex ">
+                  <FormField
+                    placeholder="Zatím není určen"
+                    name={name}
+                    label="Zvolená pozice "
+                    onInputChange={() => {}}
+                    type="text"
+                    disabled
+                    value={
+                      selectedPositionEmployee
+                        ? getFullName(
+                            selectedPositionEmployee?.employee,
+                            true,
+                            false
+                          )
+                        : ""
+                    }
+                  ></FormField>
+                  {selectedPositionEmployee && (
+                    <div className="flex justify-end space-x-5 mt-auto ml-5">
+                      {" "}
+                      <Button
+                        variant="secondary"
+                        onClick={() =>
+                          handleSelectedPositionEmployee(
+                            selectedPositionEmployee
+                          )
+                        }
+                      >
+                        Odebrat přiřazení
+                      </Button>
+                    </div>
+                  )}
+                </div>
+                <div className="flex justify-end space-x-5 mt-auto ">
+                  <Button
+                    variant="secondary"
+                    onClick={() => setModalOpen(false)}
+                  >
+                    Zrušit
+                  </Button>
+                  <Button
+                    variant="primary"
+                    onClick={() => handleSave(selectedPositionEmployee)}
+                  >
+                    Uložit
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default PositionsSelectorSingle;

package/lib/components/form/RadioGroup.tsx

@@ -0,0 +1,64 @@
+import { IFormFieldGlobalProps, IOptionItem } from "../../types";
+
+export interface IRadioGroupProps extends IFormFieldGlobalProps {
+  options?: IOptionItem[];
+  valueKey?: string;
+  labelKey?: string;
+}
+
+export default function RadioGroup({
+  label,
+  name,
+  value,
+  description,
+  onInputChange,
+  options,
+  errors = {},
+  required,
+  disabled,
+  register = () => {},
+}: IRadioGroupProps) {
+  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 mb-2">
+        {label && (
+          <label
+            className="text-slate-700 text-sm leading-tight font-medium"
+            htmlFor={name}
+          >
+            {label} {required ? "*" : ""}
+          </label>
+        )}
+      </div>
+      <div className="flex flex-col gap-1">
+        {options?.map((option, index) => (
+          <label key={index} className="inline-flex items-center space-x-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>
+      {description && (
+        <div className="HintText self-stretch text-slate-600 text-sm font-normal leading-tight">
+          {description}
+        </div>
+      )}
+      {errors[name] && (
+        <div className="HintText self-stretch text-red-600 text-sm font-normal leading-tight">
+          {errors[name]?.message}
+        </div>
+      )}
+    </div>
+  );
+}