Skip to content

Commit c3865b2

Browse files
rvsiarvsia
committed
Converts Catalogs > Catalog > Add/Edit to react forms
1 parent 700ebc5 commit c3865b2

File tree

5 files changed

+190
-3
lines changed

5 files changed

+190
-3
lines changed

‎app/javascript/components/catalog-form/catalog-form.jsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Grid } from 'patternfly-react';
4+
import MiqFormRenderer from '../../forms/data-driven-form';
5+
import createSchema from './create-form-schema';
6+
import {
7+
leftValues,
8+
addedLeftValues,
9+
addedRightValues,
10+
getKeys,
11+
} from '../dual-list-select/helpers';
12+
import httpApi from '../../http_api/http';
13+
14+
15+
class CatalogForm extends Component {
16+
constructor(props) {
17+
super(props);
18+
const { catalogItems, catalogSelectedItems } = this.props;
19+
const options = catalogItems.concat(catalogSelectedItems).map(item => ({ key: `${item[1]}`, label: item[0] }));
20+
const rightValues = catalogSelectedItems.map(item => ({ key: `${item[1]}`, label: item[0] }));
21+
22+
this.state = {
23+
schema: createSchema(options),
24+
initialValues: {
25+
name: props.catalogName,
26+
description: props.catalogDescription,
27+
duallist: rightValues,
28+
},
29+
originalLeftValues: leftValues(options, rightValues),
30+
originalOptions: options,
31+
originalRightValues: rightValues,
32+
};
33+
}
34+
35+
submit = (values) => {
36+
const { catalogId } = this.props;
37+
const { originalLeftValues, originalOptions, originalRightValues } = this.state;
38+
const rightKeys = getKeys(addedRightValues(values.duallist, originalRightValues));
39+
const leftKeys = getKeys(addedLeftValues(originalOptions, values.duallist, originalLeftValues));
40+
41+
if (rightKeys.length > 0) {
42+
const rightData = rightKeys.map(key => `${encodeURIComponent('available_fields[]')}=${encodeURIComponent(`${key}`)}`);
43+
44+
httpApi.post(`st_catalog_form_field_changed/${catalogId}?button=right`,
45+
rightData.join('&'),
46+
{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
47+
}
48+
49+
if (leftKeys.length > 0) {
50+
const rightData = leftKeys.map(key => `${encodeURIComponent('selected_fields[]')}=${encodeURIComponent(`${key}`)}`);
51+
52+
httpApi.post(`st_catalog_form_field_changed/${catalogId}?button=left`,
53+
rightData.join('&'),
54+
{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
55+
}
56+
57+
if (values.description) {
58+
httpApi.post(`st_catalog_form_field_changed/${catalogId}`,
59+
`description=${encodeURIComponent(`${values.description}`)}`,
60+
{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
61+
}
62+
63+
httpApi.post(`st_catalog_form_field_changed/${catalogId}`,
64+
`name=${encodeURIComponent(`${values.name}`)}`,
65+
{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
66+
67+
httpApi.post(`st_catalog_edit/${catalogId}?button=save`, { }, { headers: { 'Content-Type': 'application/json;' } });
68+
};
69+
70+
render() {
71+
const { catalogName, catalogId } = this.props;
72+
const cancelUrl = `/catalog/st_catalog_edit/${catalogId}?button=cancel`;
73+
return (
74+
<Grid fluid>
75+
<MiqFormRenderer
76+
initialValues={this.state.initialValues}
77+
schema={this.state.schema}
78+
onSubmit={this.submit}
79+
onCancel={() => miqAjaxButton(cancelUrl)}
80+
onReset={() => add_flash(__('All changes have been reset'), 'warn')}
81+
canReset={!!catalogName}
82+
buttonsLabels={{
83+
submitLabel: catalogName ? __('Save') : __('Add'),
84+
}}
85+
/>
86+
</Grid>
87+
);
88+
}
89+
}
90+
91+
CatalogForm.propTypes = {
92+
catalogName: PropTypes.string,
93+
catalogDescription: PropTypes.string,
94+
catalogItems: PropTypes.arrayOf(PropTypes.shape({
95+
[PropTypes.string]: PropTypes.string,
96+
})),
97+
catalogSelectedItems: PropTypes.arrayOf(PropTypes.shape({
98+
[PropTypes.string]: PropTypes.string,
99+
})),
100+
catalogId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
101+
};
102+
103+
CatalogForm.defaultProps = {
104+
catalogName: undefined,
105+
catalogDescription: undefined,
106+
catalogItems: [],
107+
catalogSelectedItems: [],
108+
catalogId: undefined,
109+
};
110+
111+
export default CatalogForm;

‎app/javascript/components/catalog-form/create-form-schema.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
2+
3+
function createSchema(options) {
4+
const fields = [{
5+
component: componentTypes.SUB_FORM,
6+
title: __('Basic Info'),
7+
fields: [{
8+
component: componentTypes.TEXT_FIELD,
9+
name: 'name',
10+
validate: [{
11+
type: validatorTypes.REQUIRED,
12+
message: __("Name can't be blank"),
13+
}],
14+
label: __('Name'),
15+
maxLength: 40,
16+
autoFocus: true,
17+
}, {
18+
component: componentTypes.TEXT_FIELD,
19+
name: 'description',
20+
label: __('Description'),
21+
maxLength: 60,
22+
}],
23+
}, {
24+
component: 'hr',
25+
}, {
26+
component: componentTypes.SUB_FORM,
27+
title: __('Assign Catalog Items'),
28+
fields: [
29+
{
30+
component: 'dual-list-select',
31+
leftTitle: __('Unassigned:'),
32+
rightTitle: __('Selected:'),
33+
leftId: 'available_fields',
34+
rightId: 'selected_fields',
35+
allToRight: false,
36+
moveLeftTitle: __('Move Selected buttons left'),
37+
moveRightTitle: __('Move Selected buttons right'),
38+
size: 8,
39+
assignFieldProvider: true,
40+
options,
41+
name: 'duallist',
42+
},
43+
],
44+
}];
45+
return { fields };
46+
}
47+
48+
export default createSchema;

‎app/javascript/components/cloud-tenant-form/cloud-tenant-form.jsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Grid } from 'patternfly-react';
44
import MiqFormRenderer from '../../forms/data-driven-form';
55
import { http } from '../../http_api';
66
import createSchema from './create-form-schema';
7-
7+
import { leftValues, addedLeftValues, addedRightValues } from '../dual-list-select/helpers';
88

99
class CloudTenantForm extends Component {
1010
constructor(props) {
@@ -15,13 +15,32 @@ class CloudTenantForm extends Component {
1515
}
1616

1717
componentDidMount() {
18+
const { schema } = this.state;
19+
const { options } = schema.fields[2];
20+
const value = [{ key: '22', label: 'CosiX' }];
21+
this.setState({
22+
initialValues: { duallist: value },
23+
originalLeftValues: leftValues(options, value),
24+
originalOptions: options,
25+
originalRightValues: value,
26+
});
1827
if (this.props.cloudTenantFormId) {
1928
miqSparkleOn();
2029
http.get(`/cloud_tenant/cloud_tenant_form_fields/${this.props.cloudTenantFormId}`)
2130
.then(data => this.setState({ initialValues: { ...data } }, miqSparkleOff()));
2231
}
2332
}
2433

34+
onSubmit = (values) => {
35+
const { originalLeftValues, originalRightValues, originalOptions } = this.state;
36+
37+
const newLeft = addedLeftValues(originalOptions, values.duallist, originalLeftValues);
38+
const newRight = addedRightValues(values.duallist, originalRightValues);
39+
40+
console.log('submit right', values.duallist);
41+
console.log('new left', newLeft);
42+
console.log('new right', newRight);
43+
}
2544

2645
render() {
2746
const { cloudTenantFormId } = this.props;
@@ -33,7 +52,7 @@ class CloudTenantForm extends Component {
3352
<MiqFormRenderer
3453
initialValues={this.state.initialValues}
3554
schema={this.state.schema}
36-
onSubmit={values => miqAjaxButton(submitUrl, values, { complete: false })}
55+
onSubmit={values => this.onSubmit(values)}
3756
onCancel={() => miqAjaxButton(cancelUrl)}
3857
onReset={() => add_flash(__('All changes have been reset'), 'warn')}
3958
canReset={!!cloudTenantFormId}

‎app/javascript/packs/component-definitions-common.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import CloudTenantForm from '../components/cloud-tenant-form/cloud-tenant-form';
1010
import ServiceForm from '../components/service-form';
1111
import SetServiceOwnershipForm from '../components/set-service-ownership-form';
1212
import FlavorForm from '../components/flavor-form/flavor-form';
13+
import CatalogForm from '../components/catalog-form/catalog-form';
1314

1415
/**
1516
* Add component definitions to this file.
@@ -30,3 +31,4 @@ ManageIQ.component.addReact('CloudTenantForm', CloudTenantForm);
3031
ManageIQ.component.addReact('ServiceForm', ServiceForm);
3132
ManageIQ.component.addReact('SetServiceOwnershipForm', SetServiceOwnershipForm);
3233
ManageIQ.component.addReact('FlavorForm', FlavorForm);
34+
ManageIQ.component.addReact('CatalogForm', CatalogForm);

‎app/views/catalog/_stcat_form.html.haml‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
- url = url_for_only_path(:action => "st_catalog_form_field_changed", :id => (@edit[:rec_id] || "new"))
22

3+
= render :partial => "layouts/flash_msg"
4+
.col-md-12
5+
= react('CatalogForm', { :catalogId => @edit[:rec_id] || "new",
6+
:catalogName => @edit[:new][:name].to_s,
7+
:catalogDescription => @edit[:new][:description],
8+
:catalogItems => @edit[:new][:available_fields],
9+
:catalogSelectedItems => @edit[:new][:fields]})
10+
311
#form_div
4-
= render :partial => "layouts/flash_msg"
512
-# show form if Catalog bundle is being added or if it's an edit of existing catalog item, else force user to select type
613
%h3
714
= _('Basic Info')

0 commit comments

Comments
 (0)