ywana-core8 0.0.535 → 0.0.538

package/dist/index.modern.js

@@ -4044,7 +4044,7 @@ var TabbedContentEditor = function TabbedContentEditor(_ref2) {
         fields = section.fields;
     return /*#__PURE__*/React.createElement("section", {
       key: title
-    }, /*#__PURE__*/React.createElement("nav", null, "\xA0"), /*#__PURE__*/React.createElement("main", null, grouped ? group(section).map(function (group) {
+    }, grouped ? group(section).map(function (group) {
       return /*#__PURE__*/React.createElement(Fragment, null, group.name.length > 0 ? /*#__PURE__*/React.createElement("div", {
         className: "group-caption"
       }, group.name) : null, group.fields.filter(function (field) {
@@ -4070,7 +4070,7 @@ var TabbedContentEditor = function TabbedContentEditor(_ref2) {
         onChange: change,
         content: content
       });
-    })));
+    }));
   })));
 };
 /**
@@ -4533,9 +4533,7 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
       Feeder = field.Feeder,
       Renderer = field.Renderer,
       _field$Adder = field.Adder,
-      Adder = _field$Adder === void 0 ? true : _field$Adder,
-      _field$editable3 = field.editable,
-      editable = _field$editable3 === void 0 ? true : _field$editable3;
+      Adder = _field$Adder === void 0 ? true : _field$Adder;
 
   function add(rows) {
     if (onChange) {
@@ -4561,7 +4559,9 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
     }
   }
 
-  var columns = Object.values(item).map(function (item) {
+  var columns = Object.values(item).filter(function (field) {
+    return field.column === true;
+  }).map(function (item) {
     return _extends({}, item, {
       onChange: change
     });
@@ -4570,7 +4570,7 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
     id: 'actions',
     label: 'Actions'
   });
-  var rows = value.map(function (item, index) {
+  value.map(function (item, index) {
     return _extends({}, item, {
       id: index,
       actions: [/*#__PURE__*/React.createElement(Icon, {
@@ -4583,26 +4583,23 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
       })]
     });
   });
-  var table = {
-    columns: columns,
-    rows: rows
-  };
   return /*#__PURE__*/React.createElement("div", {
     className: "collection-editor"
-  }, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(Text, {
-    use: "caption"
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: "actions"
-  }, Feeder ? /*#__PURE__*/React.createElement(Feeder, {
-    onAdd: add
-  }) : null)), Renderer ? /*#__PURE__*/React.createElement(Renderer, {
+  }, Renderer ? /*#__PURE__*/React.createElement(Renderer, {
     field: field,
     value: value,
     onRemove: remove,
     onChange: onChange
-  }) : /*#__PURE__*/React.createElement(DataTable, _extends({}, table, {
-    editable: editable
-  })), /*#__PURE__*/React.createElement("footer", null, Adder ? /*#__PURE__*/React.createElement(CollectionAdder, {
+  }) // : <DataTable {...table} editable={editable} />
+  : /*#__PURE__*/React.createElement(TableEditor$2, {
+    icon: "info",
+    title: label,
+    data: value,
+    schema: item,
+    groupBy: "field1"
+  }), /*#__PURE__*/React.createElement("footer", null, Feeder ? /*#__PURE__*/React.createElement(Feeder, {
+    onAdd: add
+  }) : null, Adder ? /*#__PURE__*/React.createElement(CollectionAdder, {
     item: item,
     onAdd: add
   }) : null));
@@ -4677,6 +4674,166 @@ var CollectionAdder = function CollectionAdder(_ref11) {
     action: toggle
   }));
 };
+/**
+ * Table Editor
+ */
+
+
+var TableEditor$2 = function TableEditor(props) {
+  var select = function select(row) {
+    try {
+      if (onSelect) onSelect(row.id);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var _props$data = props.data,
+      data = _props$data === void 0 ? [] : _props$data,
+      icon = props.icon,
+      title = props.title,
+      schema = props.schema,
+      editable = props.editable,
+      canDelete = props.canDelete,
+      filter = props.filter,
+      actions = props.actions,
+      className = props.className;
+
+  var _useState5 = useState(props.groupBy),
+      groupBy = _useState5[0],
+      setGroupBy = _useState5[1];
+
+  function changeGroup(id, value) {
+    setGroupBy(value);
+  }
+
+  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(data) : data;
+    if (items.length === 0) return /*#__PURE__*/React.createElement("div", {
+      className: "empty-message"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: "search_off"
+    }), /*#__PURE__*/React.createElement(Text, null, "No Result Found"));
+    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.actions = actions ? actions.map(function (_action) {
+            return _action.filter ? _action.filter(item) ? /*#__PURE__*/React.createElement(Icon, {
+              icon: _action.icon,
+              clickable: true,
+              size: "small",
+              action: function action() {
+                return run(_action, item);
+              }
+            }) : null : /*#__PURE__*/React.createElement(Icon, {
+              icon: _action.icon,
+              clickable: true,
+              size: "small",
+              action: function action() {
+                return run(_action, 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,
+        className: className
+      })));
+    });
+  }
+
+  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()));
+};
 
 /**
  * Create Content Dialog
@@ -4916,6 +5073,7 @@ var CollectionPage = function CollectionPage(props) {
       canFilter = _props$canFilter === void 0 ? false : _props$canFilter,
       _props$canAdd = props.canAdd,
       canAdd = _props$canAdd === void 0 ? false : _props$canAdd,
+      searchBy = props.searchBy,
       _props$autosave = props.autosave,
       autosave = _props$autosave === void 0 ? false : _props$autosave,
       _props$delay = props.delay,
@@ -4993,10 +5151,12 @@ var CollectionPage = function CollectionPage(props) {
     icon: icon,
     levels: levels,
     onSelect: onSelect,
-    sorter: sorter
+    sorter: sorter,
+    searchBy: searchBy
   }) : /*#__PURE__*/React.createElement(CollectionList, {
     groupBy: groupBy,
-    onSelect: onSelect
+    onSelect: onSelect,
+    searchBy: searchBy
   })), /*#__PURE__*/React.createElement("main", {
     key: id,
     className: "collection-page " + className
@@ -5086,7 +5246,9 @@ var CollectionList = function CollectionList(props) {
   };
 
   var groupBy = props.groupBy,
-      onSelect = props.onSelect;
+      onSelect = props.onSelect,
+      _props$searchBy = props.searchBy,
+      searchBy = _props$searchBy === void 0 ? [] : _props$searchBy;
 
   var _useContext2 = useContext(PageContext),
       pageContext = _useContext2[0],
@@ -5095,12 +5257,32 @@ var CollectionList = function CollectionList(props) {
   var _pageContext$all = pageContext.all,
       all = _pageContext$all === void 0 ? [] : _pageContext$all;
 
+  var _useState2 = useState(),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
   function clear() {
     pageContext.clear();
     setPageContext(Object.assign({}, pageContext));
   }
 
-  var items = all ? all.map(function (content) {
+  function changeSearch(id, value) {
+    setFilter(value);
+  }
+
+  function search() {
+    var items = filter ? all.filter(function (item) {
+      var result = searchBy.some(function (fieldName) {
+        var value = item[fieldName];
+        return value ? value.indexOf(filter.toUpperCase()) >= 0 : false;
+      });
+      return result;
+    }) : all;
+    return items;
+  }
+
+  var items = search();
+  var items2 = items.map(function (content) {
     return {
       id: content.id,
       line1: content.name || content.centre || content.tag,
@@ -5108,12 +5290,20 @@ var CollectionList = function CollectionList(props) {
       line2: content.description,
       content: content
     };
-  }) : [];
-  return /*#__PURE__*/React.createElement(List, {
-    items: items,
+  });
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(List, {
+    items: items2,
     onSelect: select,
     groupBy: groupBy
-  });
+  })), /*#__PURE__*/React.createElement("footer", null, /*#__PURE__*/React.createElement("div", {
+    className: "search-box"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    icon: "search",
+    label: "Search",
+    onChange: changeSearch,
+    outlined: true,
+    className: "search-box"
+  }))));
 };
 /**
  * Collection Tree
@@ -5137,7 +5327,9 @@ var CollectionTree = function CollectionTree(props) {
       icon = _props$icon === void 0 ? "description" : _props$icon,
       levels = props.levels,
       onSelect = props.onSelect,
-      sorter = props.sorter;
+      sorter = props.sorter,
+      _props$searchBy2 = props.searchBy,
+      searchBy = _props$searchBy2 === void 0 ? [] : _props$searchBy2;
 
   var _useContext3 = useContext(PageContext),
       pageContext = _useContext3[0],
@@ -5146,16 +5338,16 @@ var CollectionTree = function CollectionTree(props) {
   var _pageContext$all2 = pageContext.all,
       all = _pageContext$all2 === void 0 ? [] : _pageContext$all2;
 
-  var _useState2 = useState(),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
+  var _useState3 = useState(),
+      filter = _useState3[0],
+      setFilter = _useState3[1];
 
   function clear() {
     pageContext.clear();
     setPageContext(Object.assign({}, pageContext));
   }
 
-  function search(id, value) {
+  function changeSearch(id, value) {
     setFilter(value);
   }
 
@@ -5209,17 +5401,26 @@ var CollectionTree = function CollectionTree(props) {
     });
   }
 
-  var items = sorter ? sorter(all) : all;
-  var items2 = filter ? items.filter(function (item) {
-    return item.name.toUpperCase().indexOf(filter.toUpperCase()) >= 0;
-  }) : items;
+  function search() {
+    var items = filter ? all.filter(function (item) {
+      var result = searchBy.some(function (fieldName) {
+        var value = item[fieldName];
+        return value ? value.indexOf(filter.toUpperCase()) >= 0 : false;
+      });
+      return result;
+    }) : all;
+    return items;
+  }
+
+  var items = search();
+  var items2 = sorter ? sorter(items) : items;
   var nodes = generateNodes(levels, items2);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(Tree, null, renderNodes(nodes))), /*#__PURE__*/React.createElement("footer", null, /*#__PURE__*/React.createElement("div", {
     className: "search-box"
   }, /*#__PURE__*/React.createElement(TextField, {
     icon: "search",
     label: "Search",
-    onChange: search,
+    onChange: changeSearch,
     outlined: true,
     className: "search-box"
   }))));
@@ -5265,9 +5466,9 @@ var CollectionEditor = function CollectionEditor(props) {
       delay = _props$delay2 === void 0 ? 1000 : _props$delay2;
   var timer = useRef(null);
 
-  var _useState3 = useState(selected),
-      form = _useState3[0],
-      setForm = _useState3[1];
+  var _useState4 = useState(selected),
+      form = _useState4[0],
+      setForm = _useState4[1];
 
   useEffect(function () {
     setForm(selected);