ywana-core8 0.0.484 → 0.0.487

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.484",
+  "version": "0.0.487",
   "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,17 @@ 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.DATERANGE: return <DateRange id={id} label={label} value={value} onChange={change} readOnly={!editable}/>
+      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/html/textfield.js

@@ -187,7 +187,7 @@ export const DropDown = (props) => {
 
 export const DateRange = (props) => {
 
-    const { id, onChange } = props
+    const { id, label, value, onChange } = props
     const [form, setForm] = useState({})
 
     useEffect(() => {
@@ -201,6 +201,7 @@ export const DateRange = (props) => {
 
     return (
         <div className="date-range">
+            { label ? <label>{label}</label> : null }
             <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/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>
     )
 }