Skip to content
This repository has been archived by the owner on Jun 10, 2024. It is now read-only.

Commit

Permalink
Merge pull request #331 from davidradl/git325
Browse files Browse the repository at this point in the history 
git325 fix quick terms and add large description
  • Loading branch information
@davidradl
davidradl authored Jan 19, 2022
2 parents 2c5c88c + b784c19 commit 1421bf4
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 76 deletions.
2 changes: 1 addition & 1 deletion cra-client/src/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,4 +77,4 @@ body {
}
.time-picker__width {
width: 18rem;
}
}
138 changes: 103 additions & 35 deletions cra-client/src/components/GlossaryAuthor/components/GlossaryQuickTerms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,32 @@ import { IdentificationContext } from "../../../contexts/IdentificationContext";
import getPathTypesAndGuids from "./properties/PathAnalyser";
import Add32 from "../../../images/carbon/Egeria_add_32";
import getNodeType from "./properties/NodeTypes.js";
import { Button, Form, FormGroup, TextInput, Loading } from "carbon-components-react";
import {
Button,
Form,
FormGroup,
TextInput,
TextArea,
Loading,
DataTable,
TableContainer,
Table,
TableHead,
TableRow,
TableCell,
TableHeader,
TableBody,
} from "carbon-components-react";

import { issueRestCreate } from "../../common/RestCaller";
import { useHistory, withRouter } from "react-router-dom";

function GlossaryQuickTerms(props) {
const identificationContext = useContext(IdentificationContext);
const glossaryNodeType = getNodeType(identificationContext.getRestURL("glossary-author"), "glossary");
const glossaryNodeType = getNodeType(
identificationContext.getRestURL("glossary-author"),
"glossary"
);
const [terms, setTerms] = useState([]);
const [termsWithStatus, setTermsWithStatus] = useState([]);
const [errorMsg, setErrorMsg] = useState();
Expand All @@ -30,6 +48,21 @@ function GlossaryQuickTerms(props) {
});


const headerData = [
{
text: "Term Name ",
key: "name",
},
{
text: "Term Description",
key: "description",
},
{
text: "Status",
key: "status",
},
];

function getUrl() {
return glossaryNodeType.url + "/" + glossaryGuid + "/terms";
}
Expand Down Expand Up @@ -74,6 +107,7 @@ function GlossaryQuickTerms(props) {
} else {
workingTermWithStatus.status = "Error";
}
workingTermWithStatus.id=i;
workingTermsWithStatus[i] = workingTermWithStatus;
}
setTermsWithStatus(workingTermsWithStatus);
Expand Down Expand Up @@ -113,7 +147,12 @@ function GlossaryQuickTerms(props) {
Back
</button>
</div>
{restCallInProgress && <Loading description="Waiting for network call to the server to complete" withOverlay={true} />}
{restCallInProgress && (
<Loading
description="Waiting for network call to the server to complete"
withOverlay={true}
/>
)}
{!restCallInProgress && termsWithStatus.length === 0 && (
<div>
<div className="row-container">
Expand All @@ -136,7 +175,7 @@ function GlossaryQuickTerms(props) {
setTermName(index, e.target.value);
}}
/>
<TextInput
<TextArea
type="text"
placeholder="Term description"
defaultValue={item.description}
Expand All @@ -162,63 +201,92 @@ function GlossaryQuickTerms(props) {
</Form>
</div>
)}
{!restCallInProgress && termsWithStatus.length > 0 && (
{!restCallInProgress && termsWithStatus.length > 0 && (
<div>
<div className="row-container">
<h3>Terms Added.</h3>
</div>
<Form>
<div className="search-item">
<DataTable
isSortable
rows={termsWithStatus}
headers={headerData}
render={({
rows,
headers,
getHeaderProps,
}) => (
<TableContainer>
<Table>
<TableHead>
<TableRow>
{headers.map((header) => (
<TableHeader
{...getHeaderProps({ header })}
key={header.key}
id={header.key}
>
{header.text}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.id}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>{cell.value}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
/>
</div>

{/* <Form>
<FormGroup>
<div className="bx--form-item">
<div className="row-container">
<TextInput
type="text"
defaultValue="Name"
style={{ color: "grey" }}
readOnly
/>
<TextInput
type="text"
defaultValue="Description"
style={{ color: "grey" }}
readOnly
/>
<TextInput type="text" defaultValue="Name" readOnly />
<TextInput type="text" defaultValue="Description" readOnly />
<TextInput
type="text"
defaultValue="Status"
style={{ color: "grey" }}
readOnly
/>
<TextInput type="text" defaultValue="Status" readOnly />
</div>
</div>
{termsWithStatus.map((item, index) => {
return (
<div className="bx--form-item" key={index}>
<div className="row-container">
<TextInput
type="text"
defaultValue={item.name}
readOnly
/>
<TextInput
<TextArea type="text" defaultValue={item.name} readOnly />
<TextArea
type="text"
defaultValue={item.description}
readOnly
/>
{item.status === "Success" && (
<div className="row-container">
<TextInput
<TextArea
type="text"
defaultValue={item.status}
readOnly
/>
<span role="img" aria-label="When present, this image indicates that the Term has been successfully created" className="left-20" alias="white_check_mark" src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png">✅</span>
<span
role="img"
aria-label="When present, this image indicates that the Term has been successfully created"
className="left-20"
alias="white_check_mark"
src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
>
✅
</span>
</div>
)}
{item.status !== "Success" && (
<div>
<TextInput
<TextArea
type="text"
defaultValue={item.status}
readOnly
Expand All @@ -230,12 +298,12 @@ function GlossaryQuickTerms(props) {
);
})}
</FormGroup>
</Form>
</Form> */}
<article style={{ color: "red" }}>{errorMsg}</article>
</div>
)}
</div>
);
}

export default withRouter(GlossaryQuickTerms);
export default withRouter(GlossaryQuickTerms);
81 changes: 67 additions & 14 deletions ...or/components/authoringforms/NodeInput.js → ...r/components/authoringforms/NodeInput.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
/* SPDX-License-Identifier: Apache-2.0 */
/* Copyright Contributors to the ODPi Egeria project. */
import React, { useState, useEffect } from "react";
import { Accordion, AccordionItem, TextInput } from "carbon-components-react";
import {
Accordion,
AccordionItem,
TextInput,
TextArea,
} from "carbon-components-react";
import DateTimePicker from "../../../common/DateTimePicker";
import Info16 from "@carbon/icons-react/lib/information/16";
import { Html16 } from "@carbon/icons-react";

/**
* Component to take user input for node page as part of a wizard.
Expand Down Expand Up @@ -126,6 +132,33 @@ export default function NodeInput(props) {
key: "value",
},
];
const showInputforItem = (item) => {
if (item.type === "longtext") {
return (
<TextArea
id={labelIdForAttribute(item.key)}
type={getInputType(item)}
value={item.value}
invalid={item.invalid}
invalidText={item.invalidText}
onChange={(e) => setAttribute(item, e.target.value)}
placeholder={item.label}
></TextArea>
);
} else {
return (
<TextInput
id={labelIdForAttribute(item.key)}
type={getInputType(item)}
value={item.value}
invalid={item.invalid}
invalidText={item.invalidText}
onChange={(e) => setAttribute(item, e.target.value)}
placeholder={item.label}
></TextInput>
);
}
};

return (
<div>
Expand All @@ -142,8 +175,28 @@ export default function NodeInput(props) {
}
return allow;
})
.map((item) => {
return (
.map((item) =>
item.type === "longtext" ? (
<div className="bx--form-item" key={item.key}>
<label
htmlFor={labelIdForAttribute(item.key)}
className="bx--label"
>
{item.label} <Info16 />
</label>
<div className="fullwidth">
<TextArea
id={labelIdForAttribute(item.key)}
type={getInputType(item)}
value={item.value}
invalid={item.invalid}
invalidText={item.invalidText}
onChange={(e) => setAttribute(item, e.target.value)}
placeholder={item.label}
></TextArea>
</div>
</div>
) : (
<div className="bx--form-item" key={item.key}>
<label
htmlFor={labelIdForAttribute(item.key)}
Expand All @@ -152,19 +205,19 @@ export default function NodeInput(props) {
{item.label} <Info16 />
</label>
<div className="fullwidth">
<TextInput
id={labelIdForAttribute(item.key)}
type={getInputType(item)}
value={item.value}
invalid={item.invalid}
invalidText={item.invalidText}
onChange={(e) => setAttribute(item, e.target.value)}
placeholder={item.label}
></TextInput>
<TextInput
id={labelIdForAttribute(item.key)}
type={getInputType(item)}
value={item.value}
invalid={item.invalid}
invalidText={item.invalidText}
onChange={(e) => setAttribute(item, e.target.value)}
placeholder={item.label}
></TextInput>
</div>
</div>
);
})}
)
)}
<Accordion>
<AccordionItem title="Limit when active">
<DateTimePicker
Expand Down
Loading

0 comments on commit 1421bf4

Please sign in to comment.