styles tab refactoring

lib/server/graphql/mutations/style/remove.js

@@ -11,16 +11,16 @@ import StyleModel from '../../../models/style';
 export default {
   type: styleType,
   args: {
-    _id: {
-      name: '_id',
+    id: {
+      name: 'id',
       type: new GraphQLNonNull(GraphQLID)
     }
   },
   async resolve (root, params, options) {
     authorize(root);
 
     const removedStyle = await StyleModel
-      .findByIdAndRemove(params._id, {
+      .findByIdAndRemove(params.id, {
         select: getProjection(options.fieldASTs[0])
       })
       .exec();

lib/server/graphql/mutations/style/update.js

@@ -1,6 +1,7 @@
 import getProjection from 'helpers/get-projection';
 import {
-  GraphQLNonNull
+  GraphQLNonNull,
+  GraphQLID
 } from 'graphql';
 
 import authorize from '../../authorize';
@@ -11,6 +12,9 @@ import StyleModel from '../../../models/style';
 export default {
   type: styleType,
   args: {
+    id: {
+      type: new GraphQLNonNull(GraphQLID)
+    },
     data: {
       name: 'data',
       type: new GraphQLNonNull(styleInputType)
@@ -21,7 +25,7 @@ export default {
 
     const data = params.data;
     const resultStyle = await StyleModel
-      .findByIdAndUpdate(data._id, data, {
+      .findByIdAndUpdate(params._id, data, {
         upsert: true,
         new: true,
         select: getProjection(options.fieldASTs[0])

lib/shared/actions/index.js

@@ -108,6 +108,7 @@ export default {
   pbOutElement: 'PB_OUT_ELEMENT',
   pbSelectElement: 'PB_SELECT_ELEMENT',
   pbDoAction: 'PB_DO_ACTION',
+  doActionNoHistory: 'PB_DO_ACTION_NO_HISTORY',
   pbUndoAction: 'PB_UNDO_ACTION',
   pbRedoAction: 'PB_REDO_ACTION',
   pbLinkDataMode: 'PB_LINK_DATA_MODE',

lib/shared/actions/page-builder.js

@@ -2,7 +2,9 @@ import actionTypes from 'actions';
 import forEach from 'lodash.foreach';
 import getElement from 'helpers/get-element';
 import getSchemaLinkActions from 'helpers/schema-link-actions';
+import merge from 'lodash.merge';
 import {updateDraft, saveDraft, dropDraft} from 'actions/draft';
+import {saveStyle, updateStyle} from 'actions/styles';
 import {updateSymbol} from 'actions/symbol';
 import {mutation} from 'relate-js';
 
@@ -229,13 +231,25 @@ export function changeElementLabel (elementId, value, context) {
   };
 }
 
-export function changeElementStyle (elementId, property, value, context) {
+export function changeElementStyle (elementId, value, context) {
+  return {
+    type: actionTypes.pbDoAction,
+    action: {
+      type: 'changeStyle',
+      elementId,
+      value,
+      context
+    }
+  };
+}
+
+export function changeElementStyleProp (elementId, property, value, context) {
   return (dispatch, getState) => {
     const {display} = getState();
     dispatch({
       type: actionTypes.pbDoAction,
       action: {
-        type: 'changeStyle',
+        type: 'changeStyleProp',
         elementId,
         property,
         value,
@@ -246,6 +260,52 @@ export function changeElementStyle (elementId, property, value, context) {
   };
 }
 
+export function saveSelectedElementStyleChanges (style) {
+  return (dispatch, getState) => {
+    const {pageBuilder} = getState();
+    const {selectedElement} = pageBuilder;
+
+    const styleProps = Object.assign({}, style.options, selectedElement.styleProps);
+    const displayStyleProps = merge({}, style.displayOptions, selectedElement.displayStyleProps);
+
+    dispatch(updateStyle(
+      style._id,
+      {
+        options: styleProps,
+        displayOptions: displayStyleProps
+      }
+    )).then(() => {
+      console.log('here');
+    });
+  };
+}
+
+export function createStyleFromSelectedElement (title) {
+  return (dispatch, getState) => {
+    const {pageBuilder} = getState();
+    const {selected, selectedElement, elements} = pageBuilder;
+
+    const ElementClass = elements[selectedElement.tag];
+
+    dispatch(saveStyle({
+      title,
+      type: ElementClass.style && ElementClass.style.type || ElementClass.style,
+      options: selectedElement.styleProps,
+      displayOptions: selectedElement.displayStyleProps
+    }, (style) => {
+      dispatch({
+        type: actionTypes.doActionNoHistory,
+        action: {
+          type: 'changeStyle',
+          elementId: selected.id,
+          value: style._id,
+          context: selected.context
+        }
+      });
+    }));
+  };
+}
+
 export function changeElementProperty (elementId, property, value, context) {
   return (dispatch, getState) => {
     const {display} = getState();

lib/shared/actions/styles.js

@@ -1,28 +1,36 @@
 import actionTypes from 'actions';
-import request from 'helpers/request';
-import {fragmentToQL} from 'relax-fragments';
+import {mutation} from 'relate-js';
 
-export function saveStyle (fragments, elementId, data, context) {
+export function saveStyle (data, cb) {
   return (dispatch, getState) => (
-    request({
-      dispatch,
-      type: actionTypes.saveStyle,
-      query: `
-        mutation addStyle ($data: StyleInput!) {
-          addStyle (data: $data) {
-            ${fragmentToQL(fragments.style)}
-          }
+    mutation({
+      fragments: {
+        addStyle: {
+          _id: 1,
+          title: 1,
+          options: 1,
+          displayOptions: 1
         }
-      `,
-      variables: {
-        data
       },
-      params: {
-        elementId,
-        context,
-        display: getState().display
+      variables: {
+        addStyle: {
+          data: {
+            value: data,
+            type: 'StyleInput!'
+          }
+        }
       }
-    })
+    }, (result) => {
+      const style = result.addStyle;
+
+      if (style) {
+        dispatch({
+          type: actionTypes.saveStyle,
+          style
+        });
+        cb && cb(style);
+      }
+    })(dispatch, getState)
   );
 }
 
@@ -39,40 +47,66 @@ export function changeStyleProp (styleId, property, value) {
   };
 }
 
-export function updateStyle (fragments, data) {
-  return (dispatch) => (
-    request({
-      dispatch,
-      type: actionTypes.updateStyle,
-      query: `
-        mutation updateStyle ($data: StyleInput!) {
-          updateStyle (data: $data) {
-            ${fragmentToQL(fragments.style)}
-          }
+export function updateStyle (id, data) {
+  return (dispatch, getState) => (
+    mutation({
+      fragments: {
+        updateStyle: {
+          _id: 1,
+          title: 1,
+          options: 1,
+          displayOptions: 1
         }
-      `,
+      },
       variables: {
-        data
+        updateStyle: {
+          id: {
+            value: data,
+            type: 'ID!'
+          },
+          data: {
+            value: data,
+            type: 'StyleInput!'
+          }
+        }
       }
-    })
+    }, (result) => {
+      const style = result.updateStyle;
+
+      if (style) {
+        // success
+        dispatch({
+          type: actionTypes.updateStyle,
+          style
+        });
+      }
+
+      return style;
+    })(dispatch, getState)
   );
 }
 
 export function removeStyle (styleId) {
-  return (dispatch) => (
-    request({
-      dispatch,
-      type: actionTypes.removeStyle,
-      query: `
-        mutation removeStyle ($id: ID!) {
-          removeStyle (_id: $id) {
-            _id
-          }
+  return (dispatch, getState) => (
+    mutation({
+      fragments: {
+        removeStyle: {
+          _id: 1
         }
-      `,
+      },
       variables: {
-        id: styleId
+        removeStyle: {
+          id: {
+            value: styleId,
+            type: 'ID!'
+          }
+        }
       }
-    })
+    }, (result) => {
+      dispatch({
+        type: actionTypes.removeStyle,
+        style: result.style
+      });
+    })(dispatch, getState)
   );
 }

lib/shared/reducers/__tests__/page-builder.js

@@ -395,76 +395,6 @@ describe('Page Builder Reducer', () => {
     });
   });
 
-  describe('handles SAVE_STYLE', () => {
-    afterEach(() => {
-      cleanupId();
-    });
-
-    it('processes action with context to draft doc', () => {
-      const iniState = Object.assign({}, defaultState, {
-        doc: {
-          data: {
-            body: {
-              id: 'body',
-              tag: 'body',
-              children: ['0']
-            },
-            0: {
-              id: '0',
-              parent: 'body',
-              tag: 'TextBox'
-            }
-          }
-        }
-      });
-      const newState = pageBuilderReducer(iniState, {
-        type: actionTypes.saveStyle,
-        data: {
-          addStyle: {_id: 'styleID'}
-        },
-        params: {
-          elementId: '0',
-          display: 'desktop',
-          context: 'data'
-        }
-      });
-
-      expect(newState).to.be.an('object');
-      expect(newState)
-        .to.have.property('doc')
-        .to.have.property('data');
-      expect(newState).to.have.property('actions');
-      expect(newState).to.have.property('redos');
-
-      expect(newState.doc).to.deep.equals({
-        data: {
-          body: {
-            id: 'body',
-            tag: 'body',
-            children: ['0']
-          },
-          0: {
-            id: '0',
-            parent: 'body',
-            tag: 'TextBox',
-            props: {
-              style: 'styleID'
-            }
-          }
-        }
-      });
-      expect(newState.actions).to.deep.equals([{
-        type: 'changeProp',
-        property: 'style',
-        value: undefined,
-        elementId: '0',
-        display: 'desktop',
-        context: 'data'
-      }]);
-      expect(newState.redos).to.deep.equals([]);
-    });
-  });
-
   it('handles PB_SELECT_ELEMENT', () => {
     const iniState = Object.assign({}, defaultState, {
       doc: {