ui(admin): fix shit

This commit is contained in:
Matthew Penner 2021-02-07 16:41:32 -07:00
parent a87fef37ec
commit 60b630354e
3 changed files with 51 additions and 3 deletions

View file

@ -1,4 +1,3 @@
import CopyOnClick from '@/components/elements/CopyOnClick';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import getMounts, { Context as MountsContext } from '@/api/admin/mounts/getMounts'; import getMounts, { Context as MountsContext } from '@/api/admin/mounts/getMounts';
import FlashMessageRender from '@/components/FlashMessageRender'; import FlashMessageRender from '@/components/FlashMessageRender';
@ -10,6 +9,7 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox'; import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable'; import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button'; import Button from '@/components/elements/Button';
import CopyOnClick from '@/components/elements/CopyOnClick';
const RowCheckbox = ({ id }: { id: number}) => { const RowCheckbox = ({ id }: { id: number}) => {
const isChecked = AdminContext.useStoreState(state => state.mounts.selectedMounts.indexOf(id) >= 0); const isChecked = AdminContext.useStoreState(state => state.mounts.selectedMounts.indexOf(id) >= 0);

View file

@ -18,6 +18,10 @@ interface Values {
description: string; description: string;
locationId: number; locationId: number;
fqdn: string; fqdn: string;
listenPort: number;
publicPort: number;
listenPortSFTP: number;
publicPortSFTP: number;
} }
export default () => { export default () => {
@ -53,6 +57,10 @@ export default () => {
description: node.description || '', description: node.description || '',
locationId: node.locationId, locationId: node.locationId,
fqdn: node.fqdn, fqdn: node.fqdn,
listenPort: node.daemonListen,
publicPort: node.daemonListen,
listenPortSFTP: node.daemonSftp,
publicPortSFTP: node.daemonSftp,
}} }}
validationSchema={object().shape({ validationSchema={object().shape({
name: string().required().max(191), name: string().required().max(191),
@ -97,6 +105,46 @@ 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`}>
<Field
id={'listenPort'}
name={'listenPort'}
label={'Listen Port'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'publicPort'}
name={'publicPort'}
label={'Public Port'}
type={'number'}
/>
</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`}>
<Field
id={'listenPortSFTP'}
name={'listenPortSFTP'}
label={'SFTP Listen Port'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'publicPortSFTP'}
name={'publicPortSFTP'}
label={'SFTP Public Port'}
type={'number'}
/>
</div>
</div>
<div css={tw`w-full flex flex-row items-center`}> <div css={tw`w-full flex flex-row items-center`}>
<div css={tw`flex ml-auto`}> <div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}> <Button type={'submit'} disabled={isSubmitting || !isValid}>

View file

@ -1,12 +1,12 @@
import { breakpoint } from '@/theme';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom'; import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
import { State, useStoreState } from 'easy-peasy'; import { State, useStoreState } from 'easy-peasy';
import tw from 'twin.macro'; import tw from 'twin.macro';
import styled from 'styled-components/macro'; import styled from 'styled-components/macro';
import { breakpoint } from '@/theme';
import { ApplicationStore } from '@/state'; import { ApplicationStore } from '@/state';
import { AdminContext } from '@/state/admin'; import { AdminContext } from '@/state/admin';
import NotFound from '@/components/screens/NotFound'; import { NotFound } from '@/components/elements/ScreenBlock';
import OverviewContainer from '@/components/admin/overview/OverviewContainer'; import OverviewContainer from '@/components/admin/overview/OverviewContainer';
import SettingsContainer from '@/components/admin/settings/SettingsContainer'; import SettingsContainer from '@/components/admin/settings/SettingsContainer';
import ApiKeysContainer from '@/components/admin/api/ApiKeysContainer'; import ApiKeysContainer from '@/components/admin/api/ApiKeysContainer';