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

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

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