in frontend/src/components/VisualizeTable.tsx [47:280]
function VisualizeTable(props: Props) {
const { t } = useTranslation();
const [showAlert, setShowAlert] = useState(true);
const handleSortDataChange = (event: React.FormEvent<HTMLInputElement>) => {
const target = event.target as HTMLInputElement;
if (target.value !== "") {
const sortData = target.value.split("###");
const header = sortData[0];
const desc = sortData[1] === "desc";
props.setSortByColumn(header);
props.setSortByDesc(desc);
} else {
props.setSortByColumn(undefined);
props.setSortByDesc(undefined);
}
};
return (
<div className="grid-row width-desktop">
<div className="grid-col-5" hidden={props.fullPreview}>
<PrimaryActionBar>
{props.configHeader}
{props.errors.title && (
<Alert
type="error"
message={t("VisualizeTableComponent.ResolveErrors")}
slim
></Alert>
)}
<TextField
id="title"
name="title"
label={t("VisualizeTableComponent.TableTitle")}
hint={t("VisualizeTableComponent.TableTitleHint")}
error={
props.errors.title && t("VisualizeTableComponent.TableTitleError")
}
required
register={props.register}
/>
<div className="usa-checkbox">
<input
className="usa-checkbox__input"
id="display-title"
type="checkbox"
name="showTitle"
defaultChecked={true}
ref={props.register()}
/>
<label className="usa-checkbox__label" htmlFor="display-title">
{t("AddTextScreen.ShowTitle")}
</label>
</div>
<div className="margin-top-3 grid-col-6">
<Dropdown
id="sortData"
name="sortData"
label={t("SortData")}
options={DatasetParsingService.getDatasetSortOptions(
props.originalJson,
props.headers,
t
)}
onChange={handleSortDataChange}
defaultValue={
props.sortByColumn
? `${props.sortByColumn}###${
props.sortByDesc ? "desc" : "asc"
}`
: ""
}
register={props.register}
/>
</div>
<div>
<label className="usa-label text-bold">
{t("TableOptionsLabel")}
</label>
<div className="usa-hint">{t("TableOptionsDescription")}</div>
<div className="usa-checkbox">
<input
className="usa-checkbox__input"
id="significantDigitLabels"
type="checkbox"
name="significantDigitLabels"
defaultChecked={false}
ref={props.register()}
/>
<label
className="usa-checkbox__label"
htmlFor="significantDigitLabels"
>
{t("SignificantDigitLabels")}
</label>
</div>
<div className="usa-checkbox">
<input
className="usa-checkbox__input"
id="displayWithPages"
type="checkbox"
name="displayWithPages"
defaultChecked={false}
ref={props.register()}
/>
<label className="usa-checkbox__label" htmlFor="displayWithPages">
{t("DisplayWithPages")}
</label>
</div>
</div>
<TextField
id="summary"
name="summary"
label={t("VisualizeTableComponent.TableSummary")}
hint={
<>
{t("VisualizeTableComponent.TableSummaryHint")}{" "}
<Link target="_blank" to={"/admin/markdown"} external>
{t("AddTextScreen.ViewMarkdownSyntax")}
</Link>
</>
}
register={props.register}
multiline
rows={5}
/>
<div className="usa-checkbox">
<input
className="usa-checkbox__input"
id="summary-below"
type="checkbox"
name="summaryBelow"
defaultChecked={false}
ref={props.register()}
/>
<label className="usa-checkbox__label" htmlFor="summary-below">
{t("VisualizeTableComponent.TableShowSummary")}
</label>
</div>
<br />
<br />
<hr />
<Button variant="outline" type="button" onClick={props.backStep}>
{t("BackButton")}
</Button>
<Button
type="submit"
disabled={
!props.json.length || props.fileLoading || props.processingWidget
}
>
{props.submitButtonLabel}
</Button>
<Button
variant="unstyled"
className="text-base-dark hover:text-base-darker active:text-base-darkest"
type="button"
onClick={props.onCancel}
>
{t("Cancel")}
</Button>
</PrimaryActionBar>
</div>
<div className={props.fullPreview ? "grid-col-12" : "grid-col-7"}>
<div
hidden={!props.json.length}
className={`${
!props.fullPreview ? "margin-left-4 sticky-preview" : ""
}`}
>
{props.fullPreviewButton}
{props.datasetLoading ? (
<Spinner
className="text-center margin-top-6"
label={t("LoadingSpinnerLabel")}
/>
) : (
<>
{showAlert &&
props.datasetType === DatasetType.StaticDataset &&
props.csvJson.length ? (
<Alert
type="info"
message={
<div className="grid-row margin-left-6">
<div className="grid-col-11">
{t("VisualizeTableComponent.TableCorrectDisplay")}{" "}
<Link to="/admin/formatting" target="_blank" external>
{t("LearnHowToFormatCSV")}
</Link>
</div>
<div className="grid-col-1">
<div className="margin-left-3">
<Button
variant="unstyled"
className="margin-0-important text-base-dark hover:text-base-darker active:text-base-darkest"
onClick={() => setShowAlert(false)}
type="button"
ariaLabel={t("GlobalClose")}
>
<FontAwesomeIcon icon={faTimes} size="sm" />
</Button>
</div>
</div>
</div>
}
slim
/>
) : (
""
)}
<TableWidget
title={props.showTitle ? props.title : ""}
summary={props.summary}
summaryBelow={props.summaryBelow}
data={props.json}
columnsMetadata={props.columnsMetadata}
sortByColumn={props.sortByColumn}
sortByDesc={props.sortByDesc}
significantDigitLabels={props.significantDigitLabels}
displayWithPages={props.displayWithPages}
/>
</>
)}
</div>
</div>
</div>
);
}