mirror of
https://github.com/pds-nest/nest.git
synced 2024-11-24 22:14:18 +00:00
🐛 Fix bugs in RepositoryEditor
This commit is contained in:
parent
b7a7da8621
commit
841356adf5
9 changed files with 83 additions and 49 deletions
|
@ -81,7 +81,7 @@ export default function BoxConditionMap({ ...props }) {
|
|||
map.off("zoom", onZoom)
|
||||
}
|
||||
},
|
||||
[map],
|
||||
[map, onMove, onZoom],
|
||||
)
|
||||
|
||||
const onButtonClick = () => {
|
||||
|
|
|
@ -3,7 +3,7 @@ import BoxFull from "../base/BoxFull"
|
|||
import FormLabelled from "../base/FormLabelled"
|
||||
import FormLabel from "../base/formparts/FormLabel"
|
||||
import InputWithIcon from "../base/InputWithIcon"
|
||||
import { faFolder, faPencilAlt, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||
import { faBackward, faFolder, faPencilAlt, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||
import Radio from "../base/Radio"
|
||||
import Button from "../base/Button"
|
||||
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
|
||||
|
@ -27,6 +27,7 @@ export default function BoxRepositoryCreate({ ...props }) {
|
|||
name,
|
||||
setName,
|
||||
save,
|
||||
revert,
|
||||
error,
|
||||
} = useRepositoryEditor()
|
||||
|
||||
|
@ -55,7 +56,7 @@ export default function BoxRepositoryCreate({ ...props }) {
|
|||
onChange={() => setEvaluationMode(0)}
|
||||
checked={evaluationMode === 0}
|
||||
/>
|
||||
At least one filter
|
||||
One filter
|
||||
</label>
|
||||
|
||||
<label>
|
||||
|
@ -73,20 +74,30 @@ export default function BoxRepositoryCreate({ ...props }) {
|
|||
</FormAlert>
|
||||
: null}
|
||||
{id ?
|
||||
<Button
|
||||
style={{ "gridColumn": "1 / 3" }}
|
||||
icon={faPencilAlt}
|
||||
color={"Green"}
|
||||
onClick={e => goToOnSuccess(save, history, "/repositories")}
|
||||
>
|
||||
Edit repository
|
||||
</Button>
|
||||
<>
|
||||
<Button
|
||||
style={{ "gridColumn": "1" }}
|
||||
icon={faBackward}
|
||||
color={"Red"}
|
||||
onClick={e => revert()}
|
||||
>
|
||||
Rollback edits
|
||||
</Button>
|
||||
<Button
|
||||
style={{ "gridColumn": "2" }}
|
||||
icon={faPencilAlt}
|
||||
color={"Green"}
|
||||
onClick={_ => goToOnSuccess(save, history, "/repositories")()}
|
||||
>
|
||||
Save changes
|
||||
</Button>
|
||||
</>
|
||||
:
|
||||
<Button
|
||||
style={{ "gridColumn": "1 / 3" }}
|
||||
icon={faPlus}
|
||||
color={"Green"}
|
||||
onClick={e => goToOnSuccess(save, history, "/repositories")}
|
||||
onClick={_ => goToOnSuccess(save, history, "/repositories")()}
|
||||
>
|
||||
Create repository
|
||||
</Button>
|
||||
|
|
|
@ -41,7 +41,6 @@ export default function ConditionBadge({ ...condition }) {
|
|||
let displayedContent = content
|
||||
if(type === 3) {
|
||||
let split = displayedContent.split(" ")
|
||||
let type = split[0]
|
||||
let radius = Number.parseFloat(split[1]).toFixed(0)
|
||||
let radiusType = "m"
|
||||
if(radius >= 2000) {
|
||||
|
|
|
@ -70,11 +70,17 @@ export default function RepositorySummaryBase(
|
|||
</div>
|
||||
</div>
|
||||
<div className={Style.Middle}>
|
||||
<div className={Style.StartDate}>
|
||||
Start: {start}
|
||||
<div className={classNames(Style.MiddleLabel, Style.MiddleTop)}>
|
||||
Start:
|
||||
</div>
|
||||
<div className={Style.EndDate}>
|
||||
End: {end}
|
||||
<div className={classNames(Style.MiddleValue, Style.MiddleTop)}>
|
||||
{start}
|
||||
</div>
|
||||
<div className={classNames(Style.MiddleLabel, Style.MiddleBot)}>
|
||||
End:
|
||||
</div>
|
||||
<div className={classNames(Style.MiddleValue, Style.MiddleBot)}>
|
||||
{end}
|
||||
</div>
|
||||
</div>
|
||||
<div className={Style.Right}>
|
||||
|
|
|
@ -59,22 +59,30 @@
|
|||
.Middle {
|
||||
flex-grow: 1;
|
||||
height: 60px;
|
||||
padding: 5px;
|
||||
|
||||
background-color: var(--bg-light);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
|
||||
}
|
||||
|
||||
.StartDate {
|
||||
|
||||
.MiddleLabel {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.EndDate {
|
||||
.MiddleValue {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.MiddleTop {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.MiddleBot {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.Right {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useCallback, useContext, useState } from "react"
|
||||
import React, { useCallback, useContext, useMemo, useState } from "react"
|
||||
import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
|
||||
import useArrayState from "../../hooks/useArrayState"
|
||||
import Style from "./RepositoryEditor.module.css"
|
||||
|
@ -51,21 +51,26 @@ export default function RepositoryEditor({
|
|||
|
||||
const method = id ? "PUT" : "POST"
|
||||
const path = id ? `/api/v1/repositories/${id}` : `/api/v1/repositories/`
|
||||
const body = {
|
||||
"conditions": _conditions,
|
||||
"end": _end,
|
||||
"evaluation_mode": _evaluationMode,
|
||||
"id": id,
|
||||
"is_active": true,
|
||||
"name": _name,
|
||||
"owner": user,
|
||||
"start": _start,
|
||||
}
|
||||
const body = useMemo(
|
||||
() => {
|
||||
return {
|
||||
"conditions": _conditions,
|
||||
"end": _end,
|
||||
"evaluation_mode": _evaluationMode,
|
||||
"id": id,
|
||||
"is_active": true,
|
||||
"name": _name,
|
||||
"owner": user,
|
||||
"start": _start,
|
||||
}
|
||||
},
|
||||
[_conditions, _end, _evaluationMode, id, _name, user, _start],
|
||||
)
|
||||
const { error, loading, fetchNow } = useBackend(fetchDataAuth, method, path, body)
|
||||
|
||||
const save = useCallback(
|
||||
() => {
|
||||
if(id) {
|
||||
if(!id) {
|
||||
console.info("Creating new repository with body: ", body)
|
||||
}
|
||||
else {
|
||||
|
@ -89,7 +94,7 @@ export default function RepositoryEditor({
|
|||
setRawConditions(conditions)
|
||||
setEvaluationMode(evaluationMode)
|
||||
},
|
||||
[name, isActive, start, end, conditions, evaluationMode],
|
||||
[name, isActive, start, end, conditions, evaluationMode, setRawConditions],
|
||||
)
|
||||
|
||||
/**
|
||||
|
@ -119,7 +124,7 @@ export default function RepositoryEditor({
|
|||
console.debug("Adding ", newCond, " to the Repository Conditions")
|
||||
appendRawCondition(newCond)
|
||||
},
|
||||
[_conditions],
|
||||
[_conditions, appendRawCondition],
|
||||
)
|
||||
|
||||
return (
|
||||
|
|
|
@ -6,14 +6,19 @@ import RepositoryEditor from "../components/providers/RepositoryEditor"
|
|||
import useBackendImmediately from "../hooks/useBackendImmediately"
|
||||
import ContextUser from "../contexts/ContextUser"
|
||||
import renderContents from "../utils/renderContents"
|
||||
import { useParams } from "react-router"
|
||||
|
||||
|
||||
export default function PageEdit({ id, className, ...props }) {
|
||||
export default function PageEdit({ className, ...props }) {
|
||||
const { id } = useParams()
|
||||
const { fetchDataAuth } = useContext(ContextUser)
|
||||
const repositoryRequest = useBackendImmediately(fetchDataAuth, "GET", `/api/v1/repositories/${id}`)
|
||||
const contents = renderContents(
|
||||
repositoryRequest,
|
||||
data => <RepositoryEditor className={Style.RepositoryEditor} {...data}/>,
|
||||
data => {
|
||||
console.debug("Data: ", data)
|
||||
return <RepositoryEditor className={Style.RepositoryEditor} {...data}/>
|
||||
},
|
||||
)
|
||||
|
||||
return (
|
||||
|
|
|
@ -7,17 +7,17 @@
|
|||
* @returns {(function(): void)|*}
|
||||
*/
|
||||
export default function goToOnSuccess(func, history, destination) {
|
||||
return ([...args]) => {
|
||||
let success = false
|
||||
return (...args) => {
|
||||
let result
|
||||
try {
|
||||
func(...args)
|
||||
success = true
|
||||
console.debug("Trying to run: ", func)
|
||||
result = func(...args)
|
||||
history.push(destination)
|
||||
return result
|
||||
}
|
||||
catch(e) {
|
||||
success = false
|
||||
}
|
||||
if(success) {
|
||||
history.push(destination)
|
||||
console.debug("Failed to run ", func, ", not doing anything.")
|
||||
throw e
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@ export default function renderContents(requestHookResults, renderFunction) {
|
|||
return <Loading/>
|
||||
}
|
||||
if(error) {
|
||||
return <BoxAlert color={"Red"}>{error}</BoxAlert>
|
||||
return <BoxAlert color={"Red"}>{error.toString()}</BoxAlert>
|
||||
}
|
||||
if(data) {
|
||||
return renderFunction(data)
|
||||
|
|
Loading…
Reference in a new issue