Fixed disabled buttons
This commit is contained in:
Isaac Wise
parent
aef33d859e
commit
2112176d6e
|
|
@ -135,12 +135,6 @@ export default function LinkCard({
|
|||
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
|
||||
)}
|
||||
<div
|
||||
style={
|
||||
{
|
||||
// background:
|
||||
// "radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent)",
|
||||
}
|
||||
}
|
||||
className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
|
||||
>
|
||||
<LinkIcon link={link} />
|
||||
|
|
|
|||
|
|
@ -329,53 +329,57 @@ export default function Index() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
)}
|
||||
{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">
|
||||
{(permissions === true ||
|
||||
permissions?.canUpdate) && (
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{(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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</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 || selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{(permissions === true || permissions?.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.collectionId === Number(router.query.id)) ? (
|
||||
<LinkComponent
|
||||
|
|
|
|||
|
|
@ -101,55 +101,57 @@ export default function Links() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
)}
|
||||
{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">
|
||||
{(collectivePermissions === true ||
|
||||
collectivePermissions?.canUpdate) && (
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{(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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</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>
|
||||
)}
|
||||
|
||||
{links[0] ? (
|
||||
<LinkComponent editMode={editMode} links={links} />
|
||||
|
|
|
|||
|
|
@ -100,53 +100,57 @@ export default function PinnedLinks() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
)}
|
||||
{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">
|
||||
{(collectivePermissions === true ||
|
||||
collectivePermissions?.canUpdate) && (
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{(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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</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} />
|
||||
|
|
|
|||
|
|
@ -115,8 +115,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" : ""
|
||||
}...`
|
||||
);
|
||||
|
||||
|
|
@ -128,8 +127,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" : ""
|
||||
}!`
|
||||
);
|
||||
};
|
||||
|
|
@ -188,11 +186,10 @@ export default function Index() {
|
|||
</p>
|
||||
<div className="relative">
|
||||
<div
|
||||
className={`dropdown dropdown-bottom font-normal ${
|
||||
activeTag?.name.length && activeTag?.name.length > 8
|
||||
? "dropdown-end"
|
||||
: ""
|
||||
}`}
|
||||
className={`dropdown dropdown-bottom font-normal ${activeTag?.name.length && activeTag?.name.length > 8
|
||||
? "dropdown-end"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
tabIndex={0}
|
||||
|
|
@ -244,11 +241,10 @@ export default function Index() {
|
|||
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>
|
||||
|
|
@ -279,19 +275,18 @@ export default function Index() {
|
|||
</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
{selectedLinks.length > 0 &&
|
||||
(collectivePermissions === true ||
|
||||
collectivePermissions?.canUpdate) && (
|
||||
{(collectivePermissions === true ||
|
||||
collectivePermissions?.canUpdate) && (
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{selectedLinks.length > 0 &&
|
||||
(collectivePermissions === true ||
|
||||
collectivePermissions?.canDelete) && (
|
||||
{(collectivePermissions === true ||
|
||||
collectivePermissions?.canDelete) && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
|
|
@ -300,6 +295,7 @@ export default function Index() {
|
|||
: 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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue