Skip to content

Commit

Permalink
feat(frontend): radarr delete modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@sct
sct committed Nov 3, 2020
1 parent c4ac357 commit 877a518
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 15 deletions.
61 changes: 47 additions & 14 deletions src/components/Settings/RadarrModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
baseUrl: radarr?.baseUrl,
activeProfileId: radarr?.activeProfileId,
rootFolder: radarr?.activeDirectory,
minimumAvailability: radarr?.minimumAvailability,
isDefault: radarr?.isDefault ?? false,
is4k: radarr?.is4k ?? false,
}}
Expand All @@ -150,7 +151,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
activeProfileName: profileName,
activeDirectory: values.rootFolder,
is4k: values.is4k,
minimumAvailability: 'In Cinema',
minimumAvailability: values.minimumAvailability,
isDefault: values.isDefault,
};
if (!radarr) {
Expand Down Expand Up @@ -206,13 +207,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
okDisabled={!isValidated || isSubmitting || isTesting}
onOk={() => handleSubmit()}
title={
!radarr ? 'Create New Radarr Instance' : 'Edit Radarr Instance'
!radarr ? 'Create New Radarr Server' : 'Edit Radarr Server'
}
>
<div className="mb-6">
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="port"
htmlFor="isDefault"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
>
Default Server
Expand Down Expand Up @@ -304,7 +305,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="port"
htmlFor="ssl"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
>
SSL
Expand All @@ -324,7 +325,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="name"
htmlFor="apiKey"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
>
API Key
Expand All @@ -350,7 +351,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="name"
htmlFor="baseUrl"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
>
Base URL
Expand All @@ -361,7 +362,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
id="baseUrl"
name="baseUrl"
type="input"
placeholder="Example: /sonarr"
placeholder="Example: /radarr"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('baseUrl', e.target.value);
Expand All @@ -376,7 +377,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="name"
htmlFor="activeProfileId"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
>
Quality Profile
Expand All @@ -400,14 +401,16 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
))}
</Field>
</div>
{errors.baseUrl && touched.baseUrl && (
<div className="text-red-500 mt-2">{errors.baseUrl}</div>
{errors.activeProfileId && touched.activeProfileId && (
<div className="text-red-500 mt-2">
{errors.activeProfileId}
</div>
)}
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="name"
htmlFor="rootFolder"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
>
Root Folder
Expand All @@ -431,14 +434,44 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
))}
</Field>
</div>
{errors.baseUrl && touched.baseUrl && (
<div className="text-red-500 mt-2">{errors.baseUrl}</div>
{errors.rootFolder && touched.rootFolder && (
<div className="text-red-500 mt-2">
{errors.rootFolder}
</div>
)}
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="minimumAvailability"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
>
Minimum Availability
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm">
<Field
as="select"
id="minimumAvailability"
name="minimumAvailability"
className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
>
<option value="announced">Announced</option>
<option value="inCinemas">In Cinemas</option>
<option value="released">Released</option>
<option value="preDB">PreDB</option>
</Field>
</div>
{errors.rootFolder && touched.rootFolder && (
<div className="text-red-500 mt-2">
{errors.rootFolder}
</div>
)}
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="port"
htmlFor="is4k"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
>
Ultra HD Server
Expand Down
39 changes: 38 additions & 1 deletion src/components/Settings/SettingsServices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import type {
} from '../../../server/lib/settings';
import LoadingSpinner from '../Common/LoadingSpinner';
import RadarrModal from './RadarrModal';
import Modal from '../Common/Modal';
import Transition from '../Transition';
import axios from 'axios';

interface ServerInstanceProps {
name: string;
Expand Down Expand Up @@ -119,6 +122,19 @@ const SettingsServices: React.FC = () => {
open: false,
radarr: null,
});
const [deleteRadarrModal, setDeleteRadarrModal] = useState<{
open: boolean;
radarrId: number | null;
}>({
open: false,
radarrId: null,
});

const deleteServer = async (radarrId: number) => {
await axios.delete(`/api/v1/settings/radarr/${radarrId}`);
setDeleteRadarrModal({ open: false, radarrId: null });
revalidateRadarr();
};

return (
<>
Expand All @@ -143,6 +159,25 @@ const SettingsServices: React.FC = () => {
}}
/>
)}
<Transition
show={deleteRadarrModal.open}
enter="transition ease-in-out duration-300 transform opacity-0"
enterFrom="opacity-0"
enterTo="opacuty-100"
leave="transition ease-in-out duration-300 transform opacity-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Modal
okText="Delete"
okButtonType="danger"
onOk={() => deleteServer(deleteRadarrModal.radarrId ?? 0)}
onCancel={() => setDeleteRadarrModal({ open: false, radarrId: null })}
title="Delete Server"
>
Are you sure you want to delete this Radarr server?
</Modal>
</Transition>
<div className="mt-6 sm:mt-5">
{!radarrData && !radarrError && <LoadingSpinner />}
{radarrData && !radarrError && (
Expand All @@ -157,7 +192,9 @@ const SettingsServices: React.FC = () => {
isDefault={radarr.isDefault && !radarr.is4k}
isDefault4K={radarr.is4k && radarr.isDefault}
onEdit={() => setEditRadarrModal({ open: true, radarr })}
onDelete={() => console.log('delete clicked')}
onDelete={() =>
setDeleteRadarrModal({ open: true, radarrId: radarr.id })
}
/>
))}
<li className="col-span-1 border-2 border-dashed border-cool-gray-400 rounded-lg shadow h-32 sm:h-32">
Expand Down

0 comments on commit 877a518

Please sign in to comment.