egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make entire item clickable when in edit mode

Browse Source
This commit is contained in:
Isaac Wise
2024-02-11 02:38:41 -06:00
parent 5128bd44d8
commit aef33d859e
7 changed files with 433 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/collections/[id].tsx
+3 -3
View File
@@ -329,7 +329,7 @@ export default function Index() {
</div>
</div>
<div className={!editMode ? "w-full flex justify-end items-center min-h-[32px]" : "w-full flex justify-between items-center min-h-[32px]"}>
<div className={editMode ? "w-full flex justify-between items-center min-h-[32px]" : "w-full flex justify-end items-center min-h-[32px]"}>
{links.length > 0 && editMode && (
<div className="flex gap-3 ml-3">
<input
@@ -355,7 +355,7 @@ export default function Index() {
<button
onClick={() => setBulkEditLinksModal(true)}
className="btn btn-sm btn-accent text-white w-fit ml-auto"
disabled={!editMode}
disabled={!editMode || selectedLinks.length === 0}
>
Edit
</button>
@@ -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
pages/links/index.tsx
+1 -1
View File
@@ -101,7 +101,7 @@ export default function Links() {
</div>
</div>
<div className={!editMode ? "w-full flex justify-end items-center min-h-[32px]" : "w-full flex justify-between items-center min-h-[32px]"}>
<div className={editMode ? "w-full flex justify-between items-center min-h-[32px]" : "w-full flex justify-end items-center min-h-[32px]"}>
{links.length > 0 && editMode && (
<div className="flex gap-3 ml-3">
<input
pages/links/pinned.tsx
+53 -60
View File
@@ -29,7 +29,7 @@ export default function PinnedLinks() {
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [editMode, setEditMode] = useState(false);
const collectivePermissions = useCollectivePermissions(
selectedLinks.map((link) => 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"}
/>
<div className="mt-2 flex items-center justify-end gap-2">
{links.length > 0 && (
{!(links.length === 0) && (
<div
role="button"
onClick={() => {
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"
}`}
>
<i className="bi-pencil-fill text-neutral text-xl"></i>
</div>
@@ -103,57 +100,53 @@ export default function PinnedLinks() {
</div>
</div>
{editMode && (
<div className="w-full flex justify-between items-center min-h-[32px]">
{links.length > 0 && (
<div className="flex gap-3 ml-3">
<input
type="checkbox"
className="checkbox checkbox-primary"
onChange={() => handleSelectAll()}
checked={
selectedLinks.length === links.length && links.length > 0
}
/>
{selectedLinks.length > 0 ? (
<span>
{selectedLinks.length}{" "}
{selectedLinks.length === 1 ? "link" : "links"} selected
</span>
) : (
<span>Nothing selected</span>
)}
</div>
)}
<div className="flex gap-3">
{selectedLinks.length > 0 &&
(collectivePermissions === true ||
collectivePermissions?.canUpdate) && (
<button
onClick={() => setBulkEditLinksModal(true)}
className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
>
Edit
</button>
)}
{selectedLinks.length > 0 &&
(collectivePermissions === true ||
collectivePermissions?.canDelete) && (
<button
onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
e.shiftKey
? bulkDeleteLinks()
: setBulkDeleteLinksModal(true);
}}
className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
>
Delete
</button>
)}
<div className={editMode ? "w-full flex justify-between items-center min-h-[32px]" : "w-full flex justify-end items-center min-h-[32px]"}>
{links.length > 0 && editMode && (
<div className="flex gap-3 ml-3">
<input
type="checkbox"
className="checkbox checkbox-primary"
onChange={() => handleSelectAll()}
checked={
selectedLinks.length === links.length && links.length > 0
}
/>
{selectedLinks.length > 0 ? (
<span>
{selectedLinks.length}{" "}
{selectedLinks.length === 1 ? "link" : "links"} selected
</span>
) : (
<span>Nothing selected</span>
)}
</div>
)}
<div className="flex gap-3">
{(collectivePermissions === true || collectivePermissions?.canUpdate) && (
<button
onClick={() => setBulkEditLinksModal(true)}
className="btn btn-sm btn-accent text-white w-fit ml-auto"
disabled={!editMode || selectedLinks.length === 0}
>
Edit
</button>
)}
{(collectivePermissions === true || collectivePermissions?.canDelete) && (
<button
onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
e.shiftKey
? bulkDeleteLinks()
: setBulkDeleteLinksModal(true);
}}
disabled={!editMode || selectedLinks.length === 0}
className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto"
>
Delete
</button>
)}
</div>
)}
</div>
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
<LinkComponent editMode={editMode} links={links} />