ywana-core8 0.0.531 → 0.0.534

package/package.json

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

package/src/domain/CollectionPage.css

@@ -5,6 +5,7 @@ header.collection-page {
 menu.collection-page {
     display: flex;
     flex-direction: column;
+    border: solid 3px red;
 }
 
 menu.collection-page>header {
@@ -20,6 +21,11 @@ menu.collection-page>main {
     overflow:auto;
 }
 
+menu.collection-page>footer>.search-box {
+    border-top: dotted 1px var(--divider-color);
+    padding: 0 1rem 1rem 1rem;
+}
+
 main.collection-page {
     display: flex;
     flex-direction: column;

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 } from '../html'
+import { Button, Header, Icon, List, Menu, MenuIcon, MenuItem, Text, Tree, TreeItem, TreeNode, TextField } from '../html'
 import { Content, TYPES } from './ContentType'
 import { ContentEditor, TabbedContentEditor, TreededContentEditor } from './ContentEditor'
 import { CreateContentDialog } from './CreateContentDialog'
@@ -15,16 +15,16 @@ import "./CollectionPage.css"
 export const CollectionPage = (props) => {
 
     const site = useContext(SiteContext)
-    const { 
-        id = "collection", 
+    const {
+        id = "collection",
         icon, title, name = "Collection 1", className,
-        schema, url, field, host, page, fetching= false, 
+        schema, url, field, host, page, fetching = false,
         actions = [], onSelect,
         canFilter = false, canAdd = false, canDelete = false, canEdit = false,
-        autosave = false, delay = 1000, 
+        autosave = false, delay = 1000,
         groupBy, levels, sorter,
-        editor, 
-        children 
+        editor,
+        children
     } = props
 
     const [pageContext, setPageContext] = useContext(PageContext)
@@ -51,24 +51,24 @@ export const CollectionPage = (props) => {
     function renderActions() {
         return actions.map(element => {
             const action = () => element.props.action(pageContext)
-            const clone = React.cloneElement(element, { action })
+            const clone = React.cloneElement(element, { action })
             return clone
         })
     }
-    
+
     return (
         <Fragment>
             <Header className={`collection-page ${className}`} title={<Text>{title}</Text>}>
-                { canAdd ? <Button icon="add" label="Add" action={add} /> : false }
+                {canAdd ? <Button icon="add" label="Add" action={add} /> : false}
                 &nbsp;
                 <Button icon="refresh" label="Reload" action={reload} />
                 {renderActions()}
             </Header>
             <menu className={`collection-page ${className}`}>
-                <Header title={<Text>Lista de {name}</Text>} >
+                <Header title={<Text>{name}</Text>} >
                 </Header>
-                {canFilter ? <CollectionFilters schema={schema}/> : null }
-                {levels ? <CollectionTree icon={icon} levels={levels} onSelect={onSelect} sorter={sorter}/> : <CollectionList groupBy={groupBy} onSelect={onSelect}/>}
+                {canFilter ? <CollectionFilters schema={schema} /> : null}
+                {levels ? <CollectionTree icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} /> : <CollectionList groupBy={groupBy} onSelect={onSelect} />}
             </menu>
             <main key={id} className={`collection-page ${className}`}>
                 <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} />
@@ -83,7 +83,7 @@ export const CollectionPage = (props) => {
  */
 export const CollectionFilters = (props) => {
 
-    const { schema, onChange } = props
+    const { schema, onChange } = props
     const [form, setForm] = useState({})
 
     const filterSchema = useMemo(() => {
@@ -166,9 +166,10 @@ const CollectionList = (props) => {
  */
 export const CollectionTree = (props) => {
 
-    const { icon="description", levels, onSelect, sorter } = props
+    const { icon = "description", levels, onSelect, sorter } = props
     const [pageContext, setPageContext] = useContext(PageContext)
     const { all = [] } = pageContext
+    const [filter, setFilter] = useState()
 
     function clear() {
         pageContext.clear()
@@ -182,6 +183,10 @@ export const CollectionTree = (props) => {
         if (onSelect) onSelect(id)
     }
 
+    function search(id, value) {
+        setFilter(value)
+    }
+
     function group(items, by) {
         return items.reduce((nodes, field) => {
             let node = nodes.find(n => n.name === field[by])
@@ -214,13 +219,21 @@ export const CollectionTree = (props) => {
     }
 
     const items = sorter ? sorter(all) : all
-    const nodes = generateNodes(levels, items)
+    const items2 = filter ? items.filter(item => item.name.toUpperCase().indexOf(filter.toUpperCase()) >= 0) : items
+    const nodes = generateNodes(levels, items2)
     return (
-        <main>
-            <Tree>
-                {renderNodes(nodes)}
-            </Tree>
-        </main>
+        <>
+            <main>
+                <Tree>
+                    {renderNodes(nodes)}
+                </Tree>
+            </main>
+            <footer>
+                <div className='search-box'>
+                    <TextField icon="search" label="Search" onChange={search} outlined className="search-box" />
+                </div>
+            </footer>
+        </>
     )
 }
 

package/src/site/site.test.js

@@ -10,6 +10,7 @@ import { UploadDialog } from '../widgets/upload/UploadDialog'
 import { Uploader } from '../widgets/upload/Uploader'
 import { TabbedTablePage } from '../domain/TabbedTablePage'
 import { TablePage } from '../domain/TablePage'
+import { CollectionPage } from '../domain/CollectionPage'
 import { FORMATS, TYPES } from '../domain/ContentType'
 import { TableTest } from '../html/table.test'
 
@@ -18,19 +19,22 @@ const SiteTest = (prop) => {
     const footer = <div>FOOTER</div>
 
     return (
-        <Site icon="star" title="Site Test" init={"PAGE2"} 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>
             <Page id="PAGE2" section="SECTION1" icon="description" title="Page 2" layout="workspace">
                 <Page2 />
             </Page>
-            <Page id="PAGE3" section="SECTION1" icon="description" title="Page 3" layout="workspace">
+            <Page id="PAGE3" section="SECTION1" icon="description" title="TablePage" layout="workspace">
                 <Page3 />
             </Page>
             <Page id="PAGE4" section="SECTION1" icon="description" title="Page 4" layout="workspace">
                 <Page4 />
             </Page>
+            <Page id="PAGE5" section="SECTION1" icon="description" title="CollectionPage" layout="workspace">
+                <Page5 />
+            </Page>
         </Site>
     )
 }
@@ -183,4 +187,34 @@ const Page4 = (props) => {
             <TableTest />
         </Fragment>
     )
+}
+
+const Page5 = (props) => {
+
+    const ENTITYTYPE = {
+        name  : { id: "name"  , section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
+        field1: { id: "field1", section: "E-INFO1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field1" },
+        field2: { id: "field2", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field2" },
+        field3: { id: "field3", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
+
+    }
+
+    const schema = {
+        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: [
+            { label: "Pendiente", value: "NOT_CLASSIFIED" },
+            { label: "Clasificada", value: "CLASSIFIED"}, 
+        ]},
+        field1: { id: "field1", section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "field1" },
+        field2: { id: "field2", section: "B", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "field2" },
+        field4: { id: "field4", section: "B", type: TYPES.STRING                  , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: true             , label: "Color"  },
+        field5: { id: "field5", section: "B", type: TYPES.ENTITY, item: ENTITYTYPE, format: FORMATS.NONE , editable: true, tab: false, grouper: false, column: true , filter: true , like: false, label: "Entity5"},
+
+    }
+
+    return (
+        <Fragment>
+            <CollectionPage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" levels={["color"]} canAdd={true} />
+        </Fragment>
+    )
 }