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

Edit Mode

Browse Source
This commit is contained in:
Isaac Wise
2024-02-10 23:55:00 -06:00
parent 44daffbae6
commit 8ecedf7cae
7 changed files with 91 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/collections/[id].tsx
+64 -51
View File
@@ -96,6 +96,7 @@ export default function Index() {
const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [editMode, setEditMode] = useState(false);
const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Card
@@ -120,8 +121,7 @@ export default function Index() {
const bulkDeleteLinks = async () => {
const load = toast.loading(
`Deleting ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
}...`
);
@@ -133,8 +133,7 @@ export default function Index() {
response.ok &&
toast.success(
`Deleted ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
}!`
);
};
@@ -144,9 +143,8 @@ export default function Index() {
<div
className="h-[60rem] p-5 flex gap-3 flex-col"
style={{
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
}}
>
{activeCollection && (
@@ -309,62 +307,77 @@ export default function Index() {
<div className="divider my-0"></div>
<div className="flex justify-between items-end gap-5">
<div className="flex justify-between items-center gap-5">
<p>Showing {activeCollection?._count?.links} results</p>
<div className="flex items-center gap-2">
<div
role="button"
onClick={() => setEditMode(!editMode)}
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>
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
</div>
</div>
<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>
)}
{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>
)}
</div>
)}
<div className="flex gap-3">
{selectedLinks.length > 0 &&
(permissions === true || permissions?.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 &&
(permissions === true || permissions?.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>
)}
<div className="flex gap-3">
{selectedLinks.length > 0 &&
(permissions === true || permissions?.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 &&
(permissions === true || permissions?.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>
</div>
)}
{links.some((e) => e.collectionId === Number(router.query.id)) ? (
<LinkComponent
editMode={editMode}
links={links.filter(
(e) => e.collection.id === activeCollection?.id
)}