ywana-core8 0.0.566 → 0.0.567

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.566",
+  "version": "0.0.567",
   "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(true)
 
     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>

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>