bug fixes
This commit is contained in:
Daniel
parent
287f7fa870
commit
fcbecb5bc5
|
|
@ -99,11 +99,16 @@ export default function TeamManagement({
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-2 text-gray-500">Public Link (Click to copy)</p>
|
<p className="mb-2 text-gray-500">Public Link (Click to copy)</p>
|
||||||
<div
|
<div
|
||||||
onClick={() =>
|
onClick={() => {
|
||||||
navigator.clipboard
|
try {
|
||||||
.writeText(publicCollectionURL)
|
navigator.clipboard
|
||||||
.then(() => console.log("Copied!"))
|
.writeText(publicCollectionURL)
|
||||||
}
|
.then(() => console.log("Copied!"));
|
||||||
|
} catch (err) {
|
||||||
|
alert(err);
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}}
|
||||||
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-500 duration-100 cursor-text"
|
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-500 duration-100 cursor-text"
|
||||||
>
|
>
|
||||||
{publicCollectionURL}
|
{publicCollectionURL}
|
||||||
|
|
@ -159,138 +164,149 @@ export default function TeamManagement({
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="max-h-[20rem] overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
|
<div className="max-h-[20rem] overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
|
||||||
{collection.members.map((e, i) => {
|
{collection.members
|
||||||
return (
|
.sort((a, b) => (a.userId as number) - (b.userId as number))
|
||||||
<div
|
.map((e, i) => {
|
||||||
key={i}
|
return (
|
||||||
className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
|
<div
|
||||||
>
|
key={i}
|
||||||
<FontAwesomeIcon
|
className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
|
||||||
icon={faClose}
|
>
|
||||||
className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
|
<FontAwesomeIcon
|
||||||
title="Remove Member"
|
icon={faClose}
|
||||||
onClick={() => {
|
className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
|
||||||
const updatedMembers = collection.members.filter(
|
title="Remove Member"
|
||||||
(member) => {
|
onClick={() => {
|
||||||
return member.user.email !== e.user.email;
|
const updatedMembers = collection.members.filter(
|
||||||
}
|
(member) => {
|
||||||
);
|
return member.user.email !== e.user.email;
|
||||||
setCollection({
|
}
|
||||||
...collection,
|
);
|
||||||
members: updatedMembers,
|
setCollection({
|
||||||
});
|
...collection,
|
||||||
}}
|
members: updatedMembers,
|
||||||
/>
|
});
|
||||||
<div className="flex items-center gap-2">
|
}}
|
||||||
<ImageWithFallback
|
/>
|
||||||
key={i}
|
<div className="flex items-center gap-2">
|
||||||
src={`/api/avatar/${e.userId}`}
|
<ImageWithFallback
|
||||||
className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
|
key={i}
|
||||||
>
|
src={`/api/avatar/${e.userId}`}
|
||||||
<div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center">
|
className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
|
||||||
<FontAwesomeIcon icon={faUser} className="w-5 h-5" />
|
>
|
||||||
|
<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.user.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-sky-900">{e.user.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 = collection.members.map(
|
||||||
|
(member) => {
|
||||||
|
if (member.user.email === e.user.email) {
|
||||||
|
return {
|
||||||
|
...member,
|
||||||
|
canCreate: !e.canCreate,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return member;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
setCollection({
|
||||||
|
...collection,
|
||||||
|
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 = collection.members.map(
|
||||||
|
(member) => {
|
||||||
|
if (member.user.email === e.user.email) {
|
||||||
|
return {
|
||||||
|
...member,
|
||||||
|
canUpdate: !e.canUpdate,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return member;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
setCollection({
|
||||||
|
...collection,
|
||||||
|
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 = collection.members.map(
|
||||||
|
(member) => {
|
||||||
|
if (member.user.email === e.user.email) {
|
||||||
|
return {
|
||||||
|
...member,
|
||||||
|
canDelete: !e.canDelete,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return member;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
setCollection({
|
||||||
|
...collection,
|
||||||
|
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>
|
||||||
</ImageWithFallback>
|
|
||||||
<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>
|
||||||
</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 = collection.members.map(
|
|
||||||
(member) => {
|
|
||||||
if (member.user.email === e.user.email) {
|
|
||||||
return { ...member, canCreate: !e.canCreate };
|
|
||||||
}
|
|
||||||
return member;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
setCollection({
|
|
||||||
...collection,
|
|
||||||
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 = collection.members.map(
|
|
||||||
(member) => {
|
|
||||||
if (member.user.email === e.user.email) {
|
|
||||||
return { ...member, canUpdate: !e.canUpdate };
|
|
||||||
}
|
|
||||||
return member;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
setCollection({
|
|
||||||
...collection,
|
|
||||||
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 = collection.members.map(
|
|
||||||
(member) => {
|
|
||||||
if (member.user.email === e.user.email) {
|
|
||||||
return { ...member, canDelete: !e.canDelete };
|
|
||||||
}
|
|
||||||
return member;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
setCollection({
|
|
||||||
...collection,
|
|
||||||
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>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ export default function ProfilePhoto({ src, className }: Props) {
|
||||||
className={`h-10 w-10 shadow rounded-full border-[3px] border-sky-100 ${className}`}
|
className={`h-10 w-10 shadow rounded-full border-[3px] border-sky-100 ${className}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center ${className}`}
|
className={`bg-sky-500 text-white h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center ${className}`}
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faUser} className="w-5 h-5" />
|
<FontAwesomeIcon icon={faUser} className="w-5 h-5" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -149,7 +149,7 @@ export default function () {
|
||||||
<ProfilePhoto
|
<ProfilePhoto
|
||||||
key={i}
|
key={i}
|
||||||
src={`/api/avatar/${e.userId}`}
|
src={`/api/avatar/${e.userId}`}
|
||||||
className="-mr-3 bg-white duration-100"
|
className="-mr-3 duration-100"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,13 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: [
|
content: [
|
||||||
"./app/**/*.{js,ts,jsx,tsx}",
|
"./app/**/*.{js,ts,jsx,tsx}",
|
||||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||||
"./components/**/*.{js,ts,jsx,tsx}",
|
"./components/**/*.{js,ts,jsx,tsx}",
|
||||||
|
|
||||||
|
// For the "layouts" directory
|
||||||
|
"./layouts/**/*.{js,ts,jsx,tsx}",
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
|
|
|
||||||
Ŝarĝante…
Reference in New Issue