shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): buttonWithDropdown component added (no hookups yet)

Browse Source
This commit is contained in:
sct
2020-10-24 07:03:28 +00:00
parent 1f9cbbfdf1
commit 4975841b5d
8 changed files with 202 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
overseerr-api.yml
View File

@@ -1381,12 +1381,8 @@ paths:
schema:
type: string
responses:
'200':
'204':
description: Succesfully removed request
content:
application/json:
schema:
$ref: '#/components/schemas/MediaRequest'
/request/{requestId}/{status}:
get:
summary: Update a requests status

2
package.json
View File

@@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "nodemon -e ts --watch server -e .json,.ts,.yml -x ts-node --files --project server/tsconfig.json server/index.ts",
"dev": "nodemon -e ts --watch server --watch overseerr-api.yml -e .json,.ts,.yml -x ts-node --files --project server/tsconfig.json server/index.ts",
"build:server": "tsc --project server/tsconfig.json",
"build:next": "next build",
"build": "yarn build:next && yarn build:server",

10
server/entity/MediaRequest.ts
View File

@@ -9,6 +9,7 @@ import {
AfterInsert,
getRepository,
OneToMany,
AfterRemove,
} from 'typeorm';
import { User } from './User';
import Media from './Media';
@@ -67,6 +68,15 @@ export class MediaRequest {
}
}
@AfterRemove()
private async handleRemoveParentUpdate() {
const mediaRepository = getRepository(Media);
if (!this.media.requests || this.media.requests.length === 0) {
this.media.status = MediaStatus.UNKNOWN;
mediaRepository.save(this.media);
}
}
@AfterUpdate()
@AfterInsert()
private async sendToRadarr() {

14
server/routes/request.ts
View File

@@ -7,6 +7,7 @@ import TheMovieDb from '../api/themoviedb';
import Media from '../entity/Media';
import { MediaStatus, MediaRequestStatus, MediaType } from '../constants/media';
import SeasonRequest from '../entity/SeasonRequest';
import logger from '../logger';
const requestRoutes = Router();
@@ -63,6 +64,11 @@ requestRoutes.post(
mediaType: req.body.mediaType,
});
await mediaRepository.save(media);
} else {
if (media.status === MediaStatus.UNKNOWN) {
media.status = MediaStatus.PENDING;
await mediaRepository.save(media);
}
}
if (req.body.mediaType === 'movie') {
@@ -164,7 +170,8 @@ requestRoutes.delete('/:requestId', async (req, res, next) => {
if (
!req.user?.hasPermission(Permission.MANAGE_REQUESTS) &&
(request.requestedBy.id !== req.user?.id || request.status > 0)
request.requestedBy.id !== req.user?.id &&
request.status !== 1
) {
return next({
status: 401,
@@ -172,10 +179,11 @@ requestRoutes.delete('/:requestId', async (req, res, next) => {
});
}
await requestRepository.delete(request.id);
await requestRepository.remove(request);
return res.status(200).json(request);
return res.status(204).send();
} catch (e) {
logger.error(e.message);
next({ status: 404, message: 'Request not found' });
}
});

99
src/components/Common/ButtonWithDropdown/index.tsx Normal file
View File

@@ -0,0 +1,99 @@
import React, {
useState,
useRef,
AnchorHTMLAttributes,
ReactNode,
ButtonHTMLAttributes,
} from 'react';
import useClickOutside from '../../../hooks/useClickOutside';
import Transition from '../../Transition';
import { withProperties } from '../../../utils/typeHelpers';
const DropdownItem: React.FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({
children,
...props
}) => (
<a
className="cursor-pointer flex items-center px-4 py-2 text-sm leading-5 text-white bg-indigo-600 hover:bg-indigo-500 hover:text-white focus:outline-none focus:border-indigo-700 focus:text-white"
{...props}
>
{children}
</a>
);
interface ButtonWithDropdownProps
extends ButtonHTMLAttributes<HTMLButtonElement> {
text: ReactNode;
dropdownIcon?: ReactNode;
}
const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
text,
children,
dropdownIcon,
...props
}) => {
const [isOpen, setIsOpen] = useState(false);
const buttonRef = useRef<HTMLSpanElement>(null);
useClickOutside(buttonRef, () => setIsOpen(false));
return (
<span
className="relative z-0 inline-flex shadow-sm rounded-md"
ref={buttonRef}
>
<button
type="button"
className={`relative inline-flex items-center px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-500 text-sm leading-5 font-medium hover:text-white focus:shadow-outline-indigo active:bg-indigo-700 focus:z-10 focus:outline-none focus:shadow-outline-blue transition ease-in-out duration-150 ${
children ? 'rounded-l-md' : 'rounded-md'
}`}
{...props}
>
{text}
</button>
<span className="-ml-px relative block">
{children && (
<button
type="button"
className="relative inline-flex items-center px-2 py-2 rounded-r-md bg-indigo-700 hover:bg-indigo-500 text-sm leading-5 font-medium text-white focus:z-10 focus:outline-none active:bg-indigo-700 border border-indigo-600 focus:shadow-outline-blue transition ease-in-out duration-150"
aria-label="Expand"
onClick={() => setIsOpen((state) => !state)}
>
{dropdownIcon ? (
dropdownIcon
) : (
<svg
className="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
)}
</button>
)}
<Transition
show={isOpen}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<div className="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg">
<div className="rounded-md bg-indigo-600 shadow-xs">
<div className="py-1">{children}</div>
</div>
</div>
</Transition>
</span>
</span>
);
};
export default withProperties(ButtonWithDropdown, { Item: DropdownItem });

82
src/components/MovieDetails/index.tsx
View File

@@ -21,6 +21,7 @@ import { useUser, Permission } from '../../hooks/useUser';
import { MediaStatus } from '../../../server/constants/media';
import RequestModal from '../RequestModal';
import Badge from '../Common/Badge';
import ButtonWithDropdown from '../Common/ButtonWithDropdown';
const messages = defineMessages({
releasedate: 'Release Date',
@@ -81,9 +82,6 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
return <div>Broken?</div>;
}
console.log(MediaStatus);
console.log(data);
const activeRequest = data?.mediaInfo?.requests?.[0];
return (
@@ -143,8 +141,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</div>
<div className="flex-1 flex justify-end mt-4 md:mt-0">
{(!data.mediaInfo ||
data.mediaInfo?.status === MediaStatus.UNKNOWN ||
activeRequest) && (
data.mediaInfo?.status === MediaStatus.UNKNOWN) && (
<Button
buttonType="primary"
onClick={() => setShowRequestModal(true)}
@@ -178,11 +175,80 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
/>
</svg>
)}
<FormattedMessage
{...(activeRequest ? messages.viewrequest : messages.request)}
/>
<FormattedMessage {...messages.request} />
</Button>
)}
{activeRequest && (
<ButtonWithDropdown
dropdownIcon={
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
clipRule="evenodd"
/>
</svg>
}
text={
<>
<svg
className="w-4 mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clipRule="evenodd"
/>
</svg>
<FormattedMessage {...messages.viewrequest} />
</>
}
onClick={() => setShowRequestModal(true)}
>
{hasPermission(Permission.MANAGE_REQUESTS) && (
<>
<ButtonWithDropdown.Item>
<svg
className="w-4 mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
Approve
</ButtonWithDropdown.Item>
<ButtonWithDropdown.Item>
<svg
className="w-4 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>
Decline
</ButtonWithDropdown.Item>
</>
)}
</ButtonWithDropdown>
)}
{hasPermission(Permission.MANAGE_REQUESTS) && (
<Button buttonType="default" className="ml-2">
<svg

4
src/components/RequestModal/MovieRequestModal.tsx
View File

@@ -69,8 +69,6 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
const activeRequest = data?.mediaInfo?.requests?.[0];
console.log(activeRequest);
const cancelRequest = async () => {
if (onUpdating) {
onUpdating(true);
@@ -79,7 +77,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
`/api/v1/request/${activeRequest?.id}`
);
if (response.data) {
if (response.status === 204) {
if (onComplete) {
onComplete(MediaStatus.UNKNOWN);
}

10
src/components/TitleCard/index.tsx
View File

@@ -176,7 +176,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
}
as={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
>
<a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm mr-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
<a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
<svg
className="w-4 mx-auto"
fill="none"
@@ -202,7 +202,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
{!currentStatus && (
<button
onClick={() => setShowRequestModal(true)}
className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
>
<svg
className="w-4 mx-auto"
@@ -221,7 +221,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
</button>
)}
{currentStatus === MediaStatus.PENDING && (
<button className="w-full h-7 text-center text-white bg-orange-400 hover:bg-orange-300 rounded-sm ml-1 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700 transition ease-in-out duration-150">
<button className="w-full h-7 text-center text-white bg-orange-400 hover:bg-orange-300 rounded-sm ml-2 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700 transition ease-in-out duration-150">
<svg
className="w-4 mx-auto"
fill="none"
@@ -239,7 +239,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
</button>
)}
{currentStatus === MediaStatus.PROCESSING && (
<button className="w-full h-7 text-center text-white bg-red-500 rounded-sm ml-1">
<button className="w-full h-7 text-center text-white bg-red-500 rounded-sm ml-2">
<svg
className="w-4 mx-auto"
fill="none"
@@ -257,7 +257,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
</button>
)}
{currentStatus === MediaStatus.AVAILABLE && (
<button className="w-full h-7 text-center text-white bg-green-400 rounded-sm ml-1">
<button className="w-full h-7 text-center text-white bg-green-400 rounded-sm ml-2">
<svg
className="w-4 mx-auto"
fill="none"