ywana-core8 0.0.530 → 0.0.533

package/package.json

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

package/src/domain/CollectionPage.css

@@ -20,6 +20,11 @@ menu.collection-page>main {
     overflow:auto;
 }
 
+menu.collection-page>main>.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'
@@ -169,6 +169,7 @@ export const CollectionTree = (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,12 +219,16 @@ 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>
+            <div className='search-box'>
+                <TextField icon="search" label="Buscar" onChange={search} outlined className="search-box"/>
+            </div>
         </main>
     )
 }

package/src/domain/ContentEditor.js

@@ -181,8 +181,6 @@ export const FieldEditor = ({ field, onChange, content, outlined = false }) => {
       return null
     } else {
       switch (type) {
-        case TYPES.IMAGE: 
-          return <div className='photo'><img url={value} /></div>
         case TYPES.ENTITY:
           return <EntityEditor field={field} value={value1} onChange={change} />
         case TYPES.STRING:
@@ -272,10 +270,17 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
 
   function renderFormat(format, options) {
     switch (format) {
+      case FORMATS.IMG:
+        return (
+          <div className='img-field'>
+            <img src={value} />
+            <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} readOnly={!editable} />
+          </div>
+        )
       case FORMATS.COLOR: return <ColorField id={id} onChange={change} value={value} />
       case FORMATS.HTML: return <Editor id={id} value={value} onChange={change} content={content} />
       case FORMATS.DATE: return <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} />
-      case FORMATS.DATERANGE: return <DateRange id={id} label={label} value={value} onChange={change} readOnly={!editable}/>
+      case FORMATS.DATERANGE: return <DateRange id={id} label={label} value={value} onChange={change} readOnly={!editable} />
       case FORMATS.TOKENS:
         return <TokenField id={id} label={label} onChange={change} options={buildOptions()} tokens={value} />
       default: