ywana-core8 0.0.631 → 0.0.632

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.631",
+  "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/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)
     }
 
     /**

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>
     )
-}
+}