Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

drag and drop updated

Browse Source
This commit is contained in:
Siddhesh More
2024-07-08 12:22:27 +05:30
parent df2a12dff3
commit 5ceba1f8b9
16 changed files with 859 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/Components/DataTable/DataTable.jsx
View File

@@ -1,4 +1,4 @@
import React, { useContext } from "react";
import React, { useContext, useState } from "react";
import {
Table,
TableContainer,
@@ -10,6 +10,7 @@ import {
Skeleton,
TableCaption,
} from "@chakra-ui/react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import EmptySearchList from "../EmptySearchList";
import { useNavigate } from "react-router-dom";
@@ -17,88 +18,120 @@ import GlobalStateContext from "../../Contexts/GlobalStateContext";
const DataTable = ({
data,
setData,
isLoading,
tableHeadRow,
emptyMessage,
centered,
setMouseEntered,
setMouseEnteredId,
caption,
}) => {
const navigate = useNavigate();
const { slideFromRight } = useContext(GlobalStateContext);
const handleDragEnd = (result) => {
if (!result.destination) return;
const reorderedItems = Array.from(data);
const [removed] = reorderedItems.splice(result.source.index, 1);
reorderedItems.splice(result.destination.index, 0, removed);
setData(reorderedItems)
};
return (
<TableContainer overflowX={"hidden"} className="h-auto mb-3 w-100">
<TableContainer pb={8} overflowX={"scroll"} className="h-auto w-100 table-scroll">
{data?.length === 0 ? (
<EmptySearchList message={emptyMessage} />
) : (
<Table size="sm">
<TableCaption>Tanami v1.0</TableCaption>
<Thead backgroundColor="gray.50">
<Tr>
{tableHeadRow.map((heading, index) => (
<Th
textAlign={tableHeadRow.length - 1 === index ? "center" : "left"}
key={index}
p={3}
w={"auto"}
color={"#004118"}
>
<Skeleton isLoaded={!isLoading} fadeDuration={0.4} height="20px">
{heading}
</Skeleton>
</Th>
))}
</Tr>
</Thead>
<Tbody className="web-text-small">
{data?.map((item, index) => (
<Tr
// onMouseEnter={(e) => {
// e.currentTarget.style.backgroundColor = "transparent"; // Change the background color on hover
// e.currentTarget.style.transition = "0.1s";
// e.currentTarget.style.boxShadow =
// "rgba(0, 0, 0, 0.24) 0px 1px 8px";
// setMouseEntered(true);
// setMouseEnteredId(item.id);
// }}
// onMouseLeave={(e) => {
// e.currentTarget.style.backgroundColor = "transparent"; // Revert to default background color on hover out
// e.currentTarget.style.transition = "0.3s";
// e.currentTarget.style.boxShadow = "none";
// setMouseEntered(false);
// }}
transition={"0.5s all"}
_hover={{
bg: "green.50",
cursor: "pointer",
}}
key={index}
>
{tableHeadRow.map((heading, i) => (
<Td
textAlign={tableHeadRow.length - 1 === i ? "center" : "left"}
color={"gray.600"}
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
// onClick={
// i === tableHeadRow.length - 1 || i === 0
// ? null
// : () => navigate(`edit-sponser/${item.id}`) // Define the onClick handler for other cells
// }
>
<Skeleton fadeDuration={index / 12} isLoaded={!isLoading}>
{item[heading]}
</Skeleton>
</Td>
))}
</Tr>
))}
</Tbody>
</Table>
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="table">
{(provided) => (
<Table size="sm" {...provided.droppableProps} ref={provided.innerRef}>
<TableCaption p={0}>{caption}</TableCaption>
<Thead backgroundColor="gray.50">
<Tr>
{tableHeadRow.map((heading, index) => (
<Th
textAlign={tableHeadRow.length - 1 === index || centered ? "center" : "left"}
key={index}
p={3}
width="100px" // Adjust width as needed
color={"#004118"}
whiteSpace="normal" // Allow text to wrap
wordBreak="normal" // Ensure long words break properly
overflowWrap="normal" // Break long words if necessary
>
{heading}
</Th>
))}
</Tr>
</Thead>
<Tbody className="web-text-small">
{data?.map((item, index) => (
item.id ? (
<Draggable key={item.id.toString()} draggableId={item.id.toString()} index={index}>
{(provided, snapshot) => (
<Tr
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
transition={"0s all"}
_hover={{
bg: "blue.50",
cursor: "grab",
}}
bg={snapshot.isDragging ? "blue.100" : "white"}
boxShadow={snapshot.isDragging ? "0 0 1em rgba(0, 0, 0, 0.2)" : "none"}
>
{tableHeadRow.map((heading, i) => (
<Td
textAlign={tableHeadRow.length - 1 === i || centered ? "center" : "left"}
color={"gray.600"}
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
>
<Skeleton fadeDuration={index / 12} isLoaded={!isLoading}>
{item[heading]}
</Skeleton>
</Td>
))}
</Tr>
)}
</Draggable>
) : (
<Tr key={index}>
{tableHeadRow.map((heading, i) => (
<Td
textAlign={tableHeadRow.length - 1 === i || centered ? "center" : "left"}
color={"gray.600"}
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
>
<Skeleton fadeDuration={index / 12} isLoaded={!isLoading}>
{item[heading]}
</Skeleton>
</Td>
))}
</Tr>
)
))}
{provided.placeholder}
</Tbody>
</Table>
)}
</Droppable>
</DragDropContext>
)}
</TableContainer>
);