Merge pull request #352 from YeeJiaWei/collection-sharing-layout
Update collection sharing permission to predefined role
This commit is contained in:
Daniel
GitHub
commit
ad895eee17
|
|
@ -148,7 +148,7 @@ export default function EditCollectionSharingModal({
|
||||||
|
|
||||||
{permissions === true && (
|
{permissions === true && (
|
||||||
<>
|
<>
|
||||||
<p>Member Management</p>
|
<p>Members</p>
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<TextInput
|
<TextInput
|
||||||
|
|
@ -186,39 +186,29 @@ export default function EditCollectionSharingModal({
|
||||||
|
|
||||||
{collection?.members[0]?.user && (
|
{collection?.members[0]?.user && (
|
||||||
<>
|
<>
|
||||||
{permissions === true ? (
|
<div
|
||||||
<p className="text-center text-neutral text-xs sm:text-sm">
|
className="flex flex-col divide-y divide-neutral-content border border-neutral-content rounded-xl overflow-hidden ">
|
||||||
(All Members have <b>Read</b> access to this collection.)
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<p>
|
|
||||||
Here are all the members who are collaborating on this
|
|
||||||
collection.
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-3 rounded-md">
|
|
||||||
<div
|
<div
|
||||||
className="relative border px-2 rounded-xl border-neutral-content bg-base-200 flex min-h-[6rem] sm:min-h-[4.1rem] gap-2 justify-between"
|
className="relative p-3 bg-base-200 flex gap-2 justify-between"
|
||||||
title={`@${collectionOwner.username} is the owner of this collection.`}
|
title={`@${collectionOwner.username} is the owner of this collection.`}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2 w-full">
|
<div className={"flex items-center justify-between w-full"}>
|
||||||
<ProfilePhoto
|
<div className={"flex items-center"}>
|
||||||
src={
|
<div className={"shrink-0"}>
|
||||||
collectionOwner.image ? collectionOwner.image : undefined
|
<ProfilePhoto
|
||||||
}
|
src={collectionOwner.image ? collectionOwner.image : undefined}
|
||||||
name={collectionOwner.name}
|
name={collectionOwner.name}
|
||||||
/>
|
/>
|
||||||
<div className="w-full">
|
|
||||||
<div className="flex items-center gap-1 w-full justify-between">
|
|
||||||
<p className="text-sm font-bold">
|
|
||||||
{collectionOwner.name}
|
|
||||||
</p>
|
|
||||||
<div className="flex text-xs gap-1 items-center">
|
|
||||||
Admin
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p className="text-neutral">@{collectionOwner.username}</p>
|
<div className={"grow ml-2"}>
|
||||||
|
<p className="text-sm font-semibold">{collectionOwner.name}</p>
|
||||||
|
<p className="text-xs text-neutral">@{collectionOwner.username}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-neutral">
|
||||||
|
Owner
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -229,202 +219,96 @@ export default function EditCollectionSharingModal({
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
className="relative border p-2 rounded-xl border-neutral-content bg-base-200 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
|
className="relative p-3 bg-base-200 flex gap-2 justify-between"
|
||||||
>
|
>
|
||||||
{permissions === true && (
|
<div className={"flex items-center justify-between w-full"}>
|
||||||
<i
|
<div className={"flex items-center"}>
|
||||||
className={
|
<div className={"shrink-0"}>
|
||||||
"bi-x text-xl absolute right-1 top-1 text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
|
<ProfilePhoto
|
||||||
}
|
src={e.user.image ? e.user.image : undefined}
|
||||||
title="Remove Member"
|
name={e.user.name}
|
||||||
onClick={() => {
|
/>
|
||||||
const updatedMembers = collection.members.filter(
|
|
||||||
(member) => {
|
|
||||||
return member.user.username !== e.user.username;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
setCollection({
|
|
||||||
...collection,
|
|
||||||
members: updatedMembers,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<ProfilePhoto
|
|
||||||
src={e.user.image ? e.user.image : undefined}
|
|
||||||
name={e.user.name}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-bold">{e.user.name}</p>
|
|
||||||
<p className="text-neutral">@{e.user.username}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex sm:block items-center justify-between gap-5 min-w-[10rem]">
|
|
||||||
<div>
|
|
||||||
<p
|
|
||||||
className={`font-bold text-sm ${
|
|
||||||
permissions === true ? "" : "mb-2"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Permissions
|
|
||||||
</p>
|
|
||||||
{permissions === true && (
|
|
||||||
<p className="text-xs text-neutral mb-2">
|
|
||||||
(Click to toggle.)
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{permissions !== true &&
|
|
||||||
!e.canCreate &&
|
|
||||||
!e.canUpdate &&
|
|
||||||
!e.canDelete ? (
|
|
||||||
<p className="text-sm text-neutral">
|
|
||||||
Has no permissions.
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
className={
|
|
||||||
permissions === true
|
|
||||||
? "cursor-pointer mr-1"
|
|
||||||
: "mr-1"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="canCreate"
|
|
||||||
className="peer sr-only"
|
|
||||||
checked={e.canCreate}
|
|
||||||
onChange={() => {
|
|
||||||
if (permissions === true) {
|
|
||||||
const updatedMembers =
|
|
||||||
collection.members.map((member) => {
|
|
||||||
if (
|
|
||||||
member.user.username ===
|
|
||||||
e.user.username
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
...member,
|
|
||||||
canCreate: !e.canCreate,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return member;
|
|
||||||
});
|
|
||||||
setCollection({
|
|
||||||
...collection,
|
|
||||||
members: updatedMembers,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
className={`peer-checked:bg-primary peer-checked:text-primary-content text-sm ${
|
|
||||||
permissions === true
|
|
||||||
? "hover:bg-neutral-content duration-100"
|
|
||||||
: ""
|
|
||||||
} rounded p-1 select-none`}
|
|
||||||
>
|
|
||||||
Create
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label
|
|
||||||
className={
|
|
||||||
permissions === true
|
|
||||||
? "cursor-pointer mr-1"
|
|
||||||
: "mr-1"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="canUpdate"
|
|
||||||
className="peer sr-only"
|
|
||||||
checked={e.canUpdate}
|
|
||||||
onChange={() => {
|
|
||||||
if (permissions === true) {
|
|
||||||
const updatedMembers =
|
|
||||||
collection.members.map((member) => {
|
|
||||||
if (
|
|
||||||
member.user.username ===
|
|
||||||
e.user.username
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
...member,
|
|
||||||
canUpdate: !e.canUpdate,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return member;
|
|
||||||
});
|
|
||||||
setCollection({
|
|
||||||
...collection,
|
|
||||||
members: updatedMembers,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
className={`peer-checked:bg-primary peer-checked:text-primary-content text-sm ${
|
|
||||||
permissions === true
|
|
||||||
? "hover:bg-neutral-content duration-100"
|
|
||||||
: ""
|
|
||||||
} rounded p-1 select-none`}
|
|
||||||
>
|
|
||||||
Update
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label
|
|
||||||
className={
|
|
||||||
permissions === true
|
|
||||||
? "cursor-pointer mr-1"
|
|
||||||
: "mr-1"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="canDelete"
|
|
||||||
className="peer sr-only"
|
|
||||||
checked={e.canDelete}
|
|
||||||
onChange={() => {
|
|
||||||
if (permissions === true) {
|
|
||||||
const updatedMembers =
|
|
||||||
collection.members.map((member) => {
|
|
||||||
if (
|
|
||||||
member.user.username ===
|
|
||||||
e.user.username
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
...member,
|
|
||||||
canDelete: !e.canDelete,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return member;
|
|
||||||
});
|
|
||||||
setCollection({
|
|
||||||
...collection,
|
|
||||||
members: updatedMembers,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
className={`peer-checked:bg-primary peer-checked:text-primary-content text-sm ${
|
|
||||||
permissions === true
|
|
||||||
? "hover:bg-neutral-content duration-100"
|
|
||||||
: ""
|
|
||||||
} rounded p-1 select-none`}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div className={"grow ml-2"}>
|
||||||
|
<p className="text-sm font-semibold">{e.user.name}</p>
|
||||||
|
<p className="text-xs text-neutral">@{e.user.username}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={"flex items-center gap-2"}>
|
||||||
|
{permissions === true && (
|
||||||
|
<i
|
||||||
|
className={"bi-x text-xl btn btn-sm text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"}
|
||||||
|
title="Remove Member"
|
||||||
|
onClick={() => {
|
||||||
|
const updatedMembers = collection.members.filter(
|
||||||
|
(member) => {
|
||||||
|
return member.user.username !== e.user.username;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
setCollection({
|
||||||
|
...collection,
|
||||||
|
members: updatedMembers,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{permissions === true ? (
|
||||||
|
<select
|
||||||
|
onChange={(evt) => {
|
||||||
|
if (permissions !== true) return;
|
||||||
|
|
||||||
|
switch (evt.target.value) {
|
||||||
|
case 'admin':
|
||||||
|
collection.members[i].canCreate = true;
|
||||||
|
collection.members[i].canUpdate = true;
|
||||||
|
collection.members[i].canDelete = true;
|
||||||
|
break;
|
||||||
|
case 'contributor':
|
||||||
|
collection.members[i].canCreate = true;
|
||||||
|
collection.members[i].canUpdate = false;
|
||||||
|
collection.members[i].canDelete = false;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
collection.members[i].canCreate = false;
|
||||||
|
collection.members[i].canUpdate = false;
|
||||||
|
collection.members[i].canDelete = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="select select-bordered select-sm w-full max-w-xs">
|
||||||
|
<option value={'viewer'}
|
||||||
|
selected={!e.canCreate && !e.canUpdate && !e.canDelete}>
|
||||||
|
Viewer
|
||||||
|
</option>
|
||||||
|
<option value={'contributor'}
|
||||||
|
selected={e.canCreate && !e.canUpdate && !e.canDelete}>
|
||||||
|
Contributor
|
||||||
|
</option>
|
||||||
|
<option value={'admin'} selected={e.canCreate && e.canUpdate && e.canDelete}>
|
||||||
|
Admin
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-neutral">
|
||||||
|
{
|
||||||
|
(e.canCreate && e.canUpdate && e.canDelete)
|
||||||
|
? "Admin"
|
||||||
|
: (e.canCreate)
|
||||||
|
? 'Contributor'
|
||||||
|
: 'Viewer'
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Ŝarĝante…
Reference in New Issue