fix(ui): allow canceling from request list & hide edit button for own requests (#1401)

* fix(ui): allow canceling from request list & hide edit button for own requests

* fix(ui): hide 'Cancel Request' button on request list for admins
This commit is contained in:
TheCatLady
2021-04-12 23:02:10 -04:00
committed by GitHub
parent b5ac2f5a2c
commit bed850dce9
4 changed files with 50 additions and 22 deletions

View File

@@ -21,7 +21,7 @@ const messages = defineMessages({
populartv: 'Popular Series', populartv: 'Popular Series',
upcomingtv: 'Upcoming Series', upcomingtv: 'Upcoming Series',
recentlyAdded: 'Recently Added', recentlyAdded: 'Recently Added',
nopending: 'No Pending Requests', noRequests: 'No requests.',
upcoming: 'Upcoming Movies', upcoming: 'Upcoming Movies',
trending: 'Trending', trending: 'Trending',
}); });
@@ -94,7 +94,7 @@ const Discover: React.FC = () => {
/> />
))} ))}
placeholder={<RequestCard.Placeholder />} placeholder={<RequestCard.Placeholder />}
emptyMessage={intl.formatMessage(messages.nopending)} emptyMessage={intl.formatMessage(messages.noRequests)}
/> />
<MediaSlider <MediaSlider
sliderKey="trending" sliderKey="trending"

View File

@@ -30,6 +30,7 @@ const messages = defineMessages({
modifieduserdate: '{date} by {user}', modifieduserdate: '{date} by {user}',
mediaerror: 'The associated title for this request is no longer available.', mediaerror: 'The associated title for this request is no longer available.',
deleterequest: 'Delete Request', deleterequest: 'Delete Request',
cancelRequest: 'Cancel Request',
}); });
const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => { const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -101,7 +102,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
}); });
const { addToast } = useToasts(); const { addToast } = useToasts();
const intl = useIntl(); const intl = useIntl();
const { hasPermission } = useUser(); const { user, hasPermission } = useUser();
const [showEditModal, setShowEditModal] = useState(false); const [showEditModal, setShowEditModal] = useState(false);
const { locale } = useContext(LanguageContext); const { locale } = useContext(LanguageContext);
const url = const url =
@@ -368,6 +369,31 @@ const RequestItem: React.FC<RequestItemProps> = ({
</div> </div>
</div> </div>
<div className="z-10 flex flex-col justify-center w-full pl-4 pr-4 mt-4 space-y-2 xl:mt-0 xl:items-end xl:w-96 xl:pl-0"> <div className="z-10 flex flex-col justify-center w-full pl-4 pr-4 mt-4 space-y-2 xl:mt-0 xl:items-end xl:w-96 xl:pl-0">
{requestData.status === MediaRequestStatus.PENDING &&
!hasPermission(Permission.MANAGE_REQUESTS) &&
requestData.requestedBy.id === user?.id && (
<ConfirmButton
onClick={() => deleteRequest()}
confirmText={intl.formatMessage(globalMessages.areyousure)}
className="w-full"
>
<svg
className="w-5 h-5 mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
<span className="block">
{intl.formatMessage(messages.cancelRequest)}
</span>
</ConfirmButton>
)}
{requestData.media[requestData.is4k ? 'status4k' : 'status'] === {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
MediaStatus.UNKNOWN && MediaStatus.UNKNOWN &&
requestData.status !== MediaRequestStatus.DECLINED && requestData.status !== MediaRequestStatus.DECLINED &&

View File

@@ -33,6 +33,7 @@ const messages = defineMessages({
errorediting: 'Something went wrong while editing the request.', errorediting: 'Something went wrong while editing the request.',
requestedited: 'Request for <strong>{title}</strong> edited successfully!', requestedited: 'Request for <strong>{title}</strong> edited successfully!',
requesterror: 'Something went wrong while submitting the request.', requesterror: 'Something went wrong while submitting the request.',
pendingapproval: 'Your request is pending approval.',
}); });
interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> { interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -206,8 +207,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
}; };
const isOwner = activeRequest const isOwner = activeRequest
? activeRequest.requestedBy.id === user?.id || ? activeRequest.requestedBy.id === user?.id
hasPermission(Permission.MANAGE_REQUESTS)
: false; : false;
if (activeRequest?.status === MediaRequestStatus.PENDING) { if (activeRequest?.status === MediaRequestStatus.PENDING) {
@@ -222,22 +222,22 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
title: data?.title, title: data?.title,
} }
)} )}
onOk={() => updateRequest()} onOk={() => (isOwner ? cancelRequest() : updateRequest())}
okDisabled={isUpdating} okDisabled={isUpdating}
okText={intl.formatMessage(globalMessages.edit)} okText={
okButtonType="primary" isOwner
onSecondary={isOwner ? () => cancelRequest() : undefined} ? isUpdating
secondaryDisabled={isUpdating}
secondaryText={
isUpdating
? intl.formatMessage(globalMessages.canceling) ? intl.formatMessage(globalMessages.canceling)
: intl.formatMessage(messages.cancel) : intl.formatMessage(messages.cancel)
: intl.formatMessage(globalMessages.edit)
} }
secondaryButtonType="danger" okButtonType={isOwner ? 'danger' : 'primary'}
cancelText={intl.formatMessage(globalMessages.close)} cancelText={intl.formatMessage(globalMessages.close)}
iconSvg={<DownloadIcon className="w-6 h-6" />} iconSvg={<DownloadIcon className="w-6 h-6" />}
> >
{intl.formatMessage( {isOwner
? intl.formatMessage(messages.pendingapproval)
: intl.formatMessage(
is4k ? messages.request4kfrom : messages.requestfrom, is4k ? messages.request4kfrom : messages.requestfrom,
{ {
username: activeRequest.requestedBy.displayName, username: activeRequest.requestedBy.displayName,

View File

@@ -23,7 +23,7 @@
"components.Discover.discover": "Discover", "components.Discover.discover": "Discover",
"components.Discover.discovermovies": "Popular Movies", "components.Discover.discovermovies": "Popular Movies",
"components.Discover.discovertv": "Popular Series", "components.Discover.discovertv": "Popular Series",
"components.Discover.nopending": "No Pending Requests", "components.Discover.noRequests": "No requests.",
"components.Discover.popularmovies": "Popular Movies", "components.Discover.popularmovies": "Popular Movies",
"components.Discover.populartv": "Popular Series", "components.Discover.populartv": "Popular Series",
"components.Discover.recentlyAdded": "Recently Added", "components.Discover.recentlyAdded": "Recently Added",
@@ -163,6 +163,7 @@
"components.RequestCard.deleterequest": "Delete Request", "components.RequestCard.deleterequest": "Delete Request",
"components.RequestCard.mediaerror": "The associated title for this request is no longer available.", "components.RequestCard.mediaerror": "The associated title for this request is no longer available.",
"components.RequestCard.seasons": "{seasonCount, plural, one {Season} other {Seasons}}", "components.RequestCard.seasons": "{seasonCount, plural, one {Season} other {Seasons}}",
"components.RequestList.RequestItem.cancelRequest": "Cancel Request",
"components.RequestList.RequestItem.deleterequest": "Delete Request", "components.RequestList.RequestItem.deleterequest": "Delete Request",
"components.RequestList.RequestItem.failedretry": "Something went wrong while retrying the request.", "components.RequestList.RequestItem.failedretry": "Something went wrong while retrying the request.",
"components.RequestList.RequestItem.mediaerror": "The associated title for this request is no longer available.", "components.RequestList.RequestItem.mediaerror": "The associated title for this request is no longer available.",
@@ -208,6 +209,7 @@
"components.RequestModal.extras": "Extras", "components.RequestModal.extras": "Extras",
"components.RequestModal.numberofepisodes": "# of Episodes", "components.RequestModal.numberofepisodes": "# of Episodes",
"components.RequestModal.pending4krequest": "Pending Request for {title} in 4K", "components.RequestModal.pending4krequest": "Pending Request for {title} in 4K",
"components.RequestModal.pendingapproval": "Your request is pending approval.",
"components.RequestModal.pendingrequest": "Pending Request for {title}", "components.RequestModal.pendingrequest": "Pending Request for {title}",
"components.RequestModal.request4kfrom": "There is currently a pending 4K request from {username}.", "components.RequestModal.request4kfrom": "There is currently a pending 4K request from {username}.",
"components.RequestModal.request4ktitle": "Request {title} in 4K", "components.RequestModal.request4ktitle": "Request {title} in 4K",