ywana-core8 0.0.191 → 0.0.195

package/package.json

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

package/src/domain/ContentViewer.css

@@ -0,0 +1,3 @@
+.content-viewer>main>.property {
+    border-bottom: solid 1px var(--divider-color);
+}

package/src/domain/ContentViewer.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Property } from '../html'
+import { TYPES } from './ContentType'
+
+/**
+ * Content Viewer
+ * 
+ * @param {*} props 
+ * @returns 
+ */
+export const ContentViewer = (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} className="content-viewer">
+                        <header>
+                            {title}
+                        </header>
+                        <main>
+                            { fields.map( field => <FieldViewer key={field.id} field={field} value={value[field.id]} />)}
+                        </main>
+                    </section>
+                )
+            })}
+        </div>
+    )
+}
+
+/**
+ * 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>
+    )
+}

package/src/domain/TablePage.js

@@ -5,6 +5,7 @@ import { HTTPClient, Session } from '../http'
 import { PageContext, SiteContext } from '../site'
 import { ContentEditor } from './ContentEditor'
 import { Content } from './ContentType'
+import { ContentViewer } from './ContentViewer'
 import { CreateContentDialog } from './CreateContentDialog'
 import "./TablePage.css"
 
@@ -145,7 +146,7 @@ const TableRowEditor = (props) => {
                 <Icon icon="close" clickable action={onClose} />
             </Header>
             <main>
-                { editable ? <ContentEditor content={content} onChange={onChange} filter={filter} /> : <ContentViewer content={content} />
+                { editable ? <ContentEditor content={content} onChange={onChange} filter={filter} /> : <ContentViewer content={content} /> }
             </main>
         </div>
     )