ywana-core8 0.0.572 → 0.0.573

package/package.json

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

package/src/domain/ContentEditor.js

@@ -393,7 +393,7 @@ export const MultiSelectionEditor = ({ field, value = [], content, onChange }) =
  */
 export const CollectionEditor = ({ field, value = [], onChange, onReload }) => {
 
-  const { id, item, label, Feeder, Renderer, Adder = true, editable = true } = field
+  const { id, item, label, groupBy="field1", Feeder, Renderer, Adder = true, editable = true } = field
 
   function add(rows) {
     if (onChange) {
@@ -421,7 +421,7 @@ export const CollectionEditor = ({ field, value = [], onChange, onReload }) => {
     if (onReload) onReload()
   }
 
-  const columns = Object.values(item)
+ /* const columns = Object.values(item)
     .filter(field => field.column === true)
     .map((item) => ({ ...item, onChange: change }))
   columns.push({ id: 'actions', label: 'Actions' })
@@ -435,6 +435,7 @@ export const CollectionEditor = ({ field, value = [], onChange, onReload }) => {
   }))
 
   const table = { columns, rows }
+*/
 
   return (
     <div className='collection-editor'>
@@ -442,7 +443,7 @@ export const CollectionEditor = ({ field, value = [], onChange, onReload }) => {
         Renderer ?
           <Renderer field={field} value={value} onRemove={remove} onChange={onChange} onReload={reload} />
           // : <DataTable {...table} editable={editable} />
-          : <TableEditor icon={"info"} title={label} data={value} schema={item} groupBy={"field1"} canDelete={true} remove={remove}/>
+          : <TableEditor icon={"info"} title={label} data={value} schema={item} groupBy={groupBy} canDelete={true} remove={remove}/>
 
       }
       <footer>

package/src/domain/TablePage.js

@@ -200,10 +200,12 @@ const TableSelector = (props) => {
         columns,
         rows: rows || []
     }
+
     const buttons = actions.map(({ label, action, validate }) => {
         return <Button 
                     label={label} raised 
                     action={() => action(checked, pageContext, async () => {
+                        await pageContext.clearChecks()
                         await pageContext.load()
                         setPageContext(Object.assign({}, pageContext))
                         }, rows)}
@@ -540,6 +542,10 @@ const TableContext = (url, field, host, urlQuery, params) => {
             }
         },
 
+        clearChecks() {
+            this.checked = new Set([])
+        },
+
         select(id) {
             const result = this.all.find(item => item.id === id);
             this.selected = result;

package/src/domain/TablePage2.js

@@ -1,9 +1,9 @@
 import equal from 'deep-equal'
 import React, { Fragment, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { Accordion, Button, DataTable, DropDown, Header, Icon, MenuIcon, MenuItem, Text } from '../html'
+import { Accordion, Button, DataTable, DropDown, Header, Icon, MenuIcon, MenuItem, Text, Tabs, Tab } from '../html'
 import { HTTPClient, Session } from '../http'
 import { PageContext, SiteContext } from '../site'
-import { ContentEditor, GroupedContentEditor } from './ContentEditor'
+import { ContentEditor } from './ContentEditor'
 import { CHECK, Content, TYPES } from './ContentType'
 import { ContentViewer } from './ContentViewer'
 import { CreateContentDialog } from './CreateContentDialog'
@@ -18,19 +18,20 @@ export const TablePage2 = (props) => {
     const site = useContext(SiteContext)
     const { id = "table",
         icon, title, name,
-        schema, url, field, host, params = "",
-        autosave = true, delay = 1000,
-        editable,
-        actions = [], dev = false, tableActions, selectionActions = [],
+        schema, 
+        url, field, host, params = "",                                          // TableContext
+        canQuery = false, urlQuery, user,                                       // TableQueries
+        editable, autosave = true, delay = 1000,                                // TableEditor
+        actions = [], tableActions, selectionActions = [],
         canFilter = false, canAdd = true, canDelete = true, canEdit = true,
-        canQuery = false, urlQuery, user,
-        groupBy, validator, scenario,
+        groupBy, validator,
         formFilter, tableFilter, editorFilter = false,
+        tabbedBy,
         tableClassName,
         children
     } = props
 
-    const [pageContext, setPageContext] = useContext(PageContext)
+    const [cd, setPageContext] = useContext(PageContext)
     const context = TableContext(url, field, host, urlQuery, params)
     const { selected } = pageContext
     const timer = useRef(null)
@@ -94,17 +95,6 @@ export const TablePage2 = (props) => {
         setPageContext(Object.assign({}, pageContext))
     }
 
-    async function playScenario() {
-        const promises1 = pageContext.all.map(async item => await pageContext.remove(item.id))
-        Promise.all(promises1).then(async () => {
-            const promises2 = scenario.map(async (item) => await pageContext.create(item))
-            Promise.all(promises2).then(async () => {
-                await pageContext.load()
-                setPageContext(Object.assign({}, pageContext))
-            })
-        })
-    }
-
     function closeAside() {
         pageContext.select(null)
         setPageContext(Object.assign({}, pageContext))
@@ -138,11 +128,6 @@ export const TablePage2 = (props) => {
                 {canAdd ? <Button icon="add" label="Añadir" action={add} raised /> : null}
                 &nbsp;
                 <Button icon="refresh" label="Reload" action={reload} />
-                {dev ? (
-                    <MenuIcon align="alignRight">
-                        <MenuItem label="Cargar Escenario 1" onSelect={playScenario} />
-                    </MenuIcon>
-                ) : null}
                 {renderActions()}
             </Header>
             {canQuery || canFilter ? (
@@ -152,7 +137,7 @@ export const TablePage2 = (props) => {
                 </menu>
             ) : null}
             <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} className={tableClassName} />
+                <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} tabbedBy={tabbedBy} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} className={tableClassName} />
                 {children ? <article>{children}</article> : null}
             </main>
             {renderAside()}
@@ -348,6 +333,15 @@ export const TableEditor = (props) => {
     const { all = [], filters } = pageContext
     const { icon, title, schema, editable, canDelete, filter, actions, className } = props
     const [groupBy, setGroupBy] = useState(props.groupBy)
+    const [tab, setTab] = useState(0)
+
+    useEffect(async () => {
+        if (tab) {
+            const filter = { [tab.field]: tab.value }
+            await pageContext.load(filter, [])
+            setPageContext(Object.assign({}, pageContext))
+        }
+    }, [tab])
 
     function changeGroup(id, value) {
         setGroupBy(value)
@@ -415,6 +409,9 @@ export const TableEditor = (props) => {
         }
     }
 
+    const tabField = Object.values(schema).find(field => field.tab === true)
+    const tabs = tabField ? tabField.options.map(option => Object.assign({}, option, { field: tabField.id })) : []
+
     const table = useMemo(() => {
         return {
             columns: Object.values(schema).filter(field => field.column === true).map(field => {
@@ -481,6 +478,9 @@ export const TableEditor = (props) => {
         <Fragment>
             <Header icon={icon} title={<Text>{title}</Text>}>
                 {groupBy ? <DropDown id="groupBy" label="Agrupar Por" value={groupBy} options={buildGroupOptions(schema)} onChange={changeGroup} /> : null}
+                {tabbedBy ? <Tabs fillRight={true} fillLeft={false}>
+                    {tabs.map(tab => <Tab id={tab.value} label={tab.label} />)}
+                </Tabs> : ''}
             </Header>
             <main className="table-editor">
                 <Accordion sections={sections} />
@@ -501,6 +501,7 @@ const TableContext = (url, field, host, urlQuery, params) => {
         all: [],
         checked: new Set([]),
         selected: null,
+
         filters: {},
         queries: [],
 
@@ -508,7 +509,6 @@ const TableContext = (url, field, host, urlQuery, params) => {
             try {
                 const filters = filter ? Object.keys(filter).reduce((filters, key) => {
                     const field = filter[key];
-
                     if (field) {
                         if (CHECK['isObject'](field)) {
                             Object.keys(field).forEach(key2 => {
@@ -519,7 +519,6 @@ const TableContext = (url, field, host, urlQuery, params) => {
                             filters[key] = field;
                         }
                     }
-
                     return filters;
                 }, {}) : []
                 const data = await API.all(filters);
@@ -612,7 +611,7 @@ const TableContext = (url, field, host, urlQuery, params) => {
 }
 
 /**
- * table API
+ * Table API
  */
 const TableAPI = (url, host, params = "") => {
 

package/src/site/site.test.js

@@ -167,18 +167,17 @@ const Page4 = (props) => {
         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: [
+        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"  },
+        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"},
 
     }
@@ -193,10 +192,10 @@ const Page4 = (props) => {
 const Page5 = (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: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true             , label: "E field1" },
-        field2: { id: "field2", section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true             , label: "E field2" },
-        field3: { id: "field3", section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
+        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: "", type: TYPES.STRING                   , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true             , label: "E field1" },
+        field2: { id: "field2", section: "", type: TYPES.STRING                   , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true             , label: "E field2" },
+        field3: { id: "field3", section: "", type: TYPES.STRING                   , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
     }
 
     const schema = {