ywana-core8 0.0.93 → 0.0.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.93",
+  "version": "0.0.97",
   "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>

package/src/html/table.css

@@ -1,5 +1,4 @@
 .datatable8 {
-    max-height: 40rem;
     overflow: hidden;
     border: solid 0px var(--divider-color);
     background-color: var(--paper-color);

package/src/html/table.js

@@ -80,7 +80,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 +102,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 +121,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 +155,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 +163,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>)
 }