1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-25 14:34:19 +00:00

Implement BoxRepositoryCreate

This commit is contained in:
Stefano Pigozzi 2021-05-07 17:30:10 +02:00
parent a6addd5242
commit 7149b6a30f
Signed by untrusted user who does not match committer: steffo
GPG key ID: 6965406171929D01
4 changed files with 69 additions and 30 deletions

View file

@ -0,0 +1,60 @@
import React, { useState } from "react"
import Style from "./BoxRepositoryCreate.module.css"
import classNames from "classnames"
import BoxFull from "../base/BoxFull"
import FormLabelled from "../base/FormLabelled"
import FormLabel from "../base/formparts/FormLabel"
import InputWithIcon from "../base/InputWithIcon"
import { faFolder, faPlus } from "@fortawesome/free-solid-svg-icons"
import Radio from "../base/Radio"
import Button from "../base/Button"
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
export default function BoxRepositoryCreate({ ...props }) {
const {
evaluationMode,
setEvaluationMode,
name,
setName,
save,
} = useRepositoryEditor()
return (
<BoxFull header={"Create repository"} {...props}>
<FormLabelled>
<FormLabel htmlFor={"repo-name"} text={"Repository name"}>
<InputWithIcon
id={"repo-name"}
icon={faFolder}
value={name}
onChange={e => setName(e.target.value)}
/>
</FormLabel>
<FormLabel htmlFor={"filter-mode"} text={"Add tweets if they satisfy"}>
<label>
<Radio
name={"filter-mode"}
onClick={() => setEvaluationMode(0)}
checked={evaluationMode === 0}
/>
At least one filter
</label>
&nbsp;
<label>
<Radio
name={"filter-mode"}
onClick={() => setEvaluationMode(1)}
checked={evaluationMode === 1}
/>
Every filter
</label>
</FormLabel>
<Button style={{"gridColumn": "1 / 3"}} icon={faPlus} color={"Green"} onClick={e => save()}>
Create repository
</Button>
</FormLabelled>
</BoxFull>
)
}

View file

@ -0,0 +1,3 @@
.BoxRepositoryCreate {
}

View file

@ -2,19 +2,13 @@ import React from "react"
import Style from "./PageDashboard.module.css"
import classNames from "classnames"
import BoxHeader from "../components/base/BoxHeader"
import BoxFull from "../components/base/BoxFull"
import InputWithIcon from "../components/base/InputWithIcon"
import { faFolder, faPlus } from "@fortawesome/free-solid-svg-icons"
import Radio from "../components/base/Radio"
import Button from "../components/base/Button"
import FormLabelled from "../components/base/FormLabelled"
import FormLabel from "../components/base/formparts/FormLabel"
import RepositoryEditor from "../components/providers/RepositoryEditor"
import BoxConditionHashtag from "../components/interactive/BoxConditionHashtag"
import BoxConditions from "../components/interactive/BoxConditions"
import BoxConditionDatetime from "../components/interactive/BoxConditionDatetime"
import BoxConditionMap from "../components/interactive/BoxConditionMap"
import BoxConditionUser from "../components/interactive/BoxConditionUser"
import BoxRepositoryCreate from "../components/interactive/BoxRepositoryCreate"
export default function PageDashboard({ children, className, ...props }) {
@ -29,25 +23,7 @@ export default function PageDashboard({ children, className, ...props }) {
<BoxConditionUser className={Style.SearchByUser}/>
<BoxConditionDatetime className={Style.SearchByTimePeriod}/>
<BoxConditions className={Style.Conditions}/>
<BoxFull className={Style.CreateDialog} header={"Create repository"}>
<FormLabelled>
<FormLabel htmlFor={"repo-name"} text={"Repository name"}>
<InputWithIcon id={"repo-name"} icon={faFolder}/>
</FormLabel>
<FormLabel htmlFor={"filter-mode"} text={"Add tweets if they satisfy"}>
<label>
<Radio name={"filter-mode"} value={"or"}/> At least one filter
</label>
&nbsp;
<label>
<Radio name={"filter-mode"} value={"and"}/> Every filter
</label>
</FormLabel>
<Button style={{"gridColumn": "1 / 3"}} icon={faPlus} color={"Green"}>
Create repository
</Button>
</FormLabelled>
</BoxFull>
<BoxRepositoryCreate className={Style.CreateDialog}/>
</RepositoryEditor>
</div>
)

View file

@ -3,13 +3,13 @@
grid-template-areas:
"a a a"
"b c d"
"b e e"
"b f f"
"b c f"
"b d f"
"b e f"
"b g g"
;
grid-template-columns: 400px 1fr 1fr;
grid-template-rows: auto auto auto 1fr auto;
grid-template-rows: auto 1fr 1fr 1fr auto;
grid-gap: 10px;