ywana-core8 0.0.629 → 0.0.632

package/package.json

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

package/src/domain/CollectionPage.css

@@ -9,6 +9,9 @@ menu.collection-page {
 
 menu.collection-page>header {
     border-bottom: dotted 1px var(--divider-color);
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem
 }
 
 menu.collection-page>nav.collection-filters {

package/src/domain/CollectionPage.js

@@ -2,7 +2,7 @@ import equal from 'deep-equal'
 import React, { Fragment, useContext, useEffect, useRef, useState, useMemo } from 'react'
 import { HTTPClient, Session } from '../http'
 import { PageContext } from '../site'
-import { Button, Header, Icon, List, Menu, MenuIcon, MenuItem, Text, Tree, TreeItem, TreeNode, TextField } from '../html'
+import { Button, Header, Icon, List, Menu, MenuIcon, MenuItem, Text, Tree, TreeItem, TreeNode, TextField, Chip } from '../html'
 import { Content, TYPES } from './ContentType'
 import { ContentEditor, TabbedContentEditor, TreededContentEditor } from './ContentEditor'
 import { CreateContentDialog } from './CreateContentDialog'
@@ -30,7 +30,7 @@ export const CollectionPage = (props) => {
 
     const [pageContext, setPageContext] = useContext(PageContext)
     const context = CollectionContext(url, field, host, page, fetching)
-    const [showFilter, setShowFilter] = useState(false)
+
     const { all } = pageContext
 
     useEffect(async () => {
@@ -38,9 +38,7 @@ export const CollectionPage = (props) => {
         setPageContext(context)
     }, [])
 
-    function toggleFilters() {
-        setShowFilter(!showFilter)
-    }
+
 
     async function reload() {
         await pageContext.load()
@@ -79,14 +77,11 @@ export const CollectionPage = (props) => {
                 {renderActions()}
             </Header>
             <menu className={`collection-page ${className}`}>
-                <Header title={<Text>{name}</Text>} >
-                    {canFilter ? showFilter ? <Icon icon="filter_list" size="small" clickable action={toggleFilters} /> : <Icon icon="filter_list_off" size="small" clickable action={toggleFilters} /> : false}
-                </Header>
-                {canFilter && showFilter ? <CollectionFilters schema={schema} /> : null}
+                {canFilter ? <CollectionFilters schema={schema} /> : null}
                 {levels ? <CollectionTree schema={schema} icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} searchBy={searchBy} /> : <CollectionList groupBy={groupBy} onSelect={onSelect} searchBy={searchBy} />}
             </menu>
             <main key={id} className={`collection-page ${className}`}>
-                <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} canEdit={canEdit} onReload={reloadSelection} patch={patch}/>
+                <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} canEdit={canEdit} onReload={reloadSelection} patch={patch} />
                 {children ? <article>{children}</article> : null}
                 <footer>
                     {footer}
@@ -103,6 +98,7 @@ export const CollectionFilters = (props) => {
 
     const { schema, onChange } = props
     const [form, setForm] = useState({})
+    const [showFilter, setShowFilter] = useState(false)
 
     const filterSchema = useMemo(() => {
         const filterSchema = Object.assign({}, schema)
@@ -133,15 +129,29 @@ export const CollectionFilters = (props) => {
         change({})
     }
 
+    function toggleFilters() {
+        setShowFilter(!showFilter)
+    }
+
     const content = new Content(filterSchema, form)
     return (
         <Fragment>
-            <nav className="collection-filters">
-                <Icon icon="clear_all" size="small" clickable action={clear} />
-            </nav>
-            <main className="collection-filters">
-                <ContentEditor content={content} onChange={change} />
-            </main>
+            <header>
+                <div className='expand'>
+                    <Chip label="Activas" />
+                </div>
+                {showFilter ? <Icon icon="expand_less" size="small" clickable action={toggleFilters} /> : <Icon icon="expand_more" size="small" clickable action={toggleFilters} />}
+            </header>
+            {showFilter ? (
+                <>
+                    <nav className="collection-filters">
+                        <Icon icon="clear_all" size="small" clickable action={clear} />
+                    </nav>
+                    <main className="collection-filters">
+                        <ContentEditor content={content} onChange={change} />
+                    </main>
+                </>
+            ) : null}
         </Fragment>
     )
 }
@@ -310,7 +320,7 @@ export const CollectionTree = (props) => {
 const CollectionEditor = (props) => {
     const [pageContext, setPageContext] = useContext(PageContext)
     const { selected } = pageContext
-    const { icon, schema, layout, autosave = false, delay = 1000, canDelete, canEdit, onReload, patch=false } = props
+    const { icon, schema, layout, autosave = false, delay = 1000, canDelete, canEdit, onReload, patch = false } = props
     const timer = useRef(null)
     const [form, setForm] = useState(selected)
 
@@ -348,10 +358,10 @@ const CollectionEditor = (props) => {
     }
 
     async function save() {
-        if (patch) { 
+        if (patch) {
             await pageContext.patch(form.id, form)
-        } else { 
-            await pageContext.update(form) 
+        } else {
+            await pageContext.update(form)
         }
         setPageContext(Object.assign({}, pageContext))
     }

package/src/domain/ContentEditor.js

@@ -412,34 +412,10 @@ export const CollectionEditor = ({ field, value = [], onChange, onReload }) => {
     }
   }
 
-  function change(index, cellId, cellValue) {
-    if (onChange) {
-      const next = value.slice()
-      next[index][cellId] = cellValue
-      onChange(id, next)
-    }
-  }
-
   function reload() {
     if (onReload) onReload()
   }
 
- /* const columns = Object.values(item)
-    .filter(field => field.column === true)
-    .map((item) => ({ ...item, onChange: change }))
-  columns.push({ id: 'actions', label: 'Actions' })
-
-  const rows = value.map((item, index) => ({
-    ...item,
-    id: index,
-    actions: [
-      <Icon icon='delete' clickable action={() => remove(index)} size="small" />
-    ]
-  }))
-
-  const table = { columns, rows }
-*/
-
   return (
     <div className='collection-editor'>
       {

package/src/domain/ContentType.js

@@ -79,7 +79,7 @@ export class ContentType {
         const attributes = Object.entries(this._schema)
         return attributes
             .filter(([name, attr]) => attr.required === true)
-            .every(([name, attr]) => data[name] !== undefined ? this.checkType(attr, data[name]) : false)
+            .every(([name, attr]) => data[name] && typeof(data[name]) !== undefined ? this.checkType(attr, data[name]) : false)
     }
 
     /**
@@ -123,42 +123,47 @@ export class ContentType {
         const fields = Object.entries(this._schema)
         const next = fields.reduce((next, [name, field]) => {
 
-            const { type, item, optional } = field
+            const { type, item, optional, outsider } = field
             const entryData = data ? data[name] : null
 
-            switch (type) {
+            if (outsider === true) {
+                // Dont send outsider data
+            } else {
 
-                case TYPES.STRING:
-                    next[name] = entryData || field.default
-                    break;
+                switch (type) {
 
-                case TYPES.NUMBER:
-                    next[name] = entryData || field.default
-                    break;
+                    case TYPES.STRING:
+                        next[name] = entryData || field.default
+                        break;
 
-                case TYPES.BOOLEAN:
-                    next[name] = entryData || field.default
-                    break
+                    case TYPES.NUMBER:
+                        next[name] = entryData || field.default
+                        break;
 
-                case TYPES.ENTITY:
-                    if (optional === true && !entryData) break;
-                    const child1 = new ContentType(item)
-                    next[name] = child1.value(entryData)
-                    break;
+                    case TYPES.BOOLEAN:
+                        next[name] = entryData || field.default
+                        break
 
-                case TYPES.ARRAY:
-                    if (item === TYPES.STRING) {
-                        next[name] = entryData ? entryData : []
-                    } else {
-                        const child2 = new ContentType(item)
-                        next[name] = entryData ? entryData.map(data2 => child2.value(data2)) : []
-                    }
-                    break;
+                    case TYPES.ENTITY:
+                        if (optional === true && !entryData) break;
+                        const child1 = new ContentType(item)
+                        next[name] = child1.value(entryData)
+                        break;
 
-                default:
-                    next[name] = field
-                    break;
+                    case TYPES.ARRAY:
+                        if (item === TYPES.STRING) {
+                            next[name] = entryData ? entryData : []
+                        } else {
+                            const child2 = new ContentType(item)
+                            next[name] = entryData ? entryData.map(data2 => child2.value(data2)) : []
+                        }
+                        break;
+
+                    default:
+                        next[name] = field
+                        break;
 
+                }
             }
 
             return next

package/src/site/site.test.js

@@ -20,7 +20,7 @@ const SiteTest = (prop) => {
     const footer = <div>FOOTER</div>
 
     return (
-        <Site icon="star" title="Site Test" init={"PAGE3"} footer={footer}>
+        <Site icon="star" title="Site Test" init={"PAGE5"} footer={footer}>
             <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
                 <Page1 />
             </Page>
@@ -201,7 +201,7 @@ const Page5 = (props) => {
     const schema = {
         field6: { id: "field6", section: "C", type: TYPES.ARRAY , item: ENTITYTYPE                                                                                  , filter: false            , label: "Collection 100"},
         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: [
+        state : { id: "state" , section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: true             , label: "State" , options: [
             { label: "Pendiente", value: "NOT_CLASSIFIED" },
             { label: "Clasificada", value: "CLASSIFIED"}, 
         ]},
@@ -217,9 +217,9 @@ const Page5 = (props) => {
             <CollectionPage 
                 title="Referencias" 
                 schema={schema} host="http://localhost:3000" url="/references" fetching={true}              // resource 
-                searchBy={["field1"]} levels={["color"]} canFilter={true}                                   // menu
+                searchBy={["name"]} levels={["color"]} canFilter={true}                                   // menu
                 editor="TABBED" canAdd={true}                                                               // editor
             />
         </Fragment>
     )
-}
+}