From aef33d859e989fa556f174c1157023d6d58fd68b Mon Sep 17 00:00:00 2001 From: Isaac Wise Date: Sun, 11 Feb 2024 02:38:41 -0600 Subject: [PATCH] make entire item clickable when in edit mode --- components/LinkViews/Layouts/CardView.tsx | 1 - components/LinkViews/Layouts/ListView.tsx | 5 +- components/LinkViews/LinkCard.tsx | 365 ++++++++++++++-------- components/LinkViews/LinkList.tsx | 224 +++++++------ pages/collections/[id].tsx | 6 +- pages/links/index.tsx | 2 +- pages/links/pinned.tsx | 113 ++++--- 7 files changed, 433 insertions(+), 283 deletions(-) diff --git a/components/LinkViews/Layouts/CardView.tsx b/components/LinkViews/Layouts/CardView.tsx index 0da91a4..77b0a54 100644 --- a/components/LinkViews/Layouts/CardView.tsx +++ b/components/LinkViews/Layouts/CardView.tsx @@ -19,7 +19,6 @@ export default function CardView({ link={e} count={i} flipDropdown={i === links.length - 1} - showCheckbox={showCheckbox} editMode={editMode} /> ); diff --git a/components/LinkViews/Layouts/ListView.tsx b/components/LinkViews/Layouts/ListView.tsx index c74b84e..1939f81 100644 --- a/components/LinkViews/Layouts/ListView.tsx +++ b/components/LinkViews/Layouts/ListView.tsx @@ -3,22 +3,19 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; export default function ListView({ links, - showCheckbox = true, editMode, }: { links: LinkIncludingShortenedCollectionAndTags[]; - showCheckbox?: boolean; editMode?: boolean; }) { return ( -
+
{links.map((e, i) => { return ( diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx index 2e9544b..29c7f87 100644 --- a/components/LinkViews/LinkCard.tsx +++ b/components/LinkViews/LinkCard.tsx @@ -24,14 +24,12 @@ type Props = { count: number; className?: string; flipDropdown?: boolean; - showCheckbox?: boolean; editMode?: boolean; }; export default function LinkCard({ link, flipDropdown, - showCheckbox = true, editMode, }: Props) { const { collections } = useCollectionStore(); @@ -98,143 +96,256 @@ export default function LinkCard({ const [showInfo, setShowInfo] = useState(false); + const selectedStyle = selectedLinks.some((selectedLink) => selectedLink.id === link.id) ? "border-primary bg-base-300" : "border-neutral-content"; + const selectable = editMode && (permissions === true || permissions?.canCreate || permissions?.canDelete); + const hoverStyles = !selectable ? "cursor-not-allowed" : "cursor-pointer"; + return (
selectable && handleCheckboxClick(link)} > - {showCheckbox && - editMode && - (permissions === true || - permissions?.canCreate || - permissions?.canDelete) && ( - handleCheckboxClick(link)} - /> - )} - -
- {previewAvailable(link) ? ( - { - const target = e.target as HTMLElement; - target.style.display = "none"; - }} - /> - ) : link.preview === "unavailable" ? ( -
- ) : ( -
- )} -
+ - -
-
- -
- -
-

- {unescapeString(link.name || link.description) || link.url} -

- -
-
- -

{shortendURL}

+
+ {previewAvailable(link) ? ( + { + const target = e.target as HTMLElement; + target.style.display = "none"; + }} + /> + ) : link.preview === "unavailable" ? ( +
+ ) : ( +
+ )} +
+ +
-
-
-
+
-
-
- {collection ? ( - - ) : undefined} -
- -
- +
+

+ {unescapeString(link.name || link.description) || link.url} +

- {showInfo ? ( -
-
setShowInfo(!showInfo)} - className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10" - > - -
-

Description

- -
-

- {link.description ? ( - unescapeString(link.description) - ) : ( - - No description provided. - - )} -

- {link.tags[0] ? ( - <> -

Tags

- -
- -
-
- {link.tags.map((e, i) => ( - { - e.stopPropagation(); - }} - className="btn btn-xs btn-ghost truncate max-w-[19rem]" - > - #{e.name} - - ))} +
+
+ +

{shortendURL}

- - ) : undefined} -
- ) : undefined} +
- setShowInfo(!showInfo)} - linkInfo={showInfo} - flipDropdown={flipDropdown} - /> +
+ +
+
+ {collection && ( + + )} +
+ +
+ + + {showInfo && ( +
+
setShowInfo(!showInfo)} + className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10" + > + +
+

Description

+ +
+

+ {link.description ? ( + unescapeString(link.description) + ) : ( + + No description provided. + + )} +

+ {link.tags[0] && ( + <> +

Tags

+ +
+ +
+
+ {link.tags.map((e, i) => ( + { + e.stopPropagation(); + }} + className="btn btn-xs btn-ghost truncate max-w-[19rem]" + > + #{e.name} + + ))} +
+
+ + )} +
+ )} + + setShowInfo(!showInfo)} + linkInfo={showInfo} + flipDropdown={flipDropdown} + /> + + ) : ( + <> +
+
+ {previewAvailable(link) ? ( + { + const target = e.target as HTMLElement; + target.style.display = "none"; + }} + /> + ) : link.preview === "unavailable" ? ( +
+ ) : ( +
+ )} +
+ +
+
+ +
+ +
+

+ {unescapeString(link.name || link.description) || link.url} +

+ +
+
+ +

{shortendURL}

+
+
+
+ +
+ +
+
+ {collection && ( + + )} +
+ +
+
+ + {showInfo && ( +
+
setShowInfo(!showInfo)} + className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10" + > + +
+

Description

+ +
+

+ {link.description ? ( + unescapeString(link.description) + ) : ( + + No description provided. + + )} +

+ {link.tags[0] && ( + <> +

Tags

+ +
+ +
+
+ {link.tags.map((e, i) => ( + { + e.stopPropagation(); + }} + className="btn btn-xs btn-ghost truncate max-w-[19rem]" + > + #{e.name} + + ))} +
+
+ + )} +
+ )} + + setShowInfo(!showInfo)} + linkInfo={showInfo} + flipDropdown={flipDropdown} + /> + + )}
); } diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx index 8467000..f359a2b 100644 --- a/components/LinkViews/LinkList.tsx +++ b/components/LinkViews/LinkList.tsx @@ -21,14 +21,12 @@ type Props = { count: number; className?: string; flipDropdown?: boolean; - showCheckbox?: boolean; editMode?: boolean; }; export default function LinkCardCompact({ link, flipDropdown, - showCheckbox = true, editMode, }: Props) { const { collections } = useCollectionStore(); @@ -78,14 +76,20 @@ export default function LinkCardCompact({ const [showInfo, setShowInfo] = useState(false); + const selectedStyle = selectedLinks.some((selectedLink) => selectedLink.id === link.id) ? "border border-primary bg-base-300" : "border-transparent"; + const selectable = editMode && (permissions === true || permissions?.canCreate || permissions?.canDelete); + const hoverStyles = !selectable ? "cursor-not-allowed" : "cursor-pointer"; + return ( <>
selectable && handleCheckboxClick(link)} > - {showCheckbox && + {/* {showCheckbox && editMode && (permissions === true || permissions?.canCreate || @@ -98,96 +102,142 @@ export default function LinkCardCompact({ )} onChange={() => handleCheckboxClick(link)} /> - )} - -
- -
- -
-

- {unescapeString(link.name || link.description) || link.url} -

- -
-
- {collection ? ( - - ) : undefined} - {link.url ? ( -
- -

{shortendURL}

-
- ) : ( -
- {link.type} -
- )} - + )} */} + {!editMode ? ( + <> + +
+
-
-
- - setShowInfo(!showInfo)} - // linkInfo={showInfo} - /> - {showInfo ? ( -
-
-

Description

+
+

+ {unescapeString(link.name || link.description) || link.url} +

-
-

- {link.description ? ( - unescapeString(link.description) - ) : ( - - No description provided. - - )} -

- {link.tags[0] ? ( - <> -

- Tags -

+
+
+ {collection && ( + + )} + {link.url ? ( +
+ +

{shortendURL}

+
+ ) : ( +
+ {link.type} +
+ )} + +
+
+
+ + setShowInfo(!showInfo)} + // linkInfo={showInfo} + /> + {showInfo && ( +
+
+

Description

+

+ {link.description ? ( + unescapeString(link.description) + ) : ( + + No description provided. + + )} +

+ {link.tags[0] && ( + <> +

+ Tags +

-
-
- {link.tags.map((e, i) => ( - { - e.stopPropagation(); - }} - className="btn btn-xs btn-ghost truncate max-w-[19rem]" - > - #{e.name} - - ))} +
+ +
+
+ {link.tags.map((e, i) => ( + { + e.stopPropagation(); + }} + className="btn btn-xs btn-ghost truncate max-w-[19rem]" + > + #{e.name} + + ))} +
+
+ + )} +
+
+ )} + + ) : + ( + <> +
+
+ +
+ +
+

+ {unescapeString(link.name || link.description) || link.url} +

+ +
+
+ {collection ? ( + + ) : undefined} + {link.url ? ( +
+ +

{shortendURL}

+
+ ) : ( +
+ {link.type} +
+ )} +
- - ) : undefined} -
-
- ) : undefined} +
+
+ setShowInfo(!showInfo)} + // linkInfo={showInfo} + /> + + )}
-
); diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index 81398d7..2d58286 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -329,7 +329,7 @@ export default function Index() {
-
+
{links.length > 0 && editMode && (
setBulkEditLinksModal(true)} className="btn btn-sm btn-accent text-white w-fit ml-auto" - disabled={!editMode} + disabled={!editMode || selectedLinks.length === 0} > Edit @@ -368,7 +368,7 @@ export default function Index() { ? bulkDeleteLinks() : setBulkDeleteLinksModal(true); }} - disabled={!editMode} + disabled={!editMode || selectedLinks.length === 0} className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto" > Delete diff --git a/pages/links/index.tsx b/pages/links/index.tsx index c74faf5..e936500 100644 --- a/pages/links/index.tsx +++ b/pages/links/index.tsx @@ -101,7 +101,7 @@ export default function Links() {
-
+
{links.length > 0 && editMode && (
link.collectionId as number) + links.map((link) => link.collectionId as number) ); useLinks({ sort: sortBy }); @@ -44,8 +44,7 @@ export default function PinnedLinks() { const bulkDeleteLinks = async () => { const load = toast.loading( - `Deleting ${selectedLinks.length} Link${ - selectedLinks.length > 1 ? "s" : "" + `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : "" }...` ); @@ -57,8 +56,7 @@ export default function PinnedLinks() { response.ok && toast.success( - `Deleted ${selectedLinks.length} Link${ - selectedLinks.length > 1 ? "s" : "" + `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : "" }!` ); }; @@ -82,18 +80,17 @@ export default function PinnedLinks() { description={"Pinned Links from your Collections"} />
- {links.length > 0 && ( + {!(links.length === 0) && (
{ setEditMode(!editMode); setSelectedLinks([]); }} - className={`btn btn-square btn-sm btn-ghost ${ - editMode - ? "bg-primary/20 hover:bg-primary/20" - : "hover:bg-neutral/20" - }`} + className={`btn btn-square btn-sm btn-ghost ${editMode + ? "bg-primary/20 hover:bg-primary/20" + : "hover:bg-neutral/20" + }`} >
@@ -103,57 +100,53 @@ export default function PinnedLinks() {
- {editMode && ( -
- {links.length > 0 && ( -
- handleSelectAll()} - checked={ - selectedLinks.length === links.length && links.length > 0 - } - /> - {selectedLinks.length > 0 ? ( - - {selectedLinks.length}{" "} - {selectedLinks.length === 1 ? "link" : "links"} selected - - ) : ( - Nothing selected - )} -
- )} -
- {selectedLinks.length > 0 && - (collectivePermissions === true || - collectivePermissions?.canUpdate) && ( - - )} - {selectedLinks.length > 0 && - (collectivePermissions === true || - collectivePermissions?.canDelete) && ( - - )} +
+ {links.length > 0 && editMode && ( +
+ handleSelectAll()} + checked={ + selectedLinks.length === links.length && links.length > 0 + } + /> + {selectedLinks.length > 0 ? ( + + {selectedLinks.length}{" "} + {selectedLinks.length === 1 ? "link" : "links"} selected + + ) : ( + Nothing selected + )}
+ )} +
+ {(collectivePermissions === true || collectivePermissions?.canUpdate) && ( + + )} + {(collectivePermissions === true || collectivePermissions?.canDelete) && ( + + )}
- )} +
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (