ywana-core8 0.0.537 → 0.0.538

package/package.json

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

package/src/domain/CollectionPage.css

@@ -30,25 +30,7 @@ main.collection-page {
     flex-direction: column;
 }
 
-.collection-page .content-editor {
+main.collection-page>.content-editor {
     flex: 1;
 }
 
-.collection-page .content-editor>section {
-    border: solid 1px var(--divider-color);
-    background-color: var(--paper-color);
-    padding: 0 1rem 1rem 1rem;
-}
-
-.collection-page .content-editor.tabbed>section {
-    border: solid 1px var(--divider-color);
-    border-width: 0 1px 1px 1px;
-    background-color: var(--paper-color);
-    padding: 0 1rem 1rem 1rem;
-}
-
-.collection-page > article {
-    display: flex;
-    overflow: hidden;
-}
-

package/src/domain/ContentEditor.css

@@ -1,19 +1,43 @@
+/**************************************/
+/*********** content-editor ***********/
+/**************************************/
+
 .content-editor {
-    padding: 0 1rem;
+    padding: .5rem;
 }
 
-.content-editor>section,
-.entity-editor>section  {
-    margin-bottom: 1rem;
+/**************************************/
+/******* content-editor tabbed ********/
+/**************************************/
+
+.content-editor.tabbed {
+    overflow: hidden !important;
+    display: flex;
+    flex-direction: column;
 }
 
-.content-editor>section>header,
-.entity-editor>section>header {
+.content-editor.tabbed>.tabs {
+    min-height: 3rem;
+}
+
+.content-editor.tabbed>section {
+    border: solid 1px var(--divider-color);
+    border-width: 0 1px 1px 1px;
+    background-color: var(--paper-color);
+    padding: 1rem;
+    overflow: auto;
+}
+
+.content-editor>section>header {
     padding: .5rem;
     border-bottom: solid 1px var(--divider-color);
     margin-bottom: .5rem;
 }
 
+/**************************************/
+/************ entity-editor ***********/
+/**************************************/
+
 .entity-editor {
 }
 
@@ -21,20 +45,19 @@
     padding: .5rem;
 }
 
-.collection-editor {
+.entity-editor>section  {
+    margin-bottom: 1rem;
 }
 
-.collection-editor>header {
-    padding: 0 .5rem;
-    display: flex;
-    align-items: flex-end;
+.entity-editor>section>header {
+    padding: .5rem;
+    border-bottom: solid 1px var(--divider-color);
+    margin-bottom: .5rem;
 }
 
-.collection-editor>header>.actions {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-}
+/**************************************/
+/********* collection-editor **********/
+/**************************************/
 
 .collection-editor>header>.actions button {
     height: 2rem !important;
@@ -54,12 +77,6 @@
     width: 99%;
 }
 
-.collection-editor .actions {
-    width: 8rem;
-    text-align: right;
-    padding: .5rem;
-}
-
 .collection-adder {
     display: flex;
 }
@@ -97,6 +114,10 @@
     align-items: center;
 }
 
+/**************************************/
+/************ field-editor ************/
+/**************************************/
+
 .field-editor {
     padding: 0;
 }
@@ -105,6 +126,10 @@
     width: 100%;
 }
 
+/**************************************/
+/*********** function-editor **********/
+/**************************************/
+
 .function-editor {
     width: 100%;
     min-height: 10rem;

package/src/domain/ContentEditor.js

@@ -1,10 +1,9 @@
 import React, { Fragment, useState } from 'react';
-import { Button, CheckBox, DataTable, DropDown, Icon, Stack, Tab, Tabs, Text, TextField, Tree, TreeNode, TreeItem, TokenField, Property } from '../html';
-import { CHECK, Content, TYPES } from './ContentType';
-import './ContentEditor.css';
-import { FORMATS } from './ContentType';
-import { ColorField } from '../html/color';
+import { Button, CheckBox, DataTable, DropDown, Icon, Stack, Tab, Tabs, Text, TextField, Tree, TreeNode, TreeItem, TokenField, Header } from '../html';
+import { CHECK, Content, TYPES, FORMATS } from './ContentType';
 import { DateRange } from '../html/textfield';
+import { ColorField } from '../html/color';
+import './ContentEditor.css';
 
 /**
  * Content Editor
@@ -81,33 +80,28 @@ export const TabbedContentEditor = ({ content, filter, grouped = false, onChange
           const { title, fields } = section
           return (
             <section key={title}>
-              <nav>
-                &nbsp;
-              </nav>
-              <main>
-                {
-                  grouped ?
-                    group(section)
-                      .map(group => {
-                        return (
-                          <Fragment>
-                            {group.name.length > 0 ? <div className="group-caption">{group.name}</div> : null}
-                            {
-                              group.fields
-                                .filter(field => field.id !== 'id')
-                                .filter(field => filter ? filter(field) : true)
-                                .map((field) => <FieldEditor key={field.id} field={field} onChange={change} content={content} />)
-                            }
-                          </Fragment>
-                        )
-                      })
-                    :
-                    fields
-                      .filter(field => field.id !== 'id')
-                      .filter(field => filter ? filter(field) : true)
-                      .map((field) => <FieldEditor key={field.id} field={field} onChange={change} content={content} />)
-                }
-              </main>
+              {
+                grouped ?
+                  group(section)
+                    .map(group => {
+                      return (
+                        <Fragment>
+                          {group.name.length > 0 ? <div className="group-caption">{group.name}</div> : null}
+                          {
+                            group.fields
+                              .filter(field => field.id !== 'id')
+                              .filter(field => filter ? filter(field) : true)
+                              .map((field) => <FieldEditor key={field.id} field={field} onChange={change} content={content} />)
+                          }
+                        </Fragment>
+                      )
+                    })
+                  :
+                  fields
+                    .filter(field => field.id !== 'id')
+                    .filter(field => filter ? filter(field) : true)
+                    .map((field) => <FieldEditor key={field.id} field={field} onChange={change} content={content} />)
+              }
             </section>
           )
         })}
@@ -404,7 +398,9 @@ export const CollectionEditor = ({ field, value = [], onChange }) => {
     }
   }
 
-  const columns = Object.values(item).map((item) => ({ ...item, onChange: change }))
+  const columns = Object.values(item)
+    .filter(field => field.column === true)
+    .map((item) => ({ ...item, onChange: change }))
   columns.push({ id: 'actions', label: 'Actions' })
 
   const rows = value.map((item, index) => ({
@@ -419,14 +415,15 @@ export const CollectionEditor = ({ field, value = [], onChange }) => {
 
   return (
     <div className='collection-editor'>
-      <header>
-        <Text use='caption'>{label}</Text>
-        <div className="actions" >
-          {Feeder ? <Feeder onAdd={add} /> : null}
-        </div>
-      </header>
-      {Renderer ? <Renderer field={field} value={value} onRemove={remove} onChange={onChange} /> : <DataTable {...table} editable={editable} />}
+      {
+        Renderer ?
+          <Renderer field={field} value={value} onRemove={remove} onChange={onChange} />
+          // : <DataTable {...table} editable={editable} />
+          : <TableEditor icon={"info"} title={label} data={value} schema={item} groupBy={"field1"} />
+
+      }
       <footer>
+        {Feeder ? <Feeder onAdd={add} /> : null}
         {Adder ? <CollectionAdder item={item} onAdd={add} /> : null}
       </footer>
     </div>
@@ -470,4 +467,113 @@ const CollectionAdder = ({ item, onAdd }) => {
       {edit ? <DataTable {...table} editable={true} /> : <Button icon='add' label='Añadir' action={toggle} />}
     </div>
   )
-}
+}
+
+
+/**
+ * Table Editor
+ */
+const TableEditor = (props) => {
+
+  const { data = [], icon, title, schema, editable, canDelete, filter, actions, className } = props
+  const [groupBy, setGroupBy] = useState(props.groupBy)
+
+  function changeGroup(id, value) {
+    setGroupBy(value)
+  }
+
+  async function select(row) {
+    if (onSelect) onSelect(row.id)
+  }
+
+  function renderGroupLabel(groupName) {
+    const grouper = schema[groupBy]
+    if (!groupName || !grouper) return ""
+    if (grouper.options) {
+      const options = CHECK['isFunction'](grouper.options) ? grouper.options() : grouper.options
+      const option = options.find(option => option.value === groupName)
+      return option ? option.label : groupName
+    } else {
+      return groupName
+    }
+  }
+
+  function renderGroups() {
+    const items = filter ? filter(data) : data
+
+    if (items.length === 0) return (
+      <div className='empty-message'>
+        <Icon icon="search_off" />
+        <Text>No Result Found</Text>
+      </div>
+    )
+
+    const groups = items.reduce((groups, item) => {
+      const groupName = item[groupBy]
+      const group = groups[groupName]
+      if (!group) groups[groupName] = []
+      groups[groupName].push(item)
+      return groups
+    }, {})
+
+    return Object.keys(groups).map(groupName => {
+      const table = {
+        columns: Object.values(schema)
+          .filter(field => field.column === true)
+          .map(field => {
+            let options = field.options;
+            if (options && typeof (options) == 'function') {
+              options = options()
+            }
+            return {
+              id: field.id,
+              label: field.label,
+              type: field.type,
+              format: field.format,
+              item: field.item ? field.item : [],
+              onChange: field.id === "checked" ? checkOne : field.editable ? change : null,     /* checked has it´s own handler */
+              options
+            }
+          }),
+        rows: groups[groupName]
+          .map(item => {
+            item.actions = actions ? actions.map(action => {
+              return action.filter ?
+                action.filter(item) ? <Icon icon={action.icon} clickable size="small" action={() => run(action, item)} /> : null
+                : <Icon icon={action.icon} clickable size="small" action={() => run(action, item)} />
+            }) : []
+            if (canDelete) item.actions.push(<Icon icon="delete" size="small" clickable action={() => remove(item.id)} />)
+            return item
+          })
+      }
+      table.columns.push({ id: "actions" })
+      const groupSize = groups[groupName].length
+      const title = <span><span className="size">{groupSize}</span>{renderGroupLabel(groupName)}</span>
+      return (
+        <Fragment key={groupName}>
+          <Header title={title} >
+            <span className="size">{groupSize}</span>
+          </Header>
+          <DataTable {...table} onRowSelection={select} editable={editable} className={className} />
+        </Fragment>
+      )
+    })
+  }
+
+  function buildGroupOptions(schema) {
+    return Object.values(schema)
+      .filter(field => field.grouper === true)
+      .map(field => ({ label: field.label, value: field.id }))
+  }
+
+  return (
+    <Fragment>
+      <Header icon={icon} title={<Text>{title}</Text>}>
+        <DropDown id="groupBy" label="Agrupar Por" value={groupBy} options={buildGroupOptions(schema)} onChange={changeGroup} />
+      </Header>
+      <main className="table-editor">
+        {renderGroups()}
+      </main>
+    </Fragment>
+  )
+}

package/src/domain/TablePage.js

@@ -426,6 +426,7 @@ export const TableEditor = (props) => {
             groups[groupName].push(item)
             return groups
         }, {})
+        
         return Object.keys(groups).map(groupName => {
             const table = {
                 columns: Object.values(schema)

package/src/site/site.test.js

@@ -192,16 +192,14 @@ 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: "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" },
-
+        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 = {
-        id  : { id: "id", type: TYPES.STRING },
-
+        field6: { id: "field6", section: "C", type: TYPES.ARRAY , item: ENTITYTYPE, label: "Collection 100" },
         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" },
@@ -211,12 +209,17 @@ const Page5 = (props) => {
         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"},
-
+        id  : { id: "id", type: TYPES.STRING },
     }
 
     return (
         <Fragment>
-            <CollectionPage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canAdd={true} searchBy={["field1"]} levels={["color"]}/>
+            <CollectionPage 
+                title="Referencias" 
+                schema={schema} host="http://localhost:3000" url="/references" fetching={true}              // resource 
+                searchBy={["field1"]} levels={["color"]}                                                    // menu
+                editor="TABBED" canAdd={true}                                                               // editor
+            />
         </Fragment>
     )
 }