Converts Catalogs > Catalog > Add/Edit to react forms

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

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'patternfly-react';
+import MiqFormRenderer from '../../forms/data-driven-form';
+import createSchema from './create-form-schema';
+import {
+  leftValues,
+  addedLeftValues,
+  addedRightValues,
+  getKeys,
+} from '../dual-list-select/helpers';
+import httpApi from '../../http_api/http';
+
+
+class CatalogForm extends Component {
+  constructor(props) {
+    super(props);
+    const { catalogItems, catalogSelectedItems } = this.props;
+    const options = catalogItems.concat(catalogSelectedItems).map(item => ({ key: `${item[1]}`, label: item[0] }));
+    const rightValues = catalogSelectedItems.map(item => ({ key: `${item[1]}`, label: item[0] }));
+
+    this.state = {
+      schema: createSchema(options),
+      initialValues: {
+        name: props.catalogName,
+        description: props.catalogDescription,
+        duallist: rightValues,
+      },
+      originalLeftValues: leftValues(options, rightValues),
+      originalOptions: options,
+      originalRightValues: rightValues,
+    };
+  }
+
+  submit = (values) => {
+    const { catalogId } = this.props;
+    const { originalLeftValues, originalOptions, originalRightValues } = this.state;
+    const rightKeys = getKeys(addedRightValues(values.duallist, originalRightValues));
+    const leftKeys = getKeys(addedLeftValues(originalOptions, values.duallist, originalLeftValues));
+
+    if (rightKeys.length > 0) {
+      const rightData = rightKeys.map(key => `${encodeURIComponent('available_fields[]')}=${encodeURIComponent(`${key}`)}`);
+
+      httpApi.post(`st_catalog_form_field_changed/${catalogId}?button=right`,
+        rightData.join('&'),
+        { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
+    }
+
+    if (leftKeys.length > 0) {
+      const rightData = leftKeys.map(key => `${encodeURIComponent('selected_fields[]')}=${encodeURIComponent(`${key}`)}`);
+
+      httpApi.post(`st_catalog_form_field_changed/${catalogId}?button=left`,
+        rightData.join('&'),
+        { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
+    }
+
+    if (values.description) {
+      httpApi.post(`st_catalog_form_field_changed/${catalogId}`,
+        `description=${encodeURIComponent(`${values.description}`)}`,
+        { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
+    }
+
+    httpApi.post(`st_catalog_form_field_changed/${catalogId}`,
+      `name=${encodeURIComponent(`${values.name}`)}`,
+      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
+
+    httpApi.post(`st_catalog_edit/${catalogId}?button=save`, { }, { headers: { 'Content-Type': 'application/json;' } });
+  };
+
+  render() {
+    const { catalogName, catalogId } = this.props;
+    const cancelUrl = `/catalog/st_catalog_edit/${catalogId}?button=cancel`;
+    return (
+      <Grid fluid>
+        <MiqFormRenderer
+          initialValues={this.state.initialValues}
+          schema={this.state.schema}
+          onSubmit={this.submit}
+          onCancel={() => miqAjaxButton(cancelUrl)}
+          onReset={() => add_flash(__('All changes have been reset'), 'warn')}
+          canReset={!!catalogName}
+          buttonsLabels={{
+            submitLabel: catalogName ? __('Save') : __('Add'),
+          }}
+        />
+      </Grid>
+    );
+  }
+}
+
+CatalogForm.propTypes = {
+  catalogName: PropTypes.string,
+  catalogDescription: PropTypes.string,
+  catalogItems: PropTypes.arrayOf(PropTypes.shape({
+    [PropTypes.string]: PropTypes.string,
+  })),
+  catalogSelectedItems: PropTypes.arrayOf(PropTypes.shape({
+    [PropTypes.string]: PropTypes.string,
+  })),
+  catalogId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+CatalogForm.defaultProps = {
+  catalogName: undefined,
+  catalogDescription: undefined,
+  catalogItems: [],
+  catalogSelectedItems: [],
+  catalogId: undefined,
+};
+
+export default CatalogForm;

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

@@ -0,0 +1,48 @@
+import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+function createSchema(options) {
+  const fields = [{
+    component: componentTypes.SUB_FORM,
+    title: __('Basic Info'),
+    fields: [{
+      component: componentTypes.TEXT_FIELD,
+      name: 'name',
+      validate: [{
+        type: validatorTypes.REQUIRED,
+        message: __("Name can't be blank"),
+      }],
+      label: __('Name'),
+      maxLength: 40,
+      autoFocus: true,
+    }, {
+      component: componentTypes.TEXT_FIELD,
+      name: 'description',
+      label: __('Description'),
+      maxLength: 60,
+    }],
+  }, {
+    component: 'hr',
+  }, {
+    component: componentTypes.SUB_FORM,
+    title: __('Assign Catalog Items'),
+    fields: [
+      {
+        component: 'dual-list-select',
+        leftTitle: __('Unassigned:'),
+        rightTitle: __('Selected:'),
+        leftId: 'available_fields',
+        rightId: 'selected_fields',
+        allToRight: false,
+        moveLeftTitle: __('Move Selected buttons left'),
+        moveRightTitle: __('Move Selected buttons right'),
+        size: 8,
+        assignFieldProvider: true,
+        options,
+        name: 'duallist',
+      },
+    ],
+  }];
+  return { fields };
+}
+
+export default createSchema;

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

@@ -4,7 +4,7 @@ import { Grid } from 'patternfly-react';
 import MiqFormRenderer from '../../forms/data-driven-form';
 import { http } from '../../http_api';
 import createSchema from './create-form-schema';
-
+import { leftValues, addedLeftValues, addedRightValues } from '../dual-list-select/helpers';
 
 class CloudTenantForm extends Component {
   constructor(props) {
@@ -15,13 +15,32 @@ class CloudTenantForm extends Component {
   }
 
   componentDidMount() {
+    const { schema } = this.state;
+    const { options } = schema.fields[2];
+    const value = [{ key: '22', label: 'CosiX' }];
+    this.setState({
+      initialValues: { duallist: value },
+      originalLeftValues: leftValues(options, value),
+      originalOptions: options,
+      originalRightValues: value,
+    });
     if (this.props.cloudTenantFormId) {
       miqSparkleOn();
       http.get(`/cloud_tenant/cloud_tenant_form_fields/${this.props.cloudTenantFormId}`)
         .then(data => this.setState({ initialValues: { ...data } }, miqSparkleOff()));
     }
   }
 
+  onSubmit = (values) => {
+    const { originalLeftValues, originalRightValues, originalOptions } = this.state;
+
+    const newLeft = addedLeftValues(originalOptions, values.duallist, originalLeftValues);
+    const newRight = addedRightValues(values.duallist, originalRightValues);
+
+    console.log('submit right', values.duallist);
+    console.log('new left', newLeft);
+    console.log('new right', newRight);
+  }
 
   render() {
     const { cloudTenantFormId } = this.props;
@@ -33,7 +52,7 @@ class CloudTenantForm extends Component {
         <MiqFormRenderer
           initialValues={this.state.initialValues}
           schema={this.state.schema}
-          onSubmit={values => miqAjaxButton(submitUrl, values, { complete: false })}
+          onSubmit={values => this.onSubmit(values)}
           onCancel={() => miqAjaxButton(cancelUrl)}
           onReset={() => add_flash(__('All changes have been reset'), 'warn')}
           canReset={!!cloudTenantFormId}

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

@@ -10,6 +10,7 @@ import CloudTenantForm from '../components/cloud-tenant-form/cloud-tenant-form';
 import ServiceForm from '../components/service-form';
 import SetServiceOwnershipForm from '../components/set-service-ownership-form';
 import FlavorForm from '../components/flavor-form/flavor-form';
+import CatalogForm from '../components/catalog-form/catalog-form';
 
 /**
 * Add component definitions to this file.
@@ -30,3 +31,4 @@ ManageIQ.component.addReact('CloudTenantForm', CloudTenantForm);
 ManageIQ.component.addReact('ServiceForm', ServiceForm);
 ManageIQ.component.addReact('SetServiceOwnershipForm', SetServiceOwnershipForm);
 ManageIQ.component.addReact('FlavorForm', FlavorForm);
+ManageIQ.component.addReact('CatalogForm', CatalogForm);

app/views/catalog/_stcat_form.html.haml

@@ -1,7 +1,14 @@
 - url = url_for_only_path(:action => "st_catalog_form_field_changed", :id => (@edit[:rec_id] || "new"))
 
+= render :partial => "layouts/flash_msg"
+.col-md-12
+  = react('CatalogForm', { :catalogId => @edit[:rec_id] || "new", 
+                           :catalogName => @edit[:new][:name].to_s, 
+                           :catalogDescription => @edit[:new][:description],
+                           :catalogItems => @edit[:new][:available_fields],
+                           :catalogSelectedItems => @edit[:new][:fields]})
+
 #form_div
-  = render :partial => "layouts/flash_msg"
   -# show form if Catalog bundle is being added or if it's an edit of existing catalog item, else force user to select type
   %h3
     = _('Basic Info')