@addsign/moje-agenda-shared-lib 1.0.8 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -216,7 +216,7 @@ function DataTable({
|
|
|
216
216
|
/* @__PURE__ */ jsx("tr", { children: columns.map(({ key, header, actions }) => /* @__PURE__ */ jsx(
|
|
217
217
|
"th",
|
|
218
218
|
{
|
|
219
|
-
className: `group font-medium cursor-pointer leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${!title && !subtitle ? "border-t-0" : ""}`,
|
|
219
|
+
className: `group font-medium cursor-pointer !leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${!title && !subtitle ? "border-t-0" : ""}`,
|
|
220
220
|
onClick: () => requestSort(key),
|
|
221
221
|
children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
|
|
222
222
|
header,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sources":["../../../lib/components/datatable/DataTable.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport { Button, FormField, Spinner } from \"../../main\";\r\nimport {\r\n MdArrowBack,\r\n MdArrowDownward,\r\n MdArrowForward,\r\n MdArrowUpward,\r\n MdClose,\r\n MdOutlineFilterAlt,\r\n MdOutlineFilterAltOff,\r\n MdSearch,\r\n} from \"react-icons/md\";\r\n\r\nexport interface DataTableColumn<T> {\r\n key: keyof T | \"actions\";\r\n header: string;\r\n render?: (item: T) => React.ReactNode;\r\n actions?: DataTableAction<T>[];\r\n filterType?: string;\r\n classes?: string;\r\n type?: \"string\" | \"number\" | \"date\";\r\n filterOperator?: \">=\" | \"<=\" | \"==\";\r\n}\r\nexport interface DataTableAction<T> {\r\n label: string;\r\n onClick: (item: T) => void;\r\n visible?: (item: T) => boolean;\r\n icon?: React.ReactNode;\r\n}\r\ninterface DataTableProps<T> {\r\n items: T[];\r\n columns: DataTableColumn<T | \"actions\">[];\r\n itemsPerPage?: number;\r\n title?: string;\r\n subtitle?: string;\r\n allowSearch?: boolean;\r\n isLoading?: boolean;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n _isHighlighted?: boolean;\r\n};\r\n\r\nfunction DataTable<T extends DataTableInternalItems>({\r\n items,\r\n columns,\r\n itemsPerPage = 10,\r\n title,\r\n subtitle,\r\n allowSearch = true,\r\n isLoading,\r\n}: DataTableProps<T>) {\r\n const [currentPage, setCurrentPage] = useState(0);\r\n const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n {}\r\n );\r\n\r\n const [showColFilters, setShowColFilters] = useState(false);\r\n\r\n const [sortConfig, setSortConfig] = useState<{\r\n key: keyof T | \"actions\";\r\n direction: \"ascending\" | \"descending\" | null;\r\n } | null>(null);\r\n\r\n useEffect(() => {\r\n const newFilterOptions: Record<string, any[]> = {};\r\n\r\n columns.forEach((column) => {\r\n if (column.filterType && items.length > 0) {\r\n const uniqueOptions = new Set(\r\n items.map((item) => item[column.key as keyof T])\r\n );\r\n // Convert Set to an array of { value, label } objects\r\n let sortedOptions = Array.from(uniqueOptions).map((option) => ({\r\n value: option,\r\n label:\r\n column.type === \"date\"\r\n ? new Date(option as string)?.toLocaleDateString()\r\n : option,\r\n }));\r\n\r\n // Sort the options array by label in ascending alphabetical order\r\n if (column.type === \"date\") {\r\n // Convert labels to timestamps and sort accordingly\r\n sortedOptions = sortedOptions.sort((a, b) => {\r\n const timestampA = new Date(a.value as string).getTime();\r\n const timestampB = new Date(b.value as string).getTime();\r\n return timestampA - timestampB;\r\n });\r\n } else {\r\n // Sort alphabetically by label for non-date columns\r\n sortedOptions = sortedOptions.sort((a, b) =>\r\n (a.label as string)?.localeCompare(b.label as string)\r\n );\r\n }\r\n\r\n // Add a default option if needed\r\n newFilterOptions[column.key as string] = [\r\n { value: \"\", label: \"\" },\r\n ...sortedOptions,\r\n ];\r\n }\r\n });\r\n\r\n setFilterOptions(newFilterOptions);\r\n }, [items, columns]);\r\n\r\n const requestSort = (key: keyof T | \"actions\") => {\r\n if (sortConfig?.key === key && sortConfig.direction !== null) {\r\n setSortConfig({\r\n key,\r\n direction: sortConfig.direction === \"ascending\" ? \"descending\" : null,\r\n });\r\n } else {\r\n setSortConfig({ key, direction: \"ascending\" });\r\n }\r\n };\r\n\r\n const getSortIcon = (key: keyof T | \"actions\") => {\r\n if (sortConfig?.key === key) {\r\n return sortConfig.direction === \"ascending\" ? (\r\n <MdArrowUpward fontSize=\"small\" />\r\n ) : sortConfig.direction === \"descending\" ? (\r\n <MdArrowDownward fontSize=\"small\" />\r\n ) : (\r\n <MdArrowUpward\r\n fontSize=\"small\"\r\n className=\"text-gray-300 invisible group-hover:visible \"\r\n />\r\n );\r\n }\r\n return (\r\n <MdArrowUpward\r\n fontSize=\"small\"\r\n className=\"text-gray-300 invisible group-hover:visible \"\r\n />\r\n );\r\n };\r\n\r\n const sortedItems = sortConfig?.direction\r\n ? [...items].sort((a, b) => {\r\n const aValue = a[sortConfig.key as keyof T];\r\n const bValue = b[sortConfig.key as keyof T];\r\n\r\n // Check if values are Date objects\r\n if (aValue instanceof Date && bValue instanceof Date) {\r\n return sortConfig.direction === \"ascending\"\r\n ? aValue.getTime() - bValue.getTime()\r\n : bValue.getTime() - aValue.getTime();\r\n }\r\n if (typeof aValue === \"number\" && typeof bValue === \"number\") {\r\n return sortConfig.direction === \"ascending\"\r\n ? aValue - bValue\r\n : bValue - aValue;\r\n }\r\n return sortConfig.direction === \"ascending\"\r\n ? String(aValue).localeCompare(String(bValue))\r\n : String(bValue).localeCompare(String(aValue));\r\n })\r\n : items;\r\n\r\n // const searchableKeys = new Set(\r\n // columns.filter((col) => !col.actions).map((col) => col.key)\r\n // );\r\n\r\n const filteredItems = sortedItems.filter((item: any) => {\r\n const textSearchMatch = fulltextSearch\r\n ? columns.some((column) => {\r\n const value = item[column.key];\r\n return (\r\n (typeof value === \"string\" || typeof value === \"number\") &&\r\n value\r\n .toString()\r\n .toLowerCase()\r\n .includes(fulltextSearch.toLowerCase())\r\n );\r\n })\r\n : true;\r\n\r\n const columnFiltersMatch = columns.every((column) => {\r\n // debugger;\r\n const filterValue = columnFilters[column.key as string];\r\n if (!filterValue) return true; // Ignore filter if 'None' is selected\r\n\r\n const itemValue = item[column.key];\r\n if ((column.type || typeof itemValue) === \"string\") {\r\n if (column.filterOperator == \">=\") {\r\n return itemValue.toLowerCase() >= filterValue.toLowerCase();\r\n } else if (column.filterOperator == \"<=\") {\r\n return itemValue.toLowerCase() <= filterValue.toLowerCase();\r\n }\r\n if (column.filterType == \"text\") {\r\n return itemValue.toLowerCase().includes(filterValue.toLowerCase());\r\n } else {\r\n return itemValue.toLowerCase() == filterValue.toLowerCase();\r\n }\r\n } else {\r\n if (column.filterOperator == \">=\") {\r\n return itemValue >= filterValue;\r\n } else if (column.filterOperator == \"<=\") {\r\n return itemValue <= filterValue;\r\n } else {\r\n return itemValue == filterValue;\r\n }\r\n }\r\n });\r\n\r\n return textSearchMatch && columnFiltersMatch;\r\n });\r\n\r\n // Pagination logic\r\n const indexOfLastItem = (currentPage + 1) * itemsPerPage;\r\n const indexOfFirstItem = indexOfLastItem - itemsPerPage;\r\n const currentItems = filteredItems.slice(indexOfFirstItem, indexOfLastItem);\r\n\r\n const nextPage = () => {\r\n setCurrentPage(currentPage + 1);\r\n };\r\n\r\n const prevPage = () => {\r\n setCurrentPage(currentPage - 1);\r\n };\r\n const handleSearchChanged = (\r\n e: React.ChangeEvent<\r\n HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n >\r\n ) => {\r\n setFulltextSearch(e.target?.value);\r\n setCurrentPage(0);\r\n };\r\n\r\n const totalPages = Math.max(\r\n 1,\r\n Math.ceil(filteredItems.length / itemsPerPage)\r\n );\r\n\r\n // Pagination display logic\r\n const paginationDisplay = `Strana ${currentPage + 1} z ${totalPages}`;\r\n\r\n const filterHandler = (key: keyof T, value: string) => {\r\n setColumnFilters((prev) => ({ ...prev, [key]: value }));\r\n setCurrentPage(0);\r\n };\r\n\r\n if (isLoading) return <Spinner />;\r\n return (\r\n <>\r\n <div className=\"container shadow-lg border border-gray-200 rounded-xl overflow-hidden \">\r\n {(title || subtitle || allowSearch) && (\r\n <div className=\"p-5 leading-9 flex \">\r\n <div className=\"flex-grow\">\r\n {title && (\r\n <h1 className=\"font-semibold text-xl leading-[42px] \">\r\n {title}\r\n </h1>\r\n )}\r\n {subtitle && (\r\n <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n )}\r\n </div>\r\n <div\r\n className=\"flex items-center text-xl h-full p-3 mr-5 cursor-pointer text-gray-500 \"\r\n onClick={() => setShowColFilters(!showColFilters)}\r\n >\r\n {!showColFilters && <MdOutlineFilterAlt />}\r\n {showColFilters && <MdOutlineFilterAltOff />}\r\n </div>\r\n {allowSearch && (\r\n <div className=\"\">\r\n <FormField\r\n placeholder=\"Vyhledávání\"\r\n name=\"search\"\r\n onInputChange={handleSearchChanged}\r\n type=\"text\"\r\n value={fulltextSearch}\r\n >\r\n {\" \"}\r\n <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n {!fulltextSearch && <MdSearch></MdSearch>}\r\n {fulltextSearch && (\r\n <MdClose onClick={() => setFulltextSearch(\"\")}></MdClose>\r\n )}\r\n </div>\r\n </FormField>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full leading-normal\">\r\n <thead>\r\n {showColFilters &&\r\n columns.findIndex((it) => it.filterType) > -1 && (\r\n <tr>\r\n {columns.map(({ key, header, filterType }) => (\r\n <th\r\n key={String(key) + \"_filter\"}\r\n // className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n className={` font-medium cursor-pointer !leading-9 text-xs text-left pl-5 pb-5 text-gray-600 ${\r\n !title && !subtitle ? \"border-t-0\" : \"\"\r\n }`}\r\n >\r\n {filterType && (\r\n <FormField\r\n label={header}\r\n name={String(key) + \"_filter\"}\r\n onInputChange={(e) =>\r\n filterHandler(key as keyof T, e.target.value)\r\n }\r\n type={filterType}\r\n options={filterOptions[String(key)] || []}\r\n value={columnFilters[String(key)]}\r\n clearable\r\n ></FormField>\r\n )}\r\n </th>\r\n ))}\r\n </tr>\r\n )}\r\n <tr>\r\n {columns.map(({ key, header, actions }) => (\r\n <th\r\n key={String(key)}\r\n // className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n className={`group font-medium cursor-pointer leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${\r\n !title && !subtitle ? \"border-t-0\" : \"\"\r\n }`}\r\n onClick={() => requestSort(key)}\r\n >\r\n <span className=\"inline-flex items-center gap-2\">\r\n {header} {!actions ? getSortIcon(key) : \"\"}\r\n </span>\r\n </th>\r\n ))}\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n {currentItems.map((item, rowIndex) => (\r\n <tr\r\n key={rowIndex}\r\n className={`${\r\n item._isHighlighted ? \" bg-gray-200 \" : \" \"\r\n } hover:bg-gray-50 border-gray-200 border-b text-sm `}\r\n >\r\n {columns.map(({ render, actions, classes }, colIndex) => (\r\n <td\r\n key={`${rowIndex}-${colIndex}`}\r\n className={`px-5 py-2\r\n ${\r\n colIndex == 0\r\n ? \" font-medium text-gray-900\"\r\n : \" text-gray-700\"\r\n } ${classes}`}\r\n >\r\n {render ? render(item) : \"\"}\r\n {actions &&\r\n actions\r\n .filter((it) => {\r\n if (it.visible) {\r\n return it.visible(item);\r\n } else true;\r\n })\r\n .map((action, actionIndex) => (\r\n <div\r\n key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n className=\"inline-flex align-middle\"\r\n >\r\n {action.icon && (\r\n <Button\r\n variant=\"icon\"\r\n onClick={() => action.onClick(item)}\r\n >\r\n {\" \"}\r\n {action.icon}\r\n </Button>\r\n )}\r\n {!action.icon && (\r\n <Button\r\n variant=\"transparent\"\r\n onClick={() => action.onClick(item)}\r\n >\r\n {\" \"}\r\n {action.label}\r\n </Button>\r\n )}\r\n </div>\r\n ))}\r\n </td>\r\n ))}\r\n </tr>\r\n ))}\r\n {currentItems.length == 0 && (\r\n <tr key=\"tr-nodata \">\r\n <td\r\n key=\"td-nodata\"\r\n className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n colSpan={columns.length}\r\n >\r\n Žádná data\r\n </td>\r\n </tr>\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n <div className=\"w-full p-5 grid grid-cols-3\">\r\n <div className=\"text-left items-start justify-start\">\r\n {currentPage !== 0 && (\r\n <Button\r\n variant=\"secondary\"\r\n onClick={prevPage}\r\n className=\"flex items-center float-left\"\r\n >\r\n <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n </Button>\r\n )}\r\n </div>\r\n <div className=\" text-center text-xs text-gray-800\">\r\n {paginationDisplay} {/* Updated to use dynamic page numbers */}\r\n </div>\r\n <div className=\"text-right items-end justify-end\">\r\n {indexOfLastItem < filteredItems.length && (\r\n <Button\r\n variant=\"secondary\"\r\n onClick={nextPage}\r\n className=\"flex items-center float-right\"\r\n >\r\n Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n </Button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </>\r\n );\r\n}\r\n\r\nexport default DataTable;\r\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["../../../lib/components/datatable/DataTable.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport { Button, FormField, Spinner } from \"../../main\";\r\nimport {\r\n MdArrowBack,\r\n MdArrowDownward,\r\n MdArrowForward,\r\n MdArrowUpward,\r\n MdClose,\r\n MdOutlineFilterAlt,\r\n MdOutlineFilterAltOff,\r\n MdSearch,\r\n} from \"react-icons/md\";\r\n\r\nexport interface DataTableColumn<T> {\r\n key: keyof T | \"actions\";\r\n header: string;\r\n render?: (item: T) => React.ReactNode;\r\n actions?: DataTableAction<T>[];\r\n filterType?: string;\r\n classes?: string;\r\n type?: \"string\" | \"number\" | \"date\";\r\n filterOperator?: \">=\" | \"<=\" | \"==\";\r\n}\r\nexport interface DataTableAction<T> {\r\n label: string;\r\n onClick: (item: T) => void;\r\n visible?: (item: T) => boolean;\r\n icon?: React.ReactNode;\r\n}\r\ninterface DataTableProps<T> {\r\n items: T[];\r\n columns: DataTableColumn<T | \"actions\">[];\r\n itemsPerPage?: number;\r\n title?: string;\r\n subtitle?: string;\r\n allowSearch?: boolean;\r\n isLoading?: boolean;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n _isHighlighted?: boolean;\r\n};\r\n\r\nfunction DataTable<T extends DataTableInternalItems>({\r\n items,\r\n columns,\r\n itemsPerPage = 10,\r\n title,\r\n subtitle,\r\n allowSearch = true,\r\n isLoading,\r\n}: DataTableProps<T>) {\r\n const [currentPage, setCurrentPage] = useState(0);\r\n const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n {}\r\n );\r\n\r\n const [showColFilters, setShowColFilters] = useState(false);\r\n\r\n const [sortConfig, setSortConfig] = useState<{\r\n key: keyof T | \"actions\";\r\n direction: \"ascending\" | \"descending\" | null;\r\n } | null>(null);\r\n\r\n useEffect(() => {\r\n const newFilterOptions: Record<string, any[]> = {};\r\n\r\n columns.forEach((column) => {\r\n if (column.filterType && items.length > 0) {\r\n const uniqueOptions = new Set(\r\n items.map((item) => item[column.key as keyof T])\r\n );\r\n // Convert Set to an array of { value, label } objects\r\n let sortedOptions = Array.from(uniqueOptions).map((option) => ({\r\n value: option,\r\n label:\r\n column.type === \"date\"\r\n ? new Date(option as string)?.toLocaleDateString()\r\n : option,\r\n }));\r\n\r\n // Sort the options array by label in ascending alphabetical order\r\n if (column.type === \"date\") {\r\n // Convert labels to timestamps and sort accordingly\r\n sortedOptions = sortedOptions.sort((a, b) => {\r\n const timestampA = new Date(a.value as string).getTime();\r\n const timestampB = new Date(b.value as string).getTime();\r\n return timestampA - timestampB;\r\n });\r\n } else {\r\n // Sort alphabetically by label for non-date columns\r\n sortedOptions = sortedOptions.sort((a, b) =>\r\n (a.label as string)?.localeCompare(b.label as string)\r\n );\r\n }\r\n\r\n // Add a default option if needed\r\n newFilterOptions[column.key as string] = [\r\n { value: \"\", label: \"\" },\r\n ...sortedOptions,\r\n ];\r\n }\r\n });\r\n\r\n setFilterOptions(newFilterOptions);\r\n }, [items, columns]);\r\n\r\n const requestSort = (key: keyof T | \"actions\") => {\r\n if (sortConfig?.key === key && sortConfig.direction !== null) {\r\n setSortConfig({\r\n key,\r\n direction: sortConfig.direction === \"ascending\" ? \"descending\" : null,\r\n });\r\n } else {\r\n setSortConfig({ key, direction: \"ascending\" });\r\n }\r\n };\r\n\r\n const getSortIcon = (key: keyof T | \"actions\") => {\r\n if (sortConfig?.key === key) {\r\n return sortConfig.direction === \"ascending\" ? (\r\n <MdArrowUpward fontSize=\"small\" />\r\n ) : sortConfig.direction === \"descending\" ? (\r\n <MdArrowDownward fontSize=\"small\" />\r\n ) : (\r\n <MdArrowUpward\r\n fontSize=\"small\"\r\n className=\"text-gray-300 invisible group-hover:visible \"\r\n />\r\n );\r\n }\r\n return (\r\n <MdArrowUpward\r\n fontSize=\"small\"\r\n className=\"text-gray-300 invisible group-hover:visible \"\r\n />\r\n );\r\n };\r\n\r\n const sortedItems = sortConfig?.direction\r\n ? [...items].sort((a, b) => {\r\n const aValue = a[sortConfig.key as keyof T];\r\n const bValue = b[sortConfig.key as keyof T];\r\n\r\n // Check if values are Date objects\r\n if (aValue instanceof Date && bValue instanceof Date) {\r\n return sortConfig.direction === \"ascending\"\r\n ? aValue.getTime() - bValue.getTime()\r\n : bValue.getTime() - aValue.getTime();\r\n }\r\n if (typeof aValue === \"number\" && typeof bValue === \"number\") {\r\n return sortConfig.direction === \"ascending\"\r\n ? aValue - bValue\r\n : bValue - aValue;\r\n }\r\n return sortConfig.direction === \"ascending\"\r\n ? String(aValue).localeCompare(String(bValue))\r\n : String(bValue).localeCompare(String(aValue));\r\n })\r\n : items;\r\n\r\n // const searchableKeys = new Set(\r\n // columns.filter((col) => !col.actions).map((col) => col.key)\r\n // );\r\n\r\n const filteredItems = sortedItems.filter((item: any) => {\r\n const textSearchMatch = fulltextSearch\r\n ? columns.some((column) => {\r\n const value = item[column.key];\r\n return (\r\n (typeof value === \"string\" || typeof value === \"number\") &&\r\n value\r\n .toString()\r\n .toLowerCase()\r\n .includes(fulltextSearch.toLowerCase())\r\n );\r\n })\r\n : true;\r\n\r\n const columnFiltersMatch = columns.every((column) => {\r\n // debugger;\r\n const filterValue = columnFilters[column.key as string];\r\n if (!filterValue) return true; // Ignore filter if 'None' is selected\r\n\r\n const itemValue = item[column.key];\r\n if ((column.type || typeof itemValue) === \"string\") {\r\n if (column.filterOperator == \">=\") {\r\n return itemValue.toLowerCase() >= filterValue.toLowerCase();\r\n } else if (column.filterOperator == \"<=\") {\r\n return itemValue.toLowerCase() <= filterValue.toLowerCase();\r\n }\r\n if (column.filterType == \"text\") {\r\n return itemValue.toLowerCase().includes(filterValue.toLowerCase());\r\n } else {\r\n return itemValue.toLowerCase() == filterValue.toLowerCase();\r\n }\r\n } else {\r\n if (column.filterOperator == \">=\") {\r\n return itemValue >= filterValue;\r\n } else if (column.filterOperator == \"<=\") {\r\n return itemValue <= filterValue;\r\n } else {\r\n return itemValue == filterValue;\r\n }\r\n }\r\n });\r\n\r\n return textSearchMatch && columnFiltersMatch;\r\n });\r\n\r\n // Pagination logic\r\n const indexOfLastItem = (currentPage + 1) * itemsPerPage;\r\n const indexOfFirstItem = indexOfLastItem - itemsPerPage;\r\n const currentItems = filteredItems.slice(indexOfFirstItem, indexOfLastItem);\r\n\r\n const nextPage = () => {\r\n setCurrentPage(currentPage + 1);\r\n };\r\n\r\n const prevPage = () => {\r\n setCurrentPage(currentPage - 1);\r\n };\r\n const handleSearchChanged = (\r\n e: React.ChangeEvent<\r\n HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n >\r\n ) => {\r\n setFulltextSearch(e.target?.value);\r\n setCurrentPage(0);\r\n };\r\n\r\n const totalPages = Math.max(\r\n 1,\r\n Math.ceil(filteredItems.length / itemsPerPage)\r\n );\r\n\r\n // Pagination display logic\r\n const paginationDisplay = `Strana ${currentPage + 1} z ${totalPages}`;\r\n\r\n const filterHandler = (key: keyof T, value: string) => {\r\n setColumnFilters((prev) => ({ ...prev, [key]: value }));\r\n setCurrentPage(0);\r\n };\r\n\r\n if (isLoading) return <Spinner />;\r\n return (\r\n <>\r\n <div className=\"container shadow-lg border border-gray-200 rounded-xl overflow-hidden \">\r\n {(title || subtitle || allowSearch) && (\r\n <div className=\"p-5 leading-9 flex \">\r\n <div className=\"flex-grow\">\r\n {title && (\r\n <h1 className=\"font-semibold text-xl leading-[42px] \">\r\n {title}\r\n </h1>\r\n )}\r\n {subtitle && (\r\n <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n )}\r\n </div>\r\n <div\r\n className=\"flex items-center text-xl h-full p-3 mr-5 cursor-pointer text-gray-500 \"\r\n onClick={() => setShowColFilters(!showColFilters)}\r\n >\r\n {!showColFilters && <MdOutlineFilterAlt />}\r\n {showColFilters && <MdOutlineFilterAltOff />}\r\n </div>\r\n {allowSearch && (\r\n <div className=\"\">\r\n <FormField\r\n placeholder=\"Vyhledávání\"\r\n name=\"search\"\r\n onInputChange={handleSearchChanged}\r\n type=\"text\"\r\n value={fulltextSearch}\r\n >\r\n {\" \"}\r\n <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n {!fulltextSearch && <MdSearch></MdSearch>}\r\n {fulltextSearch && (\r\n <MdClose onClick={() => setFulltextSearch(\"\")}></MdClose>\r\n )}\r\n </div>\r\n </FormField>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full leading-normal\">\r\n <thead>\r\n {showColFilters &&\r\n columns.findIndex((it) => it.filterType) > -1 && (\r\n <tr>\r\n {columns.map(({ key, header, filterType }) => (\r\n <th\r\n key={String(key) + \"_filter\"}\r\n // className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n className={` font-medium cursor-pointer !leading-9 text-xs text-left pl-5 pb-5 text-gray-600 ${\r\n !title && !subtitle ? \"border-t-0\" : \"\"\r\n }`}\r\n >\r\n {filterType && (\r\n <FormField\r\n label={header}\r\n name={String(key) + \"_filter\"}\r\n onInputChange={(e) =>\r\n filterHandler(key as keyof T, e.target.value)\r\n }\r\n type={filterType}\r\n options={filterOptions[String(key)] || []}\r\n value={columnFilters[String(key)]}\r\n clearable\r\n ></FormField>\r\n )}\r\n </th>\r\n ))}\r\n </tr>\r\n )}\r\n <tr>\r\n {columns.map(({ key, header, actions }) => (\r\n <th\r\n key={String(key)}\r\n // className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n className={`group font-medium cursor-pointer !leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${\r\n !title && !subtitle ? \"border-t-0\" : \"\"\r\n }`}\r\n onClick={() => requestSort(key)}\r\n >\r\n <span className=\"inline-flex items-center gap-2\">\r\n {header} {!actions ? getSortIcon(key) : \"\"}\r\n </span>\r\n </th>\r\n ))}\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n {currentItems.map((item, rowIndex) => (\r\n <tr\r\n key={rowIndex}\r\n className={`${\r\n item._isHighlighted ? \" bg-gray-200 \" : \" \"\r\n } hover:bg-gray-50 border-gray-200 border-b text-sm `}\r\n >\r\n {columns.map(({ render, actions, classes }, colIndex) => (\r\n <td\r\n key={`${rowIndex}-${colIndex}`}\r\n className={`px-5 py-2\r\n ${\r\n colIndex == 0\r\n ? \" font-medium text-gray-900\"\r\n : \" text-gray-700\"\r\n } ${classes}`}\r\n >\r\n {render ? render(item) : \"\"}\r\n {actions &&\r\n actions\r\n .filter((it) => {\r\n if (it.visible) {\r\n return it.visible(item);\r\n } else true;\r\n })\r\n .map((action, actionIndex) => (\r\n <div\r\n key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n className=\"inline-flex align-middle\"\r\n >\r\n {action.icon && (\r\n <Button\r\n variant=\"icon\"\r\n onClick={() => action.onClick(item)}\r\n >\r\n {\" \"}\r\n {action.icon}\r\n </Button>\r\n )}\r\n {!action.icon && (\r\n <Button\r\n variant=\"transparent\"\r\n onClick={() => action.onClick(item)}\r\n >\r\n {\" \"}\r\n {action.label}\r\n </Button>\r\n )}\r\n </div>\r\n ))}\r\n </td>\r\n ))}\r\n </tr>\r\n ))}\r\n {currentItems.length == 0 && (\r\n <tr key=\"tr-nodata \">\r\n <td\r\n key=\"td-nodata\"\r\n className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n colSpan={columns.length}\r\n >\r\n Žádná data\r\n </td>\r\n </tr>\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n <div className=\"w-full p-5 grid grid-cols-3\">\r\n <div className=\"text-left items-start justify-start\">\r\n {currentPage !== 0 && (\r\n <Button\r\n variant=\"secondary\"\r\n onClick={prevPage}\r\n className=\"flex items-center float-left\"\r\n >\r\n <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n </Button>\r\n )}\r\n </div>\r\n <div className=\" text-center text-xs text-gray-800\">\r\n {paginationDisplay} {/* Updated to use dynamic page numbers */}\r\n </div>\r\n <div className=\"text-right items-end justify-end\">\r\n {indexOfLastItem < filteredItems.length && (\r\n <Button\r\n variant=\"secondary\"\r\n onClick={nextPage}\r\n className=\"flex items-center float-right\"\r\n >\r\n Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n </Button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </>\r\n );\r\n}\r\n\r\nexport default DataTable;\r\n"],"names":[],"mappings":"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"}
|
|
@@ -21698,6 +21698,7 @@ function DataTableServer({
|
|
|
21698
21698
|
const federationContext = useFederationContext();
|
|
21699
21699
|
const [data, setData] = useState();
|
|
21700
21700
|
const [isLoading, setIsLoading] = useState(false);
|
|
21701
|
+
const [isLocalStorageLoaded, setIsLocalStorageLoaded] = useState(false);
|
|
21701
21702
|
const [tableKey, setTableKey] = useState(0);
|
|
21702
21703
|
const [currentPage, setCurrentPage] = useState();
|
|
21703
21704
|
const [selectedItems, setSelectedItems] = useState([]);
|
|
@@ -21804,6 +21805,7 @@ function DataTableServer({
|
|
|
21804
21805
|
setSortConfig(null);
|
|
21805
21806
|
setItemsPerPageLocal(storageObject.itemsPerPage || 10);
|
|
21806
21807
|
}
|
|
21808
|
+
setIsLocalStorageLoaded(true);
|
|
21807
21809
|
}
|
|
21808
21810
|
}, [id]);
|
|
21809
21811
|
useEffect(() => {
|
|
@@ -21912,7 +21914,7 @@ function DataTableServer({
|
|
|
21912
21914
|
setShowColFilters(!showColFilters);
|
|
21913
21915
|
};
|
|
21914
21916
|
useEffect(() => {
|
|
21915
|
-
if (id) {
|
|
21917
|
+
if (id && isLocalStorageLoaded) {
|
|
21916
21918
|
const storageKey = `datatable:${id}`;
|
|
21917
21919
|
const storageObject = localStorage.getItem(
|
|
21918
21920
|
storageKey
|
|
@@ -21921,11 +21923,18 @@ function DataTableServer({
|
|
|
21921
21923
|
) : {};
|
|
21922
21924
|
storageObject.columnFilters = columnFilters || {};
|
|
21923
21925
|
storageObject.showColFilters = showColFilters || false;
|
|
21924
|
-
storageObject.currentPage = currentPage
|
|
21925
|
-
storageObject.itemsPerPage = itemsPerPageLocal ||
|
|
21926
|
+
storageObject.currentPage = currentPage || 0;
|
|
21927
|
+
storageObject.itemsPerPage = itemsPerPageLocal || 10;
|
|
21926
21928
|
localStorage.setItem(storageKey, JSON.stringify(storageObject));
|
|
21927
21929
|
}
|
|
21928
|
-
}, [
|
|
21930
|
+
}, [
|
|
21931
|
+
columnFilters,
|
|
21932
|
+
showColFilters,
|
|
21933
|
+
currentPage,
|
|
21934
|
+
id,
|
|
21935
|
+
itemsPerPageLocal,
|
|
21936
|
+
isLocalStorageLoaded
|
|
21937
|
+
]);
|
|
21929
21938
|
const rerenderTable = () => {
|
|
21930
21939
|
setTableKey((previous) => previous + 1);
|
|
21931
21940
|
};
|
|
@@ -21982,7 +21991,6 @@ function DataTableServer({
|
|
|
21982
21991
|
setItemsPerPageLocal(selectedItemsPerPage);
|
|
21983
21992
|
setCurrentPage(0);
|
|
21984
21993
|
};
|
|
21985
|
-
console.log("mergedFilters", mergedFilters);
|
|
21986
21994
|
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
|
|
21987
21995
|
"div",
|
|
21988
21996
|
{
|
|
@@ -22094,7 +22102,7 @@ function DataTableServer({
|
|
|
22094
22102
|
),
|
|
22095
22103
|
type: filterType,
|
|
22096
22104
|
options: filterOptions[String(filterParam)] || [],
|
|
22097
|
-
value: (mergedFilters == null ? void 0 : mergedFilters[String(filterParam)])
|
|
22105
|
+
value: (mergedFilters == null ? void 0 : mergedFilters[String(filterParam)]) ?? "",
|
|
22098
22106
|
clearable: true,
|
|
22099
22107
|
className: " px-0",
|
|
22100
22108
|
placeholder: "Zadejte filtr",
|