ywana-core8 0.0.566 → 0.0.569

package/package.json

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

package/src/domain/CollectionPage.css

@@ -11,6 +11,19 @@ menu.collection-page>header {
     border-bottom: dotted 1px var(--divider-color);
 }
 
+menu.collection-page>nav.collection-filters {
+    height: 2rem;
+    display: flex;
+    justify-content: flex-end;
+    border-bottom: dotted 1px var(--divider-color);
+    background-color: var(--background-color);
+}
+
+menu.collection-page>main.collection-filters {
+    border-bottom: dotted 1px var(--divider-color);
+    background-color: var(--background-color);
+}
+
 menu.collection-page>.list {
     overflow:auto;
 }

package/src/domain/CollectionPage.js

@@ -29,12 +29,17 @@ export const CollectionPage = (props) => {
 
     const [pageContext, setPageContext] = useContext(PageContext)
     const context = CollectionContext(url, field, host, page, fetching)
+    const [showFilter, setShowFilter] = useState(false)
 
     useEffect(async () => {
         await context.load()
         setPageContext(context)
     }, [])
 
+    function toggleFilters() {
+        setShowFilter(!showFilter)
+    }
+
     async function reload() {
         await pageContext.load()
         setPageContext(Object.assign({}, pageContext))
@@ -71,8 +76,9 @@ export const CollectionPage = (props) => {
             </Header>
             <menu className={`collection-page ${className}`}>
                 <Header title={<Text>{name}</Text>} >
+                    { canFilter ? showFilter ? <Icon icon="filter_list" size="small" clickable action={toggleFilters} /> :  <Icon icon="filter_list_off" size="small" clickable action={toggleFilters} /> : false }
                 </Header>
-                {canFilter ? <CollectionFilters schema={schema} /> : null}
+                {canFilter && showFilter ? <CollectionFilters schema={schema} /> : null}
                 {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}`}>
@@ -123,10 +129,10 @@ export const CollectionFilters = (props) => {
     const content = new Content(filterSchema, form)
     return (
         <Fragment>
-            <Header className="table-filters" title={<Text>Filters</Text>} >
-                <Icon icon="filter_list_off" size="small" clickable action={clear} />
-            </Header>
-            <main className="table-filters">
+            <nav className="collection-filters">
+                <Icon icon="clear_all" size="small" clickable action={clear} />
+            </nav>
+            <main className="collection-filters">
                 <ContentEditor content={content} onChange={change} />
             </main>
         </Fragment>
@@ -365,8 +371,13 @@ export const CollectionContext = (url, field, host, page, fetching) => {
     return {
 
         all: [],
+        filters: {},
         selected: null,
 
+        changeFilters(filters) {
+            this.filters = filters
+        },
+        
         async load() {
             try {
                 const data = await API.all(null, page);

package/src/html/tokenfield.js

@@ -33,9 +33,11 @@ export const TokenField = ({ id, label, tokens = [], readOnly, options, onChange
       event.preventDefault()
       event.stopPropagation()
       const token = event.target.value
-      const next = Array.isArray(tokens) ? tokens.concat(token) : [token]
-      if (onChange) onChange(id, next)
-      setValue('')
+      if (token && token.length > 0) {
+        const next = Array.isArray(tokens) ? tokens.concat(token) : [token]
+        if (onChange) onChange(id, next)
+        setValue('')
+      }
     }
 
     if (value === '' && tokens.length > 0 && event.key === 'Backspace') {

package/src/site/site.test.js

@@ -199,16 +199,16 @@ const Page5 = (props) => {
     }
 
     const schema = {
-        field6: { id: "field6", section: "C", type: TYPES.ARRAY , item: ENTITYTYPE, label: "Collection 100" },
-        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: [
+        field6: { id: "field6", section: "C", type: TYPES.ARRAY , item: ENTITYTYPE                                                                                  , filter: false            , label: "Collection 100"},
+        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" },
             { label: "Clasificada", value: "CLASSIFIED"}, 
         ]},
-        field1: { id: "field1", section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "field1" },
-        field2: { id: "field2", section: "B", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "field2" },
-        field4: { id: "field4", section: "B", type: TYPES.STRING                  , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: true             , label: "Color"  },
-        field5: { id: "field5", section: "B", type: TYPES.ENTITY, item: ENTITYTYPE, format: FORMATS.NONE , editable: true, tab: false, grouper: false, column: true , filter: true , like: false, label: "Entity5"},
+        field1: { id: "field1", section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: false            , label: "field1" },
+        field2: { id: "field2", section: "B", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: false            , label: "field2" },
+        field4: { id: "field4", section: "B", type: TYPES.STRING                  , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: false            , label: "Color"  },
+        field5: { id: "field5", section: "B", type: TYPES.ENTITY, item: ENTITYTYPE, format: FORMATS.NONE , editable: true, tab: false, grouper: false, column: true , filter: false, like: false, label: "Entity5"},
         id  : { id: "id", type: TYPES.STRING },
     }
 
@@ -217,7 +217,7 @@ const Page5 = (props) => {
             <CollectionPage 
                 title="Referencias" 
                 schema={schema} host="http://localhost:3000" url="/references" fetching={true}              // resource 
-                searchBy={["field1"]} levels={["color"]}                                                    // menu
+                searchBy={["field1"]} levels={["color"]} canFilter={true}                                   // menu
                 editor="TABBED" canAdd={true}                                                               // editor
             />
         </Fragment>

package/src/widgets/planner/Planner.js

@@ -93,13 +93,13 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
             {navigation ? (
                 <Header title={label}>
                     &nbsp;&nbsp;
-                    <Button label="This Week" outlined action={showThisWeek}/>
+                    <Button label="Esta Semana" outlined action={showThisWeek}/>
                     <Icon icon="chevron_right" clickable action={next} />
-                    <TextField id="to" type="date" label="To" value={to} onChange={(id, value) => setTo(value)} />
+                    <TextField id="to" type="date" label="Hasta" value={to} onChange={(id, value) => setTo(value)} />
                     <div className="expand"></div>
-                    <DropDown id="ranges" label="Date Range" options={DATE_RANGE} value={dateRange} onChange={(id, value) => setDateRange(value)} />
+                    <DropDown id="ranges" label="Rango" options={DATE_RANGE} value={dateRange} onChange={(id, value) => setDateRange(value)} />
                     <div className="expand"></div>
-                    <TextField id="from" type="date" label="From" value={from} onChange={(id, value) => setFrom(value)} />
+                    <TextField id="from" type="date" label="Desde" value={from} onChange={(id, value) => setFrom(value)} />
                     <Icon icon="chevron_left" clickable action={prev} />
                 </Header>
             ) : null}