ywana-core8 0.0.534 → 0.0.537

package/package.json

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

package/src/domain/CollectionPage.css

@@ -5,7 +5,6 @@ header.collection-page {
 menu.collection-page {
     display: flex;
     flex-direction: column;
-    border: solid 3px red;
 }
 
 menu.collection-page>header {

package/src/domain/CollectionPage.js

@@ -20,7 +20,7 @@ export const CollectionPage = (props) => {
         icon, title, name = "Collection 1", className,
         schema, url, field, host, page, fetching = false,
         actions = [], onSelect,
-        canFilter = false, canAdd = false, canDelete = false, canEdit = false,
+        canFilter = false, canAdd = false, canDelete = false, canEdit = false, searchBy,
         autosave = false, delay = 1000,
         groupBy, levels, sorter,
         editor,
@@ -68,7 +68,7 @@ export const CollectionPage = (props) => {
                 <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} />}
+                {levels ? <CollectionTree 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} />
@@ -133,9 +133,10 @@ export const CollectionFilters = (props) => {
  */
 const CollectionList = (props) => {
 
-    const { groupBy, onSelect } = props
+    const { groupBy, onSelect, searchBy=[] } = props
     const [pageContext, setPageContext] = useContext(PageContext)
     const { all = [] } = pageContext
+    const [filter, setFilter] = useState()
 
     function clear() {
         pageContext.clear()
@@ -149,15 +150,40 @@ const CollectionList = (props) => {
         if (onSelect) onSelect(id)
     }
 
-    const items = all ? all.map(content => ({
+    function changeSearch(id, value) {
+        setFilter(value)
+    }
+
+    function search() {
+        const items = filter ? all.filter(item => {
+            const result = searchBy.some(fieldName => {
+                const value = item[fieldName]
+                return value ? value.indexOf(filter.toUpperCase()) >= 0 : false
+            })
+            return result
+        }) : all
+        return items
+    }
+
+    const items = search()
+    const items2 = items.map(content => ({
         id: content.id,
         line1: content.name || content.centre || content.tag, // centre: Signflow legacy
         line2: content.description,
         content
-    })) : []
+    }))
 
     return (
-        <List items={items} onSelect={select} groupBy={groupBy} />
+        <>
+            <main>
+                <List items={items2} onSelect={select} groupBy={groupBy} />
+            </main>
+            <footer>
+                <div className='search-box'>
+                    <TextField icon="search" label="Search" onChange={changeSearch} outlined className="search-box" />
+                </div>
+            </footer>
+        </>
     )
 }
 
@@ -166,7 +192,7 @@ const CollectionList = (props) => {
  */
 export const CollectionTree = (props) => {
 
-    const { icon = "description", levels, onSelect, sorter } = props
+    const { icon = "description", levels, onSelect, sorter, searchBy=[] } = props
     const [pageContext, setPageContext] = useContext(PageContext)
     const { all = [] } = pageContext
     const [filter, setFilter] = useState()
@@ -183,7 +209,7 @@ export const CollectionTree = (props) => {
         if (onSelect) onSelect(id)
     }
 
-    function search(id, value) {
+    function changeSearch(id, value) {
         setFilter(value)
     }
 
@@ -218,8 +244,19 @@ export const CollectionTree = (props) => {
         })
     }
 
-    const items = sorter ? sorter(all) : all
-    const items2 = filter ? items.filter(item => item.name.toUpperCase().indexOf(filter.toUpperCase()) >= 0) : items
+    function search() {
+        const items = filter ? all.filter(item => {
+            const result = searchBy.some(fieldName => {
+                const value = item[fieldName]
+                return value ? value.indexOf(filter.toUpperCase()) >= 0 : false
+            })
+            return result
+        }) : all
+        return items
+    }
+
+    const items = search()
+    const items2 = sorter ? sorter(items) : items
     const nodes = generateNodes(levels, items2)
     return (
         <>
@@ -230,7 +267,7 @@ export const CollectionTree = (props) => {
             </main>
             <footer>
                 <div className='search-box'>
-                    <TextField icon="search" label="Search" onChange={search} outlined className="search-box" />
+                    <TextField icon="search" label="Search" onChange={changeSearch} outlined className="search-box" />
                 </div>
             </footer>
         </>

package/src/site/site.test.js

@@ -200,6 +200,8 @@ const Page5 = (props) => {
     }
 
     const schema = {
+        id  : { id: "id", type: TYPES.STRING },
+
         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" },
@@ -214,7 +216,7 @@ const Page5 = (props) => {
 
     return (
         <Fragment>
-            <CollectionPage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" levels={["color"]} canAdd={true} />
+            <CollectionPage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canAdd={true} searchBy={["field1"]} levels={["color"]}/>
         </Fragment>
     )
 }