Skip to content

Commit

Permalink
Update forms for PKG population
Browse files Browse the repository at this point in the history
  • Loading branch information
@NoB0
NoB0 committed Feb 11, 2024
1 parent 6139bf0 commit 00c43f5
Show file tree
Hide file tree
Showing 3 changed files with 746 additions and 196 deletions.
240 changes: 44 additions & 196 deletions pkg_client/src/components/PopulateForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,28 @@
import { useContext, useState } from "react";
import { UserContext } from "../contexts/UserContext";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Alert from "react-bootstrap/Alert";
import Container from "react-bootstrap/esm/Container";
import axios from "axios";
import Col from "react-bootstrap/esm/Col";
import Row from "react-bootstrap/esm/Row";
import Tab from "react-bootstrap/Tab";
import Nav from "react-bootstrap/Nav";
import StatementPopulationForm from "./StatementPopulationForm";
import PreferencePopulationForm from "./PreferencePopulationForm";

const PopulateForm = () => {
const { user } = useContext(UserContext);
const [description, setDescription] = useState("");
const [subject, setSubject] = useState("");
const [predicate, setPredicate] = useState("");
const [object, setObject] = useState("");
const [preference, setPreference] = useState(0.0);
const [prefTopic, setPrefTopic] = useState("");
const [error, setError] = useState("");
const [info, setInfo] = useState("");
const baseURL =
(window as any)["PKG_API_BASE_URL"] || "http://127.0.0.1:5000";

const addStatement = () => {
if (!description) {
setError("Please fill the required field: Description.");
return;
}
// Axios sent POST request with body
axios
.post(`${baseURL}/statements`, {
description: description,
subject: subject,
predicate: predicate,
object: object,
preference: preference,
prefTopic: prefTopic,
})
.then((response) => {
setError("");
setInfo(response.data.message);
})
.catch((error) => {
setError(error.response.data.message);
setInfo("");
});
};
export interface Concept {
description: string;
related: string[];
broader: string[];
narrower: string[];
}

const deleteStatement = () => {
if (!description) {
setError("Please fill the required field: Description.");
return;
}
// Axios send DELETE request with body
axios
.delete(`${baseURL}/statements`, {
data: {
description: description,
subject: subject,
predicate: predicate,
object: object,
preference: preference,
prefTopic: prefTopic,
},
})
.then((response) => {
setError("");
setInfo(response.data.message);
})
.catch((error) => {
setError(error.response.data.message);
setInfo("");
});
};
export interface TripleElement {
value: string | Concept;
}

const PopulateForm = () => {
return (
<Container>
<p>
Complete the following form to either add or delete a statement.{" "}
Complete the corresponding form to either add a statement or a
preference.{" "}
<b>
It is assumed that you are familiar with the{" "}
<a href="https://iai-group.github.io/pkg-vocabulary/" target="blank">
Expand All @@ -86,133 +32,35 @@ const PopulateForm = () => {
</b>
</p>
<p>
The annotation fields may be filled with either an URI or the
representation of a blank node. For example:
By default the annotations are URIs but if they are not available, you
can use concepts instead.
</p>
<ul>
<li>
the predicate <i>hasName</i> may be represented as{" "}
<i>http://xmlns.com/foaf/0.1/name</i> or <i>foaf:name</i>
</li>
<li>
the predicate <i>dislike</i> may be represented as blank node{" "}
<i>[ a skos:Concept ; dc:description "dislike" ]</i>
</li>
</ul>

<Form>
{error && <Alert variant="danger">{error}</Alert>}
{info && <Alert variant="info">{info}</Alert>}
<Form.Group className="mb-3" controlId="formDescription">
<Form.Label>
<b>Description</b>
</Form.Label>
<Form.Control
type="text"
placeholder="Enter statement description"
required
onChange={(e) => setDescription(e.target.value)}
/>
</Form.Group>
<b>Annotations</b>
<Form.Group className="mb-3" controlId="formSubject">
<Form.Label>
<i>Subject</i>
</Form.Label>
<Form.Check
type="switch"
id="custom-switch"
label="Me"
onChange={(e) => {
if (e.target.checked) {
setSubject(user?.uri || "");
// Disable the input
(
document.getElementById("inputSubjectURI") as HTMLInputElement
).disabled = true;
document
.getElementById("inputSubjectURI")
?.setAttribute("placeholder", user?.uri || "");
} else {
setSubject("");
// Enable the input
(
document.getElementById("inputSubjectURI") as HTMLInputElement
).disabled = false;
document
.getElementById("inputSubjectURI")
?.setAttribute("placeholder", "Enter subject URI");
}
}}
/>
<Form.Control
type="text"
id="inputSubjectURI"
onChange={(e) => setSubject(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formPredicate">
<Form.Label>
<i>Predicate</i>
</Form.Label>
<Form.Control
type="text"
onChange={(e) => setPredicate(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formObject">
<Form.Label>
<i>Object</i>
</Form.Label>
<Form.Control
type="text"
onChange={(e) => setObject(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formPreference">
<Form.Label>
<i>Preference</i>
</Form.Label>
<Row className="mb-3">
<Col sm={5}>
<Form.Control
type="text"
placeholder="Enter topic"
onChange={(e) => setPrefTopic(e.target.value)}
/>
</Col>
<Col sm={1}>
<Form.Control
type="number"
min="-1.0"
max="1.0"
step="0.1"
placeholder="Enter preference"
defaultValue={preference}
onChange={(e) => setPreference(parseFloat(e.target.value))}
/>
</Col>
</Row>
</Form.Group>
{/* TODO: Add section to manage access rights of services
See issue: https://github.com/iai-group/pkg-api/issues/66 */}
<Button
className="mt-3"
style={{ marginRight: "10px" }}
variant="primary"
onClick={addStatement}
>
Add statement
</Button>
<Button
className="mt-3"
style={{ marginRight: "10px" }}
variant="primary"
onClick={deleteStatement}
>
Delete statement
</Button>
</Form>
<Tab.Container id="left-tabs-example" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first">Statement</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Preference</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
{/* TODO: Add section to manage access rights of services
See issue: https://github.com/iai-group/pkg-api/issues/66 */}
<Tab.Pane eventKey="first">
<StatementPopulationForm />
</Tab.Pane>
<Tab.Pane eventKey="second">
<PreferencePopulationForm />
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
</Container>
);
};
Expand Down
Loading

0 comments on commit 00c43f5

Please sign in to comment.