ywana-core8 0.0.16 → 0.0.20

package/dist/index.modern.js

@@ -3,7 +3,7 @@ import React, { useContext, useState, useEffect, Fragment, useRef, Children, use
 import equal from 'deep-equal';
 import ResumableJS from 'resumablejs';
 
-function _catch$1(body, recover) {
+function _catch$2(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -34,7 +34,7 @@ var fetchAsync = function fetchAsync(method, URL, body, token) {
       },
       body: body
     };
-    return Promise.resolve(_catch$1(function () {
+    return Promise.resolve(_catch$2(function () {
       return Promise.resolve(fetch(URL, request)).then(function (response) {
         var _exit;
 
@@ -3128,16 +3128,16 @@ var CollectionAdder = function CollectionAdder(_ref11) {
  * Create Content Dialog
  */
 
-var CreateContentDialog = function CreateContentDialog(_ref) {
+var CreateContentDialog$1 = function CreateContentDialog(_ref) {
   var label = _ref.label,
       type = _ref.type,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? {} : _ref$value,
       validator = _ref.validator,
-      onOK = _ref.onOK,
-      _ref$onActionClose = _ref.onActionClose,
-      onActionClose = _ref$onActionClose === void 0 ? true : _ref$onActionClose;
+      onOK = _ref.onOK;
   var site = useContext(SiteContext);
 
-  var _useState = useState({}),
+  var _useState = useState(value),
       form = _useState[0],
       setForm = _useState[1];
 
@@ -3149,7 +3149,7 @@ var CreateContentDialog = function CreateContentDialog(_ref) {
       errors = _useState3[0],
       setErrors = _useState3[1];
 
-  function change(form, validForm) {
+  function change(form) {
     setForm(form);
 
     if (validator) {
@@ -3158,28 +3158,20 @@ var CreateContentDialog = function CreateContentDialog(_ref) {
           _validator$errors = _validator.errors,
           _errors = _validator$errors === void 0 ? [] : _validator$errors;
 
-      setValid(validForm && validation);
+      setValid(validation);
       setErrors(_errors);
     } else {
-      setValid(validForm);
+      setValid(true);
     }
   }
 
   function onAction(action) {
-    if (action === 'OK' && onOK) onOK(form);
-    if (action === 'CLOSE' || onActionClose === true) site.closeDialog();
-  }
-
-  function isRequired(field) {
-    var _field$required = field.required,
-        required = _field$required === void 0 ? false : _field$required;
-    return required;
+    if (action === 'OK' && onOK) onOK(Object.assign({}, value, form));
+    site.closeDialog();
   }
 
-  function isOptional(field) {
-    var _field$creation = field.creation,
-        creation = _field$creation === void 0 ? false : _field$creation;
-    return creation;
+  function createFilter(field, content) {
+    return field.required === true || field.optional === true; // TODO: execute props.filter
   }
 
   var actions = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
@@ -3187,6 +3179,8 @@ var CreateContentDialog = function CreateContentDialog(_ref) {
     action: function action() {
       return onAction("CLOSE");
     }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "expand"
   }), /*#__PURE__*/React.createElement(Button, {
     label: "OK",
     action: function action() {
@@ -3204,12 +3198,10 @@ var CreateContentDialog = function CreateContentDialog(_ref) {
     open: true,
     onAction: onAction,
     actions: actions
-  }, /*#__PURE__*/React.createElement(ContentForm, {
+  }, /*#__PURE__*/React.createElement(ContentEditor, {
     content: content,
-    filter: function filter(field) {
-      return isRequired(field) || isOptional(field);
-    },
-    onChange: change
+    onChange: change,
+    filter: createFilter
   }), errors.map(function (error) {
     return /*#__PURE__*/React.createElement(Text, {
       use: "overline",
@@ -3303,7 +3295,102 @@ var EditContentDialog = function EditContentDialog(_ref) {
   }));
 };
 
-function _catch(body, recover) {
+/**
+ * Create Content Dialog
+ */
+
+var CreateContentDialog = function CreateContentDialog(_ref) {
+  var label = _ref.label,
+      type = _ref.type,
+      validator = _ref.validator,
+      onOK = _ref.onOK,
+      _ref$onActionClose = _ref.onActionClose,
+      onActionClose = _ref$onActionClose === void 0 ? true : _ref$onActionClose;
+  var site = useContext(SiteContext);
+
+  var _useState = useState({}),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  var _useState2 = useState(false),
+      isValid = _useState2[0],
+      setValid = _useState2[1];
+
+  var _useState3 = useState([]),
+      errors = _useState3[0],
+      setErrors = _useState3[1];
+
+  function change(form, validForm) {
+    setForm(form);
+
+    if (validator) {
+      var _validator = validator(form),
+          validation = _validator.validation,
+          _validator$errors = _validator.errors,
+          _errors = _validator$errors === void 0 ? [] : _validator$errors;
+
+      setValid(validForm && validation);
+      setErrors(_errors);
+    } else {
+      setValid(validForm);
+    }
+  }
+
+  function onAction(action) {
+    if (action === 'OK' && onOK) onOK(form);
+    if (action === 'CLOSE' || onActionClose === true) site.closeDialog();
+  }
+
+  function isRequired(field) {
+    var _field$required = field.required,
+        required = _field$required === void 0 ? false : _field$required;
+    return required;
+  }
+
+  function isOptional(field) {
+    var _field$creation = field.creation,
+        creation = _field$creation === void 0 ? false : _field$creation;
+    return creation;
+  }
+
+  var actions = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    label: "CLOSE",
+    action: function action() {
+      return onAction("CLOSE");
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    label: "OK",
+    action: function action() {
+      return onAction("OK");
+    },
+    disabled: !isValid,
+    raised: true
+  }));
+  var title = /*#__PURE__*/React.createElement(Text, {
+    use: "headline6"
+  }, label);
+  var content = new Content(type, form);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    title: title,
+    open: true,
+    onAction: onAction,
+    actions: actions
+  }, /*#__PURE__*/React.createElement(ContentForm, {
+    content: content,
+    filter: function filter(field) {
+      return isRequired(field) || isOptional(field);
+    },
+    onChange: change
+  }), errors.map(function (error) {
+    return /*#__PURE__*/React.createElement(Text, {
+      use: "overline",
+      tag: "div",
+      className: "error"
+    }, error);
+  }));
+};
+
+function _catch$1(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -3317,7 +3404,7 @@ function _catch(body, recover) {
   return result;
 }
 
-var http = HTTPClient(window.API || process.env.REACT_APP_API, Session);
+var http$1 = HTTPClient(window.API || process.env.REACT_APP_API, Session);
 /**
  * Collection Page
  */
@@ -3378,8 +3465,8 @@ var CollectionPage = function CollectionPage(props) {
       }
     };
 
-    site.openDialog( /*#__PURE__*/React.createElement(EditContentDialog, {
-      label: "Crear " + name,
+    site.openDialog( /*#__PURE__*/React.createElement(CreateContentDialog, {
+      label: "" + name,
       type: schema,
       onOK: onOK
     }));
@@ -3672,7 +3759,7 @@ var CollectionContext = function CollectionContext(url, field) {
       try {
         var _this2 = this;
 
-        var _temp2 = _catch(function () {
+        var _temp2 = _catch$1(function () {
           return Promise.resolve(API.all()).then(function (data) {
             _this2.all = field ? data[field] : data;
           });
@@ -3698,7 +3785,7 @@ var CollectionContext = function CollectionContext(url, field) {
       try {
         var _this4 = this;
 
-        var _temp4 = _catch(function () {
+        var _temp4 = _catch$1(function () {
           return Promise.resolve(API.create(form)).then(function () {
             return Promise.resolve(_this4.load()).then(function () {});
           });
@@ -3715,7 +3802,7 @@ var CollectionContext = function CollectionContext(url, field) {
       try {
         var _this6 = this;
 
-        var _temp6 = _catch(function () {
+        var _temp6 = _catch$1(function () {
           return Promise.resolve(API.update(form)).then(function () {
             return Promise.resolve(_this6.load()).then(function () {});
           });
@@ -3732,7 +3819,7 @@ var CollectionContext = function CollectionContext(url, field) {
       try {
         var _this8 = this;
 
-        var _temp8 = _catch(function () {
+        var _temp8 = _catch$1(function () {
           return Promise.resolve(API.patch(id, form)).then(function () {
             return Promise.resolve(_this8.load()).then(function () {});
           });
@@ -3749,7 +3836,7 @@ var CollectionContext = function CollectionContext(url, field) {
       try {
         var _this10 = this;
 
-        var _temp10 = _catch(function () {
+        var _temp10 = _catch$1(function () {
           return Promise.resolve(API.updateProperty(id, propertyName, form)).then(function () {
             return Promise.resolve(_this10.load()).then(function () {});
           });
@@ -3766,7 +3853,7 @@ var CollectionContext = function CollectionContext(url, field) {
       try {
         var _this12 = this;
 
-        var _temp12 = _catch(function () {
+        var _temp12 = _catch$1(function () {
           return Promise.resolve(API.remove(id)).then(function () {
             return Promise.resolve(_this12.load()).then(function () {});
           });
@@ -3788,26 +3875,599 @@ var CollectionContext = function CollectionContext(url, field) {
 var CollectionAPI = function CollectionAPI(url) {
   return {
     all: function all() {
-      return http.GET(url);
+      return http$1.GET(url);
     },
     find: function find(id) {
-      return http.GET(url + "/" + id);
+      return http$1.GET(url + "/" + id);
     },
     create: function create(form) {
       var body = JSON.stringify(form);
-      return http.POST(url, body);
+      return http$1.POST(url, body);
     },
     update: function update(form) {
       var body = JSON.stringify(form);
-      return http.PUT(url + "/" + form.id, body);
+      return http$1.PUT(url + "/" + form.id, body);
     },
     patch: function patch(id, form) {
       var body = JSON.stringify(form);
-      return http.PATCH(url + "/" + id, body);
+      return http$1.PATCH(url + "/" + id, body);
     },
     updateProperty: function updateProperty(id, propertyName, form) {
       var body = JSON.stringify(form);
-      return http.PUT(url + "/" + id + "/" + propertyName, body);
+      return http$1.PUT(url + "/" + id + "/" + propertyName, body);
+    },
+    remove: function remove(id) {
+      return http$1.DELETE(url + "/" + id);
+    }
+  };
+};
+
+function _catch(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+
+  return result;
+}
+
+var http = HTTPClient(window.API || process.env.REACT_APP_API, Session);
+/**
+ * Table Page
+ */
+
+var TablePage = function TablePage(props) {
+  var playScenario = function playScenario() {
+    try {
+      var promises1 = pageContext.all.map(function (item) {
+        try {
+          return Promise.resolve(pageContext.remove(item.id));
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      });
+      Promise.all(promises1).then(function () {
+        try {
+          var promises2 = scenario.map(function (item) {
+            try {
+              return Promise.resolve(pageContext.create(item));
+            } catch (e) {
+              return Promise.reject(e);
+            }
+          });
+          Promise.all(promises2).then(function () {
+            try {
+              return Promise.resolve(pageContext.load()).then(function () {
+                setPageContext(Object.assign({}, pageContext));
+              });
+            } catch (e) {
+              return Promise.reject(e);
+            }
+          });
+          return Promise.resolve();
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      });
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var save = function save() {
+    try {
+      console.log('saving.....');
+      return Promise.resolve(pageContext.update(form)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var site = useContext(SiteContext);
+  var _props$id = props.id,
+      id = _props$id === void 0 ? "table" : _props$id,
+      icon = props.icon,
+      title = props.title,
+      _props$name = props.name,
+      name = _props$name === void 0 ? "table 1" : _props$name,
+      schema = props.schema,
+      url = props.url,
+      field = props.field,
+      _props$delay = props.delay,
+      delay = _props$delay === void 0 ? 1000 : _props$delay,
+      actions = props.actions,
+      editable = props.editable,
+      _props$canAdd = props.canAdd,
+      canAdd = _props$canAdd === void 0 ? true : _props$canAdd,
+      _props$dev = props.dev,
+      dev = _props$dev === void 0 ? false : _props$dev,
+      _props$autosave = props.autosave,
+      autosave = _props$autosave === void 0 ? true : _props$autosave,
+      groupBy = props.groupBy,
+      validator = props.validator,
+      scenario = props.scenario;
+
+  var _useContext = useContext(PageContext),
+      pageContext = _useContext[0],
+      setPageContext = _useContext[1];
+
+  var selected = pageContext.selected;
+  var timer = useRef(null);
+
+  var _useState = useState(selected),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  useEffect(function () {
+    setForm(selected);
+  }, [selected]);
+  useEffect(function () {
+    if (autosave) {
+      clearTimeout(timer.current);
+      timer.current = setTimeout(function () {
+        if (canSave()) save();
+      }, delay);
+    }
+  }, [form]);
+  useEffect(function () {
+    try {
+      var context = TableContext(url, field);
+      return Promise.resolve(context.load()).then(function () {
+        setPageContext(context);
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, []);
+
+  function add() {
+    var onOK = function onOK(form) {
+      try {
+        return Promise.resolve(pageContext.create(form)).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    site.openDialog( /*#__PURE__*/React.createElement(EditContentDialog, {
+      label: "Crear " + name,
+      type: schema,
+      onOK: onOK,
+      validator: validator
+    }));
+  }
+
+  function change(next) {
+    setForm(next);
+  }
+
+  function canSave() {
+    var can = !equal(form, selected);
+    return can;
+  }
+
+  function closeAside() {
+    pageContext.select(null);
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function renderAside() {
+    if (selected && form) {
+      var content = new Content(schema, form);
+      return /*#__PURE__*/React.createElement("aside", {
+        className: "table-page"
+      }, /*#__PURE__*/React.createElement(Header, {
+        icon: "local_offer",
+        title: selected.name || "Propiedades"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "close",
+        clickable: true,
+        action: closeAside
+      })), /*#__PURE__*/React.createElement(ContentEditor, {
+        content: content,
+        onChange: change
+      }));
+    }
+
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    className: "table-page",
+    title: /*#__PURE__*/React.createElement(Text, null, title)
+  }, canAdd ? /*#__PURE__*/React.createElement(Button, {
+    icon: "add",
+    label: "A\xF1adir",
+    action: add,
+    raised: true
+  }) : null, dev ? /*#__PURE__*/React.createElement(MenuIcon, {
+    align: "alignRight"
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    label: "Cargar Escenario 1",
+    onSelect: playScenario
+  })) : null, actions), /*#__PURE__*/React.createElement("menu", {
+    className: "table-page"
+  }, /*#__PURE__*/React.createElement(TableFilters, {
+    schema: schema
+  })), /*#__PURE__*/React.createElement("main", {
+    key: id,
+    className: "table-page"
+  }, /*#__PURE__*/React.createElement(TableEditor, {
+    icon: icon,
+    title: name,
+    schema: schema,
+    delay: delay,
+    editable: editable,
+    groupBy: groupBy
+  })), renderAside());
+};
+/**
+ * Table Filters
+ */
+
+var TableFilters = function TableFilters(props) {
+  var change = function change(next) {
+    try {
+      setForm(next);
+      return Promise.resolve(pageContext.load(next)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var _useContext2 = useContext(PageContext),
+      pageContext = _useContext2[0],
+      setPageContext = _useContext2[1];
+
+  var schema = props.schema;
+
+  var _useState2 = useState({}),
+      form = _useState2[0],
+      setForm = _useState2[1];
+
+  var filterSchema = useMemo(function () {
+    var filterSchema = Object.assign({}, schema);
+    Object.values(filterSchema).forEach(function (field) {
+      return field.section = null;
+    });
+    delete filterSchema.flows;
+    return filterSchema;
+  }, [schema]);
+
+  function clear() {
+    setForm({});
+  }
+
+  var content = new Content(filterSchema, form);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    title: /*#__PURE__*/React.createElement(Text, null, "Filtros")
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: "filter_list_off",
+    label: "Limpiar",
+    action: clear
+  })), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(ContentEditor, {
+    content: content,
+    onChange: change
+  })));
+};
+/**
+ * Table Editor
+ */
+
+
+var TableEditor = function TableEditor(props) {
+  var select = function select(row, event) {
+    try {
+      clear();
+      return Promise.resolve(pageContext.select(row.id)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var remove = function remove(id) {
+    try {
+      return Promise.resolve(pageContext.remove(id)).then(function () {
+        pageContext.clear();
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var _useContext3 = useContext(PageContext),
+      pageContext = _useContext3[0],
+      setPageContext = _useContext3[1];
+
+  var _pageContext$all = pageContext.all,
+      all = _pageContext$all === void 0 ? [] : _pageContext$all;
+  var icon = props.icon,
+      title = props.title,
+      schema = props.schema,
+      editable = props.editable;
+
+  var _useState3 = useState(props.groupBy),
+      groupBy = _useState3[0],
+      setGroupBy = _useState3[1];
+
+  function changeGroup(id, value) {
+    setGroupBy(value);
+  }
+
+  function change(rowID, cellID, value) {
+    var _Object$assign;
+
+    var row = all.find(function (r) {
+      return r.id === rowID;
+    });
+    var next = Object.assign({}, row, (_Object$assign = {}, _Object$assign[cellID] = value, _Object$assign));
+    delete next.actions;
+    pageContext.update(next);
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function clear() {
+    pageContext.clear();
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function renderGroups() {
+    var groups = all.reduce(function (groups, filter) {
+      var groupName = filter[groupBy];
+      var group = groups[groupName];
+      if (!group) groups[groupName] = [];
+      groups[groupName].push(filter);
+      return groups;
+    }, {});
+    return Object.keys(groups).map(function (groupName) {
+      var table = {
+        columns: Object.values(schema).filter(function (field) {
+          return field.column === true;
+        }).map(function (field) {
+          var options = field.options;
+
+          if (options && typeof options == 'function') {
+            options = options();
+          }
+
+          return {
+            id: field.id,
+            label: field.label,
+            type: field.type,
+            onChange: field.editable ? change : null,
+            options: options
+          };
+        }),
+        rows: groups[groupName].map(function (item) {
+          item.actions = [/*#__PURE__*/React.createElement(Icon, {
+            icon: "delete",
+            size: "small",
+            clickable: true,
+            action: function action() {
+              return remove(item.id);
+            }
+          })];
+          return item;
+        })
+      };
+      table.columns.push({
+        id: "actions"
+      });
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: groupName
+      }, /*#__PURE__*/React.createElement(Header, {
+        title: groupName
+      }), /*#__PURE__*/React.createElement(DataTable, _extends({}, table, {
+        onRowSelection: select,
+        editable: editable
+      })));
+    });
+  }
+
+  var table = {
+    columns: Object.values(schema).filter(function (field) {
+      return field.column === true;
+    }).map(function (field) {
+      var options = field.options;
+
+      if (options && typeof options == 'function') {
+        options = options();
+      }
+
+      return {
+        id: field.id,
+        label: field.label,
+        type: field.type,
+        onChange: field.editable ? change : null,
+        options: options
+      };
+    }),
+    rows: all.map(function (item) {
+      item.actions = [/*#__PURE__*/React.createElement(Icon, {
+        icon: "delete",
+        size: "small",
+        clickable: true,
+        action: function action() {
+          return remove(item.id);
+        }
+      })];
+      return item;
+    })
+  };
+  table.columns.push({
+    id: "actions"
+  });
+
+  function buildGroupOptions(schema) {
+    return Object.values(schema).filter(function (field) {
+      return field.grouper === true;
+    }).map(function (field) {
+      return {
+        label: field.label,
+        value: field.id
+      };
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    icon: icon,
+    title: /*#__PURE__*/React.createElement(Text, null, title)
+  }, /*#__PURE__*/React.createElement(DropDown, {
+    id: "groupBy",
+    label: "Agrupar Por",
+    value: groupBy,
+    options: buildGroupOptions(schema),
+    onChange: changeGroup
+  })), /*#__PURE__*/React.createElement("main", {
+    className: "table-editor"
+  }, renderGroups()));
+};
+/**
+ * table Context
+ */
+
+
+var TableContext = function TableContext(url, field) {
+  var API = TableAPI(url);
+  return {
+    all: [],
+    selected: null,
+    filters: {},
+    load: function load(filter) {
+      try {
+        var _this2 = this;
+
+        var _temp2 = _catch(function () {
+          var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
+            var field = filter[key];
+            if (field) filters[key] = field;
+            return filters;
+          }, {}) : [];
+          return Promise.resolve(API.all(filters)).then(function (data) {
+            _this2.all = field ? data[field] : data;
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    select: function select(id) {
+      var result = this.all.find(function (item) {
+        return item.id === id;
+      });
+      this.selected = result;
+    },
+    clear: function clear() {
+      this.selected = null;
+    },
+    create: function create(form) {
+      try {
+        var _this4 = this;
+
+        var _temp4 = _catch(function () {
+          return Promise.resolve(API.create(form)).then(function () {
+            return Promise.resolve(_this4.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    update: function update(form) {
+      try {
+        var _this6 = this;
+
+        var _temp6 = _catch(function () {
+          return Promise.resolve(API.update(form)).then(function () {
+            return Promise.resolve(_this6.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    remove: function remove(id) {
+      try {
+        var _this8 = this;
+
+        var _temp8 = _catch(function () {
+          return Promise.resolve(API.remove(id)).then(function () {
+            return Promise.resolve(_this8.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    changeFilters: function changeFilters(filters) {
+      this.filters = filters;
+    }
+  };
+};
+/**
+ * table API
+ */
+
+
+var TableAPI = function TableAPI(url) {
+  return {
+    all: function all(filters) {
+      var queryParams = "?";
+
+      if (filters) {
+        var filterQuery = Object.keys(filters).reduce(function (query, key) {
+          if (typeof filters[key] === 'boolean') {
+            return query.concat(key + "=" + filters[key] + "&");
+          } else {
+            return query.concat(key + "=%" + filters[key] + "%&");
+          }
+        }, "");
+        queryParams = queryParams.concat(filterQuery);
+      }
+
+      return http.GET(url + queryParams);
+    },
+    find: function find(id) {
+      return http.GET(url + "/" + id);
+    },
+    create: function create(form) {
+      var body = JSON.stringify(form);
+      return http.POST(url, body);
+    },
+    update: function update(form) {
+      var body = JSON.stringify(form);
+      return http.PUT(url + "/" + form.id, body);
     },
     remove: function remove(id) {
       return http.DELETE(url + "/" + id);
@@ -4083,5 +4743,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, Content, ContentEditor, ContentForm, CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FieldEditor, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, TYPES, Tab, TabbedContentEditor, Tabs, Text, TextField, TokenField, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, Uploader, Viewer, isFunction };
+export { Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, Content, ContentEditor, ContentForm, CreateContentDialog$1 as CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FieldEditor, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, TYPES, Tab, TabbedContentEditor, TablePage, Tabs, Text, TextField, TokenField, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, Uploader, Viewer, isFunction };
 //# sourceMappingURL=index.modern.js.map