ywana-core8 0.0.307 → 0.0.310

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.307",
+  "version": "0.0.310",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/domain/TablePage.css

@@ -16,6 +16,13 @@ main.table-page>header {
     padding-right: 1rem;
 }
 
+main.table-page > article {
+    padding: 1rem;
+    height: 50%;
+    display: flex;
+    resize: vertical;
+}
+
 aside.table-page {
     min-width: 25rem;
 }
@@ -73,6 +80,11 @@ td.entity-cell {
     align-items: center;
 }
 
+.table-queries-item.selected {
+    background-color: var(--accent-color);
+    color: var(--accent-color-text);
+}
+
 .table-queries-item>label {
     flex: 1;
 }

package/src/domain/TablePage.js

@@ -139,12 +139,12 @@ export const TablePage = (props) => {
             </Header>
             {canQuery || canFilter ? (
                 <menu className="table-page">
-                    {canQuery ? <TableQueries schema={schema} user={user}/> : null}
-                    {canFilter ? <TableFilters schema={schema} onSave={saveQuery}/> : null}
+                    {canQuery ? <TableQueries schema={schema} user={user} /> : null}
+                    {canFilter ? <TableFilters schema={schema} onSave={saveQuery} /> : null}
                 </menu>
-            ) : null }
+            ) : null}
             <main key={id} className="table-page">
-                {children ? <article></article> : null}
+                {children ? <article>{children}</article> : null}
                 <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} />
             </main>
             {renderAside()}
@@ -215,28 +215,34 @@ const TableSelector = (props) => {
 const TableQueries = (props) => {
 
     const [pageContext, setPageContext] = useContext(PageContext)
-    const { queries= [
-        { name: "Query 1", filters: {}},
-        { name: "Query 2", filters: {}},
-        { name: "Query 3", filters: {}},
-    ] } = pageContext
+    const { user } = props
+    const { queries = [] } = pageContext
+    const [selected, setSelected] = useState()
+
+    function select(query) {
+        setSelected(query.id)
+        pageContext.changeFilters(query.filters)
+    }
 
     async function remove(id) {
-        await pageContext.removeQuery(id, props.user)
+        await pageContext.removeQuery(id, user)
         setPageContext(Object.assign({}, pageContext))
     }
-    
+
     return (
         <Fragment>
             <Header className="table-queries" title={<Text>Queries</Text>} />
             <main className="table-queries">
-                {queries ? queries.map(query => (
-                    <div className="table-queries-item">
-                        <Icon icon="star" />
-                        <label>{query.name}</label>
-                        <Icon icon="close" clickable size="small" action={() => remove(query.id)} />
-                    </div>
-                )) : <div>...empty...</div>}
+                {queries ? queries.map(query => {
+                    const style = selected === query.id ? "selected" : ""
+                    return (
+                        <div className={`table-queries-item ${style}`} onClick={() => select(query)}>
+                            <Icon icon="star" size="small" />
+                            <label>{query.name}</label>
+                            <Icon icon="close" clickable size="small" action={() => remove(query.id)} />
+                        </div>
+                    )
+                }) : <div>...empty...</div>}
             </main>
         </Fragment>
     )
@@ -248,22 +254,27 @@ const TableQueries = (props) => {
 const TableFilters = (props) => {
 
     const [pageContext, setPageContext] = useContext(PageContext)
+    const { filters } = pageContext
     const { schema, onSave } = props
     const [form, setForm] = useState({})
 
     const filterSchema = useMemo(() => {
         const filterSchema = Object.assign({}, schema)
-
         for (var key in filterSchema) {
             if (filterSchema[key].filter === false) delete filterSchema[key]
         }
-
         Object.values(filterSchema).forEach(field => field.section = null)
         delete filterSchema.flows
         return filterSchema
     }, [schema])
 
+    useEffect(() => {
+        console.log("TableFilters onFiltersChange", filters)
+        setForm(filters)
+    }, [filters])
+
     async function change(next) {
+        console.log("TableFilters.change()", next)
         setForm(next)
         await pageContext.load(next)
         setPageContext(Object.assign({}, pageContext))
@@ -287,7 +298,7 @@ const TableFilters = (props) => {
                 <ContentEditor content={content} onChange={change} />
             </main>
             <footer>
-                { onSave ? <Button icon="playlist_add" label="CREAR BUSQUEDA" action={save} outlined/> : null}
+                {onSave ? <Button icon="playlist_add" label="CREAR BUSQUEDA" action={save} outlined /> : null}
             </footer>
         </Fragment>
     )
@@ -526,7 +537,7 @@ const TableContext = (url, field, host, urlQuery) => {
 
         async loadQueries(user) {
             try {
-                this.queries = await API.queries(user,urlQuery)
+                this.queries = await API.queries(user, urlQuery)
             } catch (error) {
                 console.log(error)
             }
@@ -602,9 +613,9 @@ const TableAPI = (url, host) => {
             return http.DELETE(`${url}/${id}`)
         },
 
-        queries(user,url2) {
+        queries(user, url2) {
             let url3 = url2 ? url2 : url
-            url3 = url3+"queries"
+            url3 = url3 + "queries"
             if (user) url3 = url3 + `?user=${user}`
             return http.GET(url3)
         },
@@ -618,6 +629,6 @@ const TableAPI = (url, host) => {
         removeQuery(id, url2) {
             const url3 = url2 ? url2 : url
             return http.DELETE(`${url3}queries/${id}`)
-        }, 
+        },
     }
 }