finished the collection listing ui
This commit is contained in:
daniel31x13
parent
ac70c9e29c
commit
84aeac96ce
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component, useCallback, useEffect, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Tree, {
|
||||
mutateTree,
|
||||
moveItemOnTree,
|
||||
|
|
@ -9,129 +9,25 @@ import Tree, {
|
|||
TreeSourcePosition,
|
||||
TreeDestinationPosition,
|
||||
} from "@atlaskit/tree";
|
||||
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import { Collection } from "@prisma/client";
|
||||
import Link from "next/link";
|
||||
|
||||
const collections = [
|
||||
{
|
||||
id: 262,
|
||||
name: "dasd",
|
||||
description: "",
|
||||
color: "#0ea5e9",
|
||||
parentId: null,
|
||||
isPublic: false,
|
||||
ownerId: 1,
|
||||
createdAt: "2024-02-18T23:40:44.043Z",
|
||||
updatedAt: "2024-02-19T19:16:14.873Z",
|
||||
parent: null,
|
||||
members: [
|
||||
{
|
||||
userId: 17,
|
||||
collectionId: 262,
|
||||
canCreate: true,
|
||||
canUpdate: false,
|
||||
canDelete: false,
|
||||
createdAt: "2024-02-19T19:16:14.873Z",
|
||||
updatedAt: "2024-02-19T19:16:14.873Z",
|
||||
user: { username: "test", name: "ben", image: "" },
|
||||
},
|
||||
],
|
||||
_count: { links: 0 },
|
||||
},
|
||||
{
|
||||
id: 268,
|
||||
name: "ab",
|
||||
description: "",
|
||||
color: "#0ea5e9",
|
||||
parentId: 267,
|
||||
isPublic: false,
|
||||
ownerId: 17,
|
||||
createdAt: "2024-02-19T21:06:52.545Z",
|
||||
updatedAt: "2024-02-19T21:06:52.545Z",
|
||||
parent: { id: 267, name: "a" },
|
||||
members: [],
|
||||
_count: { links: 0 },
|
||||
},
|
||||
{
|
||||
id: 269,
|
||||
name: "abc",
|
||||
description: "",
|
||||
color: "#0ea5e9",
|
||||
parentId: 268,
|
||||
isPublic: false,
|
||||
ownerId: 17,
|
||||
createdAt: "2024-02-19T21:07:08.565Z",
|
||||
updatedAt: "2024-02-19T21:07:08.565Z",
|
||||
parent: { id: 268, name: "ab" },
|
||||
members: [],
|
||||
_count: { links: 0 },
|
||||
},
|
||||
{
|
||||
id: 267,
|
||||
name: "a",
|
||||
description: "",
|
||||
color: "#0ea5e9",
|
||||
parentId: null,
|
||||
isPublic: false,
|
||||
ownerId: 17,
|
||||
createdAt: "2024-02-19T21:06:45.402Z",
|
||||
updatedAt: "2024-02-26T16:59:20.312Z",
|
||||
parent: null,
|
||||
members: [],
|
||||
_count: { links: 0 },
|
||||
},
|
||||
{
|
||||
id: 80,
|
||||
name: "abc",
|
||||
description: "s",
|
||||
color: "#0ea5e9",
|
||||
parentId: 79,
|
||||
isPublic: false,
|
||||
ownerId: 1,
|
||||
createdAt: "2024-02-05T07:00:46.881Z",
|
||||
updatedAt: "2024-02-27T06:11:46.358Z",
|
||||
parent: { id: 79, name: "ab" },
|
||||
members: [
|
||||
{
|
||||
userId: 17,
|
||||
collectionId: 80,
|
||||
canCreate: false,
|
||||
canUpdate: false,
|
||||
canDelete: false,
|
||||
createdAt: "2024-02-27T06:11:46.358Z",
|
||||
updatedAt: "2024-02-27T06:11:46.358Z",
|
||||
user: { username: "test", name: "ben", image: "" },
|
||||
},
|
||||
{
|
||||
userId: 2,
|
||||
collectionId: 80,
|
||||
canCreate: false,
|
||||
canUpdate: false,
|
||||
canDelete: false,
|
||||
createdAt: "2024-02-27T06:11:46.358Z",
|
||||
updatedAt: "2024-02-27T06:11:46.358Z",
|
||||
user: {
|
||||
username: "sarah_connor",
|
||||
name: "Sarah Smith",
|
||||
image: "uploads/avatar/2.jpg",
|
||||
},
|
||||
},
|
||||
],
|
||||
_count: { links: 0 },
|
||||
},
|
||||
];
|
||||
interface ExtendedTreeItem extends TreeItem {
|
||||
data: Collection;
|
||||
}
|
||||
|
||||
const DragDropWithNestingTree = () => {
|
||||
const buildTreeFromCollections = (collections) => {
|
||||
// Step 1: Map Collections to TreeItems
|
||||
const items = collections.reduce((acc, collection) => {
|
||||
const buildTreeFromCollections = (collections: Collection[]): TreeData => {
|
||||
const items: { [key: string]: ExtendedTreeItem } = collections.reduce(
|
||||
(acc: any, collection) => {
|
||||
acc[collection.id] = {
|
||||
id: collection.id.toString(),
|
||||
id: collection.id,
|
||||
children: [],
|
||||
hasChildren: false, // Initially assume no children, adjust in Step 2
|
||||
hasChildren: false,
|
||||
isExpanded: false,
|
||||
data: {
|
||||
title: collection.name,
|
||||
name: collection.name,
|
||||
description: collection.description,
|
||||
color: collection.color,
|
||||
isPublic: collection.isPublic,
|
||||
|
|
@ -141,27 +37,25 @@ const DragDropWithNestingTree = () => {
|
|||
},
|
||||
};
|
||||
return acc;
|
||||
}, {});
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
// Step 2: Build Hierarchy
|
||||
collections.forEach((collection) => {
|
||||
const parentId = collection.parentId;
|
||||
if (parentId !== null && items[parentId]) {
|
||||
items[parentId].children.push(collection.id.toString());
|
||||
if (parentId && items[parentId]) {
|
||||
items[parentId].children.push(collection.id);
|
||||
items[parentId].hasChildren = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Define a root item to act as the top-level node of your tree if needed
|
||||
const rootId = "root";
|
||||
items[rootId] = {
|
||||
id: rootId,
|
||||
children: collections
|
||||
.filter((c) => c.parentId === null)
|
||||
.map((c) => c.id.toString()),
|
||||
children: collections.filter((c) => c.parentId === null).map((c) => c.id),
|
||||
hasChildren: true,
|
||||
isExpanded: true,
|
||||
data: { title: "Root" },
|
||||
data: { name: "Root" } as Collection,
|
||||
};
|
||||
|
||||
return { rootId, items };
|
||||
|
|
@ -172,11 +66,17 @@ const DragDropWithNestingTree = () => {
|
|||
const { collections } = useCollectionStore();
|
||||
|
||||
useEffect(() => {
|
||||
const initialTree = buildTreeFromCollections(collections);
|
||||
const initialTree = buildTreeFromCollections(
|
||||
collections as unknown as Collection[]
|
||||
);
|
||||
collections[0] && setTree(initialTree);
|
||||
}, [collections]);
|
||||
|
||||
const getIcon = useCallback((item, onExpand, onCollapse) => {
|
||||
const getIcon = (
|
||||
item: ExtendedTreeItem,
|
||||
onExpand: (id: ItemId) => void,
|
||||
onCollapse: (id: ItemId) => void
|
||||
) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
return item.isExpanded ? (
|
||||
<button onClick={() => onCollapse(item.id)}>
|
||||
|
|
@ -188,63 +88,82 @@ const DragDropWithNestingTree = () => {
|
|||
</button>
|
||||
);
|
||||
}
|
||||
return <span>•</span>;
|
||||
}, []);
|
||||
// return <span>•</span>;
|
||||
};
|
||||
|
||||
const renderItem = ({
|
||||
item,
|
||||
onExpand,
|
||||
onCollapse,
|
||||
provided,
|
||||
}: RenderItemParams) => {
|
||||
const collection = item.data;
|
||||
|
||||
const renderItem = useCallback(
|
||||
({ item, onExpand, onCollapse, provided }: RenderItemParams) => {
|
||||
return (
|
||||
<div ref={provided.innerRef} {...provided.draggableProps}>
|
||||
<div
|
||||
className="flex gap-1 items-center"
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
className="flex gap-1 items-center ml-2"
|
||||
>
|
||||
{getIcon(item as ExtendedTreeItem, onExpand, onCollapse)}
|
||||
|
||||
<Link
|
||||
href={`/collections/${collection.id}`}
|
||||
className="w-full"
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
{getIcon(item, onExpand, onCollapse)}
|
||||
{item.data ? item.data.title : ""}
|
||||
<div
|
||||
className={`duration-100 py-1 pr-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize mb-1`}
|
||||
>
|
||||
<i
|
||||
className="bi-folder-fill text-2xl drop-shadow"
|
||||
style={{ color: collection.color }}
|
||||
></i>
|
||||
<p className="truncate w-full">{collection.name}</p>
|
||||
|
||||
{collection.isPublic ? (
|
||||
<i
|
||||
className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
|
||||
title="This collection is being shared publicly."
|
||||
></i>
|
||||
) : undefined}
|
||||
<div className="drop-shadow text-neutral text-xs">
|
||||
{collection._count?.links}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[getIcon]
|
||||
);
|
||||
};
|
||||
|
||||
const onExpand = useCallback(
|
||||
(itemId: ItemId) => {
|
||||
const onExpand = (itemId: ItemId) => {
|
||||
if (tree) {
|
||||
setTree((currentTree) =>
|
||||
mutateTree(currentTree, itemId, { isExpanded: true })
|
||||
mutateTree(currentTree!, itemId, { isExpanded: true })
|
||||
);
|
||||
}
|
||||
},
|
||||
[tree]
|
||||
);
|
||||
};
|
||||
|
||||
const onCollapse = useCallback(
|
||||
(itemId: ItemId) => {
|
||||
const onCollapse = (itemId: ItemId) => {
|
||||
if (tree) {
|
||||
setTree((currentTree) =>
|
||||
mutateTree(currentTree, itemId, { isExpanded: false })
|
||||
mutateTree(currentTree as TreeData, itemId, { isExpanded: false })
|
||||
);
|
||||
}
|
||||
},
|
||||
[tree]
|
||||
);
|
||||
};
|
||||
|
||||
const onDragEnd = useCallback(
|
||||
(source: TreeSourcePosition, destination?: TreeDestinationPosition) => {
|
||||
const onDragEnd = (
|
||||
source: TreeSourcePosition,
|
||||
destination: TreeDestinationPosition | undefined
|
||||
) => {
|
||||
if (!destination || !tree) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTree((currentTree) =>
|
||||
moveItemOnTree(currentTree, source, destination)
|
||||
);
|
||||
},
|
||||
[tree]
|
||||
);
|
||||
setTree((currentTree) => moveItemOnTree(currentTree!, source, destination));
|
||||
};
|
||||
|
||||
if (!tree) {
|
||||
return <div>Loading...</div>; // or any other loading state representation
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -261,99 +180,3 @@ const DragDropWithNestingTree = () => {
|
|||
};
|
||||
|
||||
export default DragDropWithNestingTree;
|
||||
|
||||
class TreeBuilder {
|
||||
rootId: ItemId;
|
||||
|
||||
items: Record<ItemId, TreeItem>;
|
||||
|
||||
constructor(rootId: ItemId) {
|
||||
const rootItem = this._createItem(`${rootId}`);
|
||||
this.rootId = rootItem.id;
|
||||
this.items = {
|
||||
[rootItem.id]: rootItem,
|
||||
};
|
||||
}
|
||||
|
||||
withLeaf(id: number) {
|
||||
const leafItem = this._createItem(`${this.rootId}-${id}`);
|
||||
this._addItemToRoot(leafItem.id);
|
||||
this.items[leafItem.id] = leafItem;
|
||||
return this;
|
||||
}
|
||||
|
||||
withSubTree(tree: TreeBuilder) {
|
||||
const subTree = tree.build();
|
||||
this._addItemToRoot(`${this.rootId}-${subTree.rootId}`);
|
||||
|
||||
Object.keys(subTree.items).forEach((itemId) => {
|
||||
const finalId = `${this.rootId}-${itemId}`;
|
||||
this.items[finalId] = {
|
||||
...subTree.items[itemId],
|
||||
id: finalId,
|
||||
children: subTree.items[itemId].children.map(
|
||||
(i) => `${this.rootId}-${i}`
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
build() {
|
||||
return {
|
||||
rootId: this.rootId,
|
||||
items: this.items,
|
||||
};
|
||||
}
|
||||
|
||||
_addItemToRoot(id: string) {
|
||||
const rootItem = this.items[this.rootId];
|
||||
rootItem.children.push(id);
|
||||
rootItem.isExpanded = true;
|
||||
rootItem.hasChildren = true;
|
||||
}
|
||||
|
||||
_createItem = (id: string) => {
|
||||
return {
|
||||
id: `${id}`,
|
||||
children: [],
|
||||
hasChildren: false,
|
||||
isExpanded: false,
|
||||
isChildrenLoading: false,
|
||||
data: {
|
||||
title: `Title ${id}`,
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const complexTree: TreeData = new TreeBuilder(1)
|
||||
.withLeaf(0) // 0
|
||||
.withLeaf(1) // 1
|
||||
.withSubTree(
|
||||
new TreeBuilder(2) // 2
|
||||
.withLeaf(0) // 3
|
||||
.withLeaf(1) // 4
|
||||
.withLeaf(2) // 5
|
||||
.withLeaf(3) // 6
|
||||
)
|
||||
.withLeaf(3) // 7
|
||||
.withLeaf(4) // 8
|
||||
.withLeaf(5) // 9
|
||||
.withSubTree(
|
||||
new TreeBuilder(6) // 10
|
||||
.withLeaf(0) // 11
|
||||
.withLeaf(1) // 12
|
||||
.withSubTree(
|
||||
new TreeBuilder(2) // 13
|
||||
.withLeaf(0) // 14
|
||||
.withLeaf(1) // 15
|
||||
.withLeaf(2) // 16
|
||||
)
|
||||
.withLeaf(3) // 17
|
||||
.withLeaf(4) // 18
|
||||
)
|
||||
.withLeaf(7) // 19
|
||||
.withLeaf(8) // 20
|
||||
.build();
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue