Manage which products are in a catalog (Part 6 of Multiple Catalogs)

ashes/src/components/bulk-actions/bulk-actions.jsx

@@ -14,8 +14,10 @@ import { getStore } from 'lib/store-creator';
 
 import SelectAdminsModal from '../users/select-modal';
 
-const mapDispatchToProps = (dispatch, {module}) => {
-  const {actions} = getStore(`${module}.bulk`);
+const mapDispatchToProps = (dispatch, {bulkModule, module}) => {
+  const { actions } = bulkModule
+    ? getStore(bulkModule)
+    : getStore(`${module}.bulk`);
 
   return {
     bulkActions: bindActionCreators(actions, dispatch),
@@ -25,6 +27,7 @@ const mapDispatchToProps = (dispatch, {module}) => {
 @connect(void 0, mapDispatchToProps)
 export default class BulkActions extends Component {
   static propTypes = {
+    bulkModule: PropTypes.string,
     module: PropTypes.string.isRequired,
     entity: PropTypes.string.isRequired,
     actions: PropTypes.arrayOf(PropTypes.array).isRequired,

ashes/src/components/bulk-actions/bulk-messages.jsx

@@ -15,6 +15,7 @@ import ErrorAlerts from '../alerts/error-alerts';
 
 type Props = {
   storePath: string,
+  bulkModule?: string,
   module: string,
   entity: string,
   renderDetail: () => ReactElement,
@@ -95,8 +96,11 @@ const mapState = (state, { storePath }) => ({
   bulk: get(state, storePath, {}),
 });
 
-const mapActions = (dispatch, { module }) => ({
-  bulkActions: bindActionCreators(getStore(`${module}.bulk`).actions, dispatch),
-});
+const mapActions = (dispatch, { bulkModule, module }) => {
+  const { actions } = bulkModule ? getStore(bulkModule) : getStore(`${module}.bulk`);
+  return {
+    bulkActions: bindActionCreators(actions, dispatch),
+  };
+};
 
 export default connect(mapState, mapActions)(BulkMessages);

ashes/src/components/catalog/catalog-page.jsx

@@ -8,10 +8,11 @@ import { createSelector } from 'reselect';
 import { transitionTo, transitionToLazy } from 'browserHistory';
 
 // components
+import Content from 'components/core/content/content';
 import PageNav from 'components/core/page-nav';
 import SaveCancel from 'components/core/save-cancel';
 import WaitAnimation from 'components/common/wait-animation';
-import { IndexLink } from 'components/link';
+import { IndexLink, Link } from 'components/link';
 import { PageTitle } from 'components/section-title';
 
 // data
@@ -84,7 +85,6 @@ class CatalogPage extends Component {
   componentWillReceiveProps(nextProps: Props) {
     if (nextProps.params.catalogId !== 'new' && nextProps.catalog) {
       const { name, site, countryId, defaultLanguage } = nextProps.catalog;
-
       this.setState({ name, site, countryId, defaultLanguage });
     }
   }
@@ -93,6 +93,15 @@ class CatalogPage extends Component {
     const { catalogId } = this.props.params;
     const params = { catalogId };
 
+    let links = null;
+    if (!this.isNew) {
+      links = (
+        <Link to="catalog-products" params={params}>
+          Products
+        </Link>
+      );
+    }
+
     return (
       <PageNav>
         <IndexLink
@@ -101,6 +110,7 @@ class CatalogPage extends Component {
         >
           Details
         </IndexLink>
+        {links}
       </PageNav>
     );
   }
@@ -175,7 +185,9 @@ class CatalogPage extends Component {
         />
         </PageTitle>
         {this.localNav}
-        {upChildren}
+        <Content>
+          {upChildren}
+        </Content>
       </div>
     );
   }

ashes/src/components/catalog/details.jsx

@@ -3,7 +3,6 @@
 import _ from 'lodash';
 import React from 'react';
 
-import Content from 'components/core/content/content';
 import ContentBox from 'components/content-box/content-box';
 import { Dropdown } from 'components/dropdown';
 import ErrorAlerts from 'components/alerts/error-alerts';
@@ -42,62 +41,60 @@ const CatalogDetails = (props: Props) => {
   const languageItems = languages.map((lang) => [lang, lang]);
 
   return (
-    <Content>
-      <div styleName="form-content">
-        {err && (
-          <div>
-            <ErrorAlerts error={err} />
-          </div>
-        )}
-        <ContentBox title="General">
-          <Form onSubmit={onSubmit}>
-            <VerticalFormField
-              controlId= "name"
-              label="Name"
-              required
-            >
-              <TextInput
-                onChange={(v) => onChange('name', v)}
-                value={name}
-              />
-            </VerticalFormField>
-            <VerticalFormField
-              controlId="site"
-              label="Site URL"
-            >
-              <TextInput
-                onChange={(v) => onChange('site', v)}
-                value={site}
-              />
-            </VerticalFormField>
-            <VerticalFormField
-              controlId="countryId"
-              label="Country"
-              required
-            >
-              <Dropdown
-                name="countryId"
-                value={countryId}
-                items={countryItems}
-                onChange={(c) => onChange('countryId', c)}
-              />
-            </VerticalFormField>
-            <VerticalFormField
-              controlId="defaultLanguage"
-              label="Default Language"
-              required
-            >
-              <Dropdown
-                name="defaultLanguage"
-                value={defaultLanguage}
-                items={languageItems}
-                onChange={(l) => onChange('defaultLanguage', l)}
-              />
-            </VerticalFormField>
-          </Form>
-        </ContentBox>
-      </div>
-    </Content>
+    <div styleName="form-content">
+      {err && (
+        <div>
+          <ErrorAlerts error={err} />
+        </div>
+      )}
+      <ContentBox title="General">
+        <Form onSubmit={onSubmit}>
+          <VerticalFormField
+            controlId= "name"
+            label="Name"
+            required
+          >
+            <TextInput
+              onChange={(v) => onChange('name', v)}
+              value={name}
+            />
+          </VerticalFormField>
+          <VerticalFormField
+            controlId="site"
+            label="Site URL"
+          >
+            <TextInput
+              onChange={(v) => onChange('site', v)}
+              value={site}
+            />
+          </VerticalFormField>
+          <VerticalFormField
+            controlId="countryId"
+            label="Country"
+            required
+          >
+            <Dropdown
+              name="countryId"
+              value={countryId}
+              items={countryItems}
+              onChange={(c) => onChange('countryId', c)}
+            />
+          </VerticalFormField>
+          <VerticalFormField
+            controlId="defaultLanguage"
+            label="Default Language"
+            required
+          >
+            <Dropdown
+              name="defaultLanguage"
+              value={defaultLanguage}
+              items={languageItems}
+              onChange={(l) => onChange('defaultLanguage', l)}
+            />
+          </VerticalFormField>
+        </Form>
+      </ContentBox>
+    </div>
   );
 };
 

ashes/src/components/catalog/products.css

@@ -0,0 +1,7 @@
+.list-container {
+  margin-top: -10px;
+}
+
+.list-container :global(.fc-live-search) {
+  padding: 0;
+}