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

package/lib/components/datatable/DatatableSettings.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { MdRefresh } from "react-icons/md";
+import { PiFileXlsLight } from "react-icons/pi";
+import { TiArrowBackOutline } from "react-icons/ti";
+
+export interface IDatatableSettingsProps {
+  tableId: string; // id tabulky
+  onSuccess: () => void;
+  onExport: () => void;
+}
+
+export function DatatableSettings({
+  tableId,
+  onSuccess,
+  onExport,
+}: IDatatableSettingsProps) {
+  const refreshTable = React.useCallback(() => {
+    const storageKey = `datatable:${tableId}`;
+    localStorage.setItem(storageKey, "{}");
+    onSuccess();
+  }, [tableId]);
+
+  return (
+    <div className="flex items-center  gap-5 py-3">
+      <div
+        className=" text-xl h-full  cursor-pointer text-gray-600 hover:text-black"
+        title="Obnovit Data"
+        onClick={onSuccess}
+      >
+        <MdRefresh />
+      </div>
+      <div
+        className=" text-xl h-full  cursor-pointer text-gray-600 hover:text-black"
+        title="Obnovit výchozí nastavení tabulky"
+        onClick={() => refreshTable()}
+      >
+        <TiArrowBackOutline />
+      </div>
+      <div
+        className=" text-xl h-full  cursor-pointer text-gray-600 hover:text-black"
+        title="Stáhnout jako XLS soubor"
+        onClick={onExport}
+      >
+        <PiFileXlsLight />
+      </div>{" "}
+    </div>
+  );
+}

package/lib/components/datatable/Resizable.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+
+interface IResizableProps {
+  tableId: string;
+  colKey: string;
+  children: any;
+  defaultWidth: string;
+}
+
+export const Resizable = ({
+  tableId,
+  colKey,
+  defaultWidth,
+  children,
+}: IResizableProps) => {
+  const [node, setNode] = React.useState<HTMLElement | null>(null);
+
+  const [width, setWidth] = useState(() => {
+    const storageKey = `datatable:${tableId}`;
+    const storedData = localStorage.getItem(storageKey);
+    const data = storedData ? JSON.parse(storedData) : {};
+
+    const columnWidths = data.columnWidths || {};
+    const storedWidth = columnWidths[colKey];
+    return storedWidth ? storedWidth : defaultWidth;
+  });
+
+  //storing sizes
+  useEffect(() => {
+    const storageKey = `datatable:${tableId}`;
+    const storedData = localStorage.getItem(storageKey);
+    const data = storedData ? JSON.parse(storedData) : {};
+
+    data.columnWidths = data.columnWidths || {};
+    data.columnWidths[colKey] = width;
+
+    localStorage.setItem(storageKey, JSON.stringify(data));
+  }, [width, tableId, colKey, defaultWidth]);
+
+  const ref = React.useCallback((nodeEle: HTMLElement) => {
+    setNode(nodeEle);
+  }, []);
+
+  const handleMouseDown = React.useCallback(
+    (e: MouseEvent) => {
+      if (!node) {
+        return;
+      }
+
+      const parent = node.parentElement;
+      const startPos = {
+        x: e.clientX,
+        y: e.clientY,
+      };
+      //   const styles = window.getComputedStyle(parent);
+      const styles = parent ? window.getComputedStyle(parent) : null;
+
+      const w = parseInt(styles?.width || "0", 10);
+
+      const handleMouseMove = (e: MouseEvent) => {
+        const dx = e.clientX - startPos.x;
+        const newWidth = w + dx + "px";
+
+        parent?.style.setProperty("width", newWidth);
+        setWidth(newWidth);
+      };
+
+      const handleMouseUp = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [node]
+  );
+
+  React.useEffect(() => {
+    if (!node) {
+      return;
+    }
+
+    const parent = node.parentElement;
+    if (node.parentNode !== node.parentNode?.parentNode?.lastChild) {
+      parent?.style.setProperty("width", `${width}`);
+    } else {
+      parent?.style.setProperty("width", `auto`);
+    }
+
+    node.addEventListener("mousedown", handleMouseDown);
+
+    return () => {
+      node.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [node, handleMouseDown, tableId]);
+
+  return children({ ref });
+};

package/lib/components/datatable/types.ts

@@ -0,0 +1,33 @@
+import { IOptionItem } from "../../types";
+
+export interface DataTableColumn<T> {
+    key: keyof T | "actions";
+    header: string;
+    render?: (item: T) => React.ReactNode;
+    actions?: DataTableAction<T>[];
+    filterType?: string;
+    classes?: string;
+    type?: "string" | "number" | "date";
+    filterOperator?: ">=" | "<=" | "==";
+    filterSource?: string;
+    filterValueKey?: string;
+    filterLabelKey?: string;
+    filterParam?: string;
+    filterParam2?: string;
+    filterOptions?: IOptionItem[];
+    sortParam?: string;
+    sumarize?: boolean;
+    width?: string;
+}
+export interface DataTableAction<T> {
+    label: string;
+    rowAction?: boolean,
+    onClick: (item: T) => void;
+    visible?: (item: T) => boolean;
+    icon?: React.ReactNode;
+}
+
+export type DataTableInternalItems = {
+    _isHighlighted?: boolean;
+};
+

package/lib/components/form/AutocompleteSearchBar.tsx

@@ -0,0 +1,424 @@
+import { useState, useEffect, useRef } from "react";
+import { useClickAway } from "react-use";
+import { IOptionItem, useFederationContext } from "../../main";
+import { MdClose, MdExpandLess, MdExpandMore } from "react-icons/md";
+
+interface OptionListProps {
+  options: IOptionItem[];
+  selectedOptionIndex: number;
+  handleOptionClick: (option: IOptionItem) => void;
+  label?: string;
+}
+
+interface SearchInputProps {
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onFocus: () => void;
+  clearQuery: () => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+  placeholder?: string;
+  isFocused?: boolean;
+  onBlur: () => void;
+  isLoading?: boolean;
+  clearable?: boolean;
+}
+
+const AutocompleteSearchBar: React.FC<{
+  label: string;
+  name: string;
+  required?: boolean;
+  disabled?: boolean;
+  description?: string;
+  fetchUrl?: string;
+  valueKey: string;
+  labelKey: string;
+  onChange: (value: any) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+  placeholder?: string;
+  serverSearch?: boolean;
+  value?: string;
+  initOptions?: IOptionItem[];
+  showId?: boolean;
+  clearable?: boolean;
+  rounded?: boolean;
+}> = ({
+  label,
+  name,
+  required,
+  disabled,
+  description,
+  fetchUrl,
+  valueKey,
+  labelKey,
+  onChange,
+  onFocus,
+  onBlur,
+  placeholder,
+  serverSearch = false,
+  value,
+  initOptions,
+  showId,
+  clearable = true,
+  rounded = true,
+}) => {
+  const [query, setQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] = useState<IOptionItem[]>([]);
+  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 [errors] = useState<any>({});
+
+  useEffect(() => {
+    const fetchOptions = async () => {
+      setLoading(true);
+
+      const { data } = await federationContext.apiClient.get(fetchUrl || "");
+      // osetreni obou variant navratu  z BE
+      const tmpData = data.content || data;
+
+      setOptions(
+        tmpData.map((item: any) => ({
+          value: item[valueKey],
+          label: item[labelKey] + (showId ? " (" + item[valueKey] + ")" : ""),
+        }))
+      ); // Adjust map according to actual API response
+      setLoading(false);
+    };
+
+    if (fetchUrl) fetchOptions();
+  }, [fetchUrl, labelKey, showId, valueKey, federationContext.apiClient]);
+
+  useEffect(() => {
+    if (initOptions) setOptions(initOptions);
+  }, [initOptions]);
+
+  useEffect(() => {
+    if (value && options) {
+      const initOption = options.find((it) => it.value == value);
+
+      if (initOption) {
+        setQuery(initOption.label);
+        setSelectedOption(initOption);
+      }
+    }
+  }, [value, options]);
+
+  useEffect(() => {
+    if (!value) {
+      setQuery("");
+      setSelectedOption(null);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const fetchOptions = async () => {
+      setLoading(true);
+      const { data } = await federationContext.apiClient.get(fetchUrl + query);
+      setOptions(
+        data.map((item: any) => ({
+          value: item[valueKey],
+          label: item[labelKey] + (showId ? " (" + item[valueKey] + ")" : ""),
+        }))
+      ); // Adjust map according to actual API response
+      setSearchResults(
+        data.map((item: any) => ({
+          value: item[valueKey],
+          label: item[labelKey] + (showId ? " (" + item[valueKey] + ")" : ""),
+        }))
+      ); // Adjust map according to actual API response
+
+      setLoading(false);
+    };
+
+    if (serverSearch) fetchOptions();
+  }, [
+    query,
+    serverSearch,
+    valueKey,
+    labelKey,
+    fetchUrl,
+    federationContext.apiClient,
+    showId,
+  ]);
+
+  useClickAway(ref, () => {
+    if (isFocused) {
+      setSearchResults([]);
+      if (!selectedOption) {
+        setQuery("");
+        onChange(null);
+      }
+
+      handleBlur();
+      onBlur();
+      setIsFocused(false);
+    }
+  });
+
+  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+    setSelectedOption(null);
+    setSelectedOptionIndex(-1);
+    setSearchResults(
+      options.filter((option) =>
+        option?.label
+          ?.toLowerCase()
+          .includes(event.target?.value?.toLowerCase())
+      )
+    );
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus();
+    setSearchResults(
+      options /*.filter((option) =>
+        option.label.toLowerCase().includes(query.toLowerCase()),
+      ),*/
+    );
+    inputRef.current?.select(); // Add this line
+  };
+
+  const handleClearQuery = () => {
+    setQuery("");
+    onChange(null);
+    setSelectedOption(null);
+    setTimeout(() => {
+      setSelectedOptionIndex(-1);
+      setSearchResults(options);
+    }, 1000);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "ArrowUp" && searchResults.length > 0) {
+      setSelectedOptionIndex((prevIndex) =>
+        prevIndex > 0 ? prevIndex - 1 : searchResults.length - 1
+      );
+    } else if (event.key === "ArrowDown" && searchResults.length > 0) {
+      setSelectedOptionIndex((prevIndex) =>
+        prevIndex < searchResults.length - 1 ? prevIndex + 1 : 0
+      );
+    } else if (event.key === "Enter" && selectedOptionIndex !== -1) {
+      handleOptionClick(searchResults[selectedOptionIndex]);
+    } else if (event.key === "Escape" && selectedOptionIndex !== -1) {
+      handleBlur();
+    }
+  };
+
+  const handleOptionClick = (option: IOptionItem) => {
+    setQuery(option.label);
+    setSelectedOption(option);
+    setSelectedOptionIndex(-1);
+
+    onChange(option.value);
+
+    handleBlur();
+  };
+  const handleBlur = () => {
+    setSearchResults([]);
+    onBlur();
+    setIsFocused(false);
+  };
+
+  return (
+    <div className="w-full  flex-col justify-start items-start gap-1.5 inline-flex">
+      <div
+        className="self-stretch  flex-col justify-start items-start gap-1.5 flex relative"
+        ref={ref}
+      >
+        {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.5 justify-start items-center gap-2 inline-flex outline-none border  bg-white
+            ${
+              isFocused
+                ? "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"}
+            ${rounded ? " rounded-lg " : " rounded-none "}`}
+        >
+          <div className="Content grow shrink basis-0 min-h-5 lg:min-h-7 justify-start items-start gap-2 flex relative  flex-col w-full  mx-auto">
+            <SearchInput
+              value={query}
+              onChange={handleQueryChange}
+              onKeyDown={handleKeyDown}
+              onFocus={handleFocus} // Pass the onFocus handler
+              clearQuery={handleClearQuery} // Pass the onFocus handler
+              inputRef={inputRef}
+              placeholder={placeholder}
+              isFocused={isFocused}
+              onBlur={handleBlur}
+              isLoading={loading}
+              clearable={clearable}
+            />
+          </div>
+        </div>
+        {searchResults.length > 0 && isFocused && (
+          <OptionList
+            options={searchResults}
+            selectedOptionIndex={selectedOptionIndex}
+            handleOptionClick={handleOptionClick}
+            label={label}
+          />
+        )}
+      </div>
+      {description && (
+        <div className="HintText self-stretch text-slate-600 text-sm font-normal leading-tight">
+          {description}
+        </div>
+      )}
+    </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]);
+
+  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={() => handleOptionClick(option)}
+        >
+          <p className="font-normal">{option.label}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const SearchInput: React.FC<SearchInputProps> = ({
+  value,
+  onChange,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  inputRef,
+  placeholder,
+  clearQuery,
+  isFocused,
+  isLoading,
+  clearable = true,
+}) => {
+  const handleExpandMoreClick = () => {
+    inputRef.current?.focus();
+    onFocus();
+  };
+
+  const handleClearQuery = () => {
+    clearQuery();
+  };
+
+  return (
+    <div className="relative flex items-center w-full sharedResource text-sm bg-white">
+      <input
+        type="text"
+        className={`pl-1 py-1 border-gray-800  bg-white  w-full ${
+          isLoading ? "pr-10 " : "pr-20"
+        }`}
+        value={value}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        onFocus={onFocus}
+        ref={inputRef}
+        placeholder={placeholder}
+        disabled={isLoading}
+      />
+      {isLoading && (
+        <div className="loader absolute right-0 text-gray-500">
+          {/* You can replace this div with an SVG or another icon of your choice */}
+          <svg
+            className="animate-spin h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+            />
+          </svg>
+        </div>
+      )}
+      {isFocused && !isLoading && (
+        <MdExpandLess
+          className="material-icons absolute right-0 cursor-pointer text-gray-900 lext-lg"
+          onClick={onBlur}
+        />
+      )}
+      {!isFocused && !isLoading && (
+        <MdExpandMore
+          className="material-icons absolute right-0 cursor-pointer text-gray-900 lext-lg"
+          onClick={handleExpandMoreClick}
+        />
+      )}
+      {value && clearable && !isLoading && (
+        <MdClose
+          className="material-icons absolute right-6 cursor-pointer text-gray-900 lext-lg"
+          onClick={handleClearQuery}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AutocompleteSearchBar;