Skip to content

ENG-1243 refactor cms widgets #300

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

Draft
ichalagashvili wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

ENG-1243 refactor cms widgets #300

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4168ef7
ENG-1243 refactor cms widgets
ichalagashvili Nov 3, 2020
6018ddb
ENG-1243 make native config widget forms available for child widgets …
gidesan Nov 13, 2020
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
63 changes: 3 additions & 60 deletions src/ui/widget-forms/ContentConfigFormBody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, intlShape } from 'react-intl';
import { reduxForm, FieldArray, Field } from 'redux-form';
import {
Button, Row, Col, Alert,
} from 'patternfly-react';
import { Row, Col, Alert } from 'patternfly-react';
import { Collapse } from 'react-collapse';
import { isUndefined } from 'lodash';
import { maxLength } from '@entando/utils';
Expand All @@ -13,12 +11,12 @@ import FormSectionTitle from 'ui/common/form/FormSectionTitle';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import RenderSelectInput from 'ui/common/form/RenderSelectInput';
import FormLabel from 'ui/common/form/FormLabel';
import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
import { MULTIPLE_CONTENTS_CONFIG } from 'ui/widget-forms/const';

const maxLength70 = maxLength(70);

export const MultipleContentsConfigContainerId = `widgets.${MULTIPLE_CONTENTS_CONFIG}`;
const noContentsChosen = values => (values && values.length > 0 ? undefined : <FormattedMessage id="validateForm.required" />);

export class ContentConfigFormBody extends PureComponent {
constructor(props) {
Expand Down Expand Up @@ -60,27 +58,18 @@ export class ContentConfigFormBody extends PureComponent {
renderFormFields() {
const {
contentTemplates,
extFormName,
putPrefixField,
invalid,
submitting,
languages,
pages,
intl,
widgetCode,
chosenContents,
dirty,
onCancel,
onDiscard,
onSave,
ownerGroup,
joinGroups,
} = this.props;
const { extraOptionsOpen, publishingSettingsOpen } = this.state;
const multipleContentsMode = widgetCode === MULTIPLE_CONTENTS_CONFIG;
const normalizedLanguages = languages.map(lang => lang.code);
const normalizedPages = this.normalizeTitles(pages || []);
const noContents = chosenContents.length === 0;

const elementNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 50, 100, 500]
.map(i => Object.assign({}, { code: i, name: i }));
Expand Down Expand Up @@ -110,14 +99,6 @@ export class ContentConfigFormBody extends PureComponent {
const handleCollapsePublishingSettings = () => this.collapseSection('publishingSettingsOpen');
const handleCollapseExtraOptions = () => this.collapseSection('extraOptionsOpen');

const handleCancelClick = () => {
if (dirty) {
onCancel();
} else {
onDiscard();
}
};

const renderExtraOptions = multipleContentsMode ? (
<Row>
<Col xs={12}>
Expand Down Expand Up @@ -195,39 +176,12 @@ export class ContentConfigFormBody extends PureComponent {
ownerGroup={ownerGroup}
joinGroups={joinGroups}
multipleContentsMode={multipleContentsMode}
validate={[noContentsChosen]}
/>
</Col>
</Row>
{renderPublishingSettings}
{renderExtraOptions}
{!extFormName && (
<Row>
<Col xs={12}>
<Button
className="pull-right AddContentTypeFormBody__save--btn"
type="submit"
bsStyle="primary"
disabled={invalid || submitting || noContents}
>
<FormattedMessage id="app.save" />
</Button>
<Button
className="pull-right AddContentTypeFormBody__cancel--btn"
bsStyle="default"
onClick={handleCancelClick}
>
<FormattedMessage id="cms.label.cancel" />
</Button>
<ConfirmCancelModalContainer
contentText={intl.formatMessage({ id: 'cms.label.modal.confirmCancel' })}
invalid={invalid}
submitting={submitting}
onSave={onSave}
onDiscard={onDiscard}
/>
</Col>
</Row>
)}
</Fragment>
);
}
Expand Down Expand Up @@ -264,15 +218,8 @@ ContentConfigFormBody.propTypes = {
pages: PropTypes.arrayOf(PropTypes.shape({})),
onDidMount: PropTypes.func.isRequired,
handleSubmit: PropTypes.func,
invalid: PropTypes.bool,
submitting: PropTypes.bool,
language: PropTypes.string.isRequired,
widgetCode: PropTypes.string.isRequired,
chosenContents: PropTypes.arrayOf(PropTypes.shape({})),
dirty: PropTypes.bool,
onDiscard: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
onSave: PropTypes.func.isRequired,
ownerGroup: PropTypes.string,
joinGroups: PropTypes.arrayOf(PropTypes.string),
extFormName: PropTypes.string,
Expand All @@ -283,13 +230,9 @@ ContentConfigFormBody.propTypes = {
ContentConfigFormBody.defaultProps = {
languages: [],
pages: [],
chosenContents: [],
dirty: false,
ownerGroup: '',
joinGroups: null,
extFormName: '',
invalid: false,
submitting: false,
handleSubmit: () => {},
putPrefixField: name => name,
cloneMode: false,
Expand Down
58 changes: 4 additions & 54 deletions src/ui/widget-forms/ContentsQueryConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ import FormLabel from 'ui/common/form/FormLabel';
import FormSectionTitle from 'ui/common/form/FormSectionTitle';
import MultiFilterSelectRenderer from 'ui/common/form/MultiFilterSelectRenderer';
import FiltersSelectRenderer from 'ui/common/form/FiltersSelectRenderer';
import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';

import { CONTENTS_QUERY_CONFIG } from 'ui/widget-forms/const';

export const ContentsQueryContainerId = `widgets.${CONTENTS_QUERY_CONFIG}`;

const maxLength70 = maxLength(70);
const contentTypeDoesNotExist = value => (value ? undefined : <FormattedMessage id="validateForm.required" />);
const CATEGORY_HOME = 'home';

const elementNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20]
Expand Down Expand Up @@ -82,8 +82,8 @@ export class ContentsQueryFormBody extends Component {
contentTypes, contentType, contentTemplates, categories, pages,
onResetModelId, selectedContentType, selectedCategories,
intl, onChangeFilterValue, onResetFilterOption, onChangeFilterAttribute,
languages, onToggleInclusiveOr, selectedInclusiveOr, extFormName,
invalid, submitting, dirty, onCancel, onDiscard, onSave, putPrefixField,
languages, onToggleInclusiveOr, selectedInclusiveOr,
putPrefixField,
} = this.props;
const {
publishingSettings, filters: filtersPanel,
Expand Down Expand Up @@ -152,18 +152,6 @@ export class ContentsQueryFormBody extends Component {
</Button>
);

const renderSaveButton = selectedContentType
&& (
<Button
className="pull-right AddContentTypeFormBody__save--btn"
type="submit"
bsStyle="primary"
disabled={invalid || submitting}
>
<FormattedMessage id="app.save" />
</Button>
);

const attributeFilters = getListAttributeFilters();

const filters = [
Expand Down Expand Up @@ -198,14 +186,6 @@ export class ContentsQueryFormBody extends Component {
const handleCollapseExtraOptions = () => this.collapseSection('extraOptions');
const handleCollapseFrontendFilters = () => this.collapseSection('frontendFilters');

const handleCancelClick = () => {
if (dirty) {
onCancel();
} else {
onDiscard();
}
};

return (
<Fragment>
<Row>
Expand All @@ -226,6 +206,7 @@ export class ContentsQueryFormBody extends Component {
optionDisplayName="name"
defaultOptionId="app.enumerator.none"
onChange={handleContentTypeChange}
validate={[contentTypeDoesNotExist]}
/>
</fieldset>
</Col>
Expand Down Expand Up @@ -404,28 +385,6 @@ export class ContentsQueryFormBody extends Component {
</Col>
</Row>
</div>
<br />
{!extFormName && (
<Row>
<Col xs={12}>
{renderSaveButton}
<Button
className="pull-right AddContentTypeFormBody__cancel--btn"
bsStyle="default"
onClick={handleCancelClick}
>
<FormattedMessage id="cms.label.cancel" />
</Button>
<ConfirmCancelModalContainer
contentText={intl.formatMessage({ id: 'cms.label.modal.confirmCancel' })}
invalid={invalid}
submitting={submitting}
onSave={onSave}
onDiscard={onDiscard}
/>
</Col>
</Row>
)}
</Fragment>
);
}
Expand Down Expand Up @@ -465,8 +424,6 @@ ContentsQueryFormBody.propTypes = {
languages: PropTypes.arrayOf(PropTypes.shape({})),
onDidMount: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired,
invalid: PropTypes.bool,
submitting: PropTypes.bool,
contentTypes: PropTypes.arrayOf(PropTypes.shape({})),
contentType: PropTypes.shape({
attributes: PropTypes.arrayOf(PropTypes.shape({})),
Expand All @@ -483,18 +440,12 @@ ContentsQueryFormBody.propTypes = {
onResetModelId: PropTypes.func.isRequired,
selectedContentType: PropTypes.string,
selectedInclusiveOr: PropTypes.string,
dirty: PropTypes.bool,
onDiscard: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
onSave: PropTypes.func.isRequired,
extFormName: PropTypes.string,
putPrefixField: PropTypes.func,
cloneMode: PropTypes.bool,
};

ContentsQueryFormBody.defaultProps = {
invalid: false,
submitting: false,
languages: [],
contentTypes: [],
contentType: {},
Expand All @@ -504,7 +455,6 @@ ContentsQueryFormBody.defaultProps = {
selectedCategories: [],
selectedContentType: '',
selectedInclusiveOr: '',
dirty: false,
extFormName: '',
putPrefixField: name => name,
cloneMode: false,
Expand Down
57 changes: 21 additions & 36 deletions src/ui/widget-forms/ContentsQueryConfigContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import { connect } from 'react-redux';
import { clearErrors, addToast, TOAST_SUCCESS } from '@entando/messages';
import { clearErrors } from '@entando/messages';
import { get } from 'lodash';
import { injectIntl } from 'react-intl';
import { change, formValueSelector, submit } from 'redux-form';
import { routeConverter } from '@entando/utils';
import { ROUTE_APP_BUILDER_PAGE_CONFIG } from 'app-init/routes';
import { change, formValueSelector } from 'redux-form';

import { sendPutWidgetConfig } from 'state/page-config/actions';
import { fetchSearchPages } from 'state/pages/actions';
import { fetchLanguages } from 'state/languages/actions';
import { fetchCategoryTree } from 'state/categories/actions';
Expand All @@ -20,8 +17,6 @@ import { getContentTemplateList } from 'state/content-template/selectors';
import { getLocale } from 'state/locale/selectors';
import { getSearchPagesRaw } from 'state/pages/selectors';
import { getActiveLanguages } from 'state/languages/selectors';
import { setVisibleModal } from 'state/modal/actions';
import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal';

const nopage = { page: 1, pageSize: 0 };

Expand Down Expand Up @@ -56,27 +51,6 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
dispatch(fetchSearchPages(nopage));
},
putPrefixField,
onSubmit: (values) => {
const {
pageCode, frameId, widgetCode, history, intl,
} = ownProps;
const checkedValues = Object.assign({}, values);
if (values.modelId === '') delete checkedValues.modelId;
checkedValues.filters = checkedValues.filters && checkedValues.filters.filter(f => f != null);
checkedValues.userFilters = checkedValues.userFilters
&& checkedValues.userFilters.filter(f => f != null);
const configItem = Object.assign({ config: checkedValues }, { code: widgetCode });
dispatch(clearErrors());
dispatch(sendPutWidgetConfig(pageCode, frameId, configItem)).then((res) => {
if (res) {
dispatch(addToast(
intl.formatMessage({ id: 'widget.update.success' }),
TOAST_SUCCESS,
));
history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode }));
}
});
},
onResetFilterOption: (name, i) => (
dispatch(change(formToUse, `${name}.[${i}].option`, ''))
),
Expand All @@ -95,20 +69,31 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
},
onResetModelId: () => dispatch(change(formToUse, putPrefixField('modelId'), '')),
onToggleInclusiveOr: value => dispatch(change(formToUse, putPrefixField('orClauseCategoryFilter'), value === 'true' ? '' : 'true')),
onSave: () => { dispatch(setVisibleModal('')); dispatch(submit(ContentsQueryContainerId)); },
onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
onDiscard: () => {
dispatch(setVisibleModal(''));
const { history, pageCode } = ownProps;
history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode }));
},
};
};

const beforeSubmit = (dispatch, values) => new Promise((resolve) => {
const checkedValues = Object.assign({}, values);
if (values.modelId === '') delete checkedValues.modelId;
checkedValues.filters = checkedValues.filters && checkedValues.filters.filter(f => f != null);
checkedValues.userFilters = checkedValues.userFilters
&& checkedValues.userFilters.filter(f => f != null);
dispatch(clearErrors());
resolve(checkedValues);
});

export const formBody = connect(mapStateToProps, mapDispatchToProps, null, {
pure: false,
})(injectIntl(ContentsQueryFormBody));

export default connect(mapStateToProps, mapDispatchToProps, null, {
formBody.reduxFormId = ContentsQueryContainerId;
formBody.beforeSubmit = beforeSubmit;

const ContentsQueryContainer = connect(mapStateToProps, mapDispatchToProps, null, {
pure: false,
})(injectIntl(ContentsQueryConfig));

ContentsQueryContainer.reduxFormId = ContentsQueryContainerId;
ContentsQueryContainer.beforeSubmit = beforeSubmit;

export default ContentsQueryContainer;
Loading