ywana-core8 0.0.194 → 0.0.198

package/package.json

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

package/src/domain/ContentEditor.js

@@ -221,7 +221,7 @@ const EntityEditor = ({ field, value = {}, onChange }) => {
 
   return (
     <div className='entity-editor'>
-      <header>∂
+      <header>
         <Text use='caption'>{label}</Text>
       </header>
       <main>

package/src/domain/ContentViewer.css

@@ -0,0 +1,8 @@
+.content-viewer main>.property {
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.entity-viewer>header {
+    padding: .5rem;
+    background-color: rgba(240,240,240,.5);
+}

package/src/domain/ContentViewer.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Property } from '../html'
-import { TYPES } from './ContentType'
+import { Content, TYPES } from './ContentType'
+import './ContentViewer.css'
 
 /**
  * Content Viewer
@@ -22,7 +23,7 @@ export const ContentViewer = (props) => {
             {sections.map(section => {
                 const { title, fields } = section
                 return (
-                    <section key={title}>
+                    <section key={title} className="content-viewer">
                         <header>
                             {title}
                         </header>
@@ -36,6 +37,12 @@ export const ContentViewer = (props) => {
     )
 }
 
+/**
+ * Field Viewer
+ * 
+ * @param {} props 
+ * @returns 
+ */
 const FieldViewer = (props) => {
 
     const { field, value } = props
@@ -46,7 +53,30 @@ const FieldViewer = (props) => {
     switch(type) {
         case TYPES.STRING:
             return <Property label={label} value={value} />
+        case TYPES.ENTITY:
+            return <EntityViewer field={field} value={value} />
         default:
             return <div>{label}</div>
     }
+}
+
+/**
+ * EntityViewer
+ */
+const EntityViewer = (props) => {
+    const { field, value } = props
+    const { item, label } = field
+    const content = new Content(item, value)
+    const form = content.form()
+    const fields = Object.keys(form).map(key => form[key])
+    return (
+        <div className='entity-viewer'>
+            <header>
+                {label}
+            </header>
+            <main>
+                { fields.map( field => <FieldViewer field={field} value={value[field.id]} /> )}
+            </main>
+        </div>
+    )
 }

package/src/domain/TablePage.js

@@ -334,6 +334,7 @@ const TableEditor = (props) => {
                             id: field.id,
                             label: field.label,
                             type: field.type,
+                            format: field.format,
                             onChange: field.id === "checked" ? checkOne : field.editable ? change : null,     /* checked has it´s own handler */
                             options
                         }

package/src/html/table.js

@@ -4,6 +4,7 @@ import { CheckBox } from './checkbox'
 import { Icon } from './icon'
 import { Text } from './text'
 import './table.css'
+import { FORMATS } from '../domain/ContentType'
 
 const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 
@@ -130,7 +131,7 @@ const DataTableRow = (props) => {
 const DataTableCell = ({ row, column, cell, editable }) => {
 
     const render = (type) => {
-        const { id, disabled = false, min, max, onChange, options } = column
+        const { id, disabled = false, min, max, onChange, format, options } = column
         if (id === "checked") {
             return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} />
         } else if (editable && onChange) {
@@ -150,7 +151,7 @@ const DataTableCell = ({ row, column, cell, editable }) => {
             switch (type) {
                 case "ICON": return <Icon icon={cell} />
                 case "Boolean": return <BooleanCellViewer id={id} value={cell} />
-                case "String": return <StringCellViewer id={id} value={cell} options={options} />
+                case "String": return <StringCellViewer id={id} value={cell} format={format} options={options} />
                 default: return cell
             }
         }
@@ -172,9 +173,12 @@ const BooleanCellViewer = ({ id, value = false }) => {
 /**
  * String Cell Viewer
  */
-const StringCellViewer = ({ id, value, options }) => {
+const StringCellViewer = ({ id, value, format, options }) => {
     const option = options ? options.find(o => o.value === value) : null
-    const text = option ? option.label : value
+    let text = option ? option.label : value
+    switch (format) {
+        case FORMATS.DATE: text = new Date(text).toLocaleDateString(); break;
+    }
     return (<div className="field-editor string-viewer">{text}</div>)
 }