ywana-core8 0.0.468 → 0.0.471

package/dist/index.modern.js

@@ -8,7 +8,7 @@ import { ReactNotifications, Store } from 'react-notifications-component';
 import 'react-notifications-component/dist/theme.css';
 import equal from 'deep-equal';
 
-function _catch$2(body, recover) {
+function _catch$3(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -40,7 +40,7 @@ var fetchAsync = function fetchAsync(method, URL, body, token, headers) {
       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;
 
@@ -4646,7 +4646,7 @@ var EditContentDialog = function EditContentDialog(_ref) {
  * Collection Page
  */
 
-function _catch$1(body, recover) {
+function _catch$2(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -5033,7 +5033,7 @@ var CollectionContext = function CollectionContext(url, field, host, page) {
       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;
           });
@@ -5059,7 +5059,7 @@ var CollectionContext = function CollectionContext(url, field, host, page) {
       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 () {});
           });
@@ -5076,7 +5076,7 @@ var CollectionContext = function CollectionContext(url, field, host, page) {
       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 () {});
           });
@@ -5093,7 +5093,7 @@ var CollectionContext = function CollectionContext(url, field, host, page) {
       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 () {});
           });
@@ -5110,7 +5110,7 @@ var CollectionContext = function CollectionContext(url, field, host, page) {
       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 () {});
           });
@@ -5127,7 +5127,7 @@ var CollectionContext = function CollectionContext(url, field, host, page) {
       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 () {});
           });
@@ -5339,7 +5339,7 @@ var QUERY = {
  * Table Page
  */
 
-function _catch(body, recover) {
+function _catch$1(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -5464,7 +5464,7 @@ var TablePage = function TablePage(props) {
       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 = useRef(null);
 
@@ -5564,13 +5564,13 @@ var TablePage = function TablePage(props) {
     if (rowSelected || rowChecked) {
       return /*#__PURE__*/React.createElement("aside", {
         className: "table-page"
-      }, rowSelected ? /*#__PURE__*/React.createElement(TableRowEditor, {
+      }, rowSelected ? /*#__PURE__*/React.createElement(TableRowEditor$1, {
         content: new Content(schema, form),
         filter: editorFilter,
         onChange: change,
         onClose: closeAside,
         editable: canEdit
-      }) : null, rowChecked ? /*#__PURE__*/React.createElement(TableSelector, {
+      }) : null, rowChecked ? /*#__PURE__*/React.createElement(TableSelector$1, {
         schema: schema,
         actions: selectionActions
       }) : null);
@@ -5611,17 +5611,17 @@ var TablePage = function TablePage(props) {
     onSelect: playScenario
   })) : null, renderActions()), canQuery || canFilter ? /*#__PURE__*/React.createElement("menu", {
     className: "table-page"
-  }, canQuery ? /*#__PURE__*/React.createElement(TableQueries, {
+  }, canQuery ? /*#__PURE__*/React.createElement(TableQueries$1, {
     schema: schema,
     url: url,
     user: user
-  }) : null, canFilter ? /*#__PURE__*/React.createElement(TableFilters, {
+  }) : null, canFilter ? /*#__PURE__*/React.createElement(TableFilters$1, {
     schema: schema,
     onSave: canQuery ? saveQuery : null
   }) : null) : null, /*#__PURE__*/React.createElement("main", {
     key: id,
     className: "table-page"
-  }, /*#__PURE__*/React.createElement(TableEditor, {
+  }, /*#__PURE__*/React.createElement(TableEditor$1, {
     icon: icon,
     title: name,
     schema: schema,
@@ -5634,7 +5634,7 @@ var TablePage = function TablePage(props) {
   }), children ? /*#__PURE__*/React.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,
@@ -5663,7 +5663,7 @@ var TableRowEditor = function TableRowEditor(props) {
  */
 
 
-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;
@@ -5726,7 +5726,7 @@ var TableSelector = function TableSelector(props) {
  */
 
 
-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 () {
@@ -5788,7 +5788,7 @@ var TableQueries = function TableQueries(props) {
  */
 
 
-var TableFilters = function TableFilters(props) {
+var TableFilters$1 = function TableFilters(props) {
   var reload = function reload() {
     try {
       return Promise.resolve(pageContext.load(form)).then(function () {
@@ -5884,7 +5884,7 @@ var TableFilters = function TableFilters(props) {
  */
 
 
-var TableEditor = function TableEditor(props) {
+var TableEditor$1 = function TableEditor(props) {
   var checkOne = function checkOne(id, field, value) {
     check([id], value);
     return Promise.resolve();
@@ -6109,8 +6109,8 @@ var TableEditor = function TableEditor(props) {
  * 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([]),
@@ -6121,7 +6121,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       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];
 
@@ -6180,7 +6180,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       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 () {});
           });
@@ -6197,7 +6197,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       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 () {});
           });
@@ -6214,7 +6214,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       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 () {});
           });
@@ -6234,7 +6234,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       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;
           });
@@ -6251,7 +6251,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       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 () {});
           });
@@ -6268,7 +6268,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
       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 () {});
           });
@@ -6288,7 +6288,7 @@ var TableContext = function TableContext(url, field, host, urlQuery) {
  */
 
 
-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) {
@@ -6347,9 +6347,1087 @@ var TableAPI = function TableAPI(url, host) {
   };
 };
 
+/**
+ * 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 = 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 = useContext(PageContext),
+      pageContext = _useContext[0],
+      setPageContext = _useContext[1];
+
+  var context = TableContext(url, field, host, urlQuery);
+  var selected = pageContext.selected,
+      tab = pageContext.tab;
+  var timer = useRef(null);
+
+  var _useState = useState(selected),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  var _useState2 = useState([]),
+      tabs = _useState2[0],
+      setTabs = _useState2[1];
+
+  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);
+    }
+  }, []);
+  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]);
+  useEffect(function () {
+    setForm(selected);
+  }, [selected]);
+  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.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.createElement(CreateContentDialog, {
+      label: "Nueva query",
+      type: QUERY,
+      onOK: onOK
+    }));
+  }
+
+  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() {
+    var rowSelected = selected && form;
+    var rowChecked = pageContext.checked && pageContext.checked.size > 0;
+
+    if (rowSelected || rowChecked) {
+      return /*#__PURE__*/React.createElement("aside", {
+        className: "table-page"
+      }, rowSelected ? /*#__PURE__*/React.createElement(TableRowEditor, {
+        content: new Content(schema, form),
+        filter: editorFilter,
+        onChange: change,
+        onClose: closeAside,
+        editable: canEdit
+      }) : null, rowChecked ? /*#__PURE__*/React.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.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.createElement(Tabs, {
+      selected: selected,
+      onChange: changeTab
+    }, tabs.map(function (tab) {
+      return /*#__PURE__*/React.createElement(Tab, {
+        id: tab.value,
+        label: tab.label
+      });
+    }));
+  }
+
+  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, "\xA0", /*#__PURE__*/React.createElement(Button, {
+    icon: "refresh",
+    label: "Reload",
+    action: reload
+  }), dev ? /*#__PURE__*/React.createElement(MenuIcon, {
+    align: "alignRight"
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    label: "Cargar Escenario 1",
+    onSelect: playScenario
+  })) : null, renderActions(), renderTabs()), canQuery || canFilter ? /*#__PURE__*/React.createElement("menu", {
+    className: "table-page"
+  }, canQuery ? /*#__PURE__*/React.createElement(TableQueries, {
+    schema: schema,
+    url: url,
+    user: user
+  }) : null, canFilter ? /*#__PURE__*/React.createElement(TableFilters, {
+    schema: schema,
+    onSave: canQuery ? saveQuery : null
+  }) : null) : null, /*#__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,
+    filter: tableFilter,
+    actions: tableActions,
+    canDelete: canDelete
+  }), children ? /*#__PURE__*/React.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.createElement("div", {
+    className: "table-row-editor"
+  }, /*#__PURE__*/React.createElement(Header, {
+    icon: "local_offer",
+    title: name || "Propiedades"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    action: onClose
+  })), /*#__PURE__*/React.createElement("main", null, editable ? /*#__PURE__*/React.createElement(ContentEditor, {
+    content: content,
+    onChange: onChange,
+    filter: filter
+  }) : /*#__PURE__*/React.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 = 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.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.createElement("div", {
+    className: "table-selector"
+  }, /*#__PURE__*/React.createElement(Header, {
+    icon: "checklist_rtl",
+    title: "Selecci\xF3n"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "size"
+  }, count)), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(DataTable, table)), /*#__PURE__*/React.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 = 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 = useState(),
+      selected = _useState3[0],
+      setSelected = _useState3[1];
+
+  function select(query) {
+    setSelected(query.id);
+    pageContext.changeFilters(query.filters);
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    className: "table-queries",
+    title: /*#__PURE__*/React.createElement(Text, null, "Queries")
+  }), /*#__PURE__*/React.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.createElement("div", {
+      className: "table-queries-item " + style,
+      onClick: function onClick() {
+        return select(query);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: "star",
+      size: "small"
+    }), /*#__PURE__*/React.createElement("label", null, query.name), /*#__PURE__*/React.createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      size: "small",
+      action: function action() {
+        return remove(query.id);
+      }
+    }));
+  }) : /*#__PURE__*/React.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 = useContext(PageContext),
+      pageContext = _useContext4[0],
+      setPageContext = _useContext4[1];
+
+  var filters = pageContext.filters;
+  var schema = props.schema,
+      onSave = props.onSave;
+
+  var _useState4 = useState({}),
+      form = _useState4[0],
+      setForm = _useState4[1];
+
+  var filterSchema = 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]);
+  useEffect(function () {
+    if (filters) setForm(filters);
+  }, [filters]);
+  useEffect(function () {
+    reload();
+  }, [form]);
+
+  function clear() {
+    change({});
+  }
+
+  function save() {
+    if (onSave) {
+      onSave(form);
+    }
+  }
+
+  var content = new Content(filterSchema, form);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    className: "table-filters",
+    title: /*#__PURE__*/React.createElement(Text, null, "Filters")
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "filter_list_off",
+    size: "small",
+    clickable: true,
+    action: clear
+  }), onSave ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "save",
+    size: "small",
+    clickable: true,
+    action: save
+  }) : null), /*#__PURE__*/React.createElement("main", {
+    className: "table-filters"
+  }, /*#__PURE__*/React.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 = useContext(SiteContext);
+
+  var _useContext5 = 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;
+
+  var _useState5 = 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.createElement(Icon, {
+              icon: _action2.icon,
+              clickable: true,
+              size: "small",
+              action: function action() {
+                return run(_action2, item);
+              }
+            }) : null : /*#__PURE__*/React.createElement(Icon, {
+              icon: _action2.icon,
+              clickable: true,
+              size: "small",
+              action: function action() {
+                return run(_action2, item);
+              }
+            });
+          }) : [];
+          if (canDelete) item.actions.push( /*#__PURE__*/React.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.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+        className: "size"
+      }, groupSize), renderGroupLabel(groupName));
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: groupName
+      }, /*#__PURE__*/React.createElement(Header, {
+        title: title
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "size"
+      }, groupSize)), /*#__PURE__*/React.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.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, 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);
 };
 
-export { Avatar, Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, CollectionTree, Content, ContentEditor, ContentForm, CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, FileExplorer, FileIconsView, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES, Tab, TabbedContentEditor, TableEditor, TablePage, Tabs, Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, isFunction };
+export { Avatar, Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, CollectionTree, Content, ContentEditor, ContentForm, CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, FileExplorer, FileIconsView, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES, Tab, TabbedContentEditor, TabbedTablePage, TableEditor$1 as TableEditor, TablePage, Tabs, Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, isFunction };
 //# sourceMappingURL=index.modern.js.map