ywana-core8 0.0.193 → 0.0.197

package/package.json

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

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,6 @@
 import React from 'react'
 import { Property } from '../html'
-import { TYPES } from './ContentType'
+import { Content, TYPES } from './ContentType'
 
 /**
  * Content Viewer
@@ -10,23 +10,24 @@ import { TYPES } from './ContentType'
  */
 export const ContentViewer = (props) => {
 
-    const { content, field } = props
+    const { content } = props
 
     if (!content) return <div>No Content...</div>
 
     const sections = content.sections()
-
+    const value = content.value()
+    console.log(value)
     return (
         <div className="content-viewer">
             {sections.map(section => {
                 const { title, fields } = section
                 return (
-                    <section key={title}>
+                    <section key={title} className="content-viewer">
                         <header>
                             {title}
                         </header>
                         <main>
-                            { fields.map( field => <FieldViewer key={field.id} field={field} value={content[field.id]} />)}
+                            { fields.map( field => <FieldViewer key={field.id} field={field} value={value[field.id]} />)}
                         </main>
                     </section>
                 )
@@ -35,17 +36,46 @@ export const ContentViewer = (props) => {
     )
 }
 
+/**
+ * Field Viewer
+ * 
+ * @param {} props 
+ * @returns 
+ */
 const FieldViewer = (props) => {
 
     const { field, value } = props
     const { id, type, item, label } = field
 
     console.log('FieldViewer', field, value)
-    
+
     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>
+    )
 }