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

Jump to bottom

Subcommunity: made the form overridable #1163

Merged
merged 2 commits into from
Jun 27, 2024
Merged

Subcommunity: made the form overridable #1163

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8689ecb
subcommunity: made the form overridable
0einstein0 Jun 25, 2024
860393b
subcommunity: remove custom fields
0einstein0 Jun 26, 2024
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
320 changes: 168 additions & 152 deletions invenio_communities/assets/semantic-ui/js/invenio_communities/subcommunity/new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
import { Button, Divider, Form, Grid, Header, Icon, Message } from "semantic-ui-react";
import { CommunityApi } from "../api";
import { communityErrorSerializer } from "../api/serializers";
import Overridable, { OverridableContext, overrideStore } from "react-overridable";

const IdentifierField = ({ formConfig }) => {
const { values } = useFormikContext();
Expand Down Expand Up @@ -150,163 +151,174 @@
};

render() {
const { formConfig, canCreateRestricted } = this.props;
const { formConfig, canCreateRestricted, customFields, communityId } = this.props;
const { hasCommunity, communities, error } = this.state;

return (
<Formik
initialValues={{
access: {
visibility: "public",
},
metadata: {
slug: "",
},
}}
onSubmit={this.onSubmit}
<Overridable
id="InvenioCommunities.CommunityCreateForm.layout"
formConfig={formConfig}
canCreateRestricted={canCreateRestricted}
error={error}
hasCommunity={hasCommunity}
communities={communities}
customFields={customFields}
communityId={communityId}
>
{({ values, isSubmitting, handleSubmit }) => (
<Form onSubmit={handleSubmit} className="communities-creation">
<Message hidden={error === ""} negative className="flashed">
<Formik
initialValues={{
access: {
visibility: "public",
},
metadata: {
slug: "",
alejandromumo marked this conversation as resolved.
Show resolved Hide resolved
},
}}
onSubmit={this.onSubmit}
>
{({ values, isSubmitting, handleSubmit }) => (
<Form onSubmit={handleSubmit} className="communities-creation">
<Message hidden={error === ""} negative className="flashed">
<Grid container centered>
<Grid.Column mobile={16} tablet={12} computer={8} textAlign="left">
<strong>{error}</strong>
</Grid.Column>
</Grid>
</Message>
<Grid container centered>
<Grid.Column mobile={16} tablet={12} computer={8} textAlign="left">
<strong>{error}</strong>
</Grid.Column>
</Grid>
</Message>
<Grid container centered>
<Grid.Row>
<Grid.Column mobile={16} tablet={12} computer={8} textAlign="center">
<Header as="h1" className="rel-mt-2">
{i18next.t("Subcommunity request")}
</Header>
<Divider />
</Grid.Column>
</Grid.Row>
<Grid.Row textAlign="left">
<Grid.Column mobile={16} tablet={12} computer={8}>
<div className="field">
<Form.Field>
{i18next.t("Do you already have an existing community?")}
</Form.Field>
{/* <Form.Group aria-labelledby="community-label"> */}
<Form.Group>
<RadioField
label={i18next.t("Yes")}
checked={hasCommunity === true}
value={i18next.t("Yes")}
onChange={() => {
this.setState({ hasCommunity: true });
}}
fieldPath="metadata.hasCommunity"
/>
<RadioField
label={i18next.t("No")}
checked={hasCommunity === false}
value={i18next.t("No")}
onChange={() => {
this.setState({ hasCommunity: false });
}}
fieldPath="metadata.hasCommunity"
/>
</Form.Group>
</div>
{hasCommunity && (
<SelectField
label={
<FieldLabel
icon="user"
label={i18next.t("Community")}
id="community-label"
class="block"
<Grid.Row>
<Grid.Column mobile={16} tablet={12} computer={8} textAlign="center">
<Header as="h1" className="rel-mt-2">
{i18next.t("Subcommunity request")}
</Header>
<Divider />
</Grid.Column>
</Grid.Row>
<Grid.Row textAlign="left">
<Grid.Column mobile={16} tablet={12} computer={8}>
<div className="field">
<Form.Field>
{i18next.t("Do you already have an existing community?")}
</Form.Field>
{/* <Form.Group aria-labelledby="community-label"> */}
0einstein0 marked this conversation as resolved.
Show resolved Hide resolved
<Form.Group>
<RadioField
label={i18next.t("Yes")}
checked={hasCommunity === true}
value={i18next.t("Yes")}
onChange={() => {
this.setState({ hasCommunity: true });
}}
fieldPath="metadata.hasCommunity"
alejandromumo marked this conversation as resolved.
Show resolved Hide resolved
/>
}
fieldPath="metadata.community"
options={communities}
required
disabled={_isEmpty(communities)}
/>
)}
{!hasCommunity && (
<>
<TextField
required
id="metadata.title"
fluid
fieldPath="metadata.title"
// Prevent submitting before the value is updated:
onKeyDown={(e) => {
e.key === "Enter" && e.preventDefault();
}}
<RadioField
label={i18next.t("No")}
checked={hasCommunity === false}
value={i18next.t("No")}
onChange={() => {
this.setState({ hasCommunity: false });
}}
fieldPath="metadata.hasCommunity"
/>
</Form.Group>
</div>
{hasCommunity && (
<SelectField
label={
<FieldLabel
htmlFor="metadata.title"
icon="book"
label={i18next.t("Community name")}
icon="user"
label={i18next.t("Community")}
id="community-label"
class="block"
/>
}
fieldPath="metadata.community"
options={communities}
required
disabled={_isEmpty(communities)}
/>
<IdentifierField formConfig={formConfig} />
</>
)}
{!_isEmpty(customFields.ui) && (
<CustomFields
config={customFields.ui}
templateLoaders={[
(widget) => import(`@templates/custom_fields/${widget}.js`),
(widget) => import(`react-invenio-forms`),
]}
fieldPathPrefix="custom_fields"
/>
)}
{canCreateRestricted && (
<>
<Header as="h3">{i18next.t("Community visibility")}</Header>
{formConfig.access.visibility.map((item) => (
<React.Fragment key={item.value}>
<RadioField
key={item.value}
fieldPath="access.visibility"
label={item.text}
labelIcon={item.icon}
checked={_get(values, "access.visibility") === item.value}
value={item.value}
onChange={({ event, data, formikProps }) => {
formikProps.form.setFieldValue(
"access.visibility",
item.value
);
}}
/>
<label className="helptext">{item.helpText}</label>
</React.Fragment>
))}
</>
)}
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column textAlign="center">
<Button
positive
icon
labelPosition="left"
loading={isSubmitting}
disabled={isSubmitting}
type="button"
onClick={(event) => handleSubmit(event)}
>
<Icon name="plus" />
{hasCommunity
? i18next.t("Create request")
: i18next.t("Create community")}
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Form>
)}
</Formik>
)}
{!hasCommunity && (
<>
<TextField
required
id="metadata.title"
fluid
fieldPath="metadata.title"
// Prevent submitting before the value is updated:
onKeyDown={(e) => {
e.key === "Enter" && e.preventDefault();
}}
label={
<FieldLabel
htmlFor="metadata.title"
icon="book"
label={i18next.t("Community name")}
/>
}
/>
<IdentifierField formConfig={formConfig} />
</>
)}
{!_isEmpty(customFields.ui) && (
0einstein0 marked this conversation as resolved.
Show resolved Hide resolved
<CustomFields
config={customFields.ui}
templateLoaders={[
(widget) => import(`@templates/custom_fields/${widget}.js`),
(widget) => import(`react-invenio-forms`),
]}
fieldPathPrefix="custom_fields"
/>
)}
{canCreateRestricted && (
0einstein0 marked this conversation as resolved.
Show resolved Hide resolved
<>
<Header as="h3">{i18next.t("Community visibility")}</Header>
{formConfig.access.visibility.map((item) => (
<React.Fragment key={item.value}>
<RadioField
key={item.value}
fieldPath="access.visibility"
label={item.text}
labelIcon={item.icon}
checked={_get(values, "access.visibility") === item.value}
value={item.value}
onChange={({ event, data, formikProps }) => {
formikProps.form.setFieldValue(
"access.visibility",
item.value
);
}}
/>
<label className="helptext">{item.helpText}</label>
</React.Fragment>
))}
</>
)}
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column textAlign="center">
<Button
positive
icon
labelPosition="left"
loading={isSubmitting}
disabled={isSubmitting}
type="button"
onClick={(event) => handleSubmit(event)}
>
<Icon name="plus" />
{hasCommunity
? i18next.t("Create request")
: i18next.t("Create community")}
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Form>
)}
</Formik>
</Overridable>
);
}
}
Expand All @@ -315,6 +327,7 @@
formConfig: PropTypes.object.isRequired,
canCreateRestricted: PropTypes.bool.isRequired,
communityId: PropTypes.string.isRequired,
customFields: PropTypes.object,

Check warning on line 330 in invenio_communities/assets/semantic-ui/js/invenio_communities/subcommunity/new.js

View workflow job for this annotation

GitHub Actions / Tests (3.9, postgresql14, opensearch2) 

propType "customFields" is not required, but has no corresponding defaultProps declaration

Check warning on line 330 in invenio_communities/assets/semantic-ui/js/invenio_communities/subcommunity/new.js

View workflow job for this annotation

GitHub Actions / Tests (3.10, postgresql14, opensearch2) 

propType "customFields" is not required, but has no corresponding defaultProps declaration

Check warning on line 330 in invenio_communities/assets/semantic-ui/js/invenio_communities/subcommunity/new.js

View workflow job for this annotation

GitHub Actions / Tests (3.11, postgresql14, opensearch2) 

propType "customFields" is not required, but has no corresponding defaultProps declaration

Check warning on line 330 in invenio_communities/assets/semantic-ui/js/invenio_communities/subcommunity/new.js

View workflow job for this annotation

GitHub Actions / Tests (3.12, postgresql14, opensearch2) 

propType "customFields" is not required, but has no corresponding defaultProps declaration
};

const domContainer = document.getElementById("app");
Expand All @@ -323,13 +336,16 @@
const canCreateRestricted = JSON.parse(domContainer.dataset.canCreateRestricted);
const communityId = domContainer.dataset.communityId;

const overriddenComponents = overrideStore.getAll();
ReactDOM.render(
<CommunityCreateForm
formConfig={formConfig}
customFields={customFields}
canCreateRestricted={canCreateRestricted}
communityId={communityId}
/>,
<OverridableContext.Provider value={overriddenComponents}>
<CommunityCreateForm
formConfig={formConfig}
customFields={customFields}
canCreateRestricted={canCreateRestricted}
communityId={communityId}
/>
</OverridableContext.Provider>,
domContainer
);
export default CommunityCreateForm;
Loading