ywana-core8 0.0.408 → 0.0.411

package/package.json

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

package/src/domain/ContentEditor.js

@@ -249,7 +249,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
       case FORMATS.COLOR: return <ColorField id={id} onChange={change} value={value}/>
       case FORMATS.HTML: return <Editor id={id} value={value} onChange={change} content={content} />
       case FORMATS.DATE: return <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} />
-      case FORMATS.TOKENS: return <TokenField id={id} label={label} onChange={change} readOnly={!editable} options={options} />
+      case FORMATS.TOKENS: return <TokenField id={id} label={label} onChange={change} readOnly={!editable} options={buildOptions()} />
       default:
         return options ? (
           <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} predictive={predictive} />

package/src/domain/ContentEditor.test.js

@@ -3,15 +3,19 @@ import { ContentEditor } from './ContentEditor'
 import { Content, FORMATS, TYPES } from './ContentType'
 import './ContentEditor.test.css'
 
+function buildTokenOptions() {
+    return [
+        {label: "One", value: 1 },
+        {label: "Two", value: 2 },
+        {label: "Thressse", value: 3 },
+    ]
+}
+
 const schema = {
     name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "Name" },
     field1: { id: "field1", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field1", multivalue: true },
     field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field2" },
-    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, label: "field3", options: [
-        {label: "One", value: 1 },
-        {label: "Two", value: 2 },
-        {label: "Three", value: 3 },
-    ] },
+    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, label: "field3", options: buildTokenOptions },
     field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR, required: true, label: "Color" },
 }
 

package/src/domain/TablePage.js

@@ -265,10 +265,17 @@ const TableFilters = (props) => {
         for (var key in filterSchema) {
             if (filterSchema[key].filter === false) {
                 delete filterSchema[key]
-            } else if (filterSchema[key].type === TYPES.ENTITY) {
-                const fs = filterSchema[key].item
-                for (var key in fs) {
-                    if (fs[key].filter === false) delete fs[key]
+            } else {
+
+                if (filterSchema[key].type === TYPES.ENTITY) {
+                    const fs = filterSchema[key].item
+                    for (var key in fs) {
+                        if (fs[key].filter === false) delete fs[key]
+                    }
+                }
+                // TODO: check this
+                if (filterSchema[key].defValue) {
+                    change({ [key] : defValue })
                 }
             }
         }

package/src/html/table.js

@@ -15,6 +15,7 @@ export const DataTable = (props) => {
 
     const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false } = props
     const [sortDir, setSortDir] = useState({})
+    const [allChecked, setAllChecked] = useState(false)
 
     function multiSort(array, sortObject = {}) {
 
@@ -65,6 +66,7 @@ export const DataTable = (props) => {
 
     function checkAll(id, value) {
         const ids = rows.map(row => row.id)
+        setAllChecked(value)
         if (onCheckAll) onCheckAll(ids, value)
     }
 
@@ -79,7 +81,7 @@ export const DataTable = (props) => {
                             const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v=>v.column===true).length] : [2, 1]
                             return (
                                 <th key={id} rowSpan={rowspan} colSpan={colspan}>
-                                    {id === "checked" ? <CheckBox onChange={checkAll} /> : <Text key={`th_${id}`}>{label}</Text>}
+                                    {id === "checked" ? <CheckBox onChange={checkAll} value={allChecked} /> : <Text key={`th_${id}`}>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>
                             )

package/src/html/table.test.js

@@ -3,6 +3,13 @@ import { DataTable } from './table'
 
 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" }
+        ]
+    )
+
     function select(row) {
         console.log('select',row)
     }
@@ -11,6 +18,11 @@ const TableTest = (prop) => {
         console.log('check', id, checked, c)
     }
 
+    function checkAll(ids, checked) {
+        const next = rows.map( row => Object.assign({}, row, { checked }))
+        setRows(next)
+    }
+
     const table = {
         columns : [
             { id: "checked", onChange: check },
@@ -18,15 +30,12 @@ const TableTest = (prop) => {
             { id: "thumb", label: "Thumb", type: "String", format: "IMG" },
 
         ],
-        rows: [
-            { checked: true, name: "John Smith", thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png"},
-            { checked: false, name: "Ann Martin" },
-        ]
+        rows
     }
 
     return (
         <>
-           <DataTable {...table} onRowSelection={select}/>
+           <DataTable {...table} onRowSelection={select} onCheckAll={checkAll}/>
         </>
     )
 }

package/src/html/tokenfield.css

@@ -1,5 +1,4 @@
 .tokenField {
-    max-height: 3.8rem;
     min-height: 3.8;
     position: relative;
     border-bottom: solid 1px var(--divider-color);