Fixed disabled buttons

This commit is contained in:
Isaac Wise 2024-02-11 02:48:34 -06:00
parent aef33d859e
commit 2112176d6e
5 changed files with 164 additions and 164 deletions

View File

@ -135,12 +135,6 @@ export default function LinkCard({
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div> <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
)} )}
<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" className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
> >
<LinkIcon link={link} /> <LinkIcon link={link} />

View File

@ -329,8 +329,9 @@ export default function Index() {
</div> </div>
</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]"}> {editMode && (
{links.length > 0 && editMode && ( <div className="w-full flex justify-between items-center min-h-[32px]">
{links.length > 0 && (
<div className="flex gap-3 ml-3"> <div className="flex gap-3 ml-3">
<input <input
type="checkbox" type="checkbox"
@ -351,16 +352,18 @@ export default function Index() {
</div> </div>
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{(permissions === true || permissions?.canUpdate) && ( {(permissions === true ||
permissions?.canUpdate) && (
<button <button
onClick={() => setBulkEditLinksModal(true)} onClick={() => setBulkEditLinksModal(true)}
className="btn btn-sm btn-accent text-white w-fit ml-auto" className="btn btn-sm btn-accent text-white w-fit ml-auto"
disabled={!editMode || selectedLinks.length === 0} disabled={selectedLinks.length === 0}
> >
Edit Edit
</button> </button>
)} )}
{(permissions === true || permissions?.canDelete) && ( {(permissions === true ||
permissions?.canDelete) && (
<button <button
onClick={(e) => { onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur(); (document?.activeElement as HTMLElement)?.blur();
@ -368,14 +371,15 @@ export default function Index() {
? bulkDeleteLinks() ? bulkDeleteLinks()
: setBulkDeleteLinksModal(true); : setBulkDeleteLinksModal(true);
}} }}
disabled={!editMode || selectedLinks.length === 0} className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto" disabled={selectedLinks.length === 0}
> >
Delete Delete
</button> </button>
)} )}
</div> </div>
</div> </div>
)}
{links.some((e) => e.collectionId === Number(router.query.id)) ? ( {links.some((e) => e.collectionId === Number(router.query.id)) ? (
<LinkComponent <LinkComponent

View File

@ -101,8 +101,9 @@ export default function Links() {
</div> </div>
</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]"}> {editMode && (
{links.length > 0 && editMode && ( <div className="w-full flex justify-between items-center min-h-[32px]">
{links.length > 0 && (
<div className="flex gap-3 ml-3"> <div className="flex gap-3 ml-3">
<input <input
type="checkbox" type="checkbox"
@ -127,8 +128,8 @@ export default function Links() {
collectivePermissions?.canUpdate) && ( collectivePermissions?.canUpdate) && (
<button <button
onClick={() => setBulkEditLinksModal(true)} onClick={() => setBulkEditLinksModal(true)}
disabled={!editMode}
className="btn btn-sm btn-accent text-white w-fit ml-auto" className="btn btn-sm btn-accent text-white w-fit ml-auto"
disabled={selectedLinks.length === 0}
> >
Edit Edit
</button> </button>
@ -142,14 +143,15 @@ export default function Links() {
? bulkDeleteLinks() ? bulkDeleteLinks()
: setBulkDeleteLinksModal(true); : 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" 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 Delete
</button> </button>
)} )}
</div> </div>
</div> </div>
)}
{links[0] ? ( {links[0] ? (
<LinkComponent editMode={editMode} links={links} /> <LinkComponent editMode={editMode} links={links} />

View File

@ -100,8 +100,9 @@ export default function PinnedLinks() {
</div> </div>
</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]"}> {editMode && (
{links.length > 0 && editMode && ( <div className="w-full flex justify-between items-center min-h-[32px]">
{links.length > 0 && (
<div className="flex gap-3 ml-3"> <div className="flex gap-3 ml-3">
<input <input
type="checkbox" type="checkbox"
@ -122,16 +123,18 @@ export default function PinnedLinks() {
</div> </div>
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{(collectivePermissions === true || collectivePermissions?.canUpdate) && ( {(collectivePermissions === true ||
collectivePermissions?.canUpdate) && (
<button <button
onClick={() => setBulkEditLinksModal(true)} onClick={() => setBulkEditLinksModal(true)}
className="btn btn-sm btn-accent text-white w-fit ml-auto" className="btn btn-sm btn-accent text-white w-fit ml-auto"
disabled={!editMode || selectedLinks.length === 0} disabled={selectedLinks.length === 0}
> >
Edit Edit
</button> </button>
)} )}
{(collectivePermissions === true || collectivePermissions?.canDelete) && ( {(collectivePermissions === true ||
collectivePermissions?.canDelete) && (
<button <button
onClick={(e) => { onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur(); (document?.activeElement as HTMLElement)?.blur();
@ -139,14 +142,15 @@ export default function PinnedLinks() {
? bulkDeleteLinks() ? bulkDeleteLinks()
: setBulkDeleteLinksModal(true); : setBulkDeleteLinksModal(true);
}} }}
disabled={!editMode || selectedLinks.length === 0} className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto" disabled={selectedLinks.length === 0}
> >
Delete Delete
</button> </button>
)} )}
</div> </div>
</div> </div>
)}
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? ( {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
<LinkComponent editMode={editMode} links={links} /> <LinkComponent editMode={editMode} links={links} />

View File

@ -115,8 +115,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" : ""
}...` }...`
); );
@ -128,8 +127,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" : ""
}!` }!`
); );
}; };
@ -188,8 +186,7 @@ export default function Index() {
</p> </p>
<div className="relative"> <div className="relative">
<div <div
className={`dropdown dropdown-bottom font-normal ${ className={`dropdown dropdown-bottom font-normal ${activeTag?.name.length && activeTag?.name.length > 8
activeTag?.name.length && activeTag?.name.length > 8
? "dropdown-end" ? "dropdown-end"
: "" : ""
}`} }`}
@ -244,8 +241,7 @@ 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"
}`} }`}
@ -279,18 +275,17 @@ export default function Index() {
</div> </div>
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{selectedLinks.length > 0 && {(collectivePermissions === true ||
(collectivePermissions === true ||
collectivePermissions?.canUpdate) && ( collectivePermissions?.canUpdate) && (
<button <button
onClick={() => setBulkEditLinksModal(true)} 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 Edit
</button> </button>
)} )}
{selectedLinks.length > 0 && {(collectivePermissions === true ||
(collectivePermissions === true ||
collectivePermissions?.canDelete) && ( collectivePermissions?.canDelete) && (
<button <button
onClick={(e) => { onClick={(e) => {
@ -300,6 +295,7 @@ export default function Index() {
: setBulkDeleteLinksModal(true); : 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" 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 Delete
</button> </button>