ywana-core8 0.0.469 → 0.0.472

package/dist/index.umd.js

@@ -11,7 +11,7 @@
   var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(ResumableJS);
   var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
 
-  function _catch$2(body, recover) {
+  function _catch$3(body, recover) {
     try {
       var result = body();
     } catch (e) {
@@ -43,7 +43,7 @@
         body: body
       };
       if (headers) request.headers = request.headers;
-      return Promise.resolve(_catch$2(function () {
+      return Promise.resolve(_catch$3(function () {
         return Promise.resolve(fetch(URL, request)).then(function (response) {
           var _exit;
 
@@ -4649,7 +4649,7 @@
    * Collection Page
    */
 
-  function _catch$1(body, recover) {
+  function _catch$2(body, recover) {
     try {
       var result = body();
     } catch (e) {
@@ -5036,7 +5036,7 @@
         try {
           var _this2 = this;
 
-          var _temp2 = _catch$1(function () {
+          var _temp2 = _catch$2(function () {
             return Promise.resolve(API.all(null, page)).then(function (data) {
               _this2.all = field ? data[field] : data;
             });
@@ -5062,7 +5062,7 @@
         try {
           var _this4 = this;
 
-          var _temp4 = _catch$1(function () {
+          var _temp4 = _catch$2(function () {
             return Promise.resolve(API.create(form)).then(function () {
               return Promise.resolve(_this4.load()).then(function () {});
             });
@@ -5079,7 +5079,7 @@
         try {
           var _this6 = this;
 
-          var _temp6 = _catch$1(function () {
+          var _temp6 = _catch$2(function () {
             return Promise.resolve(API.update(form)).then(function () {
               return Promise.resolve(_this6.load()).then(function () {});
             });
@@ -5096,7 +5096,7 @@
         try {
           var _this8 = this;
 
-          var _temp8 = _catch$1(function () {
+          var _temp8 = _catch$2(function () {
             return Promise.resolve(API.patch(id, form)).then(function () {
               return Promise.resolve(_this8.load()).then(function () {});
             });
@@ -5113,7 +5113,7 @@
         try {
           var _this10 = this;
 
-          var _temp10 = _catch$1(function () {
+          var _temp10 = _catch$2(function () {
             return Promise.resolve(API.updateProperty(id, propertyName, form)).then(function () {
               return Promise.resolve(_this10.load()).then(function () {});
             });
@@ -5130,7 +5130,7 @@
         try {
           var _this12 = this;
 
-          var _temp12 = _catch$1(function () {
+          var _temp12 = _catch$2(function () {
             return Promise.resolve(API.remove(id)).then(function () {
               return Promise.resolve(_this12.load()).then(function () {});
             });
@@ -5342,7 +5342,7 @@
    * Table Page
    */
 
-  function _catch(body, recover) {
+  function _catch$1(body, recover) {
     try {
       var result = body();
     } catch (e) {
@@ -5467,7 +5467,7 @@
         pageContext = _useContext[0],
         setPageContext = _useContext[1];
 
-    var context = TableContext(url, field, host, urlQuery);
+    var context = TableContext$1(url, field, host, urlQuery);
     var selected = pageContext.selected;
     var timer = React.useRef(null);
 
@@ -5567,13 +5567,13 @@
       if (rowSelected || rowChecked) {
         return /*#__PURE__*/React__default["default"].createElement("aside", {
           className: "table-page"
-        }, rowSelected ? /*#__PURE__*/React__default["default"].createElement(TableRowEditor, {
+        }, rowSelected ? /*#__PURE__*/React__default["default"].createElement(TableRowEditor$1, {
           content: new Content(schema, form),
           filter: editorFilter,
           onChange: change,
           onClose: closeAside,
           editable: canEdit
-        }) : null, rowChecked ? /*#__PURE__*/React__default["default"].createElement(TableSelector, {
+        }) : null, rowChecked ? /*#__PURE__*/React__default["default"].createElement(TableSelector$1, {
           schema: schema,
           actions: selectionActions
         }) : null);
@@ -5614,17 +5614,17 @@
       onSelect: playScenario
     })) : null, renderActions()), canQuery || canFilter ? /*#__PURE__*/React__default["default"].createElement("menu", {
       className: "table-page"
-    }, canQuery ? /*#__PURE__*/React__default["default"].createElement(TableQueries, {
+    }, canQuery ? /*#__PURE__*/React__default["default"].createElement(TableQueries$1, {
       schema: schema,
       url: url,
       user: user
-    }) : null, canFilter ? /*#__PURE__*/React__default["default"].createElement(TableFilters, {
+    }) : null, canFilter ? /*#__PURE__*/React__default["default"].createElement(TableFilters$1, {
       schema: schema,
       onSave: canQuery ? saveQuery : null
     }) : null) : null, /*#__PURE__*/React__default["default"].createElement("main", {
       key: id,
       className: "table-page"
-    }, /*#__PURE__*/React__default["default"].createElement(TableEditor, {
+    }, /*#__PURE__*/React__default["default"].createElement(TableEditor$1, {
       icon: icon,
       title: name,
       schema: schema,
@@ -5637,7 +5637,7 @@
     }), children ? /*#__PURE__*/React__default["default"].createElement("article", null, children) : null), renderAside());
   };
 
-  var TableRowEditor = function TableRowEditor(props) {
+  var TableRowEditor$1 = function TableRowEditor(props) {
     var name = props.name,
         content = props.content,
         filter = props.filter,
@@ -5666,7 +5666,7 @@
    */
 
 
-  var TableSelector = function TableSelector(props) {
+  var TableSelector$1 = function TableSelector(props) {
     var schema = props.schema,
         _props$actions2 = props.actions,
         actions = _props$actions2 === void 0 ? [] : _props$actions2;
@@ -5729,7 +5729,7 @@
    */
 
 
-  var TableQueries = function TableQueries(props) {
+  var TableQueries$1 = function TableQueries(props) {
     var remove = function remove(id) {
       try {
         return Promise.resolve(pageContext.removeQuery(id, user)).then(function () {
@@ -5791,7 +5791,7 @@
    */
 
 
-  var TableFilters = function TableFilters(props) {
+  var TableFilters$1 = function TableFilters(props) {
     var reload = function reload() {
       try {
         return Promise.resolve(pageContext.load(form)).then(function () {
@@ -5887,7 +5887,7 @@
    */
 
 
-  var TableEditor = function TableEditor(props) {
+  var TableEditor$1 = function TableEditor(props) {
     var checkOne = function checkOne(id, field, value) {
       check([id], value);
       return Promise.resolve();
@@ -6112,8 +6112,8 @@
    * Table Context
    */
 
-  var TableContext = function TableContext(url, field, host, urlQuery) {
-    var API = TableAPI(url, host);
+  var TableContext$1 = function TableContext(url, field, host, urlQuery) {
+    var API = TableAPI$1(url, host);
     return {
       all: [],
       checked: new Set([]),
@@ -6124,7 +6124,7 @@
         try {
           var _this2 = this;
 
-          var _temp5 = _catch(function () {
+          var _temp5 = _catch$1(function () {
             var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
               var field = filter[key];
 
@@ -6183,7 +6183,7 @@
         try {
           var _this5 = this;
 
-          var _temp7 = _catch(function () {
+          var _temp7 = _catch$1(function () {
             return Promise.resolve(API.create(form)).then(function () {
               return Promise.resolve(_this5.load()).then(function () {});
             });
@@ -6200,7 +6200,7 @@
         try {
           var _this7 = this;
 
-          var _temp9 = _catch(function () {
+          var _temp9 = _catch$1(function () {
             return Promise.resolve(API.update(form)).then(function () {
               return Promise.resolve(_this7.load()).then(function () {});
             });
@@ -6217,7 +6217,7 @@
         try {
           var _this9 = this;
 
-          var _temp11 = _catch(function () {
+          var _temp11 = _catch$1(function () {
             return Promise.resolve(API.remove(id)).then(function () {
               return Promise.resolve(_this9.load()).then(function () {});
             });
@@ -6237,7 +6237,7 @@
         try {
           var _this11 = this;
 
-          var _temp13 = _catch(function () {
+          var _temp13 = _catch$1(function () {
             return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
               _this11.queries = _API$queries;
             });
@@ -6254,7 +6254,7 @@
         try {
           var _this13 = this;
 
-          var _temp15 = _catch(function () {
+          var _temp15 = _catch$1(function () {
             return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
               return Promise.resolve(_this13.loadQueries(user)).then(function () {});
             });
@@ -6271,7 +6271,7 @@
         try {
           var _this15 = this;
 
-          var _temp17 = _catch(function () {
+          var _temp17 = _catch$1(function () {
             return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
               return Promise.resolve(_this15.loadQueries(user)).then(function () {});
             });
@@ -6291,7 +6291,7 @@
    */
 
 
-  var TableAPI = function TableAPI(url, host) {
+  var TableAPI$1 = function TableAPI(url, host) {
     var http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
     return {
       all: function all(filters) {
@@ -6350,6 +6350,1086 @@
     };
   };
 
+  /**
+   * Tabbed Table Page
+   */
+
+  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;
+  }
+  /**
+   * TableRowEditor
+   */
+
+
+  var TabbedTablePage = function TabbedTablePage(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 reload = function reload() {
+      try {
+        var _filter2;
+
+        var filter = (_filter2 = {}, _filter2[tab.field] = tab.value, _filter2);
+        return Promise.resolve(pageContext.load(filter, false)).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    var site = React.useContext(SiteContext);
+    var _props$id = props.id,
+        id = _props$id === void 0 ? "table" : _props$id,
+        icon = props.icon,
+        title = props.title,
+        name = props.name,
+        schema = props.schema,
+        url = props.url,
+        field = props.field,
+        host = props.host,
+        _props$autosave = props.autosave,
+        autosave = _props$autosave === void 0 ? true : _props$autosave,
+        _props$delay = props.delay,
+        delay = _props$delay === void 0 ? 1000 : _props$delay,
+        editable = props.editable,
+        _props$actions = props.actions,
+        actions = _props$actions === void 0 ? [] : _props$actions,
+        _props$dev = props.dev,
+        dev = _props$dev === void 0 ? false : _props$dev,
+        tableActions = props.tableActions,
+        _props$selectionActio = props.selectionActions,
+        selectionActions = _props$selectionActio === void 0 ? [] : _props$selectionActio,
+        _props$canFilter = props.canFilter,
+        canFilter = _props$canFilter === void 0 ? false : _props$canFilter,
+        _props$canAdd = props.canAdd,
+        canAdd = _props$canAdd === void 0 ? true : _props$canAdd,
+        _props$canDelete = props.canDelete,
+        canDelete = _props$canDelete === void 0 ? true : _props$canDelete,
+        _props$canEdit = props.canEdit,
+        canEdit = _props$canEdit === void 0 ? true : _props$canEdit,
+        _props$canQuery = props.canQuery,
+        canQuery = _props$canQuery === void 0 ? false : _props$canQuery,
+        urlQuery = props.urlQuery,
+        user = props.user,
+        groupBy = props.groupBy,
+        validator = props.validator,
+        scenario = props.scenario,
+        formFilter = props.formFilter,
+        tableFilter = props.tableFilter,
+        _props$editorFilter = props.editorFilter,
+        editorFilter = _props$editorFilter === void 0 ? false : _props$editorFilter,
+        children = props.children;
+
+    var _useContext = React.useContext(PageContext),
+        pageContext = _useContext[0],
+        setPageContext = _useContext[1];
+
+    var context = TableContext(url, field, host, urlQuery);
+    var selected = pageContext.selected,
+        tab = pageContext.tab;
+    var timer = React.useRef(null);
+
+    var _useState = React.useState(selected),
+        form = _useState[0],
+        setForm = _useState[1];
+
+    var _useState2 = React.useState([]),
+        tabs = _useState2[0],
+        setTabs = _useState2[1];
+
+    React.useEffect(function () {
+      try {
+        var _field = Object.values(schema).find(function (field) {
+          return field.tab && field.tab === true;
+        });
+
+        var _tabs = _field.options.map(function (option) {
+          return Object.assign({}, option, {
+            field: _field.id
+          });
+        });
+
+        setTabs(_tabs);
+        context.changeTab(_tabs[0]);
+        setPageContext(context);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }, []);
+    React.useEffect(function () {
+      try {
+        console.log("TAB", tab);
+
+        var _temp2 = function () {
+          if (tab) {
+            var _filter;
+
+            var filter = (_filter = {}, _filter[tab.field] = tab.value, _filter);
+            return Promise.resolve(pageContext.load(filter, false)).then(function () {
+              setPageContext(Object.assign({}, pageContext));
+            });
+          }
+        }();
+
+        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }, [tab]);
+    React.useEffect(function () {
+      setForm(selected);
+    }, [selected]);
+    React.useEffect(function () {
+      if (autosave) {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(function () {
+          if (canSave()) save();
+        }, delay);
+      }
+    }, [form]);
+
+    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__default["default"].createElement(CreateContentDialog, {
+        label: "Crear " + name,
+        type: schema,
+        onOK: onOK,
+        validator: validator,
+        filter: formFilter
+      }));
+    }
+
+    function saveQuery(filters) {
+      var onOK = function onOK(form) {
+        try {
+          form.filters = filters;
+          form.layout = {};
+          form.user = user;
+          form.url = url;
+          return Promise.resolve(pageContext.createQuery(form, user)).then(function () {
+            setPageContext(Object.assign({}, pageContext));
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      };
+
+      site.openDialog( /*#__PURE__*/React__default["default"].createElement(CreateContentDialog, {
+        label: "Nueva query",
+        type: QUERY,
+        onOK: onOK
+      }));
+    }
+
+    function change(next) {
+      setForm(next);
+    }
+
+    function canSave() {
+      var can = !equal__default["default"](form, selected);
+      return can;
+    }
+
+    function closeAside() {
+      pageContext.select(null);
+      setPageContext(Object.assign({}, pageContext));
+    }
+
+    function renderAside() {
+      var rowSelected = selected && form;
+      var rowChecked = pageContext.checked && pageContext.checked.size > 0;
+
+      if (rowSelected || rowChecked) {
+        return /*#__PURE__*/React__default["default"].createElement("aside", {
+          className: "table-page"
+        }, rowSelected ? /*#__PURE__*/React__default["default"].createElement(TableRowEditor, {
+          content: new Content(schema, form),
+          filter: editorFilter,
+          onChange: change,
+          onClose: closeAside,
+          editable: canEdit
+        }) : null, rowChecked ? /*#__PURE__*/React__default["default"].createElement(TableSelector, {
+          schema: schema,
+          actions: selectionActions
+        }) : null);
+      }
+
+      return null;
+    }
+
+    function renderActions() {
+      return actions.map(function (element) {
+        var action = function action() {
+          return element.props.action(pageContext);
+        };
+
+        var clone = React__default["default"].cloneElement(element, {
+          action: action
+        });
+        return clone;
+      });
+    }
+
+    function changeTab(id) {
+      var tab = tabs.find(function (tab) {
+        return tab.value === id;
+      });
+      pageContext.changeTab(tab);
+      setPageContext(Object.assign({}, pageContext));
+    }
+
+    function renderTabs() {
+      var selected = tab ? tab.value : null;
+      console.log(selected);
+      return /*#__PURE__*/React__default["default"].createElement(Tabs, {
+        selected: selected,
+        onChange: changeTab
+      }, tabs.map(function (tab) {
+        return /*#__PURE__*/React__default["default"].createElement(Tab, {
+          id: tab.value,
+          label: tab.label
+        });
+      }));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+      className: "table-page",
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, title)
+    }, canAdd ? /*#__PURE__*/React__default["default"].createElement(Button, {
+      icon: "add",
+      label: "A\xF1adir",
+      action: add,
+      raised: true
+    }) : null, "\xA0", /*#__PURE__*/React__default["default"].createElement(Button, {
+      icon: "refresh",
+      label: "Reload",
+      action: reload
+    }), dev ? /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
+      align: "alignRight"
+    }, /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+      label: "Cargar Escenario 1",
+      onSelect: playScenario
+    })) : null, renderActions()), canQuery || canFilter ? /*#__PURE__*/React__default["default"].createElement("menu", {
+      className: "table-page"
+    }, canQuery ? /*#__PURE__*/React__default["default"].createElement(TableQueries, {
+      schema: schema,
+      url: url,
+      user: user
+    }) : null, canFilter ? /*#__PURE__*/React__default["default"].createElement(TableFilters, {
+      schema: schema,
+      onSave: canQuery ? saveQuery : null
+    }) : null) : null, /*#__PURE__*/React__default["default"].createElement("main", {
+      key: id,
+      className: "table-page"
+    }, /*#__PURE__*/React__default["default"].createElement(TableEditor, {
+      icon: icon,
+      title: name,
+      tabs: renderTabs(),
+      schema: schema,
+      delay: delay,
+      editable: editable,
+      groupBy: groupBy,
+      filter: tableFilter,
+      actions: tableActions,
+      canDelete: canDelete
+    }), children ? /*#__PURE__*/React__default["default"].createElement("article", null, children) : null), renderAside());
+  };
+
+  var TableRowEditor = function TableRowEditor(props) {
+    var name = props.name,
+        content = props.content,
+        filter = props.filter,
+        editable = props.editable,
+        onChange = props.onChange,
+        onClose = props.onClose;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "table-row-editor"
+    }, /*#__PURE__*/React__default["default"].createElement(Header, {
+      icon: "local_offer",
+      title: name || "Propiedades"
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      action: onClose
+    })), /*#__PURE__*/React__default["default"].createElement("main", null, editable ? /*#__PURE__*/React__default["default"].createElement(ContentEditor, {
+      content: content,
+      onChange: onChange,
+      filter: filter
+    }) : /*#__PURE__*/React__default["default"].createElement(ContentViewer, {
+      content: content
+    })));
+  };
+  /**
+   * Table Selector
+   */
+
+
+  var TableSelector = function TableSelector(props) {
+    var schema = props.schema,
+        _props$actions2 = props.actions,
+        actions = _props$actions2 === void 0 ? [] : _props$actions2;
+
+    var _useContext2 = React.useContext(PageContext),
+        pageContext = _useContext2[0],
+        setPageContext = _useContext2[1];
+
+    var all = pageContext.all,
+        checked = pageContext.checked;
+    var count = checked.size + "/" + all.length;
+    var columns = Object.keys(schema).filter(function (key) {
+      return schema[key].selectorColumn === true;
+    }).map(function (key) {
+      var field = schema[key];
+      return {
+        id: field.id,
+        label: field.label
+      };
+    });
+    var rows = all.filter(function (item) {
+      return checked.has(item.id);
+    });
+    var table = {
+      columns: columns,
+      rows: rows || []
+    };
+    var buttons = actions.map(function (_ref) {
+      var label = _ref.label,
+          _action = _ref.action,
+          validate = _ref.validate;
+      return /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: label,
+        raised: true,
+        action: function action() {
+          return _action(checked, pageContext, function () {
+            try {
+              return Promise.resolve(pageContext.load()).then(function () {
+                setPageContext(Object.assign({}, pageContext));
+              });
+            } catch (e) {
+              return Promise.reject(e);
+            }
+          }, rows);
+        },
+        disabled: !validate(checked, rows)
+      });
+    });
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "table-selector"
+    }, /*#__PURE__*/React__default["default"].createElement(Header, {
+      icon: "checklist_rtl",
+      title: "Selecci\xF3n"
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "size"
+    }, count)), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(DataTable, table)), /*#__PURE__*/React__default["default"].createElement("footer", null, buttons));
+  };
+  /**
+   * Table Queries
+   */
+
+
+  var TableQueries = function TableQueries(props) {
+    var remove = function remove(id) {
+      try {
+        return Promise.resolve(pageContext.removeQuery(id, user)).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    var _useContext3 = React.useContext(PageContext),
+        pageContext = _useContext3[0],
+        setPageContext = _useContext3[1];
+
+    var url = props.url,
+        user = props.user;
+    var _pageContext$queries = pageContext.queries,
+        queries = _pageContext$queries === void 0 ? [] : _pageContext$queries;
+
+    var _useState3 = React.useState(),
+        selected = _useState3[0],
+        setSelected = _useState3[1];
+
+    function select(query) {
+      setSelected(query.id);
+      pageContext.changeFilters(query.filters);
+      setPageContext(Object.assign({}, pageContext));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+      className: "table-queries",
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Queries")
+    }), /*#__PURE__*/React__default["default"].createElement("main", {
+      className: "table-queries"
+    }, queries ? queries.filter(function (query) {
+      return query.url === url;
+    }).map(function (query) {
+      var style = selected === query.id ? "selected" : "";
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "table-queries-item " + style,
+        onClick: function onClick() {
+          return select(query);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "star",
+        size: "small"
+      }), /*#__PURE__*/React__default["default"].createElement("label", null, query.name), /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "close",
+        clickable: true,
+        size: "small",
+        action: function action() {
+          return remove(query.id);
+        }
+      }));
+    }) : /*#__PURE__*/React__default["default"].createElement("div", null, "...empty...")));
+  };
+  /**
+   * Table Filters
+   */
+
+
+  var TableFilters = function TableFilters(props) {
+    var reload = function reload() {
+      try {
+        return Promise.resolve(pageContext.load(form)).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    var change = function change(next) {
+      try {
+        setForm(next);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    var _useContext4 = React.useContext(PageContext),
+        pageContext = _useContext4[0],
+        setPageContext = _useContext4[1];
+
+    var filters = pageContext.filters;
+    var schema = props.schema,
+        onSave = props.onSave;
+
+    var _useState4 = React.useState({}),
+        form = _useState4[0],
+        setForm = _useState4[1];
+
+    var filterSchema = React.useMemo(function () {
+      var filterSchema = Object.assign({}, schema);
+
+      for (var key in filterSchema) {
+        if (filterSchema[key].filter === false) {
+          delete filterSchema[key];
+        } else {
+          if (filterSchema[key].type === TYPES.ENTITY) {
+            var fs = filterSchema[key].item;
+
+            for (var key in fs) {
+              if (fs[key].filter === false) delete fs[key];
+            }
+          }
+        }
+      } //Object.values(filterSchema).forEach(field => field.section = null)
+
+
+      delete filterSchema.flows;
+      return filterSchema;
+    }, [schema]);
+    React.useEffect(function () {
+      if (filters) setForm(filters);
+    }, [filters]);
+    React.useEffect(function () {
+      reload();
+    }, [form]);
+
+    function clear() {
+      change({});
+    }
+
+    function save() {
+      if (onSave) {
+        onSave(form);
+      }
+    }
+
+    var content = new Content(filterSchema, form);
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+      className: "table-filters",
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Filters")
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "filter_list_off",
+      size: "small",
+      clickable: true,
+      action: clear
+    }), onSave ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "save",
+      size: "small",
+      clickable: true,
+      action: save
+    }) : null), /*#__PURE__*/React__default["default"].createElement("main", {
+      className: "table-filters"
+    }, /*#__PURE__*/React__default["default"].createElement(ContentEditor, {
+      content: content,
+      onChange: change
+    })));
+  };
+  /**
+   * Table Editor
+   */
+
+
+  var TableEditor = function TableEditor(props) {
+    var checkOne = function checkOne(id, field, value) {
+      check([id], value);
+      return Promise.resolve();
+    };
+
+    var check = function check(ids, value) {
+      try {
+        pageContext.check(ids, value);
+        setPageContext(Object.assign({}, pageContext));
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    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(site.confirm("Are you sure ?")).then(function (confirm) {
+          var _temp3 = function () {
+            if (confirm) {
+              return Promise.resolve(pageContext.remove(id)).then(function () {
+                pageContext.clear();
+                setPageContext(Object.assign({}, pageContext));
+              });
+            }
+          }();
+
+          if (_temp3 && _temp3.then) return _temp3.then(function () {});
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    var site = React.useContext(SiteContext);
+
+    var _useContext5 = React.useContext(PageContext),
+        pageContext = _useContext5[0],
+        setPageContext = _useContext5[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,
+        canDelete = props.canDelete,
+        filter = props.filter,
+        actions = props.actions,
+        tabs = props.tabs;
+
+    var _useState5 = React.useState(props.groupBy),
+        groupBy = _useState5[0],
+        setGroupBy = _useState5[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 run(action, item) {
+      action.action(item.id, pageContext, function () {
+        try {
+          return Promise.resolve(pageContext.load()).then(function () {
+            setPageContext(Object.assign({}, pageContext));
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      });
+    }
+
+    function renderGroupLabel(groupName) {
+      var grouper = schema[groupBy];
+      if (!groupName || !grouper) return "";
+
+      if (grouper.options) {
+        var options = CHECK['isFunction'](grouper.options) ? grouper.options() : grouper.options;
+        var option = options.find(function (option) {
+          return option.value === groupName;
+        });
+        return option ? option.label : groupName;
+      } else {
+        return groupName;
+      }
+    }
+
+    function renderGroups() {
+      var items = filter ? filter(all) : all;
+      var groups = items.reduce(function (groups, item) {
+        var groupName = item[groupBy];
+        var group = groups[groupName];
+        if (!group) groups[groupName] = [];
+        groups[groupName].push(item);
+        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,
+              format: field.format,
+              item: field.item ? field.item : [],
+              onChange: field.id === "checked" ? checkOne : field.editable ? change : null,
+
+              /* checked has it´s own handler */
+              options: options
+            };
+          }),
+          rows: groups[groupName].map(function (item) {
+            item.checked = pageContext.checked ? pageContext.checked.has(item.id) : false;
+            item.actions = actions ? actions.map(function (_action2) {
+              return _action2.filter ? _action2.filter(item) ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+                icon: _action2.icon,
+                clickable: true,
+                size: "small",
+                action: function action() {
+                  return run(_action2, item);
+                }
+              }) : null : /*#__PURE__*/React__default["default"].createElement(Icon, {
+                icon: _action2.icon,
+                clickable: true,
+                size: "small",
+                action: function action() {
+                  return run(_action2, item);
+                }
+              });
+            }) : [];
+            if (canDelete) item.actions.push( /*#__PURE__*/React__default["default"].createElement(Icon, {
+              icon: "delete",
+              size: "small",
+              clickable: true,
+              action: function action() {
+                return remove(item.id);
+              }
+            }));
+            return item;
+          })
+        };
+        table.columns.push({
+          id: "actions"
+        });
+        var groupSize = groups[groupName].length;
+        var title = /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "size"
+        }, groupSize), renderGroupLabel(groupName));
+        return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+          key: groupName
+        }, /*#__PURE__*/React__default["default"].createElement(Header, {
+          title: title
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "size"
+        }, groupSize)), /*#__PURE__*/React__default["default"].createElement(DataTable, _extends({}, table, {
+          onRowSelection: select,
+          editable: editable,
+          onCheckAll: check
+        })));
+      });
+    }
+
+    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__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+      icon: icon,
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, title)
+    }, /*#__PURE__*/React__default["default"].createElement(DropDown, {
+      id: "groupBy",
+      label: "Agrupar Por",
+      value: groupBy,
+      options: buildGroupOptions(schema),
+      onChange: changeGroup
+    }), tabs), /*#__PURE__*/React__default["default"].createElement("main", {
+      className: "table-editor"
+    }, renderGroups()));
+  };
+  /**
+   * Table Context
+   */
+
+  var TableContext = function TableContext(url, field, host, urlQuery) {
+    var API = TableAPI(url, host);
+    return {
+      all: [],
+      checked: new Set([]),
+      selected: null,
+      filters: {},
+      queries: [],
+      tab: null,
+      load: function load(filter, like) {
+        try {
+          var _this2 = this;
+
+          var _temp5 = _catch(function () {
+            var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
+              var field = filter[key];
+
+              if (field) {
+                if (CHECK['isObject'](field)) {
+                  Object.keys(field).forEach(function (key2) {
+                    var subfield = field[key2];
+                    if (subfield) filters[key + "." + key2] = subfield;
+                  });
+                } else {
+                  filters[key] = field;
+                }
+              }
+
+              return filters;
+            }, {}) : [];
+
+            if (_this2.tab) {
+              filters[_this2.tab.field] = _this2.tab.value;
+            }
+
+            return Promise.resolve(API.all(filters, like)).then(function (data) {
+              _this2.all = field ? data[field] : data;
+            });
+          }, function (error) {
+            console.log(error);
+          });
+
+          return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
+      check: function check(ids, isChecked) {
+        var _this3 = this;
+
+        if (isChecked === void 0) {
+          isChecked = true;
+        }
+
+        if (isChecked) {
+          ids.forEach(function (id) {
+            return _this3.checked.add(id);
+          });
+        } else {
+          ids.forEach(function (id) {
+            return _this3.checked["delete"](id);
+          });
+        }
+      },
+      changeTab: function changeTab(tab) {
+        this.tab = tab;
+      },
+      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 _this5 = this;
+
+          var _temp7 = _catch(function () {
+            return Promise.resolve(API.create(form)).then(function () {
+              return Promise.resolve(_this5.load({}, false)).then(function () {});
+            });
+          }, function (error) {
+            console.log(error);
+          });
+
+          return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
+      update: function update(form) {
+        try {
+          var _this7 = this;
+
+          var _temp9 = _catch(function () {
+            return Promise.resolve(API.update(form)).then(function () {
+              return Promise.resolve(_this7.load()).then(function () {});
+            });
+          }, function (error) {
+            console.log(error);
+          });
+
+          return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
+      remove: function remove(id) {
+        try {
+          var _this9 = this;
+
+          var _temp11 = _catch(function () {
+            return Promise.resolve(API.remove(id)).then(function () {
+              return Promise.resolve(_this9.load()).then(function () {});
+            });
+          }, function (error) {
+            console.log(error);
+          });
+
+          return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
+      changeFilters: function changeFilters(filters) {
+        this.filters = filters;
+      },
+      loadQueries: function loadQueries(user) {
+        try {
+          var _this11 = this;
+
+          var _temp13 = _catch(function () {
+            return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
+              _this11.queries = _API$queries;
+            });
+          }, function (error) {
+            console.log(error);
+          });
+
+          return Promise.resolve(_temp13 && _temp13.then ? _temp13.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
+      createQuery: function createQuery(query, user) {
+        try {
+          var _this13 = this;
+
+          var _temp15 = _catch(function () {
+            return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
+              return Promise.resolve(_this13.loadQueries(user)).then(function () {});
+            });
+          }, function (error) {
+            console.log(error);
+          });
+
+          return Promise.resolve(_temp15 && _temp15.then ? _temp15.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
+      removeQuery: function removeQuery(id, user) {
+        try {
+          var _this15 = this;
+
+          var _temp17 = _catch(function () {
+            return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
+              return Promise.resolve(_this15.loadQueries(user)).then(function () {});
+            });
+          }, function (error) {
+            console.log(error);
+          });
+
+          return Promise.resolve(_temp17 && _temp17.then ? _temp17.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }
+    };
+  };
+  /**
+   * table API
+   */
+
+
+  var TableAPI = function TableAPI(url, host) {
+    var http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
+    return {
+      all: function all(filters, like) {
+        if (like === void 0) {
+          like = true;
+        }
+
+        var queryParams = "?";
+
+        if (filters) {
+          var filterQuery = Object.keys(filters).reduce(function (query, key) {
+            var value = filters[key];
+
+            if (typeof value === 'boolean') {
+              return query.concat(key + "=" + value + "&");
+            } else if (Array.isArray(value)) {
+              var param = value.length === 0 ? '' : value.reduce(function (param, item) {
+                param = param.concat(key + "=" + item + "&");
+                return param;
+              }, "");
+              return query.concat(param);
+            } else {
+              return like ? query.concat(key + "=%" + filters[key] + "%&") : 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);
+      },
+      queries: function queries(user, url2) {
+        var url3 = url2 ? url2 : url;
+        url3 = url3 + "queries";
+        if (user) url3 = url3 + ("?user=" + user);
+        return http.GET(url3);
+      },
+      createQuery: function createQuery(form, url2) {
+        var url3 = url2 ? url2 : url;
+        var body = JSON.stringify(form);
+        return http.POST(url3 + "queries", body);
+      },
+      removeQuery: function removeQuery(id, url2) {
+        var url3 = url2 ? url2 : url;
+        return http.DELETE(url3 + "queries/" + id);
+      }
+    };
+  };
+
   var isFunction = function isFunction(value) {
     return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
   };
@@ -6409,7 +7489,8 @@
   exports.TYPES = TYPES;
   exports.Tab = Tab;
   exports.TabbedContentEditor = TabbedContentEditor;
-  exports.TableEditor = TableEditor;
+  exports.TabbedTablePage = TabbedTablePage;
+  exports.TableEditor = TableEditor$1;
   exports.TablePage = TablePage;
   exports.Tabs = Tabs;
   exports.Text = Text;