ywana-core8 0.0.19 → 0.0.23

package/dist/index.cjs

@@ -9,7 +9,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
 var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(ResumableJS);
 
-function _catch$1(body, recover) {
+function _catch$2(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -40,7 +40,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;
 
@@ -241,7 +241,6 @@ var CheckBox = function CheckBox(props) {
   }
 
   var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
-  console.log(label, value);
   return value === true ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "checkbox",
     key: id + "1"
@@ -806,7 +805,7 @@ var Tabs = function Tabs(props) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "tabs"
   }, tabs, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "tab-filler"
+    className: "tab-filler"
   }));
 };
 /**
@@ -1092,6 +1091,7 @@ var DataTableRow = function DataTableRow(props) {
     }
   }, columns.map(function (column) {
     return /*#__PURE__*/React__default["default"].createElement(DataTableCell, {
+      key: row.id,
       row: row,
       column: column,
       cell: row[column.id],
@@ -1317,7 +1317,8 @@ var StringCellEditor = function StringCellEditor(_ref5) {
 var TokenField = function TokenField(_ref) {
   var id = _ref.id,
       label = _ref.label,
-      init = _ref.init,
+      _ref$init = _ref.init,
+      init = _ref$init === void 0 ? [] : _ref$init,
       onChange = _ref.onChange;
   var mounted = React.useRef(false);
 
@@ -3396,7 +3397,7 @@ var CreateContentDialog = function CreateContentDialog(_ref) {
   }));
 };
 
-function _catch(body, recover) {
+function _catch$1(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -3410,7 +3411,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
  */
@@ -3765,7 +3766,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;
           });
@@ -3791,7 +3792,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 () {});
           });
@@ -3808,7 +3809,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 () {});
           });
@@ -3825,7 +3826,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 () {});
           });
@@ -3842,7 +3843,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 () {});
           });
@@ -3859,7 +3860,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 () {});
           });
@@ -3881,26 +3882,604 @@ 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 = React.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 = React.useContext(PageContext),
+      pageContext = _useContext[0],
+      setPageContext = _useContext[1];
+
+  var selected = pageContext.selected;
+  var timer = React.useRef(null);
+
+  var _useState = React.useState(selected),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  React.useEffect(function () {
+    setForm(selected);
+  }, [selected]);
+  React.useEffect(function () {
+    if (autosave) {
+      clearTimeout(timer.current);
+      timer.current = setTimeout(function () {
+        if (canSave()) save();
+      }, delay);
+    }
+  }, [form]);
+  React.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__default["default"].createElement(EditContentDialog, {
+      label: "Crear " + name,
+      type: schema,
+      onOK: onOK,
+      validator: validator
+    }));
+  }
+
+  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() {
+    if (selected && form) {
+      var content = new Content(schema, form);
+      return /*#__PURE__*/React__default["default"].createElement("aside", {
+        className: "table-page"
+      }, /*#__PURE__*/React__default["default"].createElement(Header, {
+        icon: "local_offer",
+        title: selected.name || "Propiedades"
+      }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "close",
+        clickable: true,
+        action: closeAside
+      })), /*#__PURE__*/React__default["default"].createElement(ContentEditor, {
+        content: content,
+        onChange: change
+      }));
+    }
+
+    return null;
+  }
+
+  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, dev ? /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
+    align: "alignRight"
+  }, /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+    label: "Cargar Escenario 1",
+    onSelect: playScenario
+  })) : null, actions), /*#__PURE__*/React__default["default"].createElement("menu", {
+    className: "table-page"
+  }, /*#__PURE__*/React__default["default"].createElement(TableFilters, {
+    schema: schema
+  })), /*#__PURE__*/React__default["default"].createElement("main", {
+    key: id,
+    className: "table-page"
+  }, /*#__PURE__*/React__default["default"].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 = React.useContext(PageContext),
+      pageContext = _useContext2[0],
+      setPageContext = _useContext2[1];
+
+  var schema = props.schema;
+
+  var _useState2 = React.useState({}),
+      form = _useState2[0],
+      setForm = _useState2[1];
+
+  var filterSchema = React.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__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+    title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Filtros")
+  }, /*#__PURE__*/React__default["default"].createElement(Button, {
+    icon: "filter_list_off",
+    label: "Limpiar",
+    action: clear
+  })), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].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 = React.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 = React.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__default["default"].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__default["default"].createElement(React.Fragment, {
+        key: groupName
+      }, /*#__PURE__*/React__default["default"].createElement(Header, {
+        title: groupName
+      }), /*#__PURE__*/React__default["default"].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__default["default"].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__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
+  })), /*#__PURE__*/React__default["default"].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 if (Array.isArray(filters[key])) {
+            var param = filters[key].length === 0 ? '' : filters[key].reduce(function (param, field) {
+              param.concat(key + "=" + field + "&");
+            }, '');
+            return query.concat(param);
+          } 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);
@@ -4223,6 +4802,7 @@ exports.Stack = Stack;
 exports.TYPES = TYPES;
 exports.Tab = Tab;
 exports.TabbedContentEditor = TabbedContentEditor;
+exports.TablePage = TablePage;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextField = TextField;