ywana-core8 0.0.547 → 0.0.550

package/package.json

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

package/src/domain/CollectionPage.js

@@ -71,7 +71,7 @@ export const CollectionPage = (props) => {
                 {levels ? <CollectionTree icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} searchBy={searchBy} /> : <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} />
+                <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} canEdit={canEdit} />
                 {children ? <article>{children}</article> : null}
             </main>
         </Fragment>
@@ -283,7 +283,7 @@ export const CollectionTree = (props) => {
 const CollectionEditor = (props) => {
     const [pageContext, setPageContext] = useContext(PageContext)
     const { selected } = pageContext
-    const { icon, schema, layout, autosave = false, delay = 1000 } = props
+    const { icon, schema, layout, autosave = false, delay = 1000, canDelete, canEdit } = props
     const timer = useRef(null)
     const [form, setForm] = useState(selected)
 
@@ -340,7 +340,7 @@ const CollectionEditor = (props) => {
                 <Icon icon="close" clickable action={clear} />
                 <MenuIcon align="alignRight">
                     <Menu>
-                        <MenuItem label="Eliminar" onSelect={remove} />
+                        { canDelete ? <MenuItem label="Eliminar" onSelect={remove} /> : null }
                     </Menu>
                 </MenuIcon>
                 {autosave === true ? null : <Button icon="save" label="Guardar Cambios" raised disabled={!canSave()} action={save} />}

package/src/domain/ContentEditor.js

@@ -419,7 +419,7 @@ export const CollectionEditor = ({ field, value = [], onChange }) => {
         Renderer ?
           <Renderer field={field} value={value} onRemove={remove} onChange={onChange} />
           // : <DataTable {...table} editable={editable} />
-          : <TableEditor icon={"info"} title={label} data={value} schema={item} groupBy={"field1"} />
+          : <TableEditor icon={"info"} title={label} data={value} schema={item} groupBy={"field1"} canDelete={true} remove={remove}/>
 
       }
       <footer>
@@ -475,7 +475,7 @@ const CollectionAdder = ({ item, onAdd }) => {
  */
 const TableEditor = (props) => {
 
-  const { data = [], icon, title, schema, editable, canDelete, filter, actions, className } = props
+  const { data = [], icon, title, schema, editable, canDelete, remove, filter, actions, className } = props
   const [groupBy, setGroupBy] = useState(props.groupBy)
 
   function changeGroup(id, value) {
@@ -536,13 +536,13 @@ const TableEditor = (props) => {
             }
           }),
         rows: groups[groupName]
-          .map(item => {
+          .map((item, index) => {
             item.actions = actions ? actions.map(action => {
               return action.filter ?
                 action.filter(item) ? <Icon icon={action.icon} clickable size="small" action={() => run(action, item)} /> : null
                 : <Icon icon={action.icon} clickable size="small" action={() => run(action, item)} />
             }) : []
-            if (canDelete) item.actions.push(<Icon icon="delete" size="small" clickable action={() => remove(item.id)} />)
+            if (canDelete) item.actions.push(<Icon icon="delete" size="small" clickable action={() => remove(index)} />)
             return item
           })
       }

package/src/html/tree.css

@@ -27,6 +27,11 @@
     padding-left: 1rem;
 }
 
+.tree-item.selected {
+    background-color: var(--accent-color);
+    font-weight: 500;
+} 
+
 .tree-item>i {
     padding-left: .3rem;
 }

package/src/site/site.js

@@ -9,8 +9,6 @@ import { ReactNotifications, Store } from 'react-notifications-component'
 import 'react-notifications-component/dist/theme.css'
 import './site.css'
 
-
-
 /**
  * Site Provider
  */

package/src/widgets/calendar/Calendar.css

@@ -0,0 +1,83 @@
+
+.calendar { 
+    margin: 0rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: .5rem;
+}
+
+.calendar>nav {
+    display: flex;
+    padding: .5rem;
+    display: flex;
+    align-items: center;
+}
+
+.calendar>nav>label {
+    flex: 1;
+    font-size: 1.3rem;
+    font-weight: 500;
+}
+
+.calendar>nav>button {
+    margin-left: 1px;
+}
+
+.calendar>header {
+    border: solid 1px var(--divider-color);
+    border-width: 1px 1px 0 0px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    font-size: .8rem;
+}
+
+.calendar>main {
+    flex: 1;
+    border: solid 1px var(--divider-color);
+    border-width: 1px 1px 0 0;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-gap: 0px;
+    grid-auto-rows: minmax(5rem, auto);
+    overflow: hidden;
+    font-size: .8rem;
+}
+
+.week-day-cell {
+    border-left: solid 1px var(--divider-color);
+    padding: 2px;
+    text-align: center;
+    min-width: 5rem;
+}
+
+.day-cell {
+    border: solid 1px var(--divider-color);
+    border-width: 0 0 1px 1px;
+    padding: .5rem;
+    text-align: right;
+    min-height: 5rem;
+    min-width: 5rem;
+}
+
+.day-cell.today>header {
+    background-color: var(--primary-color-lighter);
+    padding: .3rem
+}
+
+.day-cell:hover {
+    background-color: rgba(200,200,200,.1);
+    cursor: pointer;
+}
+
+.day-cell.today:hover {
+    background-color: var(--primary-color-lighter);
+}
+
+.day-cell .event {
+    background-color: var(--primary-color);
+    color: var(--primary-color-text);
+    padding: .3rem;
+    border-radius: 3px;
+    margin: 3px 1px;
+}

package/src/widgets/calendar/Calendar.js

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react'
+import { Button } from '../../html'
+import Moment from 'moment'
+import { extendMoment } from 'moment-range';
+import 'moment/locale/es'
+import './Calendar.css'
+
+Moment.locale('es')
+const moment = extendMoment(Moment)
+
+export const Calendar = (props) => {
+
+    const { events = [], children} = props
+    const [position, setPosition] = useState()
+
+    useEffect(() => {
+        const today = moment()
+        setPosition(today)
+    }, [])
+
+    function next() {
+        const next = position.clone().add(1, 'month')
+        setPosition(next)
+    }
+
+    function prev() {
+        const prev = position.clone().subtract(1, 'month')
+        setPosition(prev)
+    }
+
+    function today() {
+        const today = moment()
+        setPosition(today)  
+    }
+
+    if (!position) return "..."
+
+    const monthName = position.format("MMMM")
+    const year = position.format("YYYY")
+    const firstDayOfMonth = position.clone().startOf('month');
+    const firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
+    const lastDayOfMonth = position.clone().endOf('month');
+    const lastDayOfRange = lastDayOfMonth.clone().endOf('isoweek');
+    const range = moment.range(firstDayOfRange, lastDayOfRange)
+    const days = Array.from(range.by('days'))
+
+    const cells = days.map(day => {
+        const dayEvents = events.filter(event => {
+            const eventDate = moment(event.date, "YYYY-MM-DD")
+            return eventDate.isSame(day, 'day')
+        })
+        return { day, events: dayEvents }
+    })
+
+    return (
+        <div className="calendar">
+            <nav>
+                <label> {monthName} {year}</label>
+                <Button icon="chevron_left" raised action={prev} />
+                <Button label="Hoy" outlined action={today}/>
+                <Button icon="chevron_right" raised action={next} />
+            </nav>
+            <header>
+                <div className='week-day-cell'>Lun</div>
+                <div className='week-day-cell'>Mar</div>
+                <div className='week-day-cell'>Mié</div>
+                <div className='week-day-cell'>Jue</div>
+                <div className='week-day-cell'>Vie</div>
+                <div className='week-day-cell'>Sab</div>
+                <div className='week-day-cell'>Dom</div>
+            </header>
+            <main>
+                {cells.map(cell => <DayCell cell={cell} >{children}</DayCell>)}
+            </main>
+        </div>
+    )
+}
+
+const DayCell = (props) => {
+    const { cell = [], children } = props
+    const {day, events} = cell
+    const todayStyle = day.isSame(moment(), 'day') ? 'today' : ''
+
+    return (
+        <div className={`day-cell ${todayStyle}`}>
+            <header>
+                {day.format("DD")}
+            </header>
+            <main>
+                {events.map(event => <Event key={event.id} event={event} >{children}</Event>)}
+            </main>
+        </div>
+    )
+}
+
+const Event = (props) => {
+    const { event, children } = props
+    if (children) {
+        const element = React.Children.toArray(children)[0]
+        return React.cloneElement(element, { event })
+    } else {
+        return (
+            <div className="event">
+                <div className="event-name">
+                    {event.title}
+                </div>
+            </div>
+        )
+    }
+}

package/src/widgets/calendar/Calendar.test.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Calendar } from './Calendar'
+import moment from 'moment'
+
+const CalendarTest = (prop) => {
+
+    const events = [
+        { id: 1, date: "2022-05-26", title: 'Event 1' },
+        { id: 1, date: "2022-05-27", title: 'Event 1' },
+        { id: 1, date: "2022-05-28", title: 'Event 1' },
+        { id: 1, date: "2022-05-29", title: 'Event 1' },
+    ]
+
+    return (
+        <Calendar events={events} >
+            <CustomEvent />
+        </Calendar>
+    )
+}
+
+const CustomEvent = (props) => {    
+    const { event } = props
+    return (
+        <div className="custom-event" onClick={() => alert("!xxx")}>
+           C {event.title}
+        </div>
+    )
+}