improved collection page
This commit is contained in:
daniel31x13
parent
00bfdfb926
commit
6252b61b89
|
|
@ -60,8 +60,32 @@ const CollectionItem = ({
|
|||
|
||||
const router = useRouter();
|
||||
|
||||
// Check if the current collection or any of its subcollections is active
|
||||
const isActiveOrParentOfActive = React.useMemo(() => {
|
||||
const isActive = active === `/collections/${collection.id}`;
|
||||
if (isActive) return true;
|
||||
|
||||
const checkIfParentOfActive = (parentId: number): boolean => {
|
||||
return collections.some((e) => {
|
||||
if (e.id === parseInt(active.split("/collections/")[1])) {
|
||||
if (e.parentId === parentId) return true;
|
||||
if (e.parentId) return checkIfParentOfActive(e.parentId);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
return checkIfParentOfActive(collection.id as number);
|
||||
}, [active, collection.id, collections]);
|
||||
|
||||
const [isOpen, setIsOpen] = useState(isActiveOrParentOfActive);
|
||||
|
||||
useEffect(() => {
|
||||
setIsOpen(isActiveOrParentOfActive);
|
||||
}, [isActiveOrParentOfActive]);
|
||||
|
||||
return hasChildren ? (
|
||||
<details>
|
||||
<details open={isOpen}>
|
||||
<summary
|
||||
className={`${
|
||||
active === `/collections/${collection.id}`
|
||||
|
|
@ -92,10 +116,8 @@ const CollectionItem = ({
|
|||
</Link>
|
||||
</summary>
|
||||
|
||||
{/* Nested Collections, make it recursively */}
|
||||
|
||||
{hasChildren && (
|
||||
<div className="pl-4">
|
||||
<div className="ml-3 pl-1 border-l border-neutral-content">
|
||||
{collections
|
||||
.filter((e) => e.parentId === collection.id)
|
||||
.map((subCollection) => (
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ export default function NewLinkModal({ onClose }: Props) {
|
|||
setLink({ ...link, description: e.target.value })
|
||||
}
|
||||
placeholder="Will be auto generated if nothing is provided."
|
||||
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
|
||||
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
|
|||
// import GridView from "@/components/LinkViews/Layouts/GridView";
|
||||
import ListView from "@/components/LinkViews/Layouts/ListView";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Index() {
|
||||
const { settings } = useLocalSettingsStore();
|
||||
|
|
@ -111,15 +112,46 @@ export default function Index() {
|
|||
>
|
||||
{activeCollection && (
|
||||
<div className="flex gap-3 items-start justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<i
|
||||
className="bi-folder-fill text-3xl drop-shadow"
|
||||
style={{ color: activeCollection?.color }}
|
||||
></i>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<i
|
||||
className="bi-folder-fill text-3xl drop-shadow"
|
||||
style={{ color: activeCollection?.color }}
|
||||
></i>
|
||||
|
||||
<p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
|
||||
{activeCollection?.name}
|
||||
</p>
|
||||
<p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
|
||||
{activeCollection?.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{activeCollection.subCollections &&
|
||||
activeCollection.subCollections.length > 0 ? (
|
||||
<details className="mt-2 mb-2">
|
||||
<summary className="text-sm cursor-pointer select-none">
|
||||
View Sub-Collections
|
||||
</summary>
|
||||
|
||||
<div className="flex gap-3 mt-1 pl-3 ml-1 border-l border-neutral-content">
|
||||
{collections
|
||||
.filter((e) => e.parentId === activeCollection?.id)
|
||||
.map((e, i) => {
|
||||
return (
|
||||
<Link
|
||||
key={i}
|
||||
className="flex gap-1 items-center btn btn-ghost btn-sm"
|
||||
href={`/collections/${e.id}`}
|
||||
>
|
||||
<i
|
||||
className="bi-folder-fill text-2xl drop-shadow"
|
||||
style={{ color: e.color }}
|
||||
></i>
|
||||
<p className="text-xs">{e.name}</p>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</details>
|
||||
) : undefined}
|
||||
</div>
|
||||
|
||||
<div className="dropdown dropdown-bottom dropdown-end mt-2">
|
||||
|
|
@ -228,6 +260,32 @@ export default function Index() {
|
|||
<p>{activeCollection?.description}</p>
|
||||
) : undefined}
|
||||
|
||||
{/* {activeCollection?.subCollections &&
|
||||
activeCollection?.subCollections.length > 0 ? (
|
||||
<fieldset className="border rounded-md p-2 border-neutral-content">
|
||||
<legend className="text-sm ml-2">Sub-Collections</legend>
|
||||
<div className="flex gap-3">
|
||||
{collections
|
||||
.filter((e) => e.parentId === activeCollection?.id)
|
||||
.map((e, i) => {
|
||||
return (
|
||||
<Link
|
||||
key={i}
|
||||
className="flex gap-1 items-center btn btn-ghost btn-sm"
|
||||
href={`/collections/${e.id}`}
|
||||
>
|
||||
<i
|
||||
className="bi-folder-fill text-2xl drop-shadow"
|
||||
style={{ color: e.color }}
|
||||
></i>
|
||||
<p className="text-xs">{e.name}</p>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</fieldset>
|
||||
) : undefined} */}
|
||||
|
||||
<div className="divider my-0"></div>
|
||||
|
||||
<div className="flex justify-between items-end gap-5">
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default function Collections() {
|
|||
|
||||
<div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
|
||||
{sortedCollections
|
||||
.filter((e) => e.ownerId === data?.user.id)
|
||||
.filter((e) => e.ownerId === data?.user.id && e.parentId === null)
|
||||
.map((e, i) => {
|
||||
return <CollectionCard key={i} collection={e} />;
|
||||
})}
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue