Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

forms: improve diversity of fields #154

Merged
merged 1 commit into from
Feb 15, 2023
Merged

forms: improve diversity of fields #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ...ministration/assets/semantic-ui/js/invenio_administration/src/components/DateFormatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ class DateFormatter extends React.Component {
render() {
const { value } = this.props;

if (!value) {
return null;
}

const date = DateTime.fromISO(value);
return (
<p data-testid="date-formatter">{date.toLocaleString(DateTime.DATETIME_MED)}</p>
Expand Down
8 changes: 6 additions & 2 deletions invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/AdminForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,17 @@ import mapValues from "lodash/mapValues";
export class AdminForm extends Component {
constructor(props) {
super(props);
const { resource, formFields } = props;
const { resource, resourceSchema } = props;

this.state = {
error: undefined,
formData: resource
? resource
: mapValues(formFields, function (value) {
: mapValues(resourceSchema, function (value) {
const defaultValue = value.metadata?.default;
if (defaultValue) {
return defaultValue;
}
return "";
}),
};
Expand Down
63 changes: 57 additions & 6 deletions ...io_administration/assets/semantic-ui/js/invenio_administration/src/formik/GenerateForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import React from "react";
import { Input, AutocompleteDropdown } from "react-invenio-forms";
import {
Input,
AutocompleteDropdown,
BooleanField,
Dropdown,
TextArea,
} from "react-invenio-forms";
import _capitalize from "lodash/capitalize";
import PropTypes from "prop-types";
import { Form, Segment, Header } from "semantic-ui-react";
Expand All @@ -12,6 +18,7 @@ const fieldsMap = {
integer: Input,
uuid: Input,
datetime: Input,
bool: BooleanField,
};

const generateFieldProps = (
Expand All @@ -34,11 +41,14 @@ const generateFieldProps = (
}

const htmlDescription = (
<div
dangerouslySetInnerHTML={{
__html: formFieldConfig?.description || fieldSchema?.metadata?.description,
}}
/>
<>
<p />
<div
dangerouslySetInnerHTML={{
__html: formFieldConfig?.description || fieldSchema?.metadata?.description,
}}
/>
</>
);

return {
Expand All @@ -49,6 +59,8 @@ const generateFieldProps = (
required: fieldSchema.required,
disabled: fieldSchema.readOnly || (fieldSchema.createOnly && !isCreate),
placeholder,
options: formFieldConfig?.options || fieldSchema?.metadata?.options,
rows: formFieldConfig?.rows || fieldSchema?.metadata?.rows,
Comment on lines +62 to +63
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
options: formFieldConfig?.options || fieldSchema?.metadata?.options,
rows: formFieldConfig?.rows || fieldSchema?.metadata?.rows,
options: formFieldConfig?.options,
rows: formFieldConfig?.rows,

Minor: If I am not wrong the fieldSchema is a json representation of the marshmallow schema, this will never have options and rows attributes, unless I am missing something.

Copy link
Member Author

@anikachurilova anikachurilova Feb 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're totally right, marshmallow schema doesn't have rows and options, but it has metadata, to which we can
put anything we want. See here: https://github.com/inveniosoftware/invenio-banners/pull/15/files#diff-97da9b93fd82ecb3e421f77c8f0d82f16edeba13ed1b154cdc44572be3c37a3dR25

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see, was confused by the naming, we use metadata as well for the record's metadata, but I don't have better alternatives, thanks for clarifying!

};
};

Expand Down Expand Up @@ -93,6 +105,20 @@ const mapFormFields = (obj, parentField, isCreate, formFieldsConfig, dropDumpOnl
);
}

if (fieldSchema.type === "bool") {
const description = fieldProps.description;
return (
<>
<BooleanField
key={fieldProps.fieldPath}
required={fieldSchema.required}
{...fieldProps}
/>
{description && <label className="helptext">{description}</label>}
</>
);
}

if (fieldSchema.type === "vocabulary") {
return (
<AutocompleteDropdown
Expand Down Expand Up @@ -125,6 +151,31 @@ const mapFormFields = (obj, parentField, isCreate, formFieldsConfig, dropDumpOnl
);
}

const dropdownOptions =
formFieldsConfig[fieldName]?.options || fieldSchema?.metadata?.options;
if (fieldSchema.type === "string" && dropdownOptions) {
return (
<Dropdown
key={fieldProps.fieldPath}
required={fieldSchema.required}
options={dropdownOptions}
{...fieldProps}
/>
);
}

const rows = formFieldsConfig[fieldName]?.rows || fieldSchema?.metadata?.rows;
if (fieldSchema.type === "string" && rows) {
return (
<TextArea
key={fieldProps.fieldPath}
fieldPath={fieldProps.fieldPath}
rows={rows}
{...fieldProps}
/>
);
}

const Element = fieldsMap[fieldSchema.type];
return <Element {...fieldProps} key={fieldProps.fieldPath} />;
});
Expand Down
7 changes: 5 additions & 2 deletions ...tration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultsContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,11 @@ export const SearchResultsContainer = ({
<Table>
<Table.Header>
<Table.Row>
{columns.map(([property, { text, order }], index) => {
const width = index === 0 ? undefined : index === 1 ? 4 : 3;
{columns.map(([property, { text, order, width }], index) => {
Copy link
Contributor

@jrcastro2 jrcastro2 Feb 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this! This solves this comment here for @Pineirin

if (!width) {
width = index === 0 ? undefined : index === 1 ? 4 : 3;
}
Comment on lines +28 to +31
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍
Maybe in the future we need to find alternative methods to display the grid, as I had to do a custom back-end bound solution in the pages administration panel for it to look nice.


return (
<Table.HeaderCell key={property + order} width={width}>
{text}
Expand Down