xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

layout redesign for the modals

This commit is contained in:
Daniel 2023-05-16 20:38:28 +03:30
parent 54553b61b8
commit f43398d288
13 changed files with 330 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/Dashboard/CollectionItem.tsx
View File

@ -18,7 +18,10 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
}); });
return ( return (
<Link href={`/collections/${collection.id}`} className="bg-white"> <Link
href={`/collections/${collection.id}`}
className="bg-white rounded-md"
>
<div className="p-5 rounded-md flex border border-sky-100 flex-col gap-2 justify-between cursor-pointer hover:opacity-60 duration-100"> <div className="p-5 rounded-md flex border border-sky-100 flex-col gap-2 justify-between cursor-pointer hover:opacity-60 duration-100">
<div> <div>
<div className="flex justify-between text-sky-600 items-center"> <div className="flex justify-between text-sky-600 items-center">

1
components/InputSelect/styles.ts
View File

@ -26,7 +26,6 @@ export const styles: StylesConfig = {
}), }),
container: (styles) => ({ container: (styles) => ({
...styles, ...styles,
width: "15rem",
border: "1px solid #e0f2fe", border: "1px solid #e0f2fe",
borderRadius: "0.375rem", borderRadius: "0.375rem",
lineHeight: "1.25rem", lineHeight: "1.25rem",

143
components/Modal/AddCollection.tsx
View File

@ -46,88 +46,91 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
return ( return (
<div className="flex flex-col gap-3 sm:w-[35rem] w-80"> <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<p className="font-bold text-sky-300 mb-2 text-center">New Collection</p> <p className="font-bold text-sky-300 mb-3 text-center">New Collection</p>
<div className="flex gap-5 items-center justify-between"> <div className="flex flex-col sm:flex-row gap-3">
<p className="text-sm font-bold text-sky-300"> <div className="w-full">
Name <p className="text-sm font-bold text-sky-300 mb-2">
<RequiredBadge /> Name
</p> <RequiredBadge />
<input </p>
value={newCollection.name} <input
onChange={(e) => value={newCollection.name}
setNewCollection({ ...newCollection, name: e.target.value }) onChange={(e) =>
} setNewCollection({ ...newCollection, name: e.target.value })
type="text" }
placeholder="e.g. Example Collection" type="text"
className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" 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>
<div className="flex gap-5 items-center justify-between"> <div className="w-full">
<p className="text-sm font-bold text-sky-300">Description</p> <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
<input <input
value={newCollection.description} value={newCollection.description}
onChange={(e) => onChange={(e) =>
setNewCollection({ ...newCollection, description: e.target.value }) setNewCollection({
} ...newCollection,
type="text" description: e.target.value,
placeholder="Collection description" })
className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" }
/> 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> </div>
<hr className="border rounded my-2" /> <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>
<p className="text-sm font-bold text-sky-300">Members</p> <input
<input value={memberEmail}
value={memberEmail} onChange={(e) => {
onChange={(e) => { setMemberEmail(e.target.value);
setMemberEmail(e.target.value); }}
}} onKeyDown={async (e) => {
onKeyDown={async (e) => { const checkIfMemberAlreadyExists = newCollection.members.find(
const checkIfMemberAlreadyExists = newCollection.members.find( (e) => e.email === memberEmail
(e) => e.email === memberEmail );
);
const ownerEmail = session.data?.user.email; const ownerEmail = session.data?.user.email;
if ( if (
e.key === "Enter" && e.key === "Enter" &&
// no duplicate members // no duplicate members
!checkIfMemberAlreadyExists && !checkIfMemberAlreadyExists &&
// member can't be empty // member can't be empty
memberEmail.trim() !== "" && memberEmail.trim() !== "" &&
// member can't be the owner // member can't be the owner
memberEmail.trim() !== ownerEmail memberEmail.trim() !== ownerEmail
) { ) {
// Lookup, get data/err, list ... // Lookup, get data/err, list ...
const user = await getUserByEmail(memberEmail.trim()); const user = await getUserByEmail(memberEmail.trim());
if (user.email) { if (user.email) {
const newMember = { const newMember = {
name: user.name, name: user.name,
email: user.email, email: user.email,
canCreate: false, canCreate: false,
canUpdate: false, canUpdate: false,
canDelete: false, canDelete: false,
}; };
setNewCollection({ setNewCollection({
...newCollection, ...newCollection,
members: [...newCollection.members, newMember], members: [...newCollection.members, newMember],
}); });
setMemberEmail(""); setMemberEmail("");
}
} }
}} }
type="text" }}
placeholder="Email" type="text"
className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" placeholder="Email"
/> className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
</div> />
{newCollection.members[0] ? ( {newCollection.members[0] ? (
<p className="text-center text-sky-500 text-xs sm:text-sm"> <p className="text-center text-sky-500 text-xs sm:text-sm">

94
components/Modal/AddLink.tsx
View File

@ -75,56 +75,62 @@ export default function AddLink({ toggleLinkModal }: Props) {
if (response) toggleLinkModal(); if (response) toggleLinkModal();
}; };
return ( return (
<div className="flex flex-col gap-3 sm:w-96 w-80"> <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<p className="font-bold text-sky-300 mb-2 text-center">New Link</p> <p className="font-bold text-sky-300 mb-2 text-center">New Link</p>
<div className="flex gap-5 items-center justify-between"> <div className="grid sm:grid-cols-2 gap-3">
<p className="text-sm font-bold text-sky-300"> <div>
Name <p className="text-sm font-bold text-sky-300 mb-2">
<RequiredBadge /> Name
</p> <RequiredBadge />
<input </p>
value={newLink.name} <input
onChange={(e) => setNewLink({ ...newLink, name: e.target.value })} value={newLink.name}
type="text" onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
placeholder="e.g. Example Link" type="text"
className="w-60 rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" placeholder="e.g. Example Link"
/> className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
</div> />
</div>
<div className="flex gap-5 items-center justify-between"> <div>
<p className="text-sm font-bold text-sky-300"> <p className="text-sm font-bold text-sky-300 mb-2">
URL URL
<RequiredBadge /> <RequiredBadge />
</p> </p>
<input <input
value={newLink.url} value={newLink.url}
onChange={(e) => setNewLink({ ...newLink, url: e.target.value })} onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
type="text" type="text"
placeholder="e.g. http://example.com/" placeholder="e.g. http://example.com/"
className="w-60 rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
</div> </div>
<div className="flex gap-5 items-center justify-between"> <div>
<p className="text-sm font-bold text-sky-300"> <p className="text-sm font-bold text-sky-300 mb-2">
Collection Collection
<RequiredBadge /> <RequiredBadge />
</p> </p>
<CollectionSelection <CollectionSelection
defaultValue={ defaultValue={
newLink.collection.name && newLink.collection.id newLink.collection.name && newLink.collection.id
? { value: newLink.collection.id, label: newLink.collection.name } ? {
: undefined value: newLink.collection.id,
} label: newLink.collection.name,
onChange={setCollection} }
/> : undefined
</div> }
onChange={setCollection}
/>
</div>
<div className="flex gap-5 items-center justify-between"> <div>
<p className="text-sm font-bold text-sky-300">Tags</p> <p className="text-sm font-bold text-sky-300 mb-2">Tags</p>
<TagSelection onChange={setTags} /> <TagSelection onChange={setTags} />
</div>
</div> </div>
<div <div

152
components/Modal/EditCollection.tsx
View File

@ -56,93 +56,93 @@ export default function EditCollection({
<div className="flex flex-col gap-3 sm:w-[35rem] w-80"> <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> <p className="font-bold text-sky-300 mb-2 text-center">Edit Collection</p>
<div className="flex gap-5 items-center justify-between"> <div className="flex flex-col sm:flex-row gap-3">
<p className="text-sm font-bold text-sky-300"> <div className="w-full">
Name <p className="text-sm font-bold text-sky-300 mb-2">
<RequiredBadge /> Name
</p> <RequiredBadge />
<input </p>
value={activeCollection.name} <input
onChange={(e) => value={activeCollection.name}
setActiveCollection({ ...activeCollection, name: e.target.value }) onChange={(e) =>
} setActiveCollection({ ...activeCollection, name: e.target.value })
type="text" }
placeholder="e.g. Example Collection" type="text"
className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" 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>
<div className="flex gap-5 items-center justify-between"> <div className="w-full">
<p className="text-sm font-bold text-sky-300">Description</p> <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
<input <input
value={activeCollection.description} value={activeCollection.description}
onChange={(e) => onChange={(e) =>
setActiveCollection({ setActiveCollection({
...activeCollection, ...activeCollection,
description: e.target.value, description: e.target.value,
}) })
} }
type="text" type="text"
placeholder="Collection description" placeholder="Collection description"
className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
</div>
</div> </div>
<hr className="border rounded my-2" /> <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>
<p className="text-sm font-bold text-sky-300">Members</p> <input
<input value={memberEmail}
value={memberEmail} onChange={(e) => {
onChange={(e) => { setMemberEmail(e.target.value);
setMemberEmail(e.target.value); }}
}} onKeyDown={async (e) => {
onKeyDown={async (e) => { const checkIfMemberAlreadyExists = activeCollection.members.find(
const checkIfMemberAlreadyExists = activeCollection.members.find( (e) => e.user.email === memberEmail
(e) => e.user.email === memberEmail );
);
const ownerEmail = session.data?.user.email; const ownerEmail = session.data?.user.email;
if ( if (
e.key === "Enter" && e.key === "Enter" &&
// no duplicate members // no duplicate members
!checkIfMemberAlreadyExists && !checkIfMemberAlreadyExists &&
// member can't be empty // member can't be empty
memberEmail.trim() !== "" && memberEmail.trim() !== "" &&
// member can't be the owner // member can't be the owner
memberEmail.trim() !== ownerEmail memberEmail.trim() !== ownerEmail
) { ) {
// Lookup, get data/err, list ... // Lookup, get data/err, list ...
const user = await getPublicUserDataByEmail(memberEmail.trim()); const user = await getPublicUserDataByEmail(memberEmail.trim());
if (user.email) { if (user.email) {
const newMember = { const newMember = {
collectionId: activeCollection.id, collectionId: activeCollection.id,
userId: user.id, userId: user.id,
canCreate: false, canCreate: false,
canUpdate: false, canUpdate: false,
canDelete: false, canDelete: false,
user: { user: {
name: user.name, name: user.name,
email: user.email, email: user.email,
}, },
}; };
setActiveCollection({ setActiveCollection({
...activeCollection, ...activeCollection,
members: [...activeCollection.members, newMember], members: [...activeCollection.members, newMember],
}); });
setMemberEmail(""); setMemberEmail("");
}
} }
}} }
type="text" }}
placeholder="Email" type="text"
className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" placeholder="Email"
/> className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
</div> />
{activeCollection.members[0] ? ( {activeCollection.members[0] ? (
<p className="text-center text-sky-500 text-xs sm:text-sm"> <p className="text-center text-sky-500 text-xs sm:text-sm">

75
components/Modal/EditLink.tsx
View File

@ -53,44 +53,47 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
<p className="text-sky-700"> <p className="text-sky-700">
<b>{shortendURL}</b> | {link.title} <b>{shortendURL}</b> | {link.title}
</p> </p>
<div className="flex gap-5 items-center justify-between">
<p className="text-sm font-bold text-sky-300">
Name
<RequiredBadge />
</p>
<input
value={currentLink.name}
onChange={(e) =>
setCurrentLink({ ...currentLink, name: e.target.value })
}
type="text"
placeholder="e.g. Example Link"
className="w-60 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/>
</div>
<div className="flex gap-5 items-center justify-between"> <div className="grid sm:grid-cols-2 gap-3">
<p className="text-sm font-bold text-sky-300"> <div>
Collection <p className="text-sm font-bold text-sky-300 mb-2">
<RequiredBadge /> Name
</p> <RequiredBadge />
<CollectionSelection </p>
onChange={setCollection} <input
defaultValue={{ value={currentLink.name}
label: link.collection.name, onChange={(e) =>
value: link.collection.id, setCurrentLink({ ...currentLink, name: e.target.value })
}} }
/> type="text"
</div> placeholder="e.g. Example Link"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/>
</div>
<div className="flex gap-5 items-center justify-between"> <div>
<p className="text-sm font-bold text-sky-300">Tags</p> <p className="text-sm font-bold text-sky-300 mb-2">
<TagSelection Collection
onChange={setTags} <RequiredBadge />
defaultValue={link.tags.map((e) => { </p>
return { label: e.name, value: e.id }; <CollectionSelection
})} onChange={setCollection}
/> defaultValue={{
label: link.collection.name,
value: link.collection.id,
}}
/>
</div>
<div className="sm:col-span-2">
<p className="text-sm font-bold text-sky-300 mb-2">Tags</p>
<TagSelection
onChange={setTags}
defaultValue={link.tags.map((e) => {
return { label: e.name, value: e.id };
})}
/>
</div>
</div> </div>
<div className="flex flex-col justify-center items-center gap-2 mt-2"> <div className="flex flex-col justify-center items-center gap-2 mt-2">

55
components/Modal/UserSettings.tsx Normal file
View File

@ -0,0 +1,55 @@
// 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 { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { NewLink } from "@/types/global";
import useLinkStore from "@/store/links";
import RequiredBadge from "../RequiredBadge";
type Props = {
toggleSettingsModal: Function;
};
export default function UserSettings({ toggleSettingsModal }: Props) {
const [newLink, setNewLink] = useState<NewLink>();
const { addLink } = useLinkStore();
const submit = async () => {
console.log(newLink);
const response = await addLink(newLink as NewLink);
if (response) toggleSettingsModal();
};
return (
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<p className="font-bold text-sky-300 mb-2 text-center">Settings</p>
<div className="flex gap-5 items-center justify-between">
<p className="text-sm font-bold text-sky-300">
Name
<RequiredBadge />
</p>
<input
type="text"
placeholder="e.g. Example Link"
className="w-60 rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/>
</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" />
Apply Settings
</div>
</div>
);
}

28
components/Navbar.tsx
View File

@ -22,6 +22,7 @@ import ClickAwayHandler from "@/components/ClickAwayHandler";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Search from "@/components/Search"; import Search from "@/components/Search";
import UserSettings from "./Modal/UserSettings";
export default function () { export default function () {
const { data: session } = useSession(); const { data: session } = useSession();
@ -31,6 +32,7 @@ export default function () {
const user = session?.user; const user = session?.user;
const [linkModal, setLinkModal] = useState(false); const [linkModal, setLinkModal] = useState(false);
const [settingsModal, setSettingsModal] = useState(false);
const [sidebar, setSidebar] = useState(false); const [sidebar, setSidebar] = useState(false);
const router = useRouter(); const router = useRouter();
@ -49,6 +51,10 @@ export default function () {
setLinkModal(!linkModal); setLinkModal(!linkModal);
}; };
const toggleSettingsModal = () => {
setSettingsModal(!settingsModal);
};
return ( return (
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b"> <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b">
<div <div
@ -67,12 +73,6 @@ export default function () {
<FontAwesomeIcon icon={faPlus} className="w-6 h-6" /> <FontAwesomeIcon icon={faPlus} className="w-6 h-6" />
</div> </div>
{linkModal ? (
<Modal toggleModal={toggleLinkModal}>
<AddLink toggleLinkModal={toggleLinkModal} />
</Modal>
) : null}
<div className="relative"> <div className="relative">
<div <div
className="flex gap-2 items-center p-1 w-fit bg-white text-gray-600 cursor-pointer border border-sky-100 hover:border-sky-500 rounded-md duration-100" className="flex gap-2 items-center p-1 w-fit bg-white text-gray-600 cursor-pointer border border-sky-100 hover:border-sky-500 rounded-md duration-100"
@ -96,6 +96,10 @@ export default function () {
{ {
name: "Settings", name: "Settings",
icon: <FontAwesomeIcon icon={faSliders} />, icon: <FontAwesomeIcon icon={faSliders} />,
onClick: () => {
toggleSettingsModal();
setProfileDropdown(!profileDropdown);
},
}, },
{ {
name: "Logout", name: "Logout",
@ -114,6 +118,18 @@ export default function () {
/> />
) : null} ) : null}
{linkModal ? (
<Modal toggleModal={toggleLinkModal}>
<AddLink toggleLinkModal={toggleLinkModal} />
</Modal>
) : null}
{settingsModal ? (
<Modal toggleModal={toggleSettingsModal}>
<UserSettings toggleSettingsModal={toggleSettingsModal} />
</Modal>
) : null}
{sidebar ? ( {sidebar ? (
<div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30"> <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
<ClickAwayHandler onClickOutside={toggleSidebar}> <ClickAwayHandler onClickOutside={toggleSidebar}>

6
lib/api/controllers/links/updateLink.ts
View File

@ -11,12 +11,6 @@ import getPermission from "@/lib/api/getPermission";
export default async function (link: ExtendedLink, userId: number) { export default async function (link: ExtendedLink, userId: number) {
if (!link) return { response: "Please choose a valid link.", status: 401 }; if (!link) return { response: "Please choose a valid link.", status: 401 };
const collectionIsAccessible = await getPermission(userId, link.collectionId);
const memberHasAccess = collectionIsAccessible?.members.some(
(e: UsersAndCollections) => e.userId === userId && e.canUpdate
);
if (link.collection.ownerId) { if (link.collection.ownerId) {
const collectionIsAccessible = await getPermission( const collectionIsAccessible = await getPermission(
userId, userId,

23
lib/api/controllers/tags/getTags.ts
View File

@ -17,27 +17,22 @@ export default async function (userId: number) {
const tags = await prisma.tag.findMany({ const tags = await prisma.tag.findMany({
where: { where: {
ownerId: userId, OR: [
owner: { { ownerId: userId }, // Tags owned by the user
OR: [ {
{ links: {
id: userId, some: {
}, collection: {
{
collections: {
some: {
members: { members: {
some: { some: {
user: { userId, // Tags from collections where the user is a member
id: userId,
},
}, },
}, },
}, },
}, },
}, },
], },
}, ],
}, },
orderBy: { orderBy: {
links: { links: {

2
pages/register.tsx
View File

@ -58,7 +58,7 @@ export default function () {
<p className="text-3xl font-bold text-center mb-10">Linkwarden</p> <p className="text-3xl font-bold text-center mb-10">Linkwarden</p>
<input <input
type="text" type="text"
placeholder="Name" placeholder="Display Name"
value={form.name} value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })} onChange={(e) => setForm({ ...form, name: e.target.value })}
className="border border-gray-700 rounded-md block m-2 mx-auto p-2" className="border border-gray-700 rounded-md block m-2 mx-auto p-2"

3
pages/tags/[id].tsx
View File

@ -21,9 +21,6 @@ export default function () {
const { links } = useLinkStore(); const { links } = useLinkStore();
const { tags } = useTagStore(); const { tags } = useTagStore();
const [linkModal, setLinkModal] = useState(false);
const [editCollectionModal, setEditCollectionModal] = useState(false);
const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
const [sortDropdown, setSortDropdown] = useState(false); const [sortDropdown, setSortDropdown] = useState(false);
const [sortBy, setSortBy] = useState("Name (A-Z)"); const [sortBy, setSortBy] = useState("Name (A-Z)");

1
store/tags.ts
View File

@ -5,6 +5,7 @@
import { create } from "zustand"; import { create } from "zustand";
import { Tag } from "@prisma/client"; import { Tag } from "@prisma/client";
import tags from "@/pages/api/routes/tags";
type TagStore = { type TagStore = {
tags: Tag[]; tags: Tag[];