ywana-core8 0.0.477 → 0.0.480

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.477",
+  "version": "0.0.480",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/domain/CollectionPage.js

@@ -15,7 +15,18 @@ import "./CollectionPage.css"
 export const CollectionPage = (props) => {
 
     const site = useContext(SiteContext)
-    const { id = "collection", icon, title, name = "Collection 1", schema, url, field, host, page, fetching= false, groupBy, editor, autosave = false, delay = 1000, actions, levels, onSelect, children } = props
+    const { 
+        id = "collection", 
+        icon, title, name = "Collection 1", 
+        schema, url, field, host, page, fetching= false, 
+        actions = [], onSelect,
+        canFilter = false, canAdd = false, canDelete = false, canEdit = false,
+        autosave = false, delay = 1000, 
+        groupBy, levels, 
+        editor, 
+        children 
+    } = props
+
     const [pageContext, setPageContext] = useContext(PageContext)
     const context = CollectionContext(url, field, host, page, fetching)
 
@@ -48,13 +59,15 @@ export const CollectionPage = (props) => {
     return (
         <Fragment>
             <Header className="collection-page" title={<Text>{title}</Text>}>
-                <Button icon="add" label="Add" action={add} />
+                { canAdd ? <Button icon="add" label="Add" action={add} /> : false }
+                &nbsp;
                 <Button icon="refresh" label="Reload" action={reload} />
                 {renderActions()}
             </Header>
             <menu className="collection-page">
                 <Header title={<Text>Lista de {name}</Text>} >
                 </Header>
+                {canFilter ? <CollectionFilters schema={schema}/> : null }
                 {levels ? <CollectionTree levels={levels} onSelect={onSelect}/> : <CollectionList groupBy={groupBy} onSelect={onSelect}/>}
             </menu>
             <main key={id} className="collection-page">
@@ -65,6 +78,20 @@ export const CollectionPage = (props) => {
     )
 }
 
+/**
+ * Collection Filters
+ */
+const CollectionFilters = (props) => {
+
+    const { schema } = props
+
+    return (
+        <div className="collection-filters">
+            TODO: filters
+        </div>
+    )
+}
+
 /**
  * Collection List
  */
@@ -88,7 +115,7 @@ const CollectionList = (props) => {
 
     const items = all ? all.map(content => ({
         id: content.id,
-        line1: content.name,
+        line1: content.name || content.centre || content.tag, // centre: Signflow legacy
         line2: content.description,
         content
     })) : []

package/src/html/table.css

@@ -2,6 +2,7 @@
     overflow: hidden;
     border: solid 0px var(--divider-color);
     background-color: var(--paper-color);
+    overflow: auto;
 }
 
 .datatable8.outlined {
@@ -15,9 +16,10 @@
 .datatable8 thead  {
     position: sticky;
     top: 0px;
-    background-color: rgba(200,200,200,.4);
+    background-color: rgba(240,240,240);
     overflow: hidden;
     color: var(--text-color-lighter);
+    z-index: 2000;
 }
 
 .datatable8 thead tr {

package/src/html/table.js

@@ -14,7 +14,7 @@ const isFunction = value => value && (Object.prototype.toString.call(value) ===
  */
 export const DataTable = (props) => {
 
-    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false } = props
+    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className} = props
     const [sortDir, setSortDir] = useState({})
     const [allChecked, setAllChecked] = useState(false)
 
@@ -73,7 +73,7 @@ export const DataTable = (props) => {
 
     const style = outlined ? "outlined" : ""
     return (
-        <div className={`datatable8 ${style}`}>
+        <div className={`datatable8 ${className} ${style}`}>
             <table>
                 <thead>
                     <tr>

package/src/html/table.test.js

@@ -7,7 +7,14 @@ const TableTest = (prop) => {
     const [rows, setRows] = useState(
         [
             { id: 1, checked: false, name: "John Smith", thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png"},
-            { id: 2, checked: false, name: "Ann Martin", color: "#CCFFFF" }
+            { id: 2, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 3, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 4, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 5, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 6, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 7, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 8, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 9, checked: false, name: "Ann Martin", color: "#CCFFFF" },
         ]
     )
 
@@ -29,6 +36,7 @@ const TableTest = (prop) => {
     }
 
     const table = {
+        className: "xxx",
         editable: true,
         columns : [
             { id: "checked", onChange: check },