layout redesign for the modals
This commit is contained in:
Daniel
@@ -46,88 +46,91 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
|
||||
|
||||
return (
|
||||
<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">
|
||||
<p className="text-sm font-bold text-sky-300">
|
||||
Name
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<input
|
||||
value={newCollection.name}
|
||||
onChange={(e) =>
|
||||
setNewCollection({ ...newCollection, 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 outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
</div>
|
||||
<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="flex gap-5 items-center justify-between">
|
||||
<p className="text-sm font-bold text-sky-300">Description</p>
|
||||
<input
|
||||
value={newCollection.description}
|
||||
onChange={(e) =>
|
||||
setNewCollection({ ...newCollection, description: e.target.value })
|
||||
}
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
<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" />
|
||||
|
||||
<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 = newCollection.members.find(
|
||||
(e) => e.email === memberEmail
|
||||
);
|
||||
<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 = newCollection.members.find(
|
||||
(e) => e.email === memberEmail
|
||||
);
|
||||
|
||||
const ownerEmail = session.data?.user.email;
|
||||
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 (
|
||||
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 = {
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
canCreate: false,
|
||||
canUpdate: false,
|
||||
canDelete: false,
|
||||
};
|
||||
if (user.email) {
|
||||
const newMember = {
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
canCreate: false,
|
||||
canUpdate: false,
|
||||
canDelete: false,
|
||||
};
|
||||
|
||||
setNewCollection({
|
||||
...newCollection,
|
||||
members: [...newCollection.members, newMember],
|
||||
});
|
||||
setNewCollection({
|
||||
...newCollection,
|
||||
members: [...newCollection.members, newMember],
|
||||
});
|
||||
|
||||
setMemberEmail("");
|
||||
}
|
||||
setMemberEmail("");
|
||||
}
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
|
||||
{newCollection.members[0] ? (
|
||||
<p className="text-center text-sky-500 text-xs sm:text-sm">
|
||||
|
||||
@@ -75,56 +75,62 @@ export default function AddLink({ toggleLinkModal }: Props) {
|
||||
|
||||
if (response) toggleLinkModal();
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<div className="flex gap-5 items-center justify-between">
|
||||
<p className="text-sm font-bold text-sky-300">
|
||||
Name
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<input
|
||||
value={newLink.name}
|
||||
onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
|
||||
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="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="text-sm font-bold text-sky-300 mb-2">
|
||||
Name
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<input
|
||||
value={newLink.name}
|
||||
onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
|
||||
type="text"
|
||||
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">
|
||||
<p className="text-sm font-bold text-sky-300">
|
||||
URL
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<input
|
||||
value={newLink.url}
|
||||
onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-sky-300 mb-2">
|
||||
URL
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<input
|
||||
value={newLink.url}
|
||||
onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
|
||||
type="text"
|
||||
placeholder="e.g. http://example.com/"
|
||||
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">
|
||||
<p className="text-sm font-bold text-sky-300">
|
||||
Collection
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<CollectionSelection
|
||||
defaultValue={
|
||||
newLink.collection.name && newLink.collection.id
|
||||
? { value: newLink.collection.id, label: newLink.collection.name }
|
||||
: undefined
|
||||
}
|
||||
onChange={setCollection}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-sky-300 mb-2">
|
||||
Collection
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<CollectionSelection
|
||||
defaultValue={
|
||||
newLink.collection.name && newLink.collection.id
|
||||
? {
|
||||
value: newLink.collection.id,
|
||||
label: newLink.collection.name,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onChange={setCollection}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-5 items-center justify-between">
|
||||
<p className="text-sm font-bold text-sky-300">Tags</p>
|
||||
<TagSelection onChange={setTags} />
|
||||
<div>
|
||||
<p className="text-sm font-bold text-sky-300 mb-2">Tags</p>
|
||||
<TagSelection onChange={setTags} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
@@ -56,93 +56,93 @@ export default function EditCollection({
|
||||
<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
|
||||
<RequiredBadge />
|
||||
</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 outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
</div>
|
||||
<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={activeCollection.name}
|
||||
onChange={(e) =>
|
||||
setActiveCollection({ ...activeCollection, 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="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"
|
||||
className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
<div className="w-full">
|
||||
<p className="text-sm font-bold text-sky-300 mb-2">Description</p>
|
||||
<input
|
||||
value={activeCollection.description}
|
||||
onChange={(e) =>
|
||||
setActiveCollection({
|
||||
...activeCollection,
|
||||
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" />
|
||||
|
||||
<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
|
||||
);
|
||||
<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;
|
||||
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 getPublicUserDataByEmail(memberEmail.trim());
|
||||
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 getPublicUserDataByEmail(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,
|
||||
},
|
||||
};
|
||||
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],
|
||||
});
|
||||
setActiveCollection({
|
||||
...activeCollection,
|
||||
members: [...activeCollection.members, newMember],
|
||||
});
|
||||
|
||||
setMemberEmail("");
|
||||
}
|
||||
setMemberEmail("");
|
||||
}
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
|
||||
{activeCollection.members[0] ? (
|
||||
<p className="text-center text-sky-500 text-xs sm:text-sm">
|
||||
|
||||
@@ -53,44 +53,47 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
|
||||
<p className="text-sky-700">
|
||||
<b>{shortendURL}</b> | {link.title}
|
||||
</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">
|
||||
<p className="text-sm font-bold text-sky-300">
|
||||
Collection
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<CollectionSelection
|
||||
onChange={setCollection}
|
||||
defaultValue={{
|
||||
label: link.collection.name,
|
||||
value: link.collection.id,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="text-sm font-bold text-sky-300 mb-2">
|
||||
Name
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<input
|
||||
value={currentLink.name}
|
||||
onChange={(e) =>
|
||||
setCurrentLink({ ...currentLink, name: e.target.value })
|
||||
}
|
||||
type="text"
|
||||
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">
|
||||
<p className="text-sm font-bold text-sky-300">Tags</p>
|
||||
<TagSelection
|
||||
onChange={setTags}
|
||||
defaultValue={link.tags.map((e) => {
|
||||
return { label: e.name, value: e.id };
|
||||
})}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-sky-300 mb-2">
|
||||
Collection
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<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 className="flex flex-col justify-center items-center gap-2 mt-2">
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user