diff --git a/pkg_client/src/components/PopulateForm.tsx b/pkg_client/src/components/PopulateForm.tsx index 63c5af2..b04d55c 100644 --- a/pkg_client/src/components/PopulateForm.tsx +++ b/pkg_client/src/components/PopulateForm.tsx @@ -1,28 +1,11 @@ import Container from "react-bootstrap/esm/Container"; -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"; - -export interface Concept { - description: string; - related_entities: string[]; - broader_entities: string[]; - narrower_entities: string[]; -} - -export interface TripleElement { - value: string | Concept; -} const PopulateForm = () => { return (

- Complete the corresponding form to either add a statement or a - preference.{" "} + Complete the corresponding form to either add or delete a statement.{" "} It is assumed that you are familiar with the{" "} @@ -35,32 +18,10 @@ const PopulateForm = () => { By default the annotations are URIs but if they are not available, you can use concepts instead.

- - - - - - - - {/* TODO: Add section to manage access rights of services + + {/* TODO: Add section to manage access rights of services See issue: https://github.com/iai-group/pkg-api/issues/66 */} - - - - - - - - - - +
); }; diff --git a/pkg_client/src/components/PreferencePopulationForm.tsx b/pkg_client/src/components/PreferencePopulationForm.tsx deleted file mode 100644 index eb38542..0000000 --- a/pkg_client/src/components/PreferencePopulationForm.tsx +++ /dev/null @@ -1,278 +0,0 @@ -import { useContext, useState } from "react"; -import { UserContext } from "../contexts/UserContext"; -import Form from "react-bootstrap/Form"; -import Button from "react-bootstrap/Button"; -import { TripleElement } from "./PopulateForm"; -import { Alert } from "react-bootstrap"; -import axios from "axios"; - -const PreferencePopulationForm = () => { - const { user } = useContext(UserContext); - const [error, setError] = useState(""); - const [info, setInfo] = useState(""); - const [subject, setSubject] = useState(""); - const [objectSwitch, setObjectSwitch] = useState(false); - const [object, setObject] = useState({ - value: "", - }); - const [prefValue, setPrefValue] = useState(Number.NaN); - const [statementID, setStatementID] = useState(""); - const baseURL = - (window as any)["PKG_API_BASE_URL"] || "http://127.0.0.1:5000"; - - const addPreference = () => { - if (!subject) { - setError("Please fill the required field: Subject."); - return; - } - if (isNaN(prefValue)) { - setError("Please fill the required field: Preference value."); - return; - } - if (typeof object.value === "string" && object.value === "") { - setError("Please fill the required field: Object."); - return; - } else if ( - typeof object.value !== "string" && - object.value.description === "" - ) { - setError("Please fill the required field: Object description."); - return; - } - // Axios sent POST request with body - axios - .post(`${baseURL}/preference`, { - owner_uri: user?.uri, - owner_username: user?.username, - subject: subject, - object: object.value, - preference: prefValue, - statementID: statementID, - }) - .then((response) => { - setError(""); - setInfo(response.data.message); - }) - .catch((error) => { - setError(error.response.data.message); - setInfo(""); - }); - }; - - return ( - <> - {error && {error}} - {info && {info}} -
- - - Subject - - { - 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"); - } - }} - /> - setSubject(e.target.value)} - /> - - - - Object - - { - setObjectSwitch(e.target.checked); - }} - /> - {!objectSwitch && ( - setObject({ value: e.target.value })} - /> - )} - {objectSwitch && ( - <> - { - typeof object.value === "string" - ? setObject({ - value: { - description: e.target.value, - related_entities: [], - broader_entities: [], - narrower_entities: [], - }, - }) - : setObject({ - value: { - description: e.target.value, - related_entities: - object?.value?.related_entities || [], - broader_entities: - object?.value?.broader_entities || [], - narrower_entities: - object?.value?.narrower_entities || [], - }, - }); - }} - /> - { - typeof object.value === "string" - ? setObject({ - value: { - description: "", - related_entities: e.target.value - .split(",") - .map((e) => e.trim()), - broader_entities: [], - narrower_entities: [], - }, - }) - : setObject({ - value: { - description: object?.value?.description || "", - related_entities: e.target.value - .split(",") - .map((e) => e.trim()), - broader_entities: - object?.value?.broader_entities || [], - narrower_entities: - object?.value?.narrower_entities || [], - }, - }); - }} - /> - { - typeof object.value === "string" - ? setObject({ - value: { - description: "", - related_entities: [], - broader_entities: e.target.value - .split(",") - .map((e) => e.trim()), - narrower_entities: [], - }, - }) - : setObject({ - value: { - description: object?.value?.description || "", - related_entities: - object?.value?.related_entities || [], - broader_entities: e.target.value - .split(",") - .map((e) => e.trim()), - narrower_entities: - object?.value?.narrower_entities || [], - }, - }); - }} - /> - { - typeof object.value === "string" - ? setObject({ - value: { - description: "", - related_entities: [], - broader_entities: [], - narrower_entities: e.target.value - .split(",") - .map((e) => e.trim()), - }, - }) - : setObject({ - value: { - description: object?.value?.description || "", - related_entities: - object?.value?.related_entities || [], - broader_entities: - object?.value?.broader_entities || [], - narrower_entities: e.target.value - .split(",") - .map((e) => e.trim()), - }, - }); - }} - /> - - )} - - - - Preference - - setPrefValue(parseFloat(e.target.value))} - /> - - - - Origin statement ID - - setStatementID(e.target.value)} - /> - - -
- - ); -}; - -export default PreferencePopulationForm; diff --git a/pkg_client/src/components/StatementPopulationForm.tsx b/pkg_client/src/components/StatementPopulationForm.tsx index c3a477c..52aaf5d 100644 --- a/pkg_client/src/components/StatementPopulationForm.tsx +++ b/pkg_client/src/components/StatementPopulationForm.tsx @@ -2,10 +2,20 @@ import { useState, useContext } from "react"; import Form from "react-bootstrap/Form"; import Button from "react-bootstrap/Button"; import { UserContext } from "../contexts/UserContext"; -import { TripleElement } from "./PopulateForm"; import axios from "axios"; import { Alert } from "react-bootstrap"; +export interface Concept { + description: string; + related_entities: string[]; + broader_entities: string[]; + narrower_entities: string[]; +} + +export interface TripleElement { + value: string | Concept; +} + const StatementPopulationForm = () => { const { user } = useContext(UserContext); const [description, setDescription] = useState("");