ywana-core8 0.0.706 → 0.0.708

package/package.json

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

package/src/domain2/CollectionContext.js

@@ -39,7 +39,7 @@ export const CollectionContextProvider = (props) => {
 
     async function select(id) {
         if (fetching) {
-            const result = await this.fetch(id)
+            const result = await fetch(id)
             setSelected(result)
         } else {
             const result = this.all.find(item => item.id === id);
@@ -56,13 +56,7 @@ export const CollectionContextProvider = (props) => {
         delete next[id]
         setCustomFilters(next)
     }
-
-/*
-    async function reloadSelection() {
-        const result = await this.fetch(this.selected.id)
-        this.selected = result
-    }
-
+    
     async function fetch(id) {
         try {
             const result = await API.find(id)
@@ -71,6 +65,13 @@ export const CollectionContextProvider = (props) => {
             console.log(error)
         }
     }
+    
+    /*
+    async function reloadSelection() {
+        const result = await this.fetch(this.selected.id)
+        this.selected = result
+    }
+
 
     function clear() {
         this.selected = null

package/src/domain2/CollectionEditor.js

@@ -1,17 +1,15 @@
 import React, { useContext } from 'react'
-import { CollectionContext } from './CollectionContext'
 
 /**
  * Collection Editor
  */
  export const CollectionEditor = (props) => {
 
-    const context = useContext(CollectionContext)
-    const { selected } = context
+    const { customEditor } = props
 
     return (
         <div className="collection-editor">
-            editor
+            {customEditor}
         </div>
     )
 }

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 {
@@ -29,6 +30,7 @@
     padding: 0.5rem;
     font-size: .8rem;
     font-weight: 300;
+    text-transform: uppercase;
 }
 
 .collection-filter-resume-label {
@@ -47,4 +49,5 @@
     display: flex;
     flex-direction: column;
     padding: 0 0 1rem 0;
+    border-bottom: solid 1px var(--divider-color);
 }

package/src/domain2/CollectionFilters.js

@@ -20,7 +20,7 @@ export const CollectionFilters = (props) => {
     }, [schema])
 
     function change(id, value) {
-        context.setFilters({ ...filters, [id]: value })
+        if (filters) context.setFilters({ ...filters, [id]: value })
     }
 
     function toggle() {

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,30 +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])
 
-    const items = all.map(item => {
-        return {
-            icon: "folder",
-            line1: item.name,
-            meta: item.state,
-        }
-    })
+    function changeSearch(id, value) {
+        setSearch(value)
+    }
+
+    function select(id) {
+        context.select(id)
+    }
+
+    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} />
+            <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

@@ -14,16 +14,19 @@ export const CollectionPage = (props) => {
     const {
         host, url, schema,
         layout,
-        canFilter, customFilters
+        title,
+        canFilter, customFilters,
+        listGroupBy, listSearchBy, listItemRenderer,
+        customEditor
     } = props
 
     return (
         <div className={`collection-page ${layout}`}>
             <CollectionContextProvider host={host} url={url}>
-                <Header title="CollectionPage" />
+                <Header title={title} />
                 {canFilter ? <CollectionFilters schema={schema} >{customFilters}</CollectionFilters> : null}
-                <CollectionList />
-                <CollectionEditor />
+                <CollectionList itemRenderer={listItemRenderer} groupBy={listGroupBy} searchBy={listSearchBy} />
+                <CollectionEditor customEditor={customEditor} />
             </CollectionContextProvider>
         </div>
 

package/src/domain2/CollectionPage.test.js

@@ -16,14 +16,28 @@ 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",
         schema,
         layout: "ide",
+        title: <CustomTitle />,
         canFilter: true,
-        customFilters: [<CustomFilter1 />, <CustomFilter2 />]
+        customFilters: [<CustomFilter1 />, <CustomFilter2 />],
+        listSearchBy: ["name"],
+        listGroupBy: "name",
+        listItemRenderer,
+        customEditor: <CustomEditor />
     }
 
     return (
@@ -33,6 +47,29 @@ const CollectionPageTest = (prop) => {
     )
 }
 
+const CustomTitle = (props) => {
+    return (
+        <h1>Custom Title</h1>
+    )
+}
+
+const CustomEditor = () => {
+
+    const context = useContext(CollectionContext)
+    const { all, selected } = context
+
+    return (
+        <div>
+            <header>
+                CUSTOM EDITOR {all.length} 
+                </header>
+                <main>
+                    ID: {selected ? selected.id : null}
+                </main>
+        </div>
+    )
+}
+
 const CustomFilter1 = (props) => {
 
     const context = useContext(CollectionContext)