changes/fixes + some WIP
This commit is contained in:
Daniel
parent
ffecdf21a0
commit
7f3d93517d
|
|
@ -41,7 +41,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="p-5 bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none group relative">
|
||||
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md shadow duration-100 hover:shadow-none group relative">
|
||||
<div
|
||||
onClick={() => setExpandDropdown(!expandDropdown)}
|
||||
id="edit-dropdown"
|
||||
|
|
@ -54,7 +54,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
|
|||
/>
|
||||
</div>
|
||||
<Link href={`/collections/${collection.id}`}>
|
||||
<div className="flex flex-col gap-2 justify-between h-full select-none">
|
||||
<div className="flex flex-col gap-2 justify-between h-full select-none p-5 cursor-pointer">
|
||||
<p className="text-2xl font-bold capitalize text-sky-600 break-words w-4/5">
|
||||
{collection.name}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default function ({ onClickOutside, className, items }: Props) {
|
|||
return (
|
||||
<ClickAwayHandler
|
||||
onClickOutside={onClickOutside}
|
||||
className={`${className} border border-sky-100 shadow-md mb-5 bg-gray-50 rounded-md flex flex-col`}
|
||||
className={`${className} border border-sky-100 shadow-md mb-5 bg-gray-50 rounded-md flex flex-col z-10`}
|
||||
>
|
||||
{items.map((e, i) => {
|
||||
const inner = (
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@
|
|||
|
||||
import React, { useState } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faClose, faPlus, faUser } from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faClose,
|
||||
faPlus,
|
||||
faUser,
|
||||
faUserPlus,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import { ExtendedCollection, NewCollection } from "@/types/global";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
|
@ -111,7 +116,7 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
|
|||
}
|
||||
className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer"
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} className="w-4 h-4" />
|
||||
<FontAwesomeIcon icon={faUserPlus} className="w-6 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
faPlus,
|
||||
faTrashCan,
|
||||
faUser,
|
||||
faUserPlus,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import { ExtendedCollection } from "@/types/global";
|
||||
|
|
@ -20,6 +21,7 @@ import DeleteCollection from "@/components/Modal/DeleteCollection";
|
|||
import RequiredBadge from "../RequiredBadge";
|
||||
import addMemberToCollection from "@/lib/client/addMemberToCollection";
|
||||
import ImageWithFallback from "../ImageWithFallback";
|
||||
import Checkbox from "../Checkbox";
|
||||
|
||||
type Props = {
|
||||
toggleCollectionModal: Function;
|
||||
|
|
@ -102,9 +104,27 @@ export default function EditCollection({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="border rounded my-2" />
|
||||
<hr className="my-2" />
|
||||
|
||||
{/* <p className="text-sky-600">Sharing & Collaboration Settings</p>
|
||||
|
||||
<p className="text-sm font-bold text-sky-300">Collaboration</p>
|
||||
|
||||
<div className="w-fit">
|
||||
<div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-500">
|
||||
Manage Team
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Checkbox
|
||||
label="Make this a public collection."
|
||||
state={true}
|
||||
onClick={() => console.log("Clicked!")}
|
||||
/>
|
||||
<p className="text-gray-500 text-sm">
|
||||
This will let anyone to access this collection.
|
||||
</p> */}
|
||||
|
||||
<p className="text-sm font-bold text-sky-300">Members</p>
|
||||
<div className="relative">
|
||||
<input
|
||||
value={memberEmail}
|
||||
|
|
@ -128,7 +148,7 @@ export default function EditCollection({
|
|||
}
|
||||
className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer"
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} className="w-4 h-4" />
|
||||
<FontAwesomeIcon icon={faUserPlus} className="w-6 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
{activeCollection.members[0] ? (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,265 @@
|
|||
// 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, faUser } from "@fortawesome/free-solid-svg-icons";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import { ExtendedCollection, NewCollection } from "@/types/global";
|
||||
import { useSession } from "next-auth/react";
|
||||
import RequiredBadge from "../RequiredBadge";
|
||||
import addMemberToCollection from "@/lib/client/addMemberToCollection";
|
||||
import ImageWithFallback from "../ImageWithFallback";
|
||||
|
||||
type Props = {
|
||||
toggleCollectionModal: Function;
|
||||
};
|
||||
|
||||
export default function AddCollection({ toggleCollectionModal }: Props) {
|
||||
const [newCollection, setNewCollection] = useState<NewCollection>({
|
||||
name: "",
|
||||
description: "",
|
||||
members: [],
|
||||
});
|
||||
|
||||
const [memberEmail, setMemberEmail] = useState("");
|
||||
|
||||
const { addCollection } = useCollectionStore();
|
||||
|
||||
const session = useSession();
|
||||
|
||||
const submit = async () => {
|
||||
console.log(newCollection);
|
||||
|
||||
const response = await addCollection(newCollection as NewCollection);
|
||||
|
||||
if (response) toggleCollectionModal();
|
||||
};
|
||||
|
||||
const setMemberState = (newMember: any) => {
|
||||
setNewCollection({
|
||||
...newCollection,
|
||||
members: [...newCollection.members, newMember],
|
||||
});
|
||||
|
||||
setMemberEmail("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
|
||||
<p className="text-xl text-sky-500 mb-2 text-center">New Collection</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="w-full">
|
||||
<p className="text-sm font-bold text-sky-300 mb-2">
|
||||
Name
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<input
|
||||
value={newCollection.name}
|
||||
onChange={(e) =>
|
||||
setNewCollection({ ...newCollection, name: e.target.value })
|
||||
}
|
||||
type="text"
|
||||
placeholder="e.g. Example Collection"
|
||||
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<p className="text-sm font-bold text-sky-300 mb-2">Description</p>
|
||||
<input
|
||||
value={newCollection.description}
|
||||
onChange={(e) =>
|
||||
setNewCollection({
|
||||
...newCollection,
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
type="text"
|
||||
placeholder="Collection description"
|
||||
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="border rounded my-2" />
|
||||
|
||||
<p className="text-sm font-bold text-sky-300">Members</p>
|
||||
<div className="relative">
|
||||
<input
|
||||
value={memberEmail}
|
||||
onChange={(e) => {
|
||||
setMemberEmail(e.target.value);
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
className="w-full rounded-md p-3 pr-12 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
|
||||
<div
|
||||
onClick={() =>
|
||||
addMemberToCollection(
|
||||
session.data?.user.email as string,
|
||||
memberEmail,
|
||||
newCollection as unknown as ExtendedCollection,
|
||||
setMemberState,
|
||||
"ADD"
|
||||
)
|
||||
}
|
||||
className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer"
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{newCollection.members[0] ? (
|
||||
<p className="text-center text-gray-500 text-xs sm:text-sm">
|
||||
(All Members have <b>Read</b> access to this collection.)
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="h-36 overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
|
||||
{newCollection.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 = newCollection.members.filter(
|
||||
(member) => {
|
||||
return member.email !== e.email;
|
||||
}
|
||||
);
|
||||
setNewCollection({
|
||||
...newCollection,
|
||||
members: updatedMembers,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<ImageWithFallback
|
||||
key={i}
|
||||
// @ts-ignore
|
||||
src={`/api/avatar/${e.id}`}
|
||||
className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
|
||||
>
|
||||
<div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center">
|
||||
<FontAwesomeIcon icon={faUser} className="w-5 h-5" />
|
||||
</div>
|
||||
</ImageWithFallback>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-sky-500">{e.name}</p>
|
||||
<p className="text-sky-900">{e.email}</p>
|
||||
</div>
|
||||
</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 = newCollection.members.map(
|
||||
(member) => {
|
||||
if (member.email === e.email) {
|
||||
return { ...member, canCreate: !e.canCreate };
|
||||
}
|
||||
return member;
|
||||
}
|
||||
);
|
||||
setNewCollection({
|
||||
...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>
|
||||
</label>
|
||||
|
||||
<label className="cursor-pointer mr-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="canUpdate"
|
||||
className="peer sr-only"
|
||||
checked={e.canUpdate}
|
||||
onChange={() => {
|
||||
const updatedMembers = newCollection.members.map(
|
||||
(member) => {
|
||||
if (member.email === e.email) {
|
||||
return { ...member, canUpdate: !e.canUpdate };
|
||||
}
|
||||
return member;
|
||||
}
|
||||
);
|
||||
setNewCollection({
|
||||
...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>
|
||||
</label>
|
||||
|
||||
<label className="cursor-pointer mr-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="canDelete"
|
||||
className="peer sr-only"
|
||||
checked={e.canDelete}
|
||||
onChange={() => {
|
||||
const updatedMembers = newCollection.members.map(
|
||||
(member) => {
|
||||
if (member.email === e.email) {
|
||||
return { ...member, canDelete: !e.canDelete };
|
||||
}
|
||||
return member;
|
||||
}
|
||||
);
|
||||
setNewCollection({
|
||||
...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>
|
||||
</label>
|
||||
</div>
|
||||
</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={submit}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} className="h-5" />
|
||||
Add Collection
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -41,16 +41,6 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
|
|||
setUser({ ...user, oldPassword, newPassword });
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
// const determineProfilePicSource = async () => {
|
||||
// const path = `/api/avatar/${account.id}`;
|
||||
// const imageExists = await avatarExists(path).catch((e) => console.log(e));
|
||||
// if (imageExists) setUser({ ...user, profilePic: path });
|
||||
// };
|
||||
|
||||
// determineProfilePicSource();
|
||||
// }, []);
|
||||
|
||||
useEffect(() => {
|
||||
setUser({
|
||||
...user,
|
||||
|
|
|
|||
|
|
@ -28,12 +28,14 @@ export default function ({ text, icon, path, className }: SidebarItemProps) {
|
|||
<div
|
||||
className={`${
|
||||
active ? "bg-sky-500" : "hover:bg-gray-50 hover:outline bg-gray-100"
|
||||
} outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2 ${className}`}
|
||||
} outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2 w-full ${className}`}
|
||||
>
|
||||
{React.cloneElement(icon, {
|
||||
className: `w-4 ${active ? "text-white" : "text-sky-300"}`,
|
||||
})}
|
||||
<p className={`${active ? "text-white" : "text-sky-900"}`}>{text}</p>
|
||||
<p className={`${active ? "text-white" : "text-sky-900"} truncate`}>
|
||||
{text}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import bcrypt from "bcrypt";
|
|||
export default async function (user: AccountSettings, userId: number) {
|
||||
const profilePic = user.profilePic;
|
||||
|
||||
if (profilePic && profilePic !== "DELETE") {
|
||||
if (profilePic?.startsWith("data:image/jpeg;base64")) {
|
||||
if ((user?.profilePic?.length as number) < 1572864) {
|
||||
try {
|
||||
const filePath = path.join(
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import MainLayout from "@/layouts/MainLayout";
|
|||
import RadioButton from "@/components/RadioButton";
|
||||
import ClickAwayHandler from "@/components/ClickAwayHandler";
|
||||
import ImageWithFallback from "@/components/ImageWithFallback";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
export default function () {
|
||||
const router = useRouter();
|
||||
|
|
@ -35,6 +36,8 @@ export default function () {
|
|||
const { links } = useLinkStore();
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const { data } = useSession();
|
||||
|
||||
const [expandDropdown, setExpandDropdown] = useState(false);
|
||||
const [linkModal, setLinkModal] = useState(false);
|
||||
const [editCollectionModal, setEditCollectionModal] = useState(false);
|
||||
|
|
@ -102,7 +105,7 @@ export default function () {
|
|||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full">
|
||||
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
|
||||
<div className="flex flex-col sm:flex-row gap-3 items-center justify-between">
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="flex gap-2">
|
||||
<FontAwesomeIcon
|
||||
|
|
@ -117,9 +120,12 @@ export default function () {
|
|||
|
||||
{activeCollection?.members[0] ? (
|
||||
<div>
|
||||
<div className="text-sky-400 flex justify-end items-center w-56 mr-3">
|
||||
<div className="mr-1 bg-sky-500 p-1 leading-3 select-none cursor-pointer hover:bg-sky-400 duration-100 text-white rounded-full text-xs">
|
||||
View Team
|
||||
<div className="text-sky-400 flex justify-end items-center w-60 mr-3">
|
||||
<div className="mr-1 bg-sky-500 p-2 leading-3 select-none cursor-pointer hover:bg-sky-400 duration-100 text-white rounded-full text-xs">
|
||||
{activeCollection.ownerId === data?.user.id
|
||||
? "Manage"
|
||||
: "View"}{" "}
|
||||
Team
|
||||
</div>
|
||||
{activeCollection?.members
|
||||
.sort((a, b) => a.userId - b.userId)
|
||||
|
|
@ -143,7 +149,7 @@ export default function () {
|
|||
{activeCollection?.members.length &&
|
||||
activeCollection.members.length - 4 > 0 ? (
|
||||
<div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3">
|
||||
+{activeCollection?.members?.length - 3}
|
||||
+{activeCollection?.members?.length - 4}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue