Edit Mode

2024-02-10 23:55:00 -06:00 · 2024-02-10 23:55:00 -06:00 · 8ecedf7cae
parent 44daffbae6
commit 8ecedf7cae
7 changed files with 91 additions and 70 deletions
--- a/components/LinkViews/Layouts/CardView.tsx
+++ b/components/LinkViews/Layouts/CardView.tsx
@ -4,9 +4,11 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 export default function CardView({
  links,
  showCheckbox = true,
+  editMode
 }: {
  links: LinkIncludingShortenedCollectionAndTags[];
  showCheckbox?: boolean;
+  editMode?: boolean;
 }) {
  return (
    <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@ -18,6 +20,7 @@ export default function CardView({
            count={i}
            flipDropdown={i === links.length - 1}
            showCheckbox={showCheckbox}
+            editMode={editMode}
          />
        );
      })}
--- a/components/LinkViews/Layouts/ListView.tsx
+++ b/components/LinkViews/Layouts/ListView.tsx
@ -4,9 +4,11 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 export default function ListView({
  links,
  showCheckbox = true,
+  editMode
 }: {
  links: LinkIncludingShortenedCollectionAndTags[];
  showCheckbox?: boolean;
+  editMode?: boolean;
 }) {
  return (
    <div className="flex flex-col">
@ -18,6 +20,8 @@ export default function ListView({
            count={i}
            showCheckbox={showCheckbox}
            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+
          />
        );
      })}
--- a/components/LinkViews/LinkCard.tsx
+++ b/components/LinkViews/LinkCard.tsx
@ -25,12 +25,14 @@ type Props = {
  className?: string;
  flipDropdown?: boolean;
  showCheckbox?: boolean;
+  editMode?: boolean;
 };

 export default function LinkCard({
  link,
  flipDropdown,
  showCheckbox = true,
+  editMode
 }: Props) {
  const { collections } = useCollectionStore();
  const { account } = useAccountStore();
@ -101,7 +103,7 @@ export default function LinkCard({
      ref={ref}
      className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
    >
-      {showCheckbox &&
+      {showCheckbox && editMode &&
        (permissions === true ||
          permissions?.canCreate ||
          permissions?.canDelete) && (
--- a/components/LinkViews/LinkList.tsx
+++ b/components/LinkViews/LinkList.tsx
@ -22,12 +22,14 @@ type Props = {
  className?: string;
  flipDropdown?: boolean;
  showCheckbox?: boolean;
+  editMode?: boolean;
 };

 export default function LinkCardCompact({
  link,
  flipDropdown,
  showCheckbox = true,
+  editMode,
 }: Props) {
  const { collections } = useCollectionStore();
  const { account } = useAccountStore();
@ -73,11 +75,10 @@ export default function LinkCardCompact({
  return (
    <>
      <div
-        className={`border-neutral-content relative items-center flex ${
-          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
-        } duration-200 rounded-lg`}
+        className={`border-neutral-content relative items-center flex ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+          } duration-200 rounded-lg`}
      >
-        {showCheckbox &&
+        {showCheckbox && editMode &&
          (permissions === true ||
            permissions?.canCreate ||
            permissions?.canDelete) && (
@ -128,8 +129,8 @@ export default function LinkCardCompact({
          collection={collection}
          position="top-3 right-3"
          flipDropdown={flipDropdown}
-          // toggleShowInfo={() => setShowInfo(!showInfo)}
-          // linkInfo={showInfo}
+        // toggleShowInfo={() => setShowInfo(!showInfo)}
+        // linkInfo={showInfo}
        />
        {showInfo ? (
          <div>
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@ -14,7 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
        tabIndex={0}
        role="button"
        onMouseDown={dropdownTriggerer}
-        className="btn btn-sm btn-square btn-ghost"
+        className="btn btn-sm btn-square btn-ghost border-none"
      >
        <i className="bi-chevron-expand text-neutral text-2xl"></i>
      </div>
--- a/components/ViewDropdown.tsx
+++ b/components/ViewDropdown.tsx
@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, { Dispatch, SetStateAction, useEffect } from "react";
 import useLocalSettingsStore from "@/store/localSettings";

 import { ViewMode } from "@/types/global";
@ -26,22 +26,20 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
    <div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]">
      <button
        onClick={(e) => onChangeViewMode(e, ViewMode.Card)}
-        className={`btn btn-square btn-sm btn-ghost ${
-          viewMode == ViewMode.Card
-            ? "bg-primary/20 hover:bg-primary/20"
-            : "hover:bg-neutral/20"
-        }`}
+        className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.Card
+          ? "bg-primary/20 hover:bg-primary/20"
+          : "hover:bg-neutral/20"
+          }`}
      >
        <i className="bi-grid w-4 h-4 text-neutral"></i>
      </button>

      <button
        onClick={(e) => onChangeViewMode(e, ViewMode.List)}
-        className={`btn btn-square btn-sm btn-ghost ${
-          viewMode == ViewMode.List
-            ? "bg-primary/20 hover:bg-primary/20"
-            : "hover:bg-neutral/20"
-        }`}
+        className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.List
+          ? "bg-primary/20 hover:bg-primary/20"
+          : "hover:bg-neutral/20"
+          }`}
      >
        <i className="bi bi-view-stacked w-4 h-4 text-neutral"></i>
      </button>
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@ -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
            )}