ywana-core8 0.0.517 → 0.0.520

package/package.json

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

package/src/css/html.css

@@ -42,4 +42,16 @@ td.actions {
  */
  body > iframe[style*="2147483647"]:not([id="webpack-dev-server-client-overlay"]) {
   display: none;
+}
+
+.empty-message {
+  width: 100%;
+  height: 100%;
+  min-height: 10rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--text-color-lighter)
 }

package/src/domain/TabbedTablePage.js

@@ -36,16 +36,16 @@ export const TabbedTablePage = (props) => {
     const timer = useRef(null)
     const [form, setForm] = useState(selected)
     const [tabs, setTabs] = useState([])
-    
+
     useEffect(async () => {
         const field = Object.values(schema).find(field => field.tab && field.tab === true)
-        const tabs = field.options.map(option => Object.assign({}, option, { field: field.id}))
+        const tabs = field.options.map(option => Object.assign({}, option, { field: field.id }))
         setTabs(tabs)
         context.changeTab(tabs[0])
         setPageContext(context)
     }, [])
-    
-    useEffect( async () => {
+
+    useEffect(async () => {
         if (tab) {
             const filter = { [tab.field]: tab.value }
             await pageContext.load(filter, [])
@@ -151,7 +151,7 @@ export const TabbedTablePage = (props) => {
     }
 
     function renderTabs() {
-        const selected = tab ? tab.value : null 
+        const selected = tab ? tab.value : null
         return (
             <Tabs selected={selected} onChange={changeTab} fillRight={true} fillLeft={false}>
                 {tabs.map(tab => <Tab id={tab.value} label={tab.label} />)}
@@ -179,7 +179,7 @@ export const TabbedTablePage = (props) => {
                 </menu>
             ) : null}
             <main key={id} className="table-page">
-                <TableEditor icon={icon} title={name} tabs={renderTabs()} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} className={tableClassName}/>
+                <TableEditor icon={icon} title={name} tabs={renderTabs()} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} className={tableClassName} />
                 {children ? <article>{children}</article> : null}
             </main>
             {renderAside()}
@@ -326,10 +326,10 @@ const TableFilters = (props) => {
 
     const likes = useMemo(() => {
         const fields = Object.values(schema)
-            return fields.reduce((likes, field) => {
-                if (field.like === true) likes.push(field.id)
-                return likes
-            }, [])
+        return fields.reduce((likes, field) => {
+            if (field.like === true) likes.push(field.id)
+            return likes
+        }, [])
     }, [schema])
 
     useEffect(() => {
@@ -453,6 +453,14 @@ export const TableEditor = (props) => {
             groups[groupName].push(item)
             return groups
         }, {})
+
+        if (groups.length === 0) return (
+            <div className='empty-message'>
+                <Icon icon="search_off" />
+                <Text>No Result Found</Text>
+            </div>
+        )
+        
         return Object.keys(groups).map(groupName => {
             const table = {
                 columns: Object.values(schema)
@@ -492,7 +500,7 @@ export const TableEditor = (props) => {
                     <Header title={title} >
                         <span className="size">{groupSize}</span>
                     </Header>
-                    <DataTable {...table} onRowSelection={select} editable={editable} onCheckAll={check} className={className}/>
+                    <DataTable {...table} onRowSelection={select} editable={editable} onCheckAll={check} className={className} />
                 </Fragment>
             )
         })
@@ -550,7 +558,7 @@ const TableContext = (url, field, host, urlQuery) => {
 
                     return filters;
                 }, {}) : []
-                
+
                 if (this.tab) {
                     filters[this.tab.field] = this.tab.value
                 }
@@ -670,7 +678,7 @@ const TableAPI = (url, host) => {
                         }, "")
                         return query.concat(param)
                     } else {
-                        return like.includes(key) ? query.concat(`${key}=%${filters[key]}%&`) :  query.concat(`${key}=${filters[key]}&`)
+                        return like.includes(key) ? query.concat(`${key}=%${filters[key]}%&`) : query.concat(`${key}=${filters[key]}&`)
                     }
                 }, "")
                 queryParams = queryParams.concat(filterQuery)

package/src/html/table.js

@@ -110,10 +110,19 @@ export const DataTable = (props) => {
                     </tr>
                 </thead>
                 <tbody>
-                    {
+                    {rows.length > 0 ?
                         multiSort(rows, sortDir).map(row => (
                             <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={moveRow} editable={editable} expanded={expanded} />
-                        ))
+                        )) : (
+                            <tr>
+                                <td colSpan={columns.length+1}>
+                                    <div className='empty-message'>
+                                        <Icon icon="search_off" />
+                                        <Text>No Result Found</Text>
+                                    </div>
+                                </td>
+                            </tr>
+                        )
                     }
                 </tbody>
             </table>
@@ -194,7 +203,7 @@ const EntityCellViewer = ({ id, item, value }) => {
 
     const fields = Object.values(item).filter(field => field.column === true)
     const locale = window.navigator.userLanguage || window.navigator.language;
-    
+
     return fields.map(field => {
 
         let text = value[field.id]

package/src/html/table.test.js

@@ -35,7 +35,7 @@ export const TableTest = (prop) => {
         setRows(next)
     }
 
-    const table = {
+    const table1 = {
         className: "xxx",
         editable: true,
         columns : [
@@ -49,9 +49,23 @@ export const TableTest = (prop) => {
         rows
     } 
 
+    const table2 = {
+        className: "xxx",
+        editable: true,
+        columns : [
+            { id: "checked", onChange: check },
+            { id: "name", label: "Name", type: "String", onChange: editCell },
+            { id: "name", label: "Name", type: "String", sortable: true },
+            { id: "thumb", label: "Thumb", type: "String", format: FORMATS.IMG },
+            { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
+            { id: "date", label: "Date", type: "String", format: FORMATS.DATE },
+        ],
+        rows: []
+    } 
+
     return (
         <div style={{ maxHeight: "20rem", overflow: "hidden", border: "solid 1px red", margin: "2rem" }}>
-           <DataTable {...table} onRowSelection={select} onCheckAll={checkAll}/>
+           <DataTable {...table2} onRowSelection={select} onCheckAll={checkAll}/>
         </div>
     )
 }

package/src/widgets/planner/Planner.css

@@ -43,6 +43,11 @@
     width: var(--column-width);
     background-color: var(--paper-color);
     height: 2.6rem;
+    border: solid 3px red;
+}
+
+.thisWeek {
+    background-color: red;
 }
 
 .date-header {

package/src/widgets/planner/Planner.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { DropDown, Header, Icon, Text, TextField } from "../../html";
+import { DropDown, Header, Icon, Text, TextField, Button } from "../../html";
 import moment from "moment";
 import { extendMoment } from "moment-range";
 import "./Planner2.css";
@@ -21,6 +21,10 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
     const [from, setFrom] = useState(config.from);
     const [to, setTo] = useState(config.to);
 
+    useEffect(() => {
+        showThisWeek()
+    }, [])
+
     useEffect(() => {
         const element = document.getElementById(focusEvent)
         if (element) element.scrollIntoView({
@@ -60,6 +64,15 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
         if (onSelectCell) onSelectCell(lane, date);
     }
 
+    function showThisWeek() {
+        const element = document.querySelector(".thisMonday")
+        if (element) element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'start'
+        })
+    }
+
     const period = useMemo(() => {
         const start = ranges(from, "YYYY-MM-DD");
         const end = ranges(to, "YYYY-MM-DD");
@@ -79,6 +92,8 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
 
             {navigation ? (
                 <Header title={label}>
+                    &nbsp;&nbsp;
+                    <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)} />
                     <div className="expand"></div>
@@ -117,9 +132,10 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                         {period.map((date) => {
                             const isWekend = [0, 6].includes(date.moment.day());
                             const weekend = isWekend ? "weekend" : "";
+                            const thisWeek = moment().startOf('week').isSame(date.moment, "week") ? "thisWeek" : "";
                             return (
                                 <div className="column-header">
-                                    <div className={`date-header ${weekend}`}>
+                                    <div className={`date-header ${weekend} ${thisWeek}`}>
                                         <Text use="headline6">{date.moment.format("DD")}</Text>
                                         &nbsp;
                                         <Text use="caption">{date.moment.format("ddd")}</Text>
@@ -206,9 +222,13 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
 
     const isWekend = [0, 6].includes(date.moment.day());
     const weekend = isWekend ? "weekend" : "";
+
+    const today = moment()
+    var weekStart = today.clone().startOf('week')
+    const thisMonday = (date.moment.isSame(weekStart)) ? "thisMonday" : ""
     const dragOverStyle = dragOver ? "drag-over" : ""
      return (
-        <div className={`cell ${weekend} ${dragOverStyle}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
+        <div className={`cell ${thisMonday} ${weekend} ${dragOverStyle}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
             {events.map(event => {
                 const { Renderer = EventCard } = event
                 return <Renderer key={event.id} event={event} />

package/src/widgets/planner/Planner.test.js

@@ -49,8 +49,8 @@ const PlannerTest = (prop) => {
             lanes={lanes} 
             events={events} 
             navigation={true} 
-            onSelectCell={console.log} 
-            focusEvent={event}
+            onSelectCell={console.log}
+       
             onChange={(data) => console.log('D&D', data)}
         >
 

package/src/widgets/planner/Planner2.css

@@ -38,6 +38,13 @@
   border-bottom: solid 1px var(--divider-color);
 }
 
+.planner .date-header.thisWeek {
+  background-color: rgb(10, 176, 35);
+  border-radius: 3px;
+  padding: .2rem;
+  color: var(--paper-color);
+}
+
 .planner .row-header {
   width: var(--column-width);
   background-color: var(--paper-color);