Checkbox & Dropdown for Startup Variables (#3769)

This commit is contained in:
Boy132 2022-01-18 04:08:53 +01:00 committed by GitHub
parent e7884e4f0b
commit 7d0d71baec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 11 deletions

View file

@ -41,11 +41,12 @@ export interface SwitchProps {
label?: string; label?: string;
description?: string; description?: string;
defaultChecked?: boolean; defaultChecked?: boolean;
readOnly?: boolean;
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
children?: React.ReactNode; children?: React.ReactNode;
} }
const Switch = ({ name, label, description, defaultChecked, onChange, children }: SwitchProps) => { const Switch = ({ name, label, description, defaultChecked, readOnly, onChange, children }: SwitchProps) => {
const uuid = useMemo(() => v4(), []); const uuid = useMemo(() => v4(), []);
return ( return (
@ -58,6 +59,7 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
type={'checkbox'} type={'checkbox'}
onChange={e => onChange && onChange(e)} onChange={e => onChange && onChange(e)}
defaultChecked={defaultChecked} defaultChecked={defaultChecked}
disabled={readOnly}
/> />
} }
<Label htmlFor={uuid}/> <Label htmlFor={uuid}/>

View file

@ -4,12 +4,14 @@ import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { usePermissions } from '@/plugins/usePermissions'; import { usePermissions } from '@/plugins/usePermissions';
import InputSpinner from '@/components/elements/InputSpinner'; import InputSpinner from '@/components/elements/InputSpinner';
import Input from '@/components/elements/Input'; import Input from '@/components/elements/Input';
import Switch from '@/components/elements/Switch';
import tw from 'twin.macro'; import tw from 'twin.macro';
import { debounce } from 'debounce'; import { debounce } from 'debounce';
import updateStartupVariable from '@/api/server/updateStartupVariable'; import updateStartupVariable from '@/api/server/updateStartupVariable';
import useFlash from '@/plugins/useFlash'; import useFlash from '@/plugins/useFlash';
import FlashMessageRender from '@/components/FlashMessageRender'; import FlashMessageRender from '@/components/FlashMessageRender';
import getServerStartup from '@/api/swr/getServerStartup'; import getServerStartup from '@/api/swr/getServerStartup';
import Select from '@/components/elements/Select';
import isEqual from 'react-fast-compare'; import isEqual from 'react-fast-compare';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
@ -43,6 +45,9 @@ const VariableBox = ({ variable }: Props) => {
.then(() => setLoading(false)); .then(() => setLoading(false));
}, 500); }, 500);
const useSwitch = variable.rules.some(v => v === 'boolean' || v === 'in:0,1');
const selectValues = variable.rules.find(v => v.startsWith('in:'))?.split(',') || [];
return ( return (
<TitledGreyBox <TitledGreyBox
title={ title={
@ -56,17 +61,52 @@ const VariableBox = ({ variable }: Props) => {
> >
<FlashMessageRender byKey={FLASH_KEY} css={tw`mb-2 md:mb-4`}/> <FlashMessageRender byKey={FLASH_KEY} css={tw`mb-2 md:mb-4`}/>
<InputSpinner visible={loading}> <InputSpinner visible={loading}>
<Input {useSwitch ?
onKeyUp={e => { <>
if (canEdit && variable.isEditable) { <Switch
setVariableValue(e.currentTarget.value); readOnly={!canEdit || !variable.isEditable}
name={variable.envVariable}
defaultChecked={variable.serverValue === '1'}
onChange={() => {
if (canEdit && variable.isEditable) {
setVariableValue(variable.serverValue === '1' ? '0' : '1');
}
}}
/>
</>
:
<>
{selectValues.length > 0 ?
<>
<Select
onChange={e => setVariableValue(e.target.value)}
name={variable.envVariable}
defaultValue={variable.serverValue}
disabled={!canEdit || !variable.isEditable}
>
{selectValues.map(selectValue => (
<option key={selectValue.replace('in:', '')} value={selectValue.replace('in:', '')}>{selectValue.replace('in:', '')}</option>
))}
</Select>
</>
:
<>
<Input
onKeyUp={e => {
if (canEdit && variable.isEditable) {
setVariableValue(e.currentTarget.value);
}
}}
readOnly={!canEdit || !variable.isEditable}
name={variable.envVariable}
defaultValue={variable.serverValue}
placeholder={variable.defaultValue}
/>
</>
} }
}} </>
readOnly={!canEdit || !variable.isEditable} }
name={variable.envVariable}
defaultValue={variable.serverValue}
placeholder={variable.defaultValue}
/>
</InputSpinner> </InputSpinner>
<p css={tw`mt-1 text-xs text-neutral-300`}> <p css={tw`mt-1 text-xs text-neutral-300`}>
{variable.description} {variable.description}