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

10
resources/scripts/components/admin/SubNavigation.tsx
View file

@ -4,17 +4,17 @@ import styled from 'styled-components/macro';
import tw from 'twin.macro';
export const SubNavigation = styled.div`
${tw`h-12 flex flex-row items-center border-b border-neutral-700 mb-4`};
${tw`flex flex-row items-center flex-shrink-0 h-12 mb-4 border-b border-neutral-700`};
& > div {
${tw`h-full flex flex-col flex-shrink-0 justify-center`};
${tw`flex flex-col justify-center flex-shrink-0 h-full`};
& > a {
${tw`h-full flex flex-row items-center text-neutral-300 border-t px-4`};
${tw`flex flex-row items-center h-full px-4 border-t text-neutral-300`};
border-top-color: transparent !important;
& > svg {
${tw`h-6 w-6 mr-2`};
${tw`w-6 h-6 mr-2`};
}
& > span {
@ -22,7 +22,7 @@ export const SubNavigation = styled.div`
}
&:active, &.active {
${tw`text-primary-300 border-b border-primary-300`};
${tw`border-b text-primary-300 border-primary-300`};
}
}
}

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