ywana-core8 0.0.114 → 0.0.118

package/package.json

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

package/src/domain/TablePage.css

@@ -6,9 +6,6 @@ menu.table-page>header {
     padding-right: .5rem;
 }
 
-menu.table-page>main {
-}
-
 main.table-page {
     display: flex;
     flex-direction: column;

package/src/domain/TablePage.js

@@ -90,14 +90,12 @@ export const TablePage = (props) => {
     }
 
     function renderAside() {
-        if (selected && form) {
+        if ((selected && form) ||(pageContext.checked.length > 0)) {
             const content = new Content(schema, form)
             return (
                 <aside className="table-page">
-                    <Header icon="local_offer" title={selected.name || "Propiedades"}>
-                        <Icon icon="close" clickable action={closeAside} />
-                    </Header>
-                    <ContentEditor content={content} onChange={change} filter={editorFilter}/>
+                    <TableRowEditor content={content} filter={editorFilter} onChange={change} onClose={closeAside} />
+                    <TableSelector onClose={closeAside} />
                 </aside>
             )
         }
@@ -127,6 +125,39 @@ export const TablePage = (props) => {
     )
 }
 
+/**
+ * TableRowEditor
+ */
+const TableRowEditor = (props) => {
+    const { name, content, filter, onChange, onClose } = props
+    return (
+        <div className="table-row-editor">
+            <Header icon="local_offer" title={name || "Propiedades"}>
+                <Icon icon="close" clickable action={onClose} />
+            </Header>
+            <main>
+                <ContentEditor content={content} onChange={onChange} filter={filter} />
+            </main>
+        </div>
+    )
+}
+
+/**
+ * Table Selector
+ */
+const TableSelector = (props) => {
+    return (
+        <div className="table-selector">
+            <Header title="Selection">
+
+            </Header>
+            <main>
+                ...
+            </main>
+        </div>
+    )
+}
+
 /**
  * Table Queries
  */

package/src/html/table.js

@@ -77,7 +77,7 @@ export const DataTable = (props) => {
                             const sort = sortDir[id] ? sortDir[id] : null
                             return (
                                 <th>
-                                    {id === "checked" ? <CheckBox onChange={checkAll}/> : <Text>{label}</Text>}
+                                    {id === "checked" ? <CheckBox onChange={checkAll} /> : <Text>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>
                             )
@@ -115,7 +115,9 @@ const DataTableRow = (props) => {
             </tr>
             {row.info && isInfoOpen ? (
                 <tr className="table-row-info">
-                    {isFunction(row.info) ? row.info() : row.info}
+                    <td colSpan={columns.length + 1}>
+                        {isFunction(row.info) ? row.info() : row.info}
+                    </td>
                 </tr>
             ) : null}
         </Fragment>