1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-30 00:14:19 +00:00
pds-2021-g2-nest/nest_frontend/components/interactive/BoxRepositoryCreate.js
2021-05-25 17:10:40 +02:00

121 lines
4.2 KiB
JavaScript

import React from "react"
import BoxFull from "../base/BoxFull"
import FormLabelled from "../base/FormLabelled"
import FormLabel from "../base/formparts/FormLabel"
import InputWithIcon from "../base/InputWithIcon"
import { faBackward, faFolder, faPencilAlt, faPlus } from "@fortawesome/free-solid-svg-icons"
import Radio from "../base/Radio"
import Button from "../base/Button"
import FormAlert from "../base/formparts/FormAlert"
import useStrings from "../../hooks/useStrings"
/**
* A {@link BoxFull} allowing the user to save the changes made in the current {@link RepositoryEditor}.
*
* @param id - The id of the repository.
* @param name - The current name of the repository.
* @param setName - Function to change the name of the repository.
* @param evaluationMode - The current evaluation mode of the repository.
* @param setEvaluationMode - Function to change the current evaluation mode of the repository.
* @param running - If a request is running, disabling the buttons.
* @param error - If a request error occoured, the error.
* @param revert - Function to cancel the changes made to the repository.
* @param save - Function to apply the changes made to the repository.
* @param props - Additional props to pass to the box.
* @returns {JSX.Element}
* @constructor
*/
export default function BoxRepositoryCreate(
{
id,
name,
setName,
evaluationMode,
setEvaluationMode,
running,
error,
revert,
save,
...props
}) {
const strings = useStrings()
return (
<BoxFull header={strings.createRepo} {...props}>
<FormLabelled
onSubmit={e => {
e.preventDefault()
save()
}}
>
<FormLabel htmlFor={"repo-name"} text={strings.repoName}>
<InputWithIcon
id={"repo-name"}
icon={faFolder}
value={name}
onChange={e => setName(e.target.value)}
/>
</FormLabel>
<FormLabel htmlFor={"filter-mode"} text={strings.request}>
<label>
<Radio
name={"filter-mode"}
onChange={() => setEvaluationMode(0)}
checked={evaluationMode === 0}
/>
{strings.filterOR}
</label>
&nbsp;
<label>
<Radio
name={"filter-mode"}
onChange={() => setEvaluationMode(1)}
checked={evaluationMode === 1}
/>
{strings.filterAND}
</label>
</FormLabel>
{error ?
<FormAlert color={"Red"}>
{strings[error.data.code]}
</FormAlert>
: null}
{id ?
<>
<Button
style={{ "gridColumn": "1" }}
icon={faBackward}
color={"Red"}
onClick={() => revert()}
disabled={running}
>
{strings.rollback}
</Button>
<Button
style={{ "gridColumn": "2" }}
icon={faPencilAlt}
color={"Green"}
onClick={save}
disabled={running}
>
{strings.save}
</Button>
</>
:
<Button
style={{ "gridColumn": "1 / 3" }}
icon={faPlus}
color={"Green"}
onClick={save}
disabled={running}
>
{strings.createRepo}
</Button>
}
</FormLabelled>
</BoxFull>
)
}