ywana-core8 0.0.707 → 0.0.708

package/package.json

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

package/src/domain2/CollectionFilters.css

@@ -3,6 +3,7 @@
     flex-direction: column;
     width: 30rem;
     background-color: rgb(243, 243, 243);
+    border-right: solid 1px var(--divider-color);
 }
 
 .collection-filters>header {
@@ -48,4 +49,5 @@
     display: flex;
     flex-direction: column;
     padding: 0 0 1rem 0;
+    border-bottom: solid 1px var(--divider-color);
 }

package/src/domain2/CollectionList.css

@@ -0,0 +1,17 @@
+.collection-list {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border-right: solid 1px var(--divider-color);
+}
+
+.collection-list .list {
+    flex: 1;
+}
+
+.collection-list .search-box {
+    border-top: solid 1px var(--divider-color);
+    padding: .5rem;
+    display: flex;
+    align-items: center;
+}

package/src/domain2/CollectionList.js

@@ -1,35 +1,55 @@
-import React, { useContext, useEffect } from 'react'
-import { List } from '../html'
+import React, { useContext, useEffect, useState } from 'react'
+import { List, TextField, Icon } from '../html'
 import { CollectionContext } from './CollectionContext'
+import './CollectionList.css'
 
 /**
  * Collection List
  */
 export const CollectionList = (props) => {
 
+    const { itemRenderer, groupBy, searchBy = [] } = props
     const context = useContext(CollectionContext)
     const { all = [], selected, filters, customFilters } = context
+    const [search, setSearch] = useState('')
 
     useEffect(() => {
         context.load()
     }, [filters, customFilters])
 
+    function changeSearch(id, value) {
+        setSearch(value)
+    }
+
     function select(id) {
         context.select(id)
     }
 
-    const items = all.map(item => {
-        return {
-            id: item.id,
-            icon: "folder",
-            line1: item.name,
-            meta: item.state,
-        }
-    })
+    const searched = searchBy.length > 0 && search.length > 0 ? all.filter(item => {
+        const text = searchBy.map(field => item[field]).join(' ').toLowerCase()
+        return text.includes(search.toLowerCase())
+    }) : all
+
+    const items = searched
+        .map(item => {
+            if (itemRenderer) return itemRenderer(item)
+            return {
+                id: item.id,
+                icon: "folder",
+                line1: item.name,
+                meta: item.state,
+            }
+        })
 
     return (
         <div className="collection-list">
-            <List items={items} onSelect={select} />
+            <List items={items} onSelect={select} groupBy={groupBy} />
+            {searchBy.length > 0 ? (
+                <div className="search-box">
+                    <Icon icon="search" size="small" />
+                    <TextField placeholder="Search" onChange={changeSearch} outlined />
+                </div>
+            ) : null}
         </div>
     )
 }

package/src/domain2/CollectionPage.css

@@ -1,3 +1,10 @@
+.collection-page {
+  border: solid 3px red;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 .collection-page.ide {
   display: grid;
   grid-template-areas: "header  header" 
@@ -9,6 +16,7 @@
 
 .collection-page.ide .header {
   grid-area: header;
+  border-bottom: solid 1px var(--divider-color);
 }
 
 .collection-page.ide .collection-filters {

package/src/domain2/CollectionPage.js

@@ -13,9 +13,10 @@ export const CollectionPage = (props) => {
 
     const {
         host, url, schema,
-        layout, 
+        layout,
         title,
         canFilter, customFilters,
+        listGroupBy, listSearchBy, listItemRenderer,
         customEditor
     } = props
 
@@ -24,8 +25,8 @@ export const CollectionPage = (props) => {
             <CollectionContextProvider host={host} url={url}>
                 <Header title={title} />
                 {canFilter ? <CollectionFilters schema={schema} >{customFilters}</CollectionFilters> : null}
-                <CollectionList />
-                <CollectionEditor customEditor={customEditor}/>
+                <CollectionList itemRenderer={listItemRenderer} groupBy={listGroupBy} searchBy={listSearchBy} />
+                <CollectionEditor customEditor={customEditor} />
             </CollectionContextProvider>
         </div>
 

package/src/domain2/CollectionPage.test.js

@@ -16,6 +16,16 @@ const CollectionPageTest = (prop) => {
         }
     }
 
+    const listItemRenderer = (item) => {
+        return {
+            id: item.id,
+            icon: "star",
+            line1: item.name,
+            line2: item.name,
+            meta: item.state,
+        }
+    }
+
     const props = {
         host: "http://localhost:3000",
         url: "/references",
@@ -24,6 +34,9 @@ const CollectionPageTest = (prop) => {
         title: <CustomTitle />,
         canFilter: true,
         customFilters: [<CustomFilter1 />, <CustomFilter2 />],
+        listSearchBy: ["name"],
+        listGroupBy: "name",
+        listItemRenderer,
         customEditor: <CustomEditor />
     }