ywana-core8 0.0.572 → 0.0.575

package/package.json

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

package/src/domain/CollectionPage.css

@@ -47,3 +47,4 @@ main.collection-page>.content-editor {
     flex: 1;
 }
 
+

package/src/domain/ContentEditor.js

@@ -393,7 +393,7 @@ export const MultiSelectionEditor = ({ field, value = [], content, onChange }) =
  */
 export const CollectionEditor = ({ field, value = [], onChange, onReload }) => {
 
-  const { id, item, label, Feeder, Renderer, Adder = true, editable = true } = field
+  const { id, item, label, groupBy="field1", Feeder, Renderer, Adder = true, editable = true } = field
 
   function add(rows) {
     if (onChange) {
@@ -421,7 +421,7 @@ export const CollectionEditor = ({ field, value = [], onChange, onReload }) => {
     if (onReload) onReload()
   }
 
-  const columns = Object.values(item)
+ /* const columns = Object.values(item)
     .filter(field => field.column === true)
     .map((item) => ({ ...item, onChange: change }))
   columns.push({ id: 'actions', label: 'Actions' })
@@ -435,6 +435,7 @@ export const CollectionEditor = ({ field, value = [], onChange, onReload }) => {
   }))
 
   const table = { columns, rows }
+*/
 
   return (
     <div className='collection-editor'>
@@ -442,7 +443,7 @@ export const CollectionEditor = ({ field, value = [], onChange, onReload }) => {
         Renderer ?
           <Renderer field={field} value={value} onRemove={remove} onChange={onChange} onReload={reload} />
           // : <DataTable {...table} editable={editable} />
-          : <TableEditor icon={"info"} title={label} data={value} schema={item} groupBy={"field1"} canDelete={true} remove={remove}/>
+          : <TableEditor icon={"info"} title={label} data={value} schema={item} groupBy={groupBy} canDelete={true} remove={remove}/>
 
       }
       <footer>

package/src/domain/TablePage.js

@@ -200,10 +200,12 @@ const TableSelector = (props) => {
         columns,
         rows: rows || []
     }
+
     const buttons = actions.map(({ label, action, validate }) => {
         return <Button 
                     label={label} raised 
                     action={() => action(checked, pageContext, async () => {
+                        await pageContext.clearChecks()
                         await pageContext.load()
                         setPageContext(Object.assign({}, pageContext))
                         }, rows)}
@@ -540,6 +542,10 @@ const TableContext = (url, field, host, urlQuery, params) => {
             }
         },
 
+        clearChecks() {
+            this.checked = new Set([])
+        },
+
         select(id) {
             const result = this.all.find(item => item.id === id);
             this.selected = result;

package/src/domain/TablePage2.js

@@ -1,9 +1,9 @@
 import equal from 'deep-equal'
 import React, { Fragment, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { Accordion, Button, DataTable, DropDown, Header, Icon, MenuIcon, MenuItem, Text } from '../html'
+import { Accordion, Button, DataTable, DropDown, Header, Icon, MenuIcon, MenuItem, Text, Tabs, Tab } from '../html'
 import { HTTPClient, Session } from '../http'
 import { PageContext, SiteContext } from '../site'
-import { ContentEditor, GroupedContentEditor } from './ContentEditor'
+import { ContentEditor } from './ContentEditor'
 import { CHECK, Content, TYPES } from './ContentType'
 import { ContentViewer } from './ContentViewer'
 import { CreateContentDialog } from './CreateContentDialog'
@@ -18,19 +18,20 @@ export const TablePage2 = (props) => {
     const site = useContext(SiteContext)
     const { id = "table",
         icon, title, name,
-        schema, url, field, host, params = "",
-        autosave = true, delay = 1000,
-        editable,
-        actions = [], dev = false, tableActions, selectionActions = [],
+        schema, 
+        url, field, host, params = "",                                          // TableContext
+        canQuery = false, urlQuery, user,                                       // TableQueries
+        editable, autosave = true, delay = 1000,                                // TableEditor
+        actions = [], tableActions, selectionActions = [],
         canFilter = false, canAdd = true, canDelete = true, canEdit = true,
-        canQuery = false, urlQuery, user,
-        groupBy, validator, scenario,
+        groupBy, validator,
         formFilter, tableFilter, editorFilter = false,
+        tabbedBy,
         tableClassName,
         children
     } = props
 
-    const [pageContext, setPageContext] = useContext(PageContext)
+    const [cd, setPageContext] = useContext(PageContext)
     const context = TableContext(url, field, host, urlQuery, params)
     const { selected } = pageContext
     const timer = useRef(null)
@@ -94,17 +95,6 @@ export const TablePage2 = (props) => {
         setPageContext(Object.assign({}, pageContext))
     }
 
-    async function playScenario() {
-        const promises1 = pageContext.all.map(async item => await pageContext.remove(item.id))
-        Promise.all(promises1).then(async () => {
-            const promises2 = scenario.map(async (item) => await pageContext.create(item))
-            Promise.all(promises2).then(async () => {
-                await pageContext.load()
-                setPageContext(Object.assign({}, pageContext))
-            })
-        })
-    }
-
     function closeAside() {
         pageContext.select(null)
         setPageContext(Object.assign({}, pageContext))
@@ -138,11 +128,6 @@ export const TablePage2 = (props) => {
                 {canAdd ? <Button icon="add" label="Añadir" action={add} raised /> : null}
                 &nbsp;
                 <Button icon="refresh" label="Reload" action={reload} />
-                {dev ? (
-                    <MenuIcon align="alignRight">
-                        <MenuItem label="Cargar Escenario 1" onSelect={playScenario} />
-                    </MenuIcon>
-                ) : null}
                 {renderActions()}
             </Header>
             {canQuery || canFilter ? (
@@ -152,7 +137,7 @@ export const TablePage2 = (props) => {
                 </menu>
             ) : null}
             <main key={id} className="table-page">
-                <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} className={tableClassName} />
+                <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} tabbedBy={tabbedBy} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} className={tableClassName} />
                 {children ? <article>{children}</article> : null}
             </main>
             {renderAside()}
@@ -348,6 +333,15 @@ export const TableEditor = (props) => {
     const { all = [], filters } = pageContext
     const { icon, title, schema, editable, canDelete, filter, actions, className } = props
     const [groupBy, setGroupBy] = useState(props.groupBy)
+    const [tab, setTab] = useState(0)
+
+    useEffect(async () => {
+        if (tab) {
+            const filter = { [tab.field]: tab.value }
+            await pageContext.load(filter, [])
+            setPageContext(Object.assign({}, pageContext))
+        }
+    }, [tab])
 
     function changeGroup(id, value) {
         setGroupBy(value)
@@ -415,6 +409,9 @@ export const TableEditor = (props) => {
         }
     }
 
+    const tabField = Object.values(schema).find(field => field.tab === true)
+    const tabs = tabField ? tabField.options.map(option => Object.assign({}, option, { field: tabField.id })) : []
+
     const table = useMemo(() => {
         return {
             columns: Object.values(schema).filter(field => field.column === true).map(field => {
@@ -481,6 +478,9 @@ export const TableEditor = (props) => {
         <Fragment>
             <Header icon={icon} title={<Text>{title}</Text>}>
                 {groupBy ? <DropDown id="groupBy" label="Agrupar Por" value={groupBy} options={buildGroupOptions(schema)} onChange={changeGroup} /> : null}
+                {tabbedBy ? <Tabs fillRight={true} fillLeft={false}>
+                    {tabs.map(tab => <Tab id={tab.value} label={tab.label} />)}
+                </Tabs> : ''}
             </Header>
             <main className="table-editor">
                 <Accordion sections={sections} />
@@ -501,6 +501,7 @@ const TableContext = (url, field, host, urlQuery, params) => {
         all: [],
         checked: new Set([]),
         selected: null,
+
         filters: {},
         queries: [],
 
@@ -508,7 +509,6 @@ const TableContext = (url, field, host, urlQuery, params) => {
             try {
                 const filters = filter ? Object.keys(filter).reduce((filters, key) => {
                     const field = filter[key];
-
                     if (field) {
                         if (CHECK['isObject'](field)) {
                             Object.keys(field).forEach(key2 => {
@@ -519,7 +519,6 @@ const TableContext = (url, field, host, urlQuery, params) => {
                             filters[key] = field;
                         }
                     }
-
                     return filters;
                 }, {}) : []
                 const data = await API.all(filters);
@@ -612,7 +611,7 @@ const TableContext = (url, field, host, urlQuery, params) => {
 }
 
 /**
- * table API
+ * Table API
  */
 const TableAPI = (url, host, params = "") => {
 

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/site/site.test.js

@@ -167,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"},
 
     }
@@ -193,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,16 @@ 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()
-    }, [])
+        if (thisMondayElement.current) { showThisWeek() }
+    }, [thisMondayElement])
 
     useEffect(() => {
         const element = document.getElementById(focusEvent)
@@ -93,7 +94,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 +109,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">
@@ -133,8 +130,13 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                             const isWekend = [0, 6].includes(date.moment.day());
                             const weekend = isWekend ? "weekend" : "";
                             const thisWeek = moment().startOf('week').isSame(date.moment, "week") ? "thisWeek" : "";
+
+                            const today = moment()
+                            var weekStart = today.clone().startOf('week')
+                            const isThisMonday = (date.moment.isSame(weekStart))
+
                             return (
-                                <div className="column-header">
+                                <div className="column-header" ref={isThisMonday ? thisMondayElement : null}>
                                     <div className={`date-header ${weekend} ${thisWeek}`}>
                                         <Text use="headline6">{date.moment.format("DD")}</Text>
                                         &nbsp;
@@ -145,7 +147,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} />)}
 
                 </div>
             </main>
@@ -177,7 +179,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} />
                 );
             })}
         </div>
@@ -227,7 +229,7 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
     var weekStart = today.clone().startOf('week')
     const thisMonday = (date.moment.isSame(weekStart)) ? "thisMonday" : ""
     const dragOverStyle = dragOver ? "drag-over" : ""
-     return (
+    return (
         <div className={`cell ${thisMonday} ${weekend} ${dragOverStyle}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
             {events.map(event => {
                 const { Renderer = EventCard } = event