You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import { Tab, Tabs } from '@blueprintjs/core';
|
|
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { i18n } from 'vj/utils';
|
|
import ProblemConfigEditor from './ProblemConfigEditor';
|
|
import ProblemConfigForm from './ProblemConfigForm';
|
|
import { ProblemConfigTree } from './ProblemConfigTree';
|
|
import { RootState } from './reducer';
|
|
|
|
interface Props {
|
|
onSave: () => void
|
|
}
|
|
|
|
export default function ProblemConfig(props: Props) {
|
|
const [selected, setSelected] = React.useState('basic');
|
|
const valid = useSelector((state: RootState) => state.config.__valid);
|
|
const errors = useSelector((state: RootState) => state.config.__errors, (a, b) => JSON.stringify(a) === JSON.stringify(b));
|
|
|
|
function save() {
|
|
// eslint-disable-next-line
|
|
if (!valid && !confirm('Errors detected in the config. Still save?')) return;
|
|
props.onSave();
|
|
}
|
|
|
|
return (<>
|
|
<div className="row">
|
|
<div className="medium-4 columns">
|
|
<ProblemConfigEditor />
|
|
</div>
|
|
<div className="medium-8 columns">
|
|
<Tabs onChange={(t) => (t !== 'errors' && setSelected(t.toString()))} selectedTabId={valid ? selected : 'errors'}>
|
|
<Tab id="basic" disabled={!valid} title="Basic" panel={<ProblemConfigForm />} />
|
|
<Tab id="subtasks" disabled={!valid} title="Subtasks" panel={<ProblemConfigTree />} />
|
|
<Tab id="errors" disabled={valid} title={errors.length ? `Errors(${errors.length})` : 'No Errors'} panel={
|
|
<div>{errors.map((i) => (<pre key={i}>{i}</pre>))}</div>} />
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
<button className="rounded primary button" onClick={save}>{i18n('Submit')}</button>
|
|
</>);
|
|
}
|