collection editing frontend

components/Modal/AddCollection.tsx

@@ -135,109 +135,113 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
         return (
           <div
             key={i}
-            className="border p-2 rounded-md border-sky-100 flex items-center justify-between"
+            className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
           >
+            <FontAwesomeIcon
+              icon={faClose}
+              className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
+              title="Remove Member"
+              onClick={() => {
+                const updatedMembers = newCollection.members.filter(
+                  (member) => {
+                    return member.email !== e.email;
+                  }
+                );
+                setNewCollection({
+                  ...newCollection,
+                  members: updatedMembers,
+                });
+              }}
+            />
             <div>
               <p className="text-sm font-bold text-sky-500">{e.name}</p>
               <p className="text-sky-900">{e.email}</p>
             </div>
-            <div className="relative">
+            <div className="flex sm:block items-center gap-5">
-              <FontAwesomeIcon
+              <div>
-                icon={faClose}
+                <p className="font-bold text-sm text-gray-500">Permissions</p>
-                className="absolute right-0 top-0 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
+                <p className="text-xs text-gray-400 mb-2">(Click to toggle.)</p>
-                title="Remove Member"
+              </div>
-                onClick={() => {
-                  const updatedMembers = newCollection.members.filter(
-                    (member) => {
-                      return member.email !== e.email;
-                    }
-                  );
-                  setNewCollection({
-                    ...newCollection,
-                    members: updatedMembers,
-                  });
-                }}
-              />
-              <p className="font-bold text-sm text-gray-500">Permissions</p>
-              <p className="text-xs text-gray-400 mb-2">(Click to toggle.)</p>
 
-              <label className="cursor-pointer mr-1">
+              <div>
-                <input
+                <label className="cursor-pointer mr-1">
-                  type="checkbox"
+                  <input
-                  id="canCreate"
+                    type="checkbox"
-                  className="peer sr-only"
+                    id="canCreate"
-                  checked={e.canCreate}
+                    className="peer sr-only"
-                  onChange={() => {
+                    checked={e.canCreate}
-                    const updatedMembers = newCollection.members.map(
+                    onChange={() => {
-                      (member) => {
+                      const updatedMembers = newCollection.members.map(
-                        if (member.email === e.email) {
+                        (member) => {
-                          return { ...member, canCreate: !e.canCreate };
+                          if (member.email === e.email) {
+                            return { ...member, canCreate: !e.canCreate };
+                          }
+                          return member;
                         }
-                        return member;
+                      );
-                      }
+                      setNewCollection({
-                    );
+                        ...newCollection,
-                    setNewCollection({
+                        members: updatedMembers,
-                      ...newCollection,
+                      });
-                      members: updatedMembers,
+                    }}
-                    });
+                  />
-                  }}
+                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
-                />
+                    Create
-                <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                  </span>
-                  Create
+                </label>
-                </span>
-              </label>
 
-              <label className="cursor-pointer mr-1">
+                <label className="cursor-pointer mr-1">
-                <input
+                  <input
-                  type="checkbox"
+                    type="checkbox"
-                  id="canUpdate"
+                    id="canUpdate"
-                  className="peer sr-only"
+                    className="peer sr-only"
-                  checked={e.canUpdate}
+                    checked={e.canUpdate}
-                  onChange={() => {
+                    onChange={() => {
-                    const updatedMembers = newCollection.members.map(
+                      const updatedMembers = newCollection.members.map(
-                      (member) => {
+                        (member) => {
-                        if (member.email === e.email) {
+                          if (member.email === e.email) {
-                          return { ...member, canUpdate: !e.canUpdate };
+                            return { ...member, canUpdate: !e.canUpdate };
+                          }
+                          return member;
                         }
-                        return member;
+                      );
-                      }
+                      setNewCollection({
-                    );
+                        ...newCollection,
-                    setNewCollection({
+                        members: updatedMembers,
-                      ...newCollection,
+                      });
-                      members: updatedMembers,
+                    }}
-                    });
+                  />
-                  }}
+                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
-                />
+                    Update
-                <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                  </span>
-                  Update
+                </label>
-                </span>
-              </label>
 
-              <label className="cursor-pointer mr-1">
+                <label className="cursor-pointer mr-1">
-                <input
+                  <input
-                  type="checkbox"
+                    type="checkbox"
-                  id="canDelete"
+                    id="canDelete"
-                  className="peer sr-only"
+                    className="peer sr-only"
-                  checked={e.canDelete}
+                    checked={e.canDelete}
-                  onChange={() => {
+                    onChange={() => {
-                    const updatedMembers = newCollection.members.map(
+                      const updatedMembers = newCollection.members.map(
-                      (member) => {
+                        (member) => {
-                        if (member.email === e.email) {
+                          if (member.email === e.email) {
-                          return { ...member, canDelete: !e.canDelete };
+                            return { ...member, canDelete: !e.canDelete };
+                          }
+                          return member;
                         }
-                        return member;
+                      );
-                      }
+                      setNewCollection({
-                    );
+                        ...newCollection,
-                    setNewCollection({
+                        members: updatedMembers,
-                      ...newCollection,
+                      });
-                      members: updatedMembers,
+                    }}
-                    });
+                  />
-                  }}
+                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
-                />
+                    Delete
-                <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                  </span>
-                  Delete
+                </label>
-                </span>
+              </div>
-              </label>
             </div>
           </div>
         );

components/Modal/EditCollection.tsx

@@ -0,0 +1,267 @@
+// Copyright (C) 2022-present Daniel31x13 <daniel31x13@gmail.com>
+// This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
+// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClose, faPlus } from "@fortawesome/free-solid-svg-icons";
+import useCollectionStore from "@/store/collections";
+import { ExtendedCollection, NewCollection } from "@/types/global";
+import { useSession } from "next-auth/react";
+
+type Props = {
+  toggleCollectionModal: Function;
+  collection: ExtendedCollection;
+};
+
+export default function EditCollection({
+  toggleCollectionModal,
+  collection,
+}: Props) {
+  const [activeCollection, setActiveCollection] =
+    useState<ExtendedCollection>(collection);
+
+  const [memberEmail, setMemberEmail] = useState("");
+
+  // const { addCollection } = useCollectionStore();
+
+  const session = useSession();
+
+  const submitCollection = async () => {
+    console.log(activeCollection);
+
+    // const response = await addCollection(newCollection as NewCollection);
+
+    // if (response) toggleCollectionModal();
+  };
+
+  const getUserByEmail = async (email: string) => {
+    const response = await fetch(`/api/routes/users?email=${email}`);
+
+    const data = await response.json();
+
+    return data.response;
+  };
+
+  return (
+    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+      <p className="font-bold text-sky-300 mb-2 text-center">Edit Collection</p>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">Name</p>
+        <input
+          value={activeCollection.name}
+          onChange={(e) =>
+            setActiveCollection({ ...activeCollection, name: e.target.value })
+          }
+          type="text"
+          placeholder="e.g. Example Collection"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+        />
+      </div>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">Description</p>
+        <input
+          value={activeCollection.description}
+          onChange={(e) =>
+            setActiveCollection({
+              ...activeCollection,
+              description: e.target.value,
+            })
+          }
+          type="text"
+          placeholder="Collection description (Optional)"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+        />
+      </div>
+
+      <hr className="border rounded my-2" />
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">Members</p>
+        <input
+          value={memberEmail}
+          onChange={(e) => {
+            setMemberEmail(e.target.value);
+          }}
+          onKeyDown={async (e) => {
+            const checkIfMemberAlreadyExists = activeCollection.members.find(
+              (e) => e.user.email === memberEmail
+            );
+
+            const ownerEmail = session.data?.user.email;
+
+            if (
+              e.key === "Enter" &&
+              // no duplicate members
+              !checkIfMemberAlreadyExists &&
+              // member can't be empty
+              memberEmail.trim() !== "" &&
+              // member can't be the owner
+              memberEmail.trim() !== ownerEmail
+            ) {
+              // Lookup, get data/err, list ...
+              const user = await getUserByEmail(memberEmail.trim());
+
+              if (user.email) {
+                const newMember = {
+                  collectionId: activeCollection.id,
+                  userId: user.id,
+                  canCreate: false,
+                  canUpdate: false,
+                  canDelete: false,
+                  user: {
+                    name: user.name,
+                    email: user.email,
+                  },
+                };
+
+                setActiveCollection({
+                  ...activeCollection,
+                  members: [...activeCollection.members, newMember],
+                });
+
+                setMemberEmail("");
+              }
+            }
+          }}
+          type="text"
+          placeholder="Email (Optional)"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+        />
+      </div>
+
+      {activeCollection.members[0] ? (
+        <p className="text-center text-sky-500 text-xs sm:text-sm">
+          (All Members will have <b>Read</b> access to this collection.)
+        </p>
+      ) : null}
+
+      {activeCollection.members.map((e, i) => {
+        return (
+          <div
+            key={i}
+            className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+          >
+            <FontAwesomeIcon
+              icon={faClose}
+              className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
+              title="Remove Member"
+              onClick={() => {
+                const updatedMembers = activeCollection.members.filter(
+                  (member) => {
+                    return member.user.email !== e.user.email;
+                  }
+                );
+                setActiveCollection({
+                  ...activeCollection,
+                  members: updatedMembers,
+                });
+              }}
+            />
+            <div>
+              <p className="text-sm font-bold text-sky-500">{e.user.name}</p>
+              <p className="text-sky-900">{e.user.email}</p>
+            </div>
+            <div className="flex sm:block items-center gap-5">
+              <div>
+                <p className="font-bold text-sm text-gray-500">Permissions</p>
+                <p className="text-xs text-gray-400 mb-2">(Click to toggle.)</p>
+              </div>
+
+              <div>
+                <label className="cursor-pointer mr-1">
+                  <input
+                    type="checkbox"
+                    id="canCreate"
+                    className="peer sr-only"
+                    checked={e.canCreate}
+                    onChange={() => {
+                      const updatedMembers = activeCollection.members.map(
+                        (member) => {
+                          if (member.user.email === e.user.email) {
+                            return { ...member, canCreate: !e.canCreate };
+                          }
+                          return member;
+                        }
+                      );
+                      setActiveCollection({
+                        ...activeCollection,
+                        members: updatedMembers,
+                      });
+                    }}
+                  />
+                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                    Create
+                  </span>
+                </label>
+
+                <label className="cursor-pointer mr-1">
+                  <input
+                    type="checkbox"
+                    id="canUpdate"
+                    className="peer sr-only"
+                    checked={e.canUpdate}
+                    onChange={() => {
+                      const updatedMembers = activeCollection.members.map(
+                        (member) => {
+                          if (member.user.email === e.user.email) {
+                            return { ...member, canUpdate: !e.canUpdate };
+                          }
+                          return member;
+                        }
+                      );
+                      setActiveCollection({
+                        ...activeCollection,
+                        members: updatedMembers,
+                      });
+                    }}
+                  />
+                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                    Update
+                  </span>
+                </label>
+
+                <label className="cursor-pointer mr-1">
+                  <input
+                    type="checkbox"
+                    id="canDelete"
+                    className="peer sr-only"
+                    checked={e.canDelete}
+                    onChange={() => {
+                      const updatedMembers = activeCollection.members.map(
+                        (member) => {
+                          if (member.user.email === e.user.email) {
+                            return { ...member, canDelete: !e.canDelete };
+                          }
+                          return member;
+                        }
+                      );
+                      setActiveCollection({
+                        ...activeCollection,
+                        members: updatedMembers,
+                      });
+                    }}
+                  />
+                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                    Delete
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+
+      <div
+        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+        onClick={submitCollection}
+      >
+        <FontAwesomeIcon icon={faPlus} className="h-5" />
+        Add Collection
+      </div>
+    </div>
+  );
+}

lib/api/controllers/collections/getCollections.ts

@@ -14,7 +14,16 @@ export default async function (userId: number) {
       ],
     },
     include: {
-      members: true,
+      members: {
+        include: {
+          user: {
+            select: {
+              email: true,
+              name: true,
+            },
+          },
+        },
+      },
     },
   });
 

lib/api/controllers/users/getUsers.ts

@@ -13,6 +13,7 @@ export default async function (email: string) {
   });
 
   const unsensitiveUserInfo = {
+    id: user?.id,
     name: user?.name,
     email: user?.email,
     createdAt: user?.createdAt,

pages/collections/[id].tsx

@@ -7,9 +7,10 @@ import Dropdown from "@/components/Dropdown";
 import LinkList from "@/components/LinkList";
 import Modal from "@/components/Modal";
 import AddLink from "@/components/Modal/AddLink";
+import EditCollection from "@/components/Modal/EditCollection";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
-import { ExtendedLink } from "@/types/global";
+import { ExtendedCollection, ExtendedLink } from "@/types/global";
 import {
   faAdd,
   faEllipsis,
@@ -30,7 +31,9 @@ export default function () {
 
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [linkModal, setLinkModal] = useState(false);
-  const [activeCollection, setActiveCollection] = useState<Collection>();
+  const [collectionModal, setCollectionModal] = useState(false);
+  const [activeCollection, setActiveCollection] =
+    useState<ExtendedCollection>();
   const [linksByCollection, setLinksByCollection] =
     useState<ExtendedLink[]>(links);
 
@@ -38,6 +41,10 @@ export default function () {
     setLinkModal(!linkModal);
   };
 
+  const toggleCollectionModal = () => {
+    setCollectionModal(!collectionModal);
+  };
+
   useEffect(() => {
     setLinksByCollection(
       links.filter((e) => e.collection.id === Number(router.query.id))
@@ -82,6 +89,10 @@ export default function () {
                 {
                   name: "Edit Collection",
                   icon: <FontAwesomeIcon icon={faPenToSquare} />,
+                  onClick: () => {
+                    toggleCollectionModal();
+                    setExpandDropdown(false);
+                  },
                 },
                 {
                   name: "Delete Collection",
@@ -101,6 +112,15 @@ export default function () {
               <AddLink toggleLinkModal={toggleLinkModal} />
             </Modal>
           ) : null}
+
+          {collectionModal && activeCollection ? (
+            <Modal toggleModal={toggleCollectionModal}>
+              <EditCollection
+                toggleCollectionModal={toggleCollectionModal}
+                collection={activeCollection}
+              />
+            </Modal>
+          ) : null}
         </div>
       </div>
       {linksByCollection.map((e, i) => {

types/global.ts

@@ -3,7 +3,7 @@
 // This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { Collection, Link, Tag, UsersAndCollections } from "@prisma/client";
+import { Collection, Link, Tag } from "@prisma/client";
 
 export interface ExtendedLink extends Link {
   tags: Tag[];
@@ -34,5 +34,15 @@ export interface NewCollection {
 }
 
 export interface ExtendedCollection extends Collection {
-  members: UsersAndCollections[];
+  members: {
+    collectionId: number;
+    userId: number;
+    canCreate: boolean;
+    canUpdate: boolean;
+    canDelete: boolean;
+    user: {
+      name: string;
+      email: string;
+    };
+  }[];
 }