ywana-core8 0.0.475 → 0.0.478

package/package.json

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

package/src/domain/CollectionPage.js

@@ -15,9 +15,20 @@ import "./CollectionPage.css"
 export const CollectionPage = (props) => {
 
     const site = useContext(SiteContext)
-    const { id = "collection", icon, title, name = "Collection 1", schema, url, page, host, groupBy, editor, field, autosave = false, delay = 1000, actions, levels, onSelect, children } = props
+    const { 
+        id = "collection", 
+        icon, title, name = "Collection 1", 
+        schema, url, field, host, page, fetching= false, 
+        actions = [], onSelect,
+        canFilter = false, canAdd = false, canDelete = false, canEdit = false,
+        autosave = false, delay = 1000, 
+        groupBy, levels, 
+        editor, 
+        children 
+    } = props
+
     const [pageContext, setPageContext] = useContext(PageContext)
-    const context = CollectionContext(url, field, host, page)
+    const context = CollectionContext(url, field, host, page, fetching)
 
     useEffect(async () => {
         await context.load()
@@ -48,13 +59,15 @@ export const CollectionPage = (props) => {
     return (
         <Fragment>
             <Header className="collection-page" title={<Text>{title}</Text>}>
-                <Button icon="add" label="Add" action={add} />
+                { canAdd ? <Button icon="add" label="Add" action={add} /> : false }
+                &nbsp;
                 <Button icon="refresh" label="Reload" action={reload} />
                 {renderActions()}
             </Header>
             <menu className="collection-page">
                 <Header title={<Text>Lista de {name}</Text>} >
                 </Header>
+                {canFilter ? <CollectionFilters schema={schema}/> : null }
                 {levels ? <CollectionTree levels={levels} onSelect={onSelect}/> : <CollectionList groupBy={groupBy} onSelect={onSelect}/>}
             </menu>
             <main key={id} className="collection-page">
@@ -65,6 +78,20 @@ export const CollectionPage = (props) => {
     )
 }
 
+/**
+ * Collection Filters
+ */
+const CollectionFilters = (props) => {
+
+    const { schema } = props
+
+    return (
+        <div className="collection-filters">
+            TODO: filters
+        </div>
+    )
+}
+
 /**
  * Collection List
  */
@@ -88,7 +115,7 @@ const CollectionList = (props) => {
 
     const items = all ? all.map(content => ({
         id: content.id,
-        line1: content.name,
+        line1: content.name || content.centre, // centre: Signflow legacy
         line2: content.description,
         content
     })) : []
@@ -237,7 +264,7 @@ const CollectionEditor = (props) => {
 /**
  * Collection Context
  */
-export const CollectionContext = (url, field, host, page) => {
+export const CollectionContext = (url, field, host, page, fetching) => {
 
     const API = CollectionAPI(url, host)
 
@@ -256,9 +283,23 @@ export const CollectionContext = (url, field, host, page) => {
             return
         },
 
-        select(id) {
-            const result = this.all.find(item => item.id === id);
-            this.selected = result;
+        async select(id) {
+            if (fetching) {
+                const result = await this.fetch(id)
+                this.selected = result
+            } else {
+                const result = this.all.find(item => item.id === id);
+                this.selected = result;
+            }
+        },
+
+        async fetch(id) {
+            try {
+                const result = await API.find(id)
+                return result
+            } catch (error) {
+                console.log(error)
+            }
         },
 
         clear() {

package/src/html/textfield.test.js

@@ -25,10 +25,11 @@ const TextFieldTest = (prop) => {
         { label: "NO", value: "false" },
     ]
 
+    console.log(form)
     return (
         <>
             <DropDown id="b1" label="Boolean1" onChange={change} options={options2} value={form.b1} />
-            <TokenField id="token1" label="Tokens" onChange={change} options={options}/>
+            <TokenField id="token1" label="Tokens" onChange={change} />
             <TextField id="name" label="Name" value={form.name} onChange={change} />
             <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={false}/>
             <DropDown id="gender2" label="Dropdown 2" value={form.gender2} onChange={change} options={options} predictive={true}/>

package/src/html/tokenfield.js

@@ -33,7 +33,7 @@ export const TokenField = ({ id, label, tokens = [], readOnly, options, onChange
       event.preventDefault()
       event.stopPropagation()
       const token = event.target.value
-      const next = tokens.concat(token)
+      const next = tokens.concat(token.trim())
       if (onChange) onChange(id, next)
       setValue('')
     }