ywana-core8 0.0.218 → 0.0.222

package/package.json

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

package/src/domain/CollectionPage.js

@@ -315,7 +315,25 @@ export const CollectionContext = (url, field) => {
 const CollectionAPI = (url) => {
 
     return {
-        all() {
+        all(filters) {
+            let queryParams = "?"
+            if (filters) {
+                const filterQuery = Object.keys(filters).reduce((query, key) => {
+                    const value = filters[key]
+                    if (typeof (value) === 'boolean') {
+                        return query.concat(`${key}=${value}&`)
+                    } else if (Array.isArray(value)) {
+                        const param = value.length === 0 ? '' : value.reduce((param, item) => {
+                            param = param.concat(`${key}=${item}&`)
+                            return param
+                        }, "")
+                        return query.concat(param)
+                    } else {
+                        return query.concat(`${key}=%${filters[key]}%&`)
+                    }
+                }, "")
+                queryParams = queryParams.concat(filterQuery)
+            }
             return http.GET(url)
         },
 

package/src/domain/TablePage.css

@@ -25,3 +25,45 @@ main.table-editor {
     overflow: auto;
 }
 
+.table-selector {
+    display: flex;
+    flex-direction: column;
+}
+
+.table-selector>header {
+    border-bottom: solid 1px var(--divider-color);
+    background-color: rgba(220,220,220,.5);
+}
+
+.table-selector>main {
+    flex: 1;
+}
+
+.table-selector>main>.datatable8 {
+    margin: 0;
+}
+
+.table-selector>footer {
+    padding: .5rem;
+    display: flex;
+}
+
+.table-selector>footer>* {
+    flex: 1;
+}
+
+.table-row-editor>header,
+header.table-queries,
+header.table-filters {
+    border-bottom: solid 1px var(--divider-color);
+    background-color: rgba(220,220,220,.5);
+}
+
+main.table-queries,
+main.table-filters {
+    flex: 1;
+}
+
+td.entity-cell {
+    background-color: rgba(240,240,240,.4);
+}

package/src/domain/TablePage.js

@@ -241,7 +241,7 @@ const TableFilters = (props) => {
     return (
         <Fragment>
             <Header className="table-filters" title={<Text>Filters</Text>} >
-                <Button icon="filter_list_off" label="Clean" action={clear} />
+                <Icon icon="filter_list_off" size="small" clickable action={clear} />
             </Header>
             <main className="table-filters">
                 <ContentEditor content={content} onChange={change} />

package/src/html/table.js

@@ -76,7 +76,7 @@ export const DataTable = (props) => {
                     <tr>
                         {columns.map(({ id, label, type, item, sortable }) => {
                             const sort = sortDir[id] ? sortDir[id] : null
-                            const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.keys(item).length] : [2, 1]
+                            const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v=>v.column===true).length] : [2, 1]
                             return (
                                 <th rowSpan={rowspan} colSpan={colspan}>
                                     {id === "checked" ? <CheckBox onChange={checkAll} /> : <Text key={`th_${id}`}>{label}</Text>}
@@ -185,7 +185,7 @@ const EntityCellViewer = ({ id, item, value }) => {
     console.log(id, item, value)
     const fields = Object.values(item).filter(field => field.column === true)
     return fields.map( field => {
-        return (<td key={column.id} className={`entity-cell ${column.id}`} >{value[field.id]}</td>)
+        return (<td key={field.id} className={`entity-cell ${field.id}`} >{value[field.id]}</td>)
     })
 }
 

package/src/site/layouts.css

@@ -9,7 +9,7 @@
                          "menu   main   aside"
                          "menu   detail aside" 
                          "footer footer footer";
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto 1fr 100%;
     grid-template-rows: auto auto 1fr auto auto;
 }
 
@@ -17,6 +17,14 @@
     min-height: 3rem;
 }
 
+.workspace>main {
+    resize: horizontal;
+}
+
+.workspace>aside {
+    width: 100%;
+}
+
 .overall {
     position: absolute;
     top:0;