Spaces:
Running
Running
File size: 6,015 Bytes
79278ec 19eca0c 79278ec 19eca0c 79278ec |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
import "./DocsList.scss";
import { FC, useState } from "react";
import { GoDownload, GoSearch, GoTrash, GoTriangleDown, GoTriangleUp } from "react-icons/go";
import { SortDirectionsTooltipMap, StatusMap } from "@/shared/constants";
import Button from "@/components/generics/button/Button";
import { DocsListProps } from "./DocsList.interface";
import Input from "@/components/generics/input/Input";
import { Pagination } from "../../pagination/Pagination";
import { SortDirections } from "@/api/documents/types";
import Spinner from "@/components/generics/spinner/Spinner";
import Tag from "@/components/generics/tag/Tag";
import Tooltip from "@/components/generics/tooltip/Tooltip";
import { downloadDocument } from "@/api/documents/documentsApi";
import { useGetDataset } from "@/api/documents/hooks";
export const DocsList: FC<DocsListProps> = ({ datasetId, handleDeleteFile }) => {
const [page, setPage] = useState<number>(0);
const [pageSize, setPageSize] = useState<number>(10);
const [searchInput, setSearchInput] = useState<string | undefined>(undefined);
const [search, setSearch] = useState<string | undefined>(undefined);
const [sort, setSort] = useState<undefined | { field: string; direction: SortDirections }[]>(undefined);
const { data: datasetData, isFetching } = useGetDataset(datasetId ?? -1, { page, page_size: pageSize, search, sort });
const toggleSort = (field: string) => {
setSort((prevSort) => {
if (prevSort?.length && prevSort?.length > 0) {
const newSort = [...prevSort];
const existingFieldIndex = prevSort?.findIndex((e) => e.field === field);
const currentDirection = prevSort[existingFieldIndex]?.direction;
if (existingFieldIndex != null && existingFieldIndex !== -1) {
const newSort = [...prevSort];
if (currentDirection === SortDirections.asc) {
newSort[existingFieldIndex] = { field, direction: SortDirections.desc };
return newSort;
} else if (currentDirection === SortDirections.desc) {
newSort.splice(existingFieldIndex, 1);
return newSort;
}
} else {
newSort.push({ field, direction: SortDirections.asc });
}
return newSort;
} else {
return [{ field, direction: SortDirections.asc }];
}
});
};
const handleEnterPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter" && searchInput) {
setSearch(searchInput);
setPage(0);
}
};
const sorting = (field: string) => {
const currentDirection = sort?.find((e) => e.field === field)?.direction;
return (
<Tooltip text={SortDirectionsTooltipMap[currentDirection ?? "empty"]}>
<Button
onClick={() => toggleSort(field)}
icon={
<div className="sort-btn">
<GoTriangleUp viewBox="0 0 20 20" className={currentDirection === SortDirections.asc ? "active" : ""} />
<GoTriangleDown
viewBox="0 0 20 20"
className={currentDirection === SortDirections.desc ? "arrow-down active" : "arrow-down"}
/>
</div>
}
buttonType="link"
/>
</Tooltip>
);
};
return (
<>
<div className="docs-search-input">
<Input
name=""
placeholder="Введите название документа"
value={searchInput}
onSetValue={setSearchInput}
onKeyDown={handleEnterPress}
extra={
<Tooltip text="Поиск">
<Button
buttonType="link"
icon={<GoSearch style={{ width: "19px", height: "19px" }} />}
onClick={() => {
setSearch(searchInput);
setPage(0);
}}
/>
</Tooltip>
}
/>
</div>
<div className="docs-table-container" style={{ position: "relative" }}>
{isFetching && (
<div className="loading-overlay">
<Spinner />
</div>
)}
<table className="docs-table">
<thead>
<tr>
<th style={{ width: "50%" }}>
<div className="name-with-sort">
<span>Название документа</span>
{sorting("name")}
</div>
</th>
<th>
<div className="name-with-sort">
<span>Владелец</span>
{sorting("owner")}
</div>
</th>
<th>
<div className="name-with-sort">
<span>Статус</span>
{sorting("status")}
</div>
</th>
<th></th>
</tr>
</thead>
<tbody>
{datasetData?.data.page.map((doc) => (
<tr key={doc.id}>
<td>{doc.name}</td>
<td>{doc.owner}</td>
<td>
<Tag text={doc.status} type={StatusMap[doc.status]} />
</td>
<td>
<div className="actions">
<Button
onClick={() => downloadDocument(datasetData.id, doc.id.toString(), doc.name)}
icon={<GoDownload />}
buttonType="link"
/>
<Button onClick={() => handleDeleteFile(doc.id)} icon={<GoTrash />} buttonType="link" />
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
<Pagination
total={datasetData?.data.total ?? 0}
pageNumber={datasetData?.data.pageNumber ? datasetData?.data.pageNumber : page}
pageSize={datasetData?.data.pageSize ?? 20}
setPageSize={setPageSize}
setPage={setPage}
/>
</>
);
};
|