ywana-core8 0.0.486 → 0.0.489

package/package.json

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

package/src/domain/CollectionPage.js

@@ -81,14 +81,50 @@ export const CollectionPage = (props) => {
 /**
  * Collection Filters
  */
-const CollectionFilters = (props) => {
+export const CollectionFilters = (props) => {
 
-    const { schema } = props
+    const { schema, onChange } = props
+    const [form, setForm] = useState({})
 
+    const filterSchema = useMemo(() => {
+        const filterSchema = Object.assign({}, schema)
+        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]
+                    }
+                }
+            }
+        }
+        return filterSchema
+    }, [schema])
+
+    useEffect(() => {
+        if (onChange) onChange(form)
+    }, [form])
+
+    async function change(next) {
+        setForm(next)
+    }
+
+    function clear() {
+        change({})
+    }
+
+    const content = new Content(filterSchema, form)
     return (
-        <div className="collection-filters">
-            TODO: filters
-        </div>
+        <Fragment>
+            <Header className="table-filters" title={<Text>Filters</Text>} >
+                <Icon icon="filter_list_off" size="small" clickable action={clear} />
+            </Header>
+            <main className="table-filters">
+                <ContentEditor content={content} onChange={change} />
+            </main>
+        </Fragment>
     )
 }
 

package/src/domain/ContentEditor.js

@@ -4,6 +4,7 @@ import { CHECK, Content, TYPES } from './ContentType';
 import './ContentEditor.css';
 import { FORMATS } from './ContentType';
 import { ColorField } from '../html/color';
+import { DateRange } from '../html/textfield';
 
 /**
  * Content Editor

package/src/domain/ContentType.js

@@ -16,7 +16,7 @@ export const TYPES = {
 export const FORMATS = {
     NONE: '',
     DATE: 'date',
-    DATERANGE: 'DATARANGE',
+    DATERANGE: 'DATERANGE',
     TIME: 'time',
     EMAIL: 'email',
     HTML: 'HTML',

package/src/domain/index.js

@@ -3,6 +3,6 @@ export { ContentForm } from './ContentForm'
 export { ContentEditor, TabbedContentEditor, CollectionEditor, TreededContentEditor, FieldEditor, ListEditor } from './ContentEditor'
 export { CreateContentDialog } from './CreateContentDialog'
 export { EditContentDialog } from './EditContentDialog'
-export { CollectionPage, CollectionContext, CollectionTree } from './CollectionPage'
+export { CollectionPage, CollectionContext, CollectionTree, CollectionFilters } from './CollectionPage'
 export { TablePage, TableEditor } from './TablePage'
 export { TabbedTablePage } from './TabbedTablePage'

package/src/html/table.css

@@ -32,6 +32,13 @@
     font-weight: 600 !important;
 }
 
+.datatable8 thead th>div {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .datatable8 tbody {
     overflow: visible;
     height: 5rem;

package/src/html/table.js

@@ -1,11 +1,10 @@
-import React, { Fragment, useState } from 'react'
+import React, { Fragment, useState, useEffect } from 'react'
+import { FORMATS, TYPES } from '../domain/ContentType'
 import { DropDown, TextField } from './textfield'
 import { CheckBox } from './checkbox'
 import { Icon } from './icon'
 import { Text } from './text'
 import './table.css'
-import { FORMATS, TYPES } from '../domain/ContentType'
-import { ColorField } from './color'
 
 const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 
@@ -18,8 +17,19 @@ export const DataTable = (props) => {
     const [sortDir, setSortDir] = useState({})
     const [allChecked, setAllChecked] = useState(false)
 
+    useEffect(() => {
+        console.log(sortDir)
+    }, [sortDir])
+
+    function changeSort(id) {
+        const nextDir = sortDir[id] ? sortDir[id] * -1 : 1
+        const next = Object.assign({}, sortDir, { [id]: nextDir })
+        setSortDir(next)
+    }
+
     function multiSort(array, sortObject = {}) {
 
+        console.log('multisort', sortObject)
         const sortKeys = Object.keys(sortObject);
 
         if (!sortKeys.length) {
@@ -61,7 +71,7 @@ export const DataTable = (props) => {
         }
     }
 
-    function sort(dragged, dropped) {
+    function moveRow(dragged, dropped) {
         if (onSort) onSort(dragged, dropped)
     }
 
@@ -82,8 +92,10 @@ 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} value={allChecked} /> : <Text key={`th_${id}`}>{label}</Text>}
-                                    {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
+                                    <div>
+                                        {id === "checked" ? <CheckBox onChange={checkAll} value={allChecked} /> : <Text key={`th_${id}`}>{label}</Text>}
+                                        {sortable ? <Icon icon="expand_less" size="small" clickable action={() => changeSort(id)}/> : null}
+                                    </div>
                                 </th>
                             )
                         })}
@@ -106,7 +118,7 @@ export const DataTable = (props) => {
                 <tbody>
                     {
                         multiSort(rows, sortDir).map(row => (
-                            <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={sort} editable={editable} expanded={expanded} />
+                            <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={moveRow} editable={editable} expanded={expanded} />
                         ))
                     }
                 </tbody>

package/src/html/table.test.js

@@ -2,19 +2,19 @@ import React, { useState } from 'react'
 import { FORMATS } from '../domain/ContentType'
 import { DataTable } from './table'
 
-const TableTest = (prop) => {
+export 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: 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" },
+            { 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: 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: "John Smith"    , color: "#CCFFFF" },
+            { id: 7, checked: false, name: "Ann Martin"    , color: "#CCFFFF" },
+            { id: 8, checked: false, name: "Martin Freeman", color: "#CCFFFF" },
+            { id: 9, checked: false, name: "Ann Martin"    , color: "#CCFFFF" },
         ]
     )
 
@@ -40,12 +40,13 @@ const TableTest = (prop) => {
         editable: true,
         columns : [
             { id: "checked", onChange: check },
-            { id: "name", label: "Name", type: "String", onChange: editCell},
+            { id: "name", label: "Name", type: "String", onChange: editCell },
+            { id: "name", label: "Name", type: "String", sortable: true },
             { id: "thumb", label: "Thumb", type: "String", format: FORMATS.IMG },
             { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
         ],
         rows
-    }
+    } 
 
     return (
         <>

package/src/html/textfield.js

@@ -187,7 +187,7 @@ export const DropDown = (props) => {
 
 export const DateRange = (props) => {
 
-    const { id, label, value, onChange, readOnly } = props
+    const { id, label, value, onChange } = props
     const [form, setForm] = useState({})
 
     useEffect(() => {
@@ -199,10 +199,9 @@ export const DateRange = (props) => {
         setForm(next)
     }
 
-    return readOnly ? (
-        <TextField id={id} type="date" label={label} value={value} readOnly={true} /> 
-    ) : (
+    return (
         <div className="date-range">
+            { label ? <label>{label}</label> : null }
             <TextField id="from" type="date" label="From" value={form.from} onChange={change} />
             <TextField id="to" type="date" label="To" value={form.to} onChange={change} />
         </div>

package/src/site/site.test.js

@@ -11,13 +11,14 @@ import { Uploader } from '../widgets/upload/Uploader'
 import { TabbedTablePage } from '../domain/TabbedTablePage'
 import { TablePage } from '../domain/TablePage'
 import { FORMATS, TYPES } from '../domain/ContentType'
+import { TableTest } from '../html/table.test'
 
 const SiteTest = (prop) => {
 
     const footer = <div>FOOTER</div>
 
     return (
-        <Site icon="star" title="Site Test" init={"PAGE3"} footer={footer}>
+        <Site icon="star" title="Site Test" init={"PAGE4"} footer={footer}>
             <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
                 <Page1 />
             </Page>
@@ -27,6 +28,9 @@ const SiteTest = (prop) => {
             <Page id="PAGE3" section="SECTION1" icon="description" title="Page 3" layout="workspace">
                 <Page3 />
             </Page>
+            <Page id="PAGE4" section="SECTION1" icon="description" title="Page 4" layout="workspace">
+                <Page4 />
+            </Page>
         </Site>
     )
 }
@@ -123,7 +127,6 @@ const Page3 = (props) => {
 
     }
 
-
     const schema = {
         name  : { id: "name"  , section: "A", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
         state : { id: "state" , section: "A", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: false            , label: "State" , options: [
@@ -142,4 +145,35 @@ const Page3 = (props) => {
             <TablePage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed"/>
         </Fragment>
     )
+}
+
+
+const Page4 = (props) => {
+
+    const ENTITYTYPE = {
+        name  : { id: "name"  , section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
+        field1: { id: "field1", section: "E-INFO1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field1" },
+        field2: { id: "field2", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field2" },
+        field3: { id: "field3", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
+
+    }
+
+    const schema = {
+        name  : { id: "name"  , section: "A", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
+        state : { id: "state" , section: "A", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: false            , label: "State" , options: [
+            { label: "Pendiente", value: "NOT_CLASSIFIED" },
+            { label: "Clasificada", value: "CLASSIFIED"}, 
+        ]},
+        field1: { id: "field1", section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "field1" },
+        field2: { id: "field2", section: "B", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "field2" },
+        field4: { id: "field4", section: "B", type: TYPES.STRING                  , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: true             , label: "Color"  },
+        field5: { id: "field5", section: "B", type: TYPES.ENTITY, item: ENTITYTYPE, format: FORMATS.NONE , editable: true, tab: false, grouper: false, column: true , filter: true , like: false, label: "Entity5"},
+
+    }
+
+    return (
+        <Fragment>
+            <TableTest />
+        </Fragment>
+    )
 }