ywana-core8 0.0.678 → 0.0.679

package/package.json

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

package/src/domain/CollectionPage.css

@@ -67,4 +67,43 @@ main.collection-page.dock-to-right>main {
 
 main.collection-page.dock-to-right>article {
     grid-area: dock;
+}
+
+.filters-header>.icon {
+    width: 2rem;
+    font-size: 1.2rem;
+}
+
+.filters-resume {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.filter-field {
+    flex: 0;
+    display: flex;
+    padding: .2rem .4rem;
+    margin: .2rem;
+    align-items: baseline;
+    background-color: var(--background-color);
+    border-radius: .2rem;
+}
+
+.filter-field>label {
+    display: flex;
+    font-size: .7rem;
+    color: var(--text-color-lighter);
+    margin-right: .2rem;
+}
+
+.filter-field>.value {
+    font-size: .8rem;
+    padding:
+}
+
+.placeholder {
+    font-size: .8rem;
+    font-style: italic;
+    color: var(--text-color-lighter);
 }

package/src/domain/CollectionPage.js

@@ -75,7 +75,7 @@ export const CollectionPage = (props) => {
             </Header>
             <menu className={`collection-page ${className}`}>
                 {canFilter ? <CollectionFilters schema={schema} /> : null}
-                {levels ? <CollectionTree schema={schema} icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} searchBy={searchBy} namer={namer}/> : <CollectionList groupBy={groupBy} onSelect={onSelect} searchBy={searchBy} />}
+                {levels ? <CollectionTree schema={schema} icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} searchBy={searchBy} namer={namer} /> : <CollectionList groupBy={groupBy} onSelect={onSelect} searchBy={searchBy} />}
             </menu>
             <main key={id} className={`collection-page ${className}`}>
                 <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} onReload={reloadSelection} patch={patch} onChange={onChange} />
@@ -95,7 +95,7 @@ export const CollectionFilters = (props) => {
 
     const { schema, onChange } = props
     const [form, setForm] = useState({})
-    const [showFilter, setShowFilter] = useState(false)
+    const [showFilters, setShowFilters] = useState(false)
 
     const filterSchema = useMemo(() => {
         const filterSchema = Object.assign({}, schema)
@@ -127,19 +127,17 @@ export const CollectionFilters = (props) => {
     }
 
     function toggleFilters() {
-        setShowFilter(!showFilter)
+        setShowFilters(!showFilters)
     }
 
     const content = new Content(filterSchema, form)
     return (
         <Fragment>
-            <header>
-                <div className='expand'>
-                    <Chip label="Activas" />
-                </div>
-                {showFilter ? <Icon icon="expand_less" size="small" clickable action={toggleFilters} /> : <Icon icon="expand_more" size="small" clickable action={toggleFilters} />}
-            </header>
-            {showFilter ? (
+            <Header icon="filter_list" className="filters-header">
+                {showFilters ? <Icon icon="expand_less" size="small" clickable action={toggleFilters} /> : <Icon icon="expand_more" size="small" clickable action={toggleFilters} />}
+                <FilterResume form={form} />
+            </Header>
+            {showFilters ? (
                 <>
                     <nav className="collection-filters">
                         <Icon icon="clear_all" size="small" clickable action={clear} />
@@ -153,6 +151,27 @@ export const CollectionFilters = (props) => {
     )
 }
 
+const FilterResume = (props) => {
+
+    const { form = {} } = props
+
+    const fields = Object.keys(form)
+        .filter(key => form[key] !== undefined && form[key] !== null && form[key] !== "")
+
+    return (
+        <div className='filters-resume'>
+            {
+                fields.length > 0 ? fields.map(key => (
+                <div className='filter-field'>
+                    <label>{key}</label>
+                    <div className='value'>{form[key]}</div>
+                </div>
+            )) : <div className="placeholder">No se aplican filtros</div>
+        }
+        </div>
+    )
+}
+
 /**
  * Collection List
  */

package/src/site/site.test.js

@@ -205,11 +205,11 @@ const Page5 = (props) => {
             { 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: 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" },
+        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: 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 },
+        id    : { id: "id"                  , type: TYPES.STRING                                                                        , filter: false },
     }
 
     return (