feat: manage series slideover added (and approve/decline/delete hooked up)

This commit is contained in:
sct
2020-11-18 11:48:29 +00:00
parent cb9ae25d94
commit 236c4e5e61
6 changed files with 257 additions and 82 deletions

View File

@@ -27,6 +27,7 @@ import Badge from '../Common/Badge';
import ButtonWithDropdown from '../Common/ButtonWithDropdown';
import axios from 'axios';
import SlideOver from '../Common/SlideOver';
import RequestBlock from '../RequestBlock';
const messages = defineMessages({
releasedate: 'Release Date',
@@ -130,81 +131,18 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
<div className="bg-cool-gray-600 shadow overflow-hidden rounded-md">
<ul>
{data.mediaInfo?.requests?.map((request) => (
<li key={`manage-request-${request.id}`}>
<div className="block">
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<div className="mr-6 flex items-center text-sm leading-5 text-gray-300">
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
clipRule="evenodd"
/>
</svg>
{request.requestedBy.username}
</div>
<div className="ml-2 flex-shrink-0 flex">
<Button buttonSize="sm" buttonType="danger">
<svg
className="w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
</Button>
</div>
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
<div className="mr-6 flex items-center text-sm leading-5 text-gray-300">
{request.status === MediaRequestStatus.AVAILABLE && (
<Badge badgeType="success">Available</Badge>
)}
{request.status === MediaRequestStatus.APPROVED && (
<Badge badgeType="success">Approved</Badge>
)}
{request.status === MediaRequestStatus.DECLINED && (
<Badge badgeType="danger">Declined</Badge>
)}
{request.status === MediaRequestStatus.PENDING && (
<Badge badgeType="warning">Pending</Badge>
)}
</div>
</div>
<div className="mt-2 flex items-center text-sm leading-5 text-gray-300 sm:mt-0">
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clipRule="evenodd"
/>
</svg>
<span>
<FormattedDate value={request.createdAt} />
</span>
</div>
</div>
</div>
</div>
<li
key={`manage-request-${request.id}`}
className="border-b last:border-b-0 border-cool-gray-700"
>
<RequestBlock request={request} onUpdate={() => revalidate()} />
</li>
))}
{(data.mediaInfo?.requests ?? []).length === 0 && (
<li className="text-center py-4 text-cool-gray-400">
No requests
</li>
)}
</ul>
</div>
</SlideOver>