ywana-core8 0.0.482 → 0.0.485

package/package.json

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

package/src/domain/ContentEditor.css

@@ -2,11 +2,13 @@
     padding: 0 1rem;
 }
 
-.content-editor>section {
+.content-editor>section,
+.entity-editor>section  {
     margin-bottom: 1rem;
 }
 
-.content-editor>section>header {
+.content-editor>section>header,
+.entity-editor>section>header {
     padding: .5rem;
     border-bottom: solid 1px var(--divider-color);
     margin-bottom: .5rem;

package/src/domain/ContentEditor.js

@@ -212,19 +212,42 @@ const EntityEditor = ({ field, value = {}, onChange }) => {
     if (onChange) onChange(id, next)
   }
 
+  /*
   const form = content.form()
   const fields = Object.keys(form).map((key) => form[key])
-
+  
   return (
     <div className='entity-editor'>
-      <header>
+    <header>
         <Text use='caption'>{label}</Text>
-      </header>
-      <main>
+        </header>
+        <main>
         {fields.map((field) => (
           <FieldEditor key={field.id} field={field} onChange={change} />
-        ))}
-      </main>
+          ))}
+          </main>
+          </div>
+          )
+  */
+
+  const sections = content.sections()
+  return (
+    <div className={`entity-editor`}>
+      <header>
+        <Text use='caption'>{label}</Text>
+      </header>
+      {sections.map((section) => {
+        const { title, fields } = section
+        const filtered = fields.filter(field => field.id !== 'id')
+        return filtered.length > 0 ? (
+          <section key={title}>
+            {title && title.length > 0 ? <header>{title}</header> : null}
+            <main>
+              {filtered.map((field) => <FieldEditor key={field.id} field={field} onChange={change} outlined={true} content={content} />)}
+            </main>
+          </section>
+        ) : null
+      })}
     </div>
   )
 }
@@ -246,16 +269,16 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
 
   function renderFormat(format, options) {
     switch (format) {
-      case FORMATS.COLOR: return <ColorField id={id} onChange={change} value={value}/>
+      case FORMATS.COLOR: return <ColorField id={id} onChange={change} value={value} />
       case FORMATS.HTML: return <Editor id={id} value={value} onChange={change} content={content} />
       case FORMATS.DATE: return <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} />
-      case FORMATS.TOKENS: 
+      case FORMATS.TOKENS:
         return <TokenField id={id} label={label} onChange={change} options={buildOptions()} tokens={value} />
       default:
         return options ? (
           <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} predictive={predictive} />
         ) : multivalue ? (
-          <TokenField id={id} label={label} onChange={change} readOnly={!editable}/>
+          <TokenField id={id} label={label} onChange={change} readOnly={!editable} />
         ) : (
           <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} readOnly={!editable} />
         )

package/src/domain/ContentEditor.test.js

@@ -12,15 +12,17 @@ function buildTokenOptions() {
 }
 
 const schema = {
-    name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "Name" },
-    field1: { id: "field1", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field1", multivalue: true },
-    field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field2" },
-    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, label: "field3", options: buildTokenOptions },
-    field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR, required: true, label: "Color" },
+    name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE  , required: true, editable: false, label: "Name"  , defValue: "John"                                               },
+    field1: { id: "field1", type: TYPES.STRING, format: FORMATS.NONE  , required: true, editable: true , label: "field1"                  , multivalue: true                             },
+    field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE  , required: true, editable: true , label: "field2"                                                                 },
+    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, editable: true , label: "field3"                                    , options: buildTokenOptions },
+    field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR , required: true, editable: true , label: "Color"                                                                  },
+    field5: { id: "field5", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, editable: true , label: "field5"                  , multivalue: true                 },
+
 }
 
 const value = {
-    name: "John Smith",
+    
 }
 
 const ContentEditorTest = (prop) => {
@@ -28,6 +30,7 @@ const ContentEditorTest = (prop) => {
     const [form, setForm] = useState(value)
 
     function change(form) {
+        console.log(form)
         setForm(form)
     }
 

package/src/domain/ContentType.js

@@ -16,6 +16,7 @@ export const TYPES = {
 export const FORMATS = {
     NONE: '',
     DATE: 'date',
+    DATERANGE: 'DATARANGE',
     TIME: 'time',
     EMAIL: 'email',
     HTML: 'HTML',

package/src/html/table.css

@@ -19,7 +19,7 @@
     background-color: rgba(240,240,240);
     overflow: hidden;
     color: var(--text-color-lighter);
-    z-index: 2000;
+    z-index: 10;
 }
 
 .datatable8 thead tr {

package/src/html/textfield.js

@@ -183,3 +183,26 @@ export const DropDown = (props) => {
         </div>
     )
 }
+
+
+export const DateRange = (props) => {
+
+    const { id, onChange } = props
+    const [form, setForm] = useState({})
+
+    useEffect(() => {
+        if (onChange) onChange(id, form)
+    }, [form])
+
+    function change(id, value) {
+        const next = Object.assign({}, form, { [id]: value })
+        setForm(next)
+    }
+
+    return (
+        <div className="date-range">
+            <TextField id="from" type="date" label="From" value={form.from} onChange={change} />
+            <TextField id="to" type="date" label="To" value={form.to} onChange={change} />
+        </div>
+    )
+}

package/src/html/textfield.test.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { DropDown, TextField, TextArea, TokenField } from '.'
 import { Wrapper } from '../../__reactpreview__/Wrapper'
+import { DateRange } from './textfield'
 
 const TextFieldTest = (prop) => {
 
@@ -35,6 +36,7 @@ const TextFieldTest = (prop) => {
             <DropDown id="gender2" label="Dropdown 2" value={form.gender2} onChange={change} options={options} predictive={true}/>
             <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
             <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
+            <DateRange id="range1" value={form.range1} onChange={change}/>
         </>
     )
 }

package/src/html/tokenfield.js

@@ -33,7 +33,7 @@ export const TokenField = ({ id, label, tokens = [], readOnly, options, onChange
       event.preventDefault()
       event.stopPropagation()
       const token = event.target.value
-      const next = tokens.concat(token.trim())
+      const next = Array.isArray(tokens) ? tokens.concat(token) : [token]
       if (onChange) onChange(id, next)
       setValue('')
     }

package/src/site/site.test.js

@@ -115,20 +115,31 @@ const Page2 = (props) => {
 
 const Page3 = (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" },
+
+    }
+
+
     const schema = {
-        name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
-        state : { id: "state" , 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", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "field1" },
-        field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "field2" },
-        field4: { id: "field4", 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"},
+
     }
 
     return (
         <Fragment>
-            <TabbedTablePage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed"/>
+            <TablePage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed"/>
         </Fragment>
     )
 }