ywana-core8 0.0.910 → 0.0.912

package/package.json

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

package/src/domain/CollectionAPI.js

@@ -4,7 +4,7 @@ import { isEmpty} from '../commons'
 /**
  * Collection API
  */
- export const CollectionAPI = (url, host) => {
+ export const CollectionAPI = (url, host, params) => {
 
     const http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
 
@@ -45,10 +45,20 @@ import { isEmpty} from '../commons'
     return {
 
         all(filters, likes = [], page) {
+
+            // build query params
             let queryParams = page ? `?page=${page}&` : "?"
+
+            // concat optional params to queryparams
+            queryParams = `${queryParams}${params}`
+
+            // concat filters to queryparams
             const filterQuery = objectToQueryParamString(filters, likes)
             queryParams = `${queryParams}${filterQuery}`
+
+            // remove last &
             queryParams = queryParams.substring(0, queryParams.length - 1)
+
             return http.GET(`${url}${queryParams}`)
         },
 

package/src/domain/CollectionPage.js

@@ -18,7 +18,7 @@ export const CollectionPage = (props) => {
     const {
         id = "collection",
         icon, title, name = "Collection 1", className,
-        schema, url, field, host, page, fetching = false,
+        schema, url, field, host, page, fetching = false, params,
         actions = [], onSelect, onChange,
         canFilter = false, canAdd = false, canDelete = false, searchBy, addValidator,
         autosave = false, delay = 1000, patch = false, versioning = false,
@@ -30,7 +30,7 @@ export const CollectionPage = (props) => {
         children
     } = props
 
-    const context = CollectionContext(url, field, host, page, fetching, versioning)
+    const context = CollectionContext(url, field, host, page, fetching, versioning, params)
     const [pageContext, setPageContext] = useContext(PageContext)
     const { all } = pageContext
 
@@ -460,9 +460,9 @@ const CollectionEditor = (props) => {
 /**
  * Collection Context
  */
-export const CollectionContext = (url, field, host, page, fetching, versioning = false) => {
+export const CollectionContext = (url, field, host, page, fetching, versioning = false, params) => {
 
-    const API = CollectionAPI(url, host)
+    const API = CollectionAPI(url, host, params)
 
     return {
 

package/src/widgets/calendar/Calendar.css

@@ -1,5 +1,128 @@
+.calendar {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+}
+
+.calendar-range-control {
+    margin: .3rem;
+    border: solid 1px var(--divider-color);
+    background-color: var(--background-color);
+    border-radius: 3px;
+    padding: .2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &>.btn {
+        flex: 1;
+        margin-left: 1rem;
+        border-radius: 2px;
+        background-color: var(--background-color);
+        &.outlined {
+            border: solid 1px var(--divider-color);
+            background-color: var(--paper-color);
+        }
+    }
+}
+
+.year-calendar {
+    margin: 1rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 0rem;
+}
+
+.year-calendar>nav {
+    display: flex;
+    padding: .5rem;
+    display: flex;
+    align-items: center;
+}
+
+.year-calendar>nav>label {
+    flex: 1;
+    font-size: 1.3rem;
+    font-weight: 500;
+}
+
+.year-calendar>nav>button {
+    margin-left: 1px;
+    border-radius: 3px;
+}
+
+.year-calendar>main {
+    flex: 1;
+    border: solid 1px var(--divider-color);
+    border-width: 1px 1px 0 0;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1rem;
+    grid-auto-rows: minmax(12rem, auto);
+    overflow: hidden;
+    font-size: .8rem;
+}
+
+.year-calendar .month-cell {
+    border-width: 0 0 1px 1px;
+    overflow: hidden;
+    padding: .5rem;
+    text-align: right;
+    font-weight: 400;
+    
+    &>nav {
+        display: flex;
+        padding: .5rem;
+        display: flex;
+        align-items: center;
+    }
+    
+    &>header {
+        display:flex;
+
+        &>.week-day-cell {
+            flex: 1;
+            border: solid 0px var(--divider-color);
+            padding: 2px;
+            text-align: right;
+            min-width: 2rem !important;
+        }
+    }
+    
+    &>main {
+        flex: 1;
+        border: solid 0px var(--divider-color);
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        grid-gap: 0px;
+        grid-auto-rows: minmax(2rem, auto);
+        overflow: hidden;
+        font-size: .8rem;
+
+        &>.day-cell {
+            border: solid 0px;
+            padding: .5rem;
+            text-align: right;
+            min-height: 1rem;
+            width: 1rem;
+            min-width: 1rem !important;
+            font-weight: 400;
+            color: var(--text-color);
+        }
+
+
+        &>.day-cell.other-month {
+            color: var(--text-color-lighter);
+        }
+
+    }
+}
+
+
 
-.calendar { 
+.month-calendar { 
     margin: 1rem;
     overflow: hidden;
     display: flex;
@@ -8,31 +131,31 @@
 
 }
 
-.calendar>nav {
+.month-calendar>nav {
     display: flex;
     padding: .5rem;
     display: flex;
     align-items: center;
 }
 
-.calendar>nav>label {
+.month-calendar>nav>label {
     flex: 1;
     font-size: 1.3rem;
     font-weight: 500;
 }
 
-.calendar>nav>button {
+.month-calendar>nav>button {
     margin-left: 1px;
     border-radius: 3px;
 }
 
-.calendar>header {
+.month-calendar>header {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     font-size: .8rem;
 }
 
-.calendar>main {
+.month-calendar>main {
     flex: 1;
     border: solid 1px var(--divider-color);
     border-width: 1px 1px 0 0;

package/src/widgets/calendar/Calendar.js

@@ -8,8 +8,45 @@ import './Calendar.css'
 Moment.locale('es')
 const moment = extendMoment(Moment)
 
+/**
+ * Calendar
+ */
 export const Calendar = (props) => {
 
+    const { events = [], children, onChange } = props
+    const [range, setRange] = useState(props.range || "year")
+
+    function onChangeRange(range) {
+        setRange(range)
+    }
+
+    return (
+        <div className="calendar">
+            <CalendarRangeControl range={range} onChange={onChangeRange} />
+            {range === "year" && <YearCalendar events={events} onChange={onChange}>{children}</YearCalendar>}
+            {range === "month" && <MonthCalendar events={events} onChange={onChange} onRange={onChangeRange}>{children}</MonthCalendar>}
+        </div>
+    )
+}
+
+/**
+ * CalendarRangeControl
+ */
+const CalendarRangeControl = (props) => {
+    const { range, onChange } = props
+    return (
+        <div className="calendar-range-control">
+            <Button label="Year" outlined={range == "year"} action={() => onChange("year")} />
+            <Button label="Month" outlined={range == "month"} action={() => onChange("month")} />
+        </div>
+    )
+}
+
+/**
+ * MonthCalendar
+ */
+export const MonthCalendar = (props) => {
+
     const { events = [], children, onChange } = props
     const [position, setPosition] = useState()
 
@@ -58,19 +95,21 @@ export const Calendar = (props) => {
     const cells = days.map(day => {
 
         const eventsOfDay = events.filter(event => {
-            console.log(event.date, day.format("YYYY-MM-DD"))
             const eventDay = moment(event.date)
             return eventDay.isSame(day, 'day')
         })
 
+        const sameMonthStyle = day.isSame(moment(position), 'month') ? '' : 'other-month'
+
         return {
             day,
-            events: eventsOfDay
+            events: eventsOfDay,
+            sameMonthStyle
         }
     })
 
     return (
-        <div className="calendar">
+        <div className="month-calendar">
             <nav>
                 <label> <Text>{monthName}</Text> {year}</label>
                 <Button icon="chevron_left" action={prev} />
@@ -95,10 +134,9 @@ export const Calendar = (props) => {
 
 const DayCell = (props) => {
     const { cell = [], children } = props
-    const { day, events } = cell
+    const { day, events, sameMonthStyle } = cell
     const todayStyle = day.isSame(moment(), 'day') ? 'today' : ''
-    const sameMonthStyle = day.isSame(moment(), 'month') ? '' : 'other-month'
-
+    
     return (
         <div className={`day-cell ${todayStyle} ${sameMonthStyle}`}>
             <header>
@@ -111,6 +149,9 @@ const DayCell = (props) => {
     )
 }
 
+/**
+ * Event
+ */
 const Event = (props) => {
     const { event, children } = props
     if (children) {
@@ -125,4 +166,132 @@ const Event = (props) => {
             </div>
         )
     }
-}
+}
+
+/**
+ * YearCalendar
+ */
+const YearCalendar = (props) => {
+
+    const { events = [], children, onChange } = props
+    const [position, setPosition] = useState()
+
+    useEffect(() => {
+        const today = moment()
+        setPosition(today)
+    }, [])
+
+    useEffect(() => {
+        if (position && onChange) {
+            const firstDayOfYear = position.clone().startOf('year');
+            const firstDayOfRange = firstDayOfYear.clone().startOf('isoweek');
+            const lastDayOfYear = position.clone().endOf('year');
+            const lastDayOfRange = lastDayOfYear.clone().endOf('isoweek');
+            const range = moment.range(firstDayOfRange, lastDayOfRange)
+            onChange(position, range)
+        }
+    }, [position])
+
+    function next() {
+        const next = position.clone().add(1, 'year')
+        setPosition(next)
+    }
+
+    function prev() {
+        const prev = position.clone().subtract(1, 'year')
+        setPosition(prev)
+    }
+
+    function today() {
+        const today = moment()
+        setPosition(today)
+    }
+
+    if (!position) return "..."
+
+    const year = position.format("YYYY");
+    const firstDayOfYear = moment(position).startOf('year');
+    const lastDayOfYear = moment(position).endOf('year');
+    const months = [];
+
+    for (let currentMonth = moment(firstDayOfYear); currentMonth.isBefore(lastDayOfYear); currentMonth.add(1, 'month')) {
+        months.push(moment(currentMonth));
+    }
+
+    const cells = months.map(month => {
+
+        const firstDayOfMonth = month.clone().startOf('month');
+        const firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
+        const lastDayOfMonth = month.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 eventsOfDay = events.filter(event => {
+                const eventDay = moment(event.date)
+                return eventDay.isSame(day, 'day')
+            })
+
+            const sameMonthStyle = day.isSame(moment(month), 'month') ? '' : 'other-month'
+
+            return {
+                day,
+                events: eventsOfDay,
+                sameMonthStyle
+            }
+        })
+
+        return {
+            month,
+            cells
+        }
+    })
+
+
+    return (
+        <div className="year-calendar">
+            <nav>
+                <label> <Text>{year}</Text></label>
+                <Button icon="chevron_left" action={prev} />
+                <Button label="Today" outlined action={today} />
+                <Button icon="chevron_right" action={next} />
+            </nav>
+            <main>
+                {cells.map(cell => <MonthCell key={cell.month} cell={cell} >{children}</MonthCell>)}
+            </main>
+        </div>
+    )
+}
+
+/**
+ * MonthCell
+ */
+const MonthCell = (props) => {
+    const { cell = [], children } = props
+    const { month, cells } = cell
+    const monthName = month.format("MMMM")
+
+    return (
+        <div className={`month-cell`}>
+            <nav>
+                {monthName}
+            </nav>
+            <header>
+                <div className='week-day-cell'><Text>Mon</Text></div>
+                <div className='week-day-cell'><Text>Tue</Text></div>
+                <div className='week-day-cell'><Text>Wed</Text></div>
+                <div className='week-day-cell'><Text>Thu</Text></div>
+                <div className='week-day-cell'><Text>Fri</Text></div>
+                <div className='week-day-cell'><Text>Sat</Text></div>
+                <div className='week-day-cell'><Text>Sun</Text></div>
+            </header>
+            <main>
+                {cells.map(cell => <DayCell key={cell.day} cell={cell} >{children}</DayCell>)}
+            </main>
+        </div>
+    )
+}
+
+