Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

admin(ui): fix SearchableSelect, other tweaks

Browse source
This commit is contained in:
Matthew Penner 2021-02-16 13:03:14 -07:00
parent d43e70c97a
commit 9b08b6b595
6 changed files with 40 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

6
resources/scripts/components/admin/nodes/DatabaseSelect.tsx
View file

@ -1,9 +1,12 @@
import React, { useState } from 'react';
import { useFormikContext } from 'formik';
import { Database } from '@/api/admin/databases/getDatabases';
import searchDatabases from '@/api/admin/databases/searchDatabases';
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
export default ({ selected }: { selected: Database | null }) => {
const context = useFormikContext();
const [ database, setDatabase ] = useState<Database | null>(selected);
const [ databases, setDatabases ] = useState<Database[]>([]);
@ -16,8 +19,9 @@ export default ({ selected }: { selected: Database | null }) => {
});
};
const onSelect = (database: Database) => {
const onSelect = (database: Database | null) => {
setDatabase(database);
context.setFieldValue('databaseHostId', database?.id || null);
};
const getSelectedText = (database: Database | null): string => {

6
resources/scripts/components/admin/nodes/LocationSelect.tsx
View file

@ -1,9 +1,12 @@
import React, { useState } from 'react';
import { useFormikContext } from 'formik';
import { Location } from '@/api/admin/locations/getLocations';
import searchLocations from '@/api/admin/locations/searchLocations';
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
export default ({ selected }: { selected: Location | null }) => {
const context = useFormikContext();
const [ location, setLocation ] = useState<Location | null>(selected);
const [ locations, setLocations ] = useState<Location[]>([]);
@ -16,8 +19,9 @@ export default ({ selected }: { selected: Location | null }) => {
});
};
const onSelect = (location: Location) => {
const onSelect = (location: Location | null) => {
setLocation(location);
context.setFieldValue('locationId', location?.id || null);
};
const getSelectedText = (location: Location | null): string => {

21
resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
View file

@ -39,10 +39,13 @@ export default () => {
);
}
const submit = ({ name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
const submit = ({ name, description, locationId, databaseHostId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('node');
updateNode(node.id, { name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
console.log(`Location ID: ${locationId}`);
console.log(`Database Host ID: ${databaseHostId || 'null'}`);
updateNode(node.id, { name, description, locationId, databaseHostId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
.then(() => setNode({ ...node, name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
.catch(error => {
console.error(error);
@ -114,8 +117,8 @@ export default () => {
/>
</div>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
<Field
id={'listenPortHTTP'}
name={'listenPortHTTP'}
@ -124,7 +127,7 @@ export default () => {
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'publicPortHTTP'}
name={'publicPortHTTP'}
@ -134,8 +137,8 @@ export default () => {
</div>
</div>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
<Field
id={'listenPortSFTP'}
name={'listenPortSFTP'}
@ -144,7 +147,7 @@ export default () => {
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'publicPortSFTP'}
name={'publicPortSFTP'}
@ -154,7 +157,7 @@ export default () => {
</div>
</div>
<div css={tw`w-full flex flex-row items-center`}>
<div css={tw`flex flex-row items-center w-full`}>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
Save