link compact list view

2023-12-16 11:25:39 +08:00
parent f8ad08f5ed
commit bcfbdf3e49
14 changed files with 803 additions and 292 deletions
@@ -0,0 +1,165 @@
+import { useState } from "react";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import usePermissions from "@/hooks/usePermissions";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import EditLinkModal from "@/components/ModalContent/EditLinkModal";
+import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
+import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
+import useLinkStore from "@/store/links";
+import { toast } from "react-hot-toast";
+import useAccountStore from "@/store/account";
+
+export default function LinkActions({
+  link,
+  collection,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+  collection: CollectionIncludingMembersAndLinkCount;
+}) {
+  const permissions = usePermissions(link.collection.id as number);
+
+  const [editLinkModal, setEditLinkModal] = useState(false);
+  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
+  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
+  const [expandedLink, setExpandedLink] = useState(false);
+
+  const { account } = useAccountStore();
+
+  const { removeLink, updateLink } = useLinkStore();
+
+  const pinLink = async () => {
+    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateLink({
+      ...link,
+      pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
+    });
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
+  };
+
+  const deleteLink = async () => {
+    const load = toast.loading("Deleting...");
+
+    const response = await removeLink(link.id as number);
+
+    toast.dismiss(load);
+
+    response.ok && toast.success(`Link Deleted.`);
+  };
+
+  return (
+    <div>
+      {permissions === true ||
+      permissions?.canUpdate ||
+      permissions?.canDelete ? (
+        <div className="dropdown dropdown-left absolute top-3 right-3 z-20">
+          <div
+            tabIndex={0}
+            role="button"
+            className="btn btn-ghost btn-sm btn-square text-neutral"
+          >
+            <FontAwesomeIcon
+              icon={faEllipsis}
+              title="More"
+              className="w-5 h-5"
+              id={"expand-dropdown" + collection.id}
+            />
+          </div>
+          <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
+            {permissions === true ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    pinLink();
+                  }}
+                >
+                  {link?.pinnedBy && link.pinnedBy[0]
+                    ? "Unpin"
+                    : "Pin to Dashboard"}
+                </div>
+              </li>
+            ) : undefined}
+            {permissions === true || permissions?.canUpdate ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setEditLinkModal(true);
+                  }}
+                >
+                  Edit
+                </div>
+              </li>
+            ) : undefined}
+            {permissions === true ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setPreservedFormatsModal(true);
+                    // updateArchive();
+                  }}
+                >
+                  Preserved Formats
+                </div>
+              </li>
+            ) : undefined}
+            {permissions === true || permissions?.canDelete ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
+                  }}
+                >
+                  Delete
+                </div>
+              </li>
+            ) : undefined}
+          </ul>
+        </div>
+      ) : undefined}
+
+      {editLinkModal ? (
+        <EditLinkModal
+          onClose={() => setEditLinkModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {deleteLinkModal ? (
+        <DeleteLinkModal
+          onClose={() => setDeleteLinkModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {preservedFormatsModal ? (
+        <PreservedFormatsModal
+          onClose={() => setPreservedFormatsModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {/* {expandedLink ? (
+                <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
+              ) : undefined} */}
+    </div>
+  );
+}