Fixed disabled buttons

2024-02-11 02:48:34 -06:00
parent aef33d859e
commit 2112176d6e
5 changed files with 164 additions and 164 deletions
@@ -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