@addsign/moje-agenda-shared-lib 2.0.40 → 2.0.42

package/lib/components/datatable/DataTableServer.tsx

@@ -13,7 +13,6 @@ import {
   DateRangeField,
   FormField,
   IOptionItem,
-  IPageable,
   Spinner,
   handleErrors,
   useFederationContext,
@@ -32,6 +31,7 @@ import SelectField from "../form/SelectField";
 import InputField from "../form/InputField";
 import { Resizable } from "./Resizable";
 import { DatatableSettings } from "./DatatableSettings";
+import { MultiSelect } from "../ui/multi-select";
 
 import * as XLSX from "xlsx";
 
@@ -85,6 +85,20 @@ export const resetAllDataTablePaging = () => {
       }
     });
 };
+
+interface IPageable<T> {
+  content: T[];
+  empty: boolean;
+  first: boolean;
+  last: boolean;
+  number: number;
+  numberOfElements: number;
+  size: number;
+  totalElements: number;
+  totalPages: number;
+  isPageable?: boolean;
+}
+
 function DataTableServer<T extends DataTableInternalItems>({
   id,
   url,
@@ -123,16 +137,18 @@ function DataTableServer<T extends DataTableInternalItems>({
     response: any,
     itemsPerPage: number
   ): IPageable<T> => {
+    const isPageable = !!response.data?.content;
     return {
       content: response.data.content || response.data,
-      empty: response.data?.content ? response.data.empty : true,
-      first: response.data?.content ? response.data.first : true,
-      last: response.data?.content ? response.data.last : true,
-      number: response.data?.content ? response.data.number : 0,
+      empty: isPageable ? response.data.empty : true,
+      first: isPageable ? response.data.first : true,
+      last: isPageable ? response.data.last : true,
+      number: isPageable ? response.data.number : 0,
       numberOfElements: response.data.numberOfElements || response.data.length,
       size: response.data?.size || itemsPerPage,
       totalElements: response.data?.totalElements || response.data.length,
       totalPages: response.data?.totalPages || 1,
+      isPageable: isPageable,
     };
   };
 
@@ -171,12 +187,24 @@ function DataTableServer<T extends DataTableInternalItems>({
       if (currentPage === undefined) return;
       setIsLoading(true);
 
-      //odebrani prazdny filteru
+      //odebrani prazdny filteru a transformace multi-select hodnot
       const filteredMergedFilters = Object.entries(mergedFilters).reduce(
         (acc: Record<string, any>, [key, value]) => {
-          if (value !== null && value !== "") {
-            acc[key] = value;
+          // Skip null and empty string values
+          if (value === null || value === "") {
+            return acc;
+          }
+
+          // Handle multi-select values (arrays)
+          if (Array.isArray(value)) {
+            if (value.length > 0) {
+              acc[key] = value.join(",");
+            }
+            return acc;
           }
+
+          // Handle other values
+          acc[key] = value;
           return acc;
         },
         {}
@@ -184,7 +212,7 @@ function DataTableServer<T extends DataTableInternalItems>({
 
       federationContext.apiClient
         .get(url, {
-          signal: currentAbortController.signal, // Pass the AbortController signal to the request
+          signal: currentAbortController.signal,
           params: {
             ...filteredMergedFilters,
             pageSize: itemsPerPageLocal,
@@ -267,7 +295,6 @@ function DataTableServer<T extends DataTableInternalItems>({
   useEffect(() => {
     const fetchFilterOptions = async (column: DataTableColumn<T>) => {
       if (column.filterOptions) {
-        // if filterOptions is provided, use it directly
         return column.filterOptions;
       } else if (column.filterSource) {
         try {
@@ -288,12 +315,14 @@ function DataTableServer<T extends DataTableInternalItems>({
         return [];
       }
     };
+
     const updateFilterOptions = async () => {
       const newFilterOptions: Record<string, any[]> = {};
 
       for (const column of columns) {
         if (
-          column.filterType === "select" &&
+          (column.filterType === "select" ||
+            column.filterType === "multi-select") &&
           (column.filterSource || column.filterOptions) &&
           column.filterValueKey &&
           column.filterLabelKey &&
@@ -301,11 +330,13 @@ function DataTableServer<T extends DataTableInternalItems>({
         ) {
           const options = await fetchFilterOptions(column);
 
-          if (options) {
+          if (options && column.filterType === "select") {
             newFilterOptions[column.filterParam as string] = [
               { value: "", label: "" },
               ...options,
             ];
+          } else if (options && column.filterType === "multi-select") {
+            newFilterOptions[column.filterParam as string] = options;
           }
         }
       }
@@ -413,7 +444,7 @@ function DataTableServer<T extends DataTableInternalItems>({
   // Pagination display logic
   const paginationDisplay = `Strana ${(currentPage || 0) + 1} z ${data?.totalPages || 1}`;
 
-  const filterHandler = (filterParam: keyof T, value: string) => {
+  const filterHandler = (filterParam: keyof T, value: string | string[]) => {
     setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));
     setCurrentPage(0);
   };
@@ -723,7 +754,6 @@ function DataTableServer<T extends DataTableInternalItems>({
                             >
                               {filterType === "select" ? (
                                 <SelectField
-                                  //  label={header}
                                   key={JSON.stringify(mergedFilters)}
                                   name={String(key) + "_filter"}
                                   onInputChange={(e) =>
@@ -740,16 +770,37 @@ function DataTableServer<T extends DataTableInternalItems>({
                                     mergedFilters?.[String(filterParam)] ?? ""
                                   }
                                   clearable
-                                  className=" px-0"
+                                  className="px-0"
                                   placeholder={"Zadejte filtr"}
                                   rounded={true}
                                   disabled={Object.keys(
                                     (filters as object) || {}
                                   ).includes(String(filterParam))}
                                 />
+                              ) : filterType === "multi-select" ? (
+                                <MultiSelect
+                                  key={JSON.stringify(mergedFilters)}
+                                  options={
+                                    filterOptions[String(filterParam)] || []
+                                  }
+                                  onChange={(values) =>
+                                    filterHandler(
+                                      filterParam as keyof T,
+                                      values
+                                    )
+                                  }
+                                  value={
+                                    mergedFilters?.[String(filterParam)] || []
+                                  }
+                                  placeholder={"Zadejte filtr"}
+                                  className="px-0"
+                                  disabled={Object.keys(
+                                    (filters as object) || {}
+                                  ).includes(String(filterParam))}
+                                  variant="secondary"
+                                />
                               ) : filterType === "dateRange" ? (
                                 <DateRangeField
-                                  //    label={header}
                                   key={JSON.stringify(mergedFilters)}
                                   name={String(filterParam)}
                                   nameEnd={String(filterParam2)}
@@ -778,7 +829,6 @@ function DataTableServer<T extends DataTableInternalItems>({
                                 />
                               ) : filterType === "date" ? (
                                 <DateField
-                                  //    label={header}
                                   key={JSON.stringify(mergedFilters)}
                                   name={String(filterParam)}
                                   onInputChange={(e) =>
@@ -801,7 +851,6 @@ function DataTableServer<T extends DataTableInternalItems>({
                                 />
                               ) : filterType === "text" ? (
                                 <InputField
-                                  //    label={header}
                                   key={filterParam}
                                   name={String(key) + "_filter"}
                                   onInputChange={(e) =>
@@ -867,7 +916,7 @@ function DataTableServer<T extends DataTableInternalItems>({
                           }
                           className={`px-3 py-2 ${rowAction ? "cursor-pointer" : ""}  ${
                             colIndex === 0
-                              ? "font-medium text-gray-900"
+                              ? "font-medium text-muted-foreground"
                               : "text-gray-700"
                           } ${classes || ""}`}
                         >
@@ -883,7 +932,7 @@ function DataTableServer<T extends DataTableInternalItems>({
                               .map((action, actionIndex) => (
                                 <div
                                   key={`${rowIndex}-${colIndex}-${actionIndex}`}
-                                  className="flex inline-flex align-middle"
+                                  className="inline-flex align-middle"
                                 >
                                   {action.icon && (
                                     <Button
@@ -947,45 +996,51 @@ function DataTableServer<T extends DataTableInternalItems>({
             )}
           </table>
         </div>
-        <div className="w-full p-5 flex gap-5 justify-between md:flex-row flex-col">
-          <div className="flex gap-5  text-sm ">
-            {data && (
-              <Button
-                variant="secondary"
-                onClick={prevPage}
-                className="flex items-center"
-                disabled={data.first || isLoading}
-              >
-                <MdArrowBack className="mr-1.5" /> Předchozí
-              </Button>
-            )}
-            {data && (
-              <Button
-                variant="secondary"
-                onClick={nextPage}
-                className="flex items-center"
-                disabled={data.last || isLoading}
-              >
-                Následující <MdArrowForward className="ml-2" size={20} />
-              </Button>
-            )}
-          </div>
-          <div className="flex items-center justify-center  text-gray-800">
-            {paginationDisplay}
-          </div>
-          <div className="content-center w-auto items-center justify-end flex-row gap-5 flex md:mt-0 mt-5">
-            <span className=" whitespace-nowrap flex-grow">
-              Počet řádků na stránku:
-            </span>
-            <SelectField
-              name="itemsPerPage"
-              onInputChange={handleItemsPerPageChange}
-              className="!w-[100px]"
-              options={itemsPerPageOptions || defaultItemsPerPageOptions}
-              value={itemsPerPageLocal}
-            />
+
+        {data?.isPageable && (
+          <div
+            data-cy="pagination"
+            className="w-full p-5 flex gap-5 justify-between md:flex-row flex-col"
+          >
+            <div className="flex gap-5  text-sm ">
+              {data && (
+                <Button
+                  variant="secondary"
+                  onClick={prevPage}
+                  className="flex items-center"
+                  disabled={data.first || isLoading}
+                >
+                  <MdArrowBack className="mr-1.5" /> Předchozí
+                </Button>
+              )}
+              {data && (
+                <Button
+                  variant="secondary"
+                  onClick={nextPage}
+                  className="flex items-center"
+                  disabled={data.last || isLoading}
+                >
+                  Následující <MdArrowForward className="ml-2" size={20} />
+                </Button>
+              )}
+            </div>
+            <div className="flex items-center justify-center  text-gray-800">
+              {paginationDisplay}
+            </div>
+            <div className="content-center w-auto items-center justify-end flex-row gap-5 flex md:mt-0 mt-5">
+              <span className=" whitespace-nowrap flex-grow">
+                Počet řádků na stránku:
+              </span>
+              <SelectField
+                name="itemsPerPage"
+                onInputChange={handleItemsPerPageChange}
+                className="!w-[100px]"
+                options={itemsPerPageOptions || defaultItemsPerPageOptions}
+                value={itemsPerPageLocal}
+              />
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </>
   );

package/lib/components/form/AutocompleteSearchBar.tsx

@@ -401,19 +401,19 @@ const SearchInput: React.FC<SearchInputProps> = ({
       )}
       {isFocused && !isLoading && (
         <MdExpandLess
-          className="material-icons absolute right-0 cursor-pointer text-gray-900 lext-lg"
+          className="material-icons absolute right-0 cursor-pointer text-muted-foreground lext-lg"
           onClick={onBlur}
         />
       )}
       {!isFocused && !isLoading && (
         <MdExpandMore
-          className="material-icons absolute right-0 cursor-pointer text-gray-900 lext-lg"
+          className="material-icons absolute right-0 cursor-pointer text-muted-foreground lext-lg"
           onClick={handleExpandMoreClick}
         />
       )}
       {value && clearable && !isLoading && (
         <MdClose
-          className="material-icons absolute right-6 cursor-pointer text-gray-900 lext-lg"
+          className="material-icons absolute right-6 cursor-pointer text-muted-foreground lext-lg"
           onClick={handleClearQuery}
         />
       )}

package/lib/components/form/DateRangeField.tsx

@@ -83,14 +83,14 @@ export default function DateRangeField({
             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 "} outline-none shadow-none `
+                `  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 "} outline-none shadow-none  placeholder-muted-foreground`
               );
             }}
             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"
+            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-muted-foreground"
             {...rest}
           />
         </div>

package/lib/components/form/FormField.tsx

@@ -150,7 +150,7 @@ const FormField: React.FC<FormFieldProps> = ({
           <>
             <select
               id={name}
-              className="grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full"
+              className="grow shrink basis-0 text-muted-foreground 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
@@ -185,7 +185,7 @@ const FormField: React.FC<FormFieldProps> = ({
             <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 "
+              className="grow shrink basis-0 text-muted-foreground 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}
@@ -226,7 +226,7 @@ const FormField: React.FC<FormFieldProps> = ({
                   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">
+                <span className="text-muted-foreground text-sm font-normal leading-tight">
                   {option.label}
                 </span>
               </label>
@@ -237,7 +237,7 @@ const FormField: React.FC<FormFieldProps> = ({
         return (
           <textarea
             id={name}
-            className="grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none  "
+            className="grow shrink basis-0 text-muted-foreground text-sm font-normal leading-tight focus:border-none  "
             disabled={disabled}
             value={value}
             rows={3}
@@ -259,7 +259,7 @@ const FormField: React.FC<FormFieldProps> = ({
             <input
               type="checkbox"
               id={name}
-              className="shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none"
+              className="shrink basis-0 text-muted-foreground text-sm font-normal leading-tight focus:border-none"
               checked={value}
               disabled={disabled}
               {...rest} // Spread the rest of register's return value
@@ -279,7 +279,7 @@ const FormField: React.FC<FormFieldProps> = ({
         return (
           <>
             <input
-              className="grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full"
+              className="grow shrink basis-0 text-muted-foreground text-sm font-normal leading-tight focus:border-none bg-transparent w-full"
               id={name}
               readOnly={disabled}
               value={value}

package/lib/components/form/InputField.tsx

@@ -114,7 +114,7 @@ export default function InputField({
           <textarea
             id={name}
             name={name}
-            className="grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none  outline-none shadow-none
+            className="grow shrink basis-0 text-muted-foreground text-sm font-normal leading-tight focus:border-none  outline-none shadow-none
             bg-white "
             disabled={disabled}
             value={inputValue}
@@ -137,7 +137,8 @@ export default function InputField({
         return (
           <>
             <input
-              className={`text-gray-900 text-sm font-normal leading-normal  outline-none shadow-none 
+              className={`text-muted-foreground text-sm font-normal leading-normal  outline-none shadow-none 
+                placeholder-muted-foreground
                 text-ellipsis overflow-hidden w-full disabled:cursor-not-allowed bg-white`}
               id={name}
               name={name}

package/lib/components/form/RadioGroup.tsx

@@ -43,7 +43,7 @@ export default function RadioGroup({
               onChange={onInputChange}
               className=" accent-primary border-gray-300  mr-2"
             />
-            <span className="text-gray-900 text-sm font-normal leading-tight">
+            <span className="text-muted-foreground text-sm font-normal leading-tight">
               {option.label}
             </span>
           </label>

package/lib/components/form/SelectField.tsx

@@ -133,7 +133,7 @@ export default function SelectField({
               >
                 <div className="grow shrink basis-0 px-1  py-2 rounded-md flex-col justify-start items-start gap-2 inline-flex">
                   <div className="self-stretch justify-start items-center gap-2 inline-flex">
-                    <div className="text-gray-900 text-sm font-normal  leading-normal">
+                    <div className="text-muted-foreground text-sm font-normal  leading-normal">
                       {option.label}
                     </div>
                     {option.description && (
@@ -199,12 +199,12 @@ export default function SelectField({
           >
             <div className="grow shrink basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ">
               <div
-                className="text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full"
+                className="text-muted-foreground text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full"
                 id={name}
               >
                 {currentlySelectedOption?.label}
                 {!currentlySelectedOption?.label && placeholder && (
-                  <span className="text-slate-400 font-normal">
+                  <span className="text-muted-foreground font-normal">
                     {" "}
                     {placeholder}
                   </span>

package/lib/components/layout/PageTitle.tsx

@@ -1,19 +1,19 @@
-interface IPageTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  textSize?: string;
-  children?: React.ReactNode;
-}
-
-export default function PageTitle({
-  children,
-  textSize = "text-2xl",
-  ...props
-}: IPageTitleProps) {
-  // Combine textSize with the other fixed class names
-  const className = ` text-gray-900 ${textSize} font-medium font-['Inter'] leading-7 mb-5`;
-
-  return (
-    <h1 {...props} className={className}>
-      {children}
-    </h1>
-  );
-}
+interface IPageTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  textSize?: string;
+  children?: React.ReactNode;
+}
+
+export default function PageTitle({
+  children,
+  textSize = "text-2xl",
+  ...props
+}: IPageTitleProps) {
+  // Combine textSize with the other fixed class names
+  const className = ` text-muted-foreground ${textSize} font-medium font-['Inter'] leading-7 mb-5`;
+
+  return (
+    <h1 {...props} className={className}>
+      {children}
+    </h1>
+  );
+}

package/lib/components/layout/SectionTitle.tsx

@@ -10,7 +10,7 @@ export default function SectionTitle({
   ...props
 }: ISectionTitleProps) {
   // Combine textSize with the other fixed class names
-  const className = ` text-gray-900 ${textSize} font-semibold font-['Inter'] leading-7 mb-3`;
+  const className = ` text-muted-foreground ${textSize} font-semibold font-['Inter'] leading-7 mb-3`;
 
   return (
     <div className="border-b border-gray-300 pt-2 mb-5  ">

package/lib/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../utils/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-normal transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };