keep edit buttons visible
This commit is contained in:
Isaac Wise
parent
0a77ee90a7
commit
5128bd44d8
|
|
@ -121,8 +121,7 @@ export default function Index() {
|
||||||
|
|
||||||
const bulkDeleteLinks = async () => {
|
const bulkDeleteLinks = async () => {
|
||||||
const load = toast.loading(
|
const load = toast.loading(
|
||||||
`Deleting ${selectedLinks.length} Link${
|
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||||
selectedLinks.length > 1 ? "s" : ""
|
|
||||||
}...`
|
}...`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -134,8 +133,7 @@ export default function Index() {
|
||||||
|
|
||||||
response.ok &&
|
response.ok &&
|
||||||
toast.success(
|
toast.success(
|
||||||
`Deleted ${selectedLinks.length} Link${
|
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||||
selectedLinks.length > 1 ? "s" : ""
|
|
||||||
}!`
|
}!`
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
@ -145,9 +143,8 @@ export default function Index() {
|
||||||
<div
|
<div
|
||||||
className="h-[60rem] p-5 flex gap-3 flex-col"
|
className="h-[60rem] p-5 flex gap-3 flex-col"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
|
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
|
||||||
settings.theme === "dark" ? "#262626" : "#f3f4f6"
|
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
|
||||||
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{activeCollection && (
|
{activeCollection && (
|
||||||
|
|
@ -319,11 +316,10 @@ export default function Index() {
|
||||||
setEditMode(!editMode);
|
setEditMode(!editMode);
|
||||||
setSelectedLinks([]);
|
setSelectedLinks([]);
|
||||||
}}
|
}}
|
||||||
className={`btn btn-square btn-sm btn-ghost ${
|
className={`btn btn-square btn-sm btn-ghost ${editMode
|
||||||
editMode
|
? "bg-primary/20 hover:bg-primary/20"
|
||||||
? "bg-primary/20 hover:bg-primary/20"
|
: "hover:bg-neutral/20"
|
||||||
: "hover:bg-neutral/20"
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -333,53 +329,53 @@ export default function Index() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{editMode && (
|
<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="w-full flex justify-between items-center min-h-[32px]">
|
{links.length > 0 && editMode && (
|
||||||
{links.length > 0 && (
|
<div className="flex gap-3 ml-3">
|
||||||
<div className="flex gap-3 ml-3">
|
<input
|
||||||
<input
|
type="checkbox"
|
||||||
type="checkbox"
|
className="checkbox checkbox-primary"
|
||||||
className="checkbox checkbox-primary"
|
onChange={() => handleSelectAll()}
|
||||||
onChange={() => handleSelectAll()}
|
checked={
|
||||||
checked={
|
selectedLinks.length === links.length && links.length > 0
|
||||||
selectedLinks.length === links.length && links.length > 0
|
}
|
||||||
}
|
/>
|
||||||
/>
|
{selectedLinks.length > 0 ? (
|
||||||
{selectedLinks.length > 0 && (
|
<span>
|
||||||
<span>
|
{selectedLinks.length}{" "}
|
||||||
{selectedLinks.length}{" "}
|
{selectedLinks.length === 1 ? "link" : "links"} selected
|
||||||
{selectedLinks.length === 1 ? "link" : "links"} selected
|
</span>
|
||||||
</span>
|
) : (
|
||||||
)}
|
<span>Nothing 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>
|
||||||
|
)}
|
||||||
|
<div className="flex gap-3">
|
||||||
|
{(permissions === true || permissions?.canUpdate) && (
|
||||||
|
<button
|
||||||
|
onClick={() => setBulkEditLinksModal(true)}
|
||||||
|
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||||
|
disabled={!editMode}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{(permissions === true || permissions?.canDelete) && (
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
(document?.activeElement as HTMLElement)?.blur();
|
||||||
|
e.shiftKey
|
||||||
|
? bulkDeleteLinks()
|
||||||
|
: setBulkDeleteLinksModal(true);
|
||||||
|
}}
|
||||||
|
disabled={!editMode}
|
||||||
|
className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{links.some((e) => e.collectionId === Number(router.query.id)) ? (
|
{links.some((e) => e.collectionId === Number(router.query.id)) ? (
|
||||||
<LinkComponent
|
<LinkComponent
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@ import SortDropdown from "@/components/SortDropdown";
|
||||||
import useLinks from "@/hooks/useLinks";
|
import useLinks from "@/hooks/useLinks";
|
||||||
import MainLayout from "@/layouts/MainLayout";
|
import MainLayout from "@/layouts/MainLayout";
|
||||||
import useLinkStore from "@/store/links";
|
import useLinkStore from "@/store/links";
|
||||||
import React, { useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import PageHeader from "@/components/PageHeader";
|
import PageHeader from "@/components/PageHeader";
|
||||||
import { Sort, ViewMode } from "@/types/global";
|
import { Member, Sort, ViewMode } from "@/types/global";
|
||||||
import ViewDropdown from "@/components/ViewDropdown";
|
import ViewDropdown from "@/components/ViewDropdown";
|
||||||
import CardView from "@/components/LinkViews/Layouts/CardView";
|
import CardView from "@/components/LinkViews/Layouts/CardView";
|
||||||
import ListView from "@/components/LinkViews/Layouts/ListView";
|
import ListView from "@/components/LinkViews/Layouts/ListView";
|
||||||
|
|
@ -28,7 +28,7 @@ export default function Links() {
|
||||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||||
const [editMode, setEditMode] = useState(false);
|
const [editMode, setEditMode] = useState(false);
|
||||||
const collectivePermissions = useCollectivePermissions(
|
const collectivePermissions = useCollectivePermissions(
|
||||||
selectedLinks.map((link) => link.collectionId as number)
|
links.map((link) => link.collectionId as number)
|
||||||
);
|
);
|
||||||
|
|
||||||
useLinks({ sort: sortBy });
|
useLinks({ sort: sortBy });
|
||||||
|
|
@ -43,8 +43,7 @@ export default function Links() {
|
||||||
|
|
||||||
const bulkDeleteLinks = async () => {
|
const bulkDeleteLinks = async () => {
|
||||||
const load = toast.loading(
|
const load = toast.loading(
|
||||||
`Deleting ${selectedLinks.length} Link${
|
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||||
selectedLinks.length > 1 ? "s" : ""
|
|
||||||
}...`
|
}...`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -56,8 +55,7 @@ export default function Links() {
|
||||||
|
|
||||||
response.ok &&
|
response.ok &&
|
||||||
toast.success(
|
toast.success(
|
||||||
`Deleted ${selectedLinks.length} Link${
|
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||||
selectedLinks.length > 1 ? "s" : ""
|
|
||||||
}!`
|
}!`
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
@ -71,6 +69,7 @@ export default function Links() {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const LinkComponent = linkView[viewMode];
|
const LinkComponent = linkView[viewMode];
|
||||||
|
|
||||||
|
console.log(collectivePermissions)
|
||||||
return (
|
return (
|
||||||
<MainLayout>
|
<MainLayout>
|
||||||
<div className="p-5 flex flex-col gap-5 w-full h-full">
|
<div className="p-5 flex flex-col gap-5 w-full h-full">
|
||||||
|
|
@ -89,11 +88,10 @@ export default function Links() {
|
||||||
setEditMode(!editMode);
|
setEditMode(!editMode);
|
||||||
setSelectedLinks([]);
|
setSelectedLinks([]);
|
||||||
}}
|
}}
|
||||||
className={`btn btn-square btn-sm btn-ghost ${
|
className={`btn btn-square btn-sm btn-ghost ${editMode
|
||||||
editMode
|
? "bg-primary/20 hover:bg-primary/20"
|
||||||
? "bg-primary/20 hover:bg-primary/20"
|
: "hover:bg-neutral/20"
|
||||||
: "hover:bg-neutral/20"
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,57 +101,55 @@ export default function Links() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{editMode && (
|
<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="w-full flex justify-between items-center min-h-[32px]">
|
{links.length > 0 && editMode && (
|
||||||
{links.length > 0 && (
|
<div className="flex gap-3 ml-3">
|
||||||
<div className="flex gap-3 ml-3">
|
<input
|
||||||
<input
|
type="checkbox"
|
||||||
type="checkbox"
|
className="checkbox checkbox-primary"
|
||||||
className="checkbox checkbox-primary"
|
onChange={() => handleSelectAll()}
|
||||||
onChange={() => handleSelectAll()}
|
checked={
|
||||||
checked={
|
selectedLinks.length === links.length && links.length > 0
|
||||||
selectedLinks.length === links.length && links.length > 0
|
}
|
||||||
}
|
/>
|
||||||
/>
|
{selectedLinks.length > 0 ? (
|
||||||
{selectedLinks.length > 0 ? (
|
<span>
|
||||||
<span>
|
{selectedLinks.length}{" "}
|
||||||
{selectedLinks.length}{" "}
|
{selectedLinks.length === 1 ? "link" : "links"} selected
|
||||||
{selectedLinks.length === 1 ? "link" : "links"} selected
|
</span>
|
||||||
</span>
|
) : (
|
||||||
) : (
|
<span>Nothing 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>
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex gap-3">
|
||||||
|
{(collectivePermissions === true ||
|
||||||
|
collectivePermissions?.canUpdate) && (
|
||||||
|
<button
|
||||||
|
onClick={() => setBulkEditLinksModal(true)}
|
||||||
|
disabled={!editMode}
|
||||||
|
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{(collectivePermissions === true ||
|
||||||
|
collectivePermissions?.canDelete) && (
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
(document?.activeElement as HTMLElement)?.blur();
|
||||||
|
e.shiftKey
|
||||||
|
? bulkDeleteLinks()
|
||||||
|
: setBulkDeleteLinksModal(true);
|
||||||
|
}}
|
||||||
|
disabled={!editMode}
|
||||||
|
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>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{links[0] ? (
|
{links[0] ? (
|
||||||
<LinkComponent editMode={editMode} links={links} />
|
<LinkComponent editMode={editMode} links={links} />
|
||||||
|
|
|
||||||
Ŝarĝante…
Reference in New Issue