ywana-core8 0.0.94 → 0.0.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.94",
+  "version": "0.0.98",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/domain/TablePage.js

@@ -16,7 +16,16 @@ const http = HTTPClient(window.API || process.env.REACT_APP_API, Session);
 export const TablePage = (props) => {
 
     const site = useContext(SiteContext)
-    const { id = "table", icon, title, name = "table 1", schema, url, field, delay = 1000, actions, editable, canFilter=false, canAdd = true, canDelete = true, dev = false, autosave = true, groupBy, validator, scenario, formFilter, tableFilter, tableActions } = props
+    const { id = "table",
+        icon, title, name,
+        schema, url, field,
+        actions, dev = false, tableActions,
+        editable, canFilter = false, canQuery = false, canAdd = true, canDelete = true,
+        autosave = true, delay = 1000,
+        groupBy, validator, scenario,
+        formFilter, tableFilter,
+    } = props
+
     const [pageContext, setPageContext] = useContext(PageContext)
     const { selected } = pageContext
     const timer = useRef(null)
@@ -106,7 +115,10 @@ export const TablePage = (props) => {
                 ) : null}
                 {actions}
             </Header>
-            {canFilter ? <menu className="table-page"><TableFilters schema={schema} /></menu> : null}
+            <menu className="table-page">
+                {canQuery ? <TableQueries schema={schema} /> : null}
+                {canFilter ? <TableFilters schema={schema} /> : null}
+            </menu>
             <main key={id} className="table-page">
                 <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} />
             </main>
@@ -115,6 +127,20 @@ export const TablePage = (props) => {
     )
 }
 
+/**
+ * Table Queries
+ */
+const TableQueries = (props) => {
+    return (
+        <Fragment>
+            <Header className="table-queries" title={<Text>Queries</Text>} />
+            <main className="table-queries">
+                ...
+            </main>
+        </Fragment>
+    )
+}
+
 /**
  * Table Filters
  */
@@ -132,8 +158,6 @@ const TableFilters = (props) => {
         }
 
         Object.values(filterSchema).forEach(field => field.section = null)
-
-        Object.keys
         delete filterSchema.flows
         return filterSchema
     }, [schema])
@@ -145,16 +169,16 @@ const TableFilters = (props) => {
     }
 
     function clear() {
-        setForm({})
+        change({})
     }
 
     const content = new Content(filterSchema, form)
     return (
         <Fragment>
-            <Header title={<Text>Filtros</Text>} >
-                <Button icon="filter_list_off" label="Limpiar" action={clear} />
+            <Header className="table-filters" title={<Text>Filters</Text>} >
+                <Button icon="filter_list_off" label="Clean" action={clear} />
             </Header>
-            <main>
+            <main className="table-filters">
                 <ContentEditor content={content} onChange={change} />
             </main>
         </Fragment>
@@ -200,6 +224,8 @@ const TableEditor = (props) => {
         setPageContext(Object.assign({}, pageContext))
     }
 
+    async function check(ids = []) {}
+
     function run(action, item) {
         action.action(item.id, pageContext, async () => {
             await pageContext.load()
@@ -257,7 +283,7 @@ const TableEditor = (props) => {
                     <Header title={groupName} >
                         <span className="size">{groupSize}</span>
                     </Header>
-                    <DataTable {...table} onRowSelection={select} editable={editable} />
+                    <DataTable {...table} onRowSelection={select} editable={editable} onCheckAll={check}/>
                 </Fragment>
             )
         })

package/src/html/table.js

@@ -10,7 +10,7 @@ import './table.css'
  */
 export const DataTable = (props) => {
 
-    const { columns = [], rows = [], onRowSelection, onSort, editable, outlined } = props
+    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined } = props
     const [sortDir, setSortDir] = useState({})
 
     function multiSort(array, sortObject = {}) {
@@ -60,6 +60,11 @@ export const DataTable = (props) => {
         if (onSort) onSort(dragged, dropped)
     }
 
+    function checkAll() {
+        const ids = rows.map(row => row.id)
+        if (onCheckAll) onCheckAll(ids)
+    }
+
     const style = outlined ? "outlined" : ""
     return (
         <div className={`datatable8 ${style}`}>
@@ -70,7 +75,7 @@ export const DataTable = (props) => {
                             const sort = sortDir[id] ? sortDir[id] : null
                             return (
                                 <th>
-                                    <Text>{label}</Text>
+                                    {id === "checked" ? <CheckBox action={checkAll}/> : <Text>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>
                             )
@@ -80,7 +85,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}/>
+                            <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={sort} editable={editable} />
                         ))
                     }
                 </tbody>
@@ -102,7 +107,7 @@ const DataTableRow = (props) => {
     return (
         <Fragment>
             <tr onClick={ev => onSelect(row, ev)}>
-                {columns.map(column => <DataTableCell row={row} column={column} cell={row[column.id]} editable={editable}/>)}
+                {columns.map(column => <DataTableCell row={row} column={column} cell={row[column.id]} editable={editable} />)}
                 {row.info ? <Icon icon={infoIcon} clickable action={() => toggleInfo(!isInfoOpen)} /> : null}
             </tr>
             {row.info && isInfoOpen ? (
@@ -121,7 +126,9 @@ const DataTableCell = ({ row, column, cell, editable }) => {
 
     const render = (type) => {
         const { id, disabled = false, min, max, onChange, options } = column
-        if (editable && onChange) {
+        if (id === "checked") {
+            return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} />
+        } else if (editable && onChange) {
             switch (type) {
                 case "ICON": return <Icon icon={cell} />
                 case "BOOLEAN": return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} disabled={disabled} />
@@ -153,7 +160,7 @@ const DataTableCell = ({ row, column, cell, editable }) => {
  * Boolean Cell Viewer
  */
 const BooleanCellViewer = ({ id, value = false }) => {
-    const icon = value === true ?  "check_box" : "check_box_outline_blank"
+    const icon = value === true ? "check_box" : "check_box_outline_blank"
     return <Icon icon={icon} />
 }
 
@@ -161,7 +168,7 @@ const BooleanCellViewer = ({ id, value = false }) => {
  * String Cell Viewer
  */
 const StringCellViewer = ({ id, value, options }) => {
-    const option = options ? options.find( o => o.value === value) : null
+    const option = options ? options.find(o => o.value === value) : null
     const text = option ? option.label : value
     return (<div className="field-editor string-editor">{text}</div>)
 }