ywana-core8 0.0.571 → 0.0.574

package/src/domain2/Content.js

@@ -0,0 +1,33 @@
+import { FORMATS } from "./FORMATS";
+
+/**
+ * Content
+ */
+class Content {
+
+    constructor(schema, value) {
+        this.schema = schema;
+        this.value = value;
+    }
+
+}
+
+const ADDRESS_SCHEMA = { 
+    id     : { type: TYPES.STRING              },
+    street : { type: TYPES.STRING, default: '' },
+    city   : { type: TYPES.STRING, default: '' },
+    state  : { type: TYPES.STRING, default: '' },
+    zip    : { type: TYPES.STRING, default: '' },
+    country: { type: TYPES.STRING, default: '' },
+}
+
+const PERSON_SCHEMA = {
+    id      : { type: TYPES.STRING                                                                                },
+    name    : { type: TYPES.STRING                      , format: FORMATS.NONE, label: 'Name'                     },
+    address : { type: TYPES.ENTITY, item: ADDRESS_SCHEMA, format: FORMATS.NONE, label: 'Address'                  },
+    age     : { type: TYPES.NUMBER                      , format: FORMATS.NONE, label: 'Age'     , default: 0     },
+    married : { type: TYPES.BOOLEAN                     , format: FORMATS.NONE, label: 'Married' , default: false },
+    children: { type: TYPES.ARRAY  , item: TYPES.STRING , format: FORMATS.NONE, label: 'Children', default: []    },
+}
+
+const person = new Content(PERSON_SCHEMA, {})

package/src/domain2/ContentFilters.js

@@ -0,0 +1,74 @@
+export const ContentFilters = (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]
+            } else {
+                if (filterSchema[key].type === TYPES.ENTITY) {
+                    const fs = filterSchema[key].item
+                    for (var key in fs) {
+                        if (fs[key].filter === false) delete fs[key]
+                    }
+                }
+            }
+        }
+        //Object.values(filterSchema).forEach(field => field.section = null)
+        delete filterSchema.flows
+        return filterSchema
+    }, [schema])
+
+    const likes = useMemo(() => {
+        const fields = Object.values(schema)
+        return fields.reduce((likes, field) => {
+            if (field.like === true) likes.push(field.id)
+            return likes
+        }, [])
+    }, [schema])
+
+    useEffect(() => {
+        if (filters) setForm(filters)
+    }, [filters])
+
+    useEffect(() => {
+        reload()
+    }, [form])
+
+    async function change(next) {
+        setForm(next)
+    }
+
+    async function reload() {
+        await pageContext.load(form, likes)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function clear() {
+        change({})
+    }
+
+    function save() {
+        if (onSave) {
+            onSave(form)
+        }
+    }
+
+    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} />
+                {onSave ? <Icon icon="save" size="small" clickable action={save} /> : null}
+            </Header>
+            <main className="table-filters">
+                <ContentEditor content={content} onChange={change} />
+            </main>
+        </Fragment>
+    )
+}

package/src/domain2/ContentPage.js

@@ -0,0 +1,96 @@
+export const ContentPage = (props) => {
+
+    const {
+        icon, title, className,
+        schema, url,
+    } = props
+
+    return (
+        <>
+            <header className="content-page"></header>
+            <nav className="content-page"></nav>
+            <menu className="content-page">
+
+            </menu>
+            <main className="content-page">
+
+            </main>
+            <aside className="content-page"></aside>
+            <footer className="content-page"></footer>
+        </>
+    )
+}
+
+
+
+/**
+ * Content API
+ */
+const ContentAPI = (url, host) => {
+
+    const http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
+
+    return {
+        all(filters = [], likes = [], page) {
+            let queryParams = page ? `?page=${page}&` : "?"
+            const filterQuery = Object.keys(filters).reduce((query, key) => {
+                const value = filters[key]
+                if (typeof (value) === 'boolean') return query.concat(`${key}=${value}&`)
+                if (Array.isArray(value)) {
+                    const param = value.length === 0 ? '' : value.reduce((param, item) => {
+                        param = param.concat(`${key}=${item}&`)
+                        return param
+                    }, "")
+                    return query.concat(param)
+                }
+                const likeSymbol = likes.includes(key) ? '%' : ''
+                return query.concat(`${key}=${likeSymbol}${value}${likeSymbol}&`)
+            }, "")
+            queryParams = queryParams.concat(filterQuery)
+            return http.GET(url + queryParams)
+        },
+
+        find(id) {
+            return http.GET(`${url}/${id}`)
+        },
+
+        create(form) {
+            const body = JSON.stringify(form)
+            return http.POST(url, body)
+        },
+
+        update(form) {
+            const body = JSON.stringify(form)
+            return http.PUT(`${url}/${form.id}`, body)
+        },
+
+        updateProperty(id, propertyName, form) {
+            const body = JSON.stringify(form)
+            return http.PUT(`${url}/${id}/${propertyName}`, body)
+        },
+
+        patch(id, form) {
+            const body = JSON.stringify(form)
+            return http.PATCH(`${url}/${id}`, body)
+        },
+
+        remove(id) {
+            return http.DELETE(`${url}/${id}`)
+        },
+
+        queries(user) {
+            const queryParams = user ? `?user=${user}` : ""
+            return http.GET(`/queries/${url}${queryParams}`)
+        },
+
+        createQuery(form) {
+            const body = JSON.stringify(form)
+            return http.POST(`/queries/${url}`, body)
+        },
+
+        removeQuery(id) {
+            return http.DELETE(`/queries/${url}/${id}`)
+        },
+
+    }
+}

package/src/domain2/FORMATS.js

@@ -0,0 +1,15 @@
+/**
+ * FORMATS
+ */
+export const FORMATS = {
+    NONE: '',
+    DATE: 'date',
+    DATERANGE: 'DATERANGE',
+    TIME: 'time',
+    EMAIL: 'email',
+    HTML: 'HTML',
+    URL: 'URL',
+    IMG: 'IMG',
+    COLOR: 'COLOR',
+    TOKENS: 'TOKENS'
+}

package/src/domain2/TYPES.js

@@ -0,0 +1,11 @@
+/**
+ * TYPES
+ */
+ export const TYPES = {
+    STRING: 'String',
+    NUMBER: 'Number',
+    BOOLEAN: 'Boolean',
+    ARRAY: 'Array',
+    ENTITY: 'Object',
+    FUNCTION: 'Function',
+}

package/src/html/accordion.css

@@ -0,0 +1,36 @@
+.accordion {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.accordion-section {
+}
+
+.accordion-section>header {
+    display: flex;
+    align-items: center;
+}
+
+.accordion-section>main {
+}
+
+.accordion-section--title {
+    flex: 1;
+}
+
+.accordion-section--subtitle {
+}
+
+.accordion-section--toolbar {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+}
+
+.accordion-section--info {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}

package/src/html/accordion.js

@@ -0,0 +1,58 @@
+import React, {useState} from 'react'
+import { Icon } from './icon'
+import './accordion.css'
+
+export const Accordion = (props) => {
+
+    const { className, sections = [], onCheck } = props
+
+    const [openSections, setOpenSections] = useState(sections.map(section => section.open))
+    const [checkedSections, setCheckedSections] = useState(sections.map(section => section.checked))
+
+    function toggle(index) {
+        const next = openSections.map((open, i) => i === index ? !open : open)
+        setOpenSections(next)
+    }
+
+    function check(index) { 
+        const next = checkedSections.map((checked, i) => i === index ? !checked : checked)
+        setCheckedSections(next)
+        if (onCheck) onCheck(index, next[index], sections[index].id)
+    }
+
+    return (
+        <div className={`accordion ${className}`}>
+            {sections.map((section, index) => {
+                const isOpen = openSections[index]
+                const isChecked = checkedSections[index]
+                return (
+                    <AccordionSection key={index} {...section} open={isOpen} checked={isChecked} onToggle={() => toggle(index)} onCheck={() => check(index)}>
+                        {section.children}
+                    </AccordionSection>
+                )
+            })}
+        </div>
+    )
+}
+
+const AccordionSection = (props) => {
+
+    const { checked, icon, title, subtitle, open = false, onToggle, onCheck, toolbar, info, children } = props
+    const togglerIcon = open ? "expand_less" : "expand_more"
+    const checkedIcon = checked === undefined || checked === null ?  null :  checked === false ? "check_box_outline_blank" : "check_box"
+
+    return (
+        <section className={`accordion-section`}>
+            <header>
+                { checkedIcon ? <Icon className="accordion-section-checker" icon={checkedIcon} clickable action={onCheck}/> : '' }
+                { icon ? <Icon className="accordion-section-icon" icon={icon} /> : '' }
+                { title ? <div className="accordion-section--title">{title}</div> : '' }
+                { subtitle ? <div className="accordion-section--subtitle">{subtitle}</div> : '' }
+                { info ? <div className="accordion-section--info">{info}</div> : '' }
+                { toolbar ? <div className="accordion-section--toolbar">{toolbar}</div> : '' } 
+                <Icon className="accordion-section-toggler" icon={togglerIcon} clickable action={onToggle} />
+            </header> 
+            {open ? <main>{children}</main> : ''}
+        </section>
+    )
+}

package/src/html/accordion.test.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import { Accordion } from './accordion'
+import { Icon } from './icon'
+
+const AccordionTest = (prop) => {
+
+    const info = <div>50 Unidades</div>
+
+    const toolbar = [<Icon icon="edit" size="small" clickable />, <Icon icon="delete" size="small" clickable />]
+
+    const sections = [
+        { id: 1 , checked: false, icon: 'star', title: 'Section 1' , subtitle: 'Subtitle 1' , info, toolbar, open: true ,  children: <div>Section 1 content</div>  },
+        { id: 2 , checked: false, icon: 'star', title: 'Section 2' , subtitle: 'Subtitle 2' , info, toolbar, open: true ,  children: <div>Section 2 content</div>  },
+        { id: 3 , checked: false, icon: 'star', title: 'Section 3' , subtitle: 'Subtitle 3' , info, toolbar, open: false,  children: <div>Section 3 content</div>  },
+        { id: 4 , checked: false, icon: 'star', title: 'Section 4' , subtitle: 'Subtitle 4' , info, toolbar, open: false,  children: <div>Section 4 content</div>  },
+        { id: 5 , checked: false, icon: 'star', title: 'Section 5' , subtitle: 'Subtitle 5' , info, toolbar, open: false,  children: <div>Section 5 content</div>  },
+        { id: 6 , checked: false, icon: 'star', title: 'Section 6' , subtitle: 'Subtitle 6' , info, toolbar, open: false,  children: <div>Section 6 content</div>  },
+        { id: 7 , checked: false, icon: 'star', title: 'Section 7' , subtitle: 'Subtitle 7' , info, toolbar, open: false,  children: <div>Section 7 content</div>  },
+        { id: 8 , checked: false, icon: 'star', title: 'Section 8' , subtitle: 'Subtitle 8' , info, toolbar, open: false,  children: <div>Section 8 content</div>  },
+        { id: 9 , checked: false, icon: 'star', title: 'Section 9' , subtitle: 'Subtitle 9' , info, toolbar, open: false,  children: <div>Section 9 content</div>  },
+        { id: 10, checked: false, icon: 'star', title: 'Section 10', subtitle: 'Subtitle 10', info, toolbar, open: false,  children: <div>Section 10 content</div> },
+        { id: 11, checked: false, icon: 'star', title: 'Section 11', subtitle: 'Subtitle 11', info, toolbar, open: false,  children: <div>Section 11 content</div> },
+        { id: 12, checked: false, icon: 'star', title: 'Section 12', subtitle: 'Subtitle 12', info, toolbar, open: false,  children: <div>Section 12 content</div> },
+        { id: 13, checked: false, icon: 'star', title: 'Section 13', subtitle: 'Subtitle 13', info, toolbar, open: false,  children: <div>Section 13 content</div> },
+        { id: 14, checked: false, icon: 'star', title: 'Section 14', subtitle: 'Subtitle 14', info, toolbar, open: false,  children: <div>Section 14 content</div> },
+        { id: 15, checked: false, icon: 'star', title: 'Section 15', subtitle: 'Subtitle 15', info, toolbar, open: false,  children: <div>Section 15 content</div> },
+        { id: 16, checked: false, icon: 'star', title: 'Section 16', subtitle: 'Subtitle 16', info, toolbar, open: false,  children: <div>Section 16 content</div> },
+        { id: 17, checked: false, icon: 'star', title: 'Section 17', subtitle: 'Subtitle 17', info, toolbar, open: false,  children: <div>Section 17 content</div> },
+    ]
+
+
+    return (
+        <>
+           <Accordion sections={sections} onCheck={console.log} />
+        </>
+    )
+}

package/src/html/index.js

@@ -1,3 +1,4 @@
+export { Accordion } from './accordion'
 export { Button } from './button'
 export { CheckBox } from './checkbox'
 export { Chips, Chip } from './chip'

package/src/html/section.css

@@ -1,4 +1,4 @@
-.section2>header {
+.section>header {
     background-color: rgba(200,200,200,.1);
     padding: 0 1rem;
     min-height: 3rem;

package/src/html/section.js

@@ -20,7 +20,7 @@ export const Section = (props) => {
     }
 
     return (
-        <section className={`section2 ${className}`}>
+        <section className={`section ${className}`}>
             <Header icon={icon}  title={title}>
                 {actions}
                 {canCollapse ? <Icon icon="expand_more" onIcon="expand_less" clickable action={toggle} /> : ''}

package/src/html/table.test.js

@@ -42,7 +42,6 @@ export const TableTest = (prop) => {
             { id: "index", type: "INDEX", label: "#"},
             { 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 },
@@ -55,7 +54,6 @@ export const TableTest = (prop) => {
         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 },
@@ -67,6 +65,8 @@ export const TableTest = (prop) => {
     return (
         <div style={{ maxHeight: "20rem", overflow: "hidden", border: "solid 1px red", margin: "2rem" }}>
            <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll}/>
+           x
+           <DataTable {...table2} onRowSelection={select} onCheckAll={checkAll}/>
         </div>
     )
 }

package/src/site/site.test.js

@@ -10,6 +10,7 @@ import { UploadDialog } from '../widgets/upload/UploadDialog'
 import { Uploader } from '../widgets/upload/Uploader'
 import { TabbedTablePage } from '../domain/TabbedTablePage'
 import { TablePage } from '../domain/TablePage'
+import { TablePage2 } from '../domain/TablePage2'
 import { CollectionPage } from '../domain/CollectionPage'
 import { FORMATS, TYPES } from '../domain/ContentType'
 import { TableTest } from '../html/table.test'
@@ -19,7 +20,7 @@ const SiteTest = (prop) => {
     const footer = <div>FOOTER</div>
 
     return (
-        <Site icon="star" title="Site Test" init={"PAGE5"} footer={footer}>
+        <Site icon="star" title="Site Test" init={"PAGE3"} footer={footer}>
             <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
                 <Page1 />
             </Page>
@@ -131,10 +132,10 @@ const Page2 = (props) => {
 const Page3 = (props) => {
 
     const ENTITYTYPE = {
-        name  : { id: "name"  , section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
-        field1: { id: "field1", section: "E-INFO1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field1" },
-        field2: { id: "field2", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field2" },
-        field3: { id: "field3", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
+        name  : { id: "name"   , section: ""       , type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
+        field1: { id: "field01", section: "E-INFO1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field1" },
+        field2: { id: "field02", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field2" },
+        field3: { id: "field03", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
 
     }
 
@@ -153,7 +154,7 @@ const Page3 = (props) => {
 
     return (
         <Fragment>
-            <TablePage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed"/>
+            <TablePage2 title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed" groupBy="state"/>
         </Fragment>
     )
 }
@@ -166,18 +167,17 @@ const Page4 = (props) => {
         field1: { id: "field1", section: "E-INFO1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field1" },
         field2: { id: "field2", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field2" },
         field3: { id: "field3", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
-
     }
 
     const schema = {
-        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: [
+        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"  },
+        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"},
 
     }
@@ -192,10 +192,10 @@ const Page4 = (props) => {
 const Page5 = (props) => {
 
     const ENTITYTYPE = {
-        name  : { id: "name"  , section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"     },
-        field1: { id: "field1", section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true             , label: "E field1" },
-        field2: { id: "field2", section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true             , label: "E field2" },
-        field3: { id: "field3", section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
+        name  : { id: "name"  , section: "", type: TYPES.STRING                   , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"     },
+        field1: { id: "field1", section: "", type: TYPES.STRING                   , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true             , label: "E field1" },
+        field2: { id: "field2", section: "", type: TYPES.STRING                   , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true             , label: "E field2" },
+        field3: { id: "field3", section: "", type: TYPES.STRING                   , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
     }
 
     const schema = {

package/src/widgets/planner/Planner.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, useRef } from "react";
 import { DropDown, Header, Icon, Text, TextField, Button } from "../../html";
 import moment from "moment";
 import { extendMoment } from "moment-range";
@@ -15,15 +15,17 @@ const DATE_RANGE = [
 /**
  * Planner
  */
-export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell, focusEvent, config = { range: "year", from: "2022-01-01", to: "2022-12-30"}, onChange }) => {
+export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell, focusEvent, config = { range: "year", from: "2022-01-01", to: "2022-12-30" }, onChange }) => {
 
     const [dateRange, setDateRange] = useState(config.range);
     const [from, setFrom] = useState(config.from);
     const [to, setTo] = useState(config.to);
-
+    const thisMondayElement = useRef(null)
+    
     useEffect(() => {
-        showThisWeek()
-    }, [])
+        console.log(thisMondayElement.current)
+        if (thisMondayElement.current) { showThisWeek() }
+    })
 
     useEffect(() => {
         const element = document.getElementById(focusEvent)
@@ -93,7 +95,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
             {navigation ? (
                 <Header title={label}>
                     &nbsp;&nbsp;
-                    <Button label="Esta Semana" outlined action={showThisWeek}/>
+                    <Button label="Esta Semana" outlined action={showThisWeek} />
                     <Icon icon="chevron_right" clickable action={next} />
                     <TextField id="to" type="date" label="Hasta" value={to} onChange={(id, value) => setTo(value)} />
                     <div className="expand"></div>
@@ -108,11 +110,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
 
                 <div className="column0">
                     <div className="column-header"></div>
-                    {lanes.map((lane) => (
-                        <div className="row-header">
-                            {lane.label}
-                        </div>
-                    ))}
+                    {lanes.map((lane) => <div className="row-header">{lane.label}</div>)}
                 </div>
 
                 <div className="rows">
@@ -145,7 +143,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                         })}
                     </div>
 
-                    {lanes.map((lane) => <PlannerRow key={lane.id} lane={lane} events={events} period={period} onSelectCell={selectCell} onChange={onChange}/>)}
+                    {lanes.map((lane) => <PlannerRow key={lane.id} lane={lane} events={events} period={period} onSelectCell={selectCell} onChange={onChange} thisMondayRef={thisMondayElement} />)}
 
                 </div>
             </main>
@@ -158,7 +156,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
  */
 const PlannerRow = (props) => {
 
-    const { lane, events = [], period, onSelectCell, onChange } = props
+    const { lane, events = [], period, onSelectCell, onChange, thisMondayRef } = props
     const rowEvents = events.filter(event => event.lane === lane.id)
 
 
@@ -177,7 +175,7 @@ const PlannerRow = (props) => {
                     return eventDate.getTime() === slotDate.getTime();
                 })
                 return (
-                    <PlannerCell key={`${lane.id}-${slotDate.toString()}`} lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} onDrop={change}/>
+                    <PlannerCell key={`${lane.id}-${slotDate.toString()}`} lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} onDrop={change} thisMondayRef={thisMondayRef} />
                 );
             })}
         </div>
@@ -187,7 +185,7 @@ const PlannerRow = (props) => {
 /**
  * Planner Cell
  */
-const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, onSelect, onDrop, editable = false }) => {
+const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, onSelect, onDrop, editable = false, thisMondayRef }) => {
 
     const [dragOver, setDragOver] = useState(false);
 
@@ -225,10 +223,11 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
 
     const today = moment()
     var weekStart = today.clone().startOf('week')
+    const isThisMonday = (date.moment.isSame(weekStart))
     const thisMonday = (date.moment.isSame(weekStart)) ? "thisMonday" : ""
     const dragOverStyle = dragOver ? "drag-over" : ""
-     return (
-        <div className={`cell ${thisMonday} ${weekend} ${dragOverStyle}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
+    return (
+        <div className={`cell ${thisMonday} ${weekend} ${dragOverStyle}`} ref={isThisMonday ? thisMondayRef : null} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
             {events.map(event => {
                 const { Renderer = EventCard } = event
                 return <Renderer key={event.id} event={event} />