@operato/event-view 1.2.21 → 1.2.23

package/src/calendar-weekly.ts

@@ -1,46 +1,23 @@
 import dayjs, { Dayjs } from 'dayjs/esm/index'
-import weekday from 'dayjs/esm/plugin/weekday'
-import weekOfYear from 'dayjs/esm/plugin/weekOfYear'
 import { html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 
-import { BizEvent } from './biz-event'
 import { CalendarWeeklyStyles } from './calendar-weekly-styles'
-import { EventProvider } from './event-provider'
-
-dayjs.extend(weekday)
-dayjs.extend(weekOfYear)
-
-const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-
-function isToday(date: Date) {
-  const today = new Date()
-  return (
-    date.getDate() == today.getDate() &&
-    date.getMonth() == today.getMonth() &&
-    date.getFullYear() == today.getFullYear()
-  )
-}
-
-type CALENDAR = {
-  label: string
-  date: Date
-  thisWeek: boolean
-  today?: boolean
-}[]
+import { BizEvent, CALENDAR, WEEKDAYS, EventProvider, isToday } from './types'
 
 @customElement('calendar-weekly')
 export class CalendarWeekly extends LitElement {
   static styles = [CalendarWeeklyStyles]
 
-  @property({ type: Number }) year: number = dayjs().year()
-  @property({ type: Number }) month: number = dayjs().month()
-  @property({ type: Number }) week: number = dayjs().week()
   @property({ type: Array }) eventProvider?: EventProvider
 
-  render() {
-    const calendar = this.createDaysForCurrentWeek(this.year, this.week)
+  @state() year: number = dayjs().year()
+  @state() month: number = dayjs().month()
+  @state() week: number = dayjs().week()
+  @state() calendar?: CALENDAR
+  @state() eventMap?: Map<Date, BizEvent[]>
 
+  render() {
     return html`
       <div head>
         <div this-week>
@@ -49,7 +26,6 @@ export class CalendarWeekly extends LitElement {
 
         <div nav>
           <mwc-button
-            outlined
             @click=${() => {
               const dayJs = this.getLastDateOfWeek(this.year, this.week)
               const prevWeek = dayJs.subtract(1, 'week')
@@ -77,22 +53,16 @@ export class CalendarWeekly extends LitElement {
       </div>
 
       <ol>
-        ${calendar.map((date, index) => {
+        ${this.calendar?.map((date, index) => {
           return html`
             <li ?today=${date.today} day-of-week><span date-label>${date.label}(${WEEKDAYS[index]})</span></li>
           `
         })}
-        ${calendar.map(date => {
+        ${this.calendar?.map(date => {
           return html`<li day-task>
             <div>
-              ${this.findEvents(date.date).map(
-                event =>
-                  html`<span
-                    @click=${() => event.clickEvent(event.title, event.due)}
-                    event
-                    .style="border-color: ${event.color};"
-                    >${event.title}</span
-                  >`
+              ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>
+                template ? template : html`<span event .style="border-color: ${color};">${title}</span>`
               )}
             </div>
           </li>`
@@ -101,10 +71,13 @@ export class CalendarWeekly extends LitElement {
     `
   }
 
-  updated(changes: PropertyValues<this>) {}
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('year') || changes.has('month') || changes.has('week')) {
+      const calendar = this.createDaysForCurrentWeek(this.year, this.week)
 
-  findEvents(date: Date): BizEvent[] {
-    return this.eventProvider?.fetchEventsForDate(date, {}) || []
+      this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar)
+      this.calendar = calendar
+    }
   }
 
   moveTo(year: number, month: number, week: number) {

package/src/index.ts

@@ -1 +1,2 @@
-export { OxEventView } from './ox-event-view.js'
+export * from './types.js'
+export * from './ox-event-view.js'

package/src/ox-event-view.ts

@@ -6,7 +6,7 @@ import './calendar-weekly'
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { SampleMonthlyEventProvider, SampleWeeklyEventProvider } from './sample-event-provider'
+import { EventProvider } from './types'
 
 @customElement('ox-event-view')
 export class OxEventView extends LitElement {
@@ -25,16 +25,17 @@ export class OxEventView extends LitElement {
   `
 
   @property({ type: String }) mode: 'monthly' | 'weekly' = 'monthly'
+  @property({ type: Array }) eventProvider?: EventProvider
 
   render() {
     return this.mode == 'weekly'
       ? html`
-          <calendar-weekly .eventProvider=${new SampleWeeklyEventProvider()}>
+          <calendar-weekly .eventProvider=${this.eventProvider}>
             <mwc-icon @click=${(e: Event) => (this.mode = 'monthly')}>calendar_month</mwc-icon>
           </calendar-weekly>
         `
       : html`
-          <calendar-monthly .eventProvider=${new SampleMonthlyEventProvider()}>
+          <calendar-monthly .eventProvider=${this.eventProvider}>
             <mwc-icon @click=${(e: Event) => (this.mode = 'weekly')}>calendar_view_week</mwc-icon>
           </calendar-monthly>
         `

package/src/types.ts

@@ -0,0 +1,38 @@
+import { TemplateResult } from 'lit'
+import dayjs from 'dayjs/esm/index'
+import weekday from 'dayjs/esm/plugin/weekday'
+import weekOfYear from 'dayjs/esm/plugin/weekOfYear'
+
+dayjs.extend(weekday)
+dayjs.extend(weekOfYear)
+
+export type BizEvent = {
+  due?: string
+  title: string
+  color: string
+  clickEvent?: any
+  template?: TemplateResult
+}
+
+export type CALENDAR = {
+  label: string
+  date: Date
+  thisMonth?: boolean
+  thisWeek?: boolean
+  today?: boolean
+}[]
+
+export interface EventProvider {
+  fetchEventsForCalendar(calendar: CALENDAR): Map<Date, BizEvent[]>
+}
+
+export const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+export function isToday(date: Date) {
+  const today = new Date()
+  return (
+    date.getDate() == today.getDate() &&
+    date.getMonth() == today.getMonth() &&
+    date.getFullYear() == today.getFullYear()
+  )
+}

package/stories/index.stories.ts

@@ -1,6 +1,64 @@
 import '../src/ox-event-view.js'
-
 import { html, TemplateResult } from 'lit'
+import { BizEvent, CALENDAR, EventProvider } from '../src/types.js'
+
+class SampleEventProvider implements EventProvider {
+  fetchEventsForCalendar(calendar: CALENDAR) {
+    const map = new Map<Date, BizEvent[]>()
+
+    calendar.forEach(({ date }) =>
+      map.set(date, [
+        {
+          due: '2021-08-21',
+          title: 'HAHAHA',
+          color: 'yellow'
+        },
+        {
+          due: '2021-08-21',
+          title: 'HOHOHO',
+          color: 'lime'
+        },
+        {
+          due: '2021-08-21',
+          title: 'HIHIHI',
+          color: 'yellow'
+        },
+        {
+          due: '2021-08-21',
+          title: 'HEHEHE',
+          color: 'white'
+        },
+        {
+          due: '2021-08-21',
+          title: 'KEKEKE',
+          color: 'yellow'
+        },
+        {
+          due: '2021-08-21',
+          title: 'MEMEME',
+          color: 'orange'
+        },
+        {
+          due: '2021-08-21',
+          title: 'MOMOMO',
+          color: 'lime'
+        },
+        {
+          due: '2021-08-21',
+          title: 'QUOQUO',
+          color: 'navy'
+        },
+        {
+          due: '2021-08-21',
+          title: 'ZZXXCC',
+          color: 'gray'
+        }
+      ])
+    )
+
+    return map
+  }
+}
 
 export default {
   title: 'EventView',
@@ -26,7 +84,7 @@ const Template: Story<ArgTypes> = ({ mode = 'monthly' }: ArgTypes) =>
     <link rel="stylesheet" href="/themes/calendar-theme.css" />
     <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
 
-    <ox-event-view mode=${mode}> </ox-event-view>
+    <ox-event-view mode=${mode} .eventProvider=${new SampleEventProvider()}> </ox-event-view>
   `
 
 export const Regular = Template.bind({})

package/themes/calendar-theme.css

@@ -36,7 +36,7 @@ body {
   --calendar-weekly-opacity: 0.5;
   --calendar-weekly-date-label-background-color: var(--status-danger-color);
   --calendar-weekly-date-label-margin: var(--margin-narrow);
-  --calendar-weekly-date-label-padding: 5px var(--padding-narrow);
+  --calendar-weekly-date-label-padding: 3px var(--padding-narrow);
   --calendar-weekly-date-label-color: var(--theme-white-color);
 
   --calendar-weekly-background-color: #f4f4f4;
@@ -45,7 +45,6 @@ body {
   --calendar-weekly-event-padding: 2px var(--padding-default);
   --calendar-weekly-event-border: 3px solid #ccc;
   --calendar-weekly-event-border-width: 0 0 0 3px;
-
 }
 
 @media only screen and (max-width: 460px) {

package/src/biz-event.ts

@@ -1,6 +0,0 @@
-export type BizEvent = {
-  due?: string
-  title: string
-  color: string
-  clickEvent?: any
-}

package/src/event-provider.ts

@@ -1,6 +0,0 @@
-import { BizEvent } from './biz-event'
-
-export interface EventProvider {
-  fetchEventsForDate(date: Date, optins: any): BizEvent[]
-  fetchEventsForDuration(from: Date, to: Date, optins: any): BizEvent[]
-}

package/src/sample-event-provider.ts

@@ -1,116 +0,0 @@
-import { EventProvider } from './event-provider'
-
-export class SampleMonthlyEventProvider implements EventProvider {
-  fetchEventsForDate(date: Date, options: any) {
-    return [
-      {
-        due: '2021-08-21',
-        title: 'HAHAHA',
-        color: 'yellow'
-      },
-      {
-        due: '2021-08-21',
-        title: 'HOHOHO',
-        color: 'lime'
-      },
-      {
-        due: '2021-08-21',
-        title: 'HIHIHI',
-        color: 'yellow'
-      },
-      {
-        due: '2021-08-21',
-        title: 'HEHEHE',
-        color: 'white'
-      },
-      {
-        due: '2021-08-21',
-        title: 'KEKEKE',
-        color: 'yellow'
-      },
-      {
-        due: '2021-08-21',
-        title: 'MEMEME',
-        color: 'orange'
-      },
-      {
-        due: '2021-08-21',
-        title: 'MOMOMO',
-        color: 'lime'
-      },
-      {
-        due: '2021-08-21',
-        title: 'QUOQUO',
-        color: 'navy'
-      },
-      {
-        due: '2021-08-21',
-        title: 'ZZXXCC',
-        color: 'gray'
-      }
-    ]
-  }
-
-  fetchEventsForDuration(from: Date, to: Date, options: any) {
-    return []
-  }
-}
-
-export class SampleWeeklyEventProvider implements EventProvider {
-  fetchEventsForDate(date: Date, options: any) {
-    return [
-      {
-        due: '2021-08-21',
-        title: 'HAHAHA',
-        color: 'yellow',
-        clickEvent: function (title: string, due: string) {
-          console.log('clicked...', title, due)
-        }
-      },
-      {
-        due: '2021-08-21',
-        title: 'HOHOHO',
-        color: 'lime'
-      },
-      {
-        due: '2021-08-21',
-        title: 'HIHIHI',
-        color: 'yellow'
-      },
-      {
-        due: '2021-08-21',
-        title: 'HEHEHE',
-        color: 'white'
-      },
-      {
-        due: '2021-08-21',
-        title: 'KEKEKE',
-        color: 'yellow'
-      },
-      {
-        due: '2021-08-21',
-        title: 'MEMEME',
-        color: 'orange'
-      },
-      {
-        due: '2021-08-21',
-        title: 'MOMOMO',
-        color: 'lime'
-      },
-      {
-        due: '2021-08-21',
-        title: 'QUOQUO',
-        color: 'navy'
-      },
-      {
-        due: '2021-08-21',
-        title: 'ZZXXCC',
-        color: 'gray'
-      }
-    ]
-  }
-
-  fetchEventsForDuration(from: Date, to: Date, options: any) {
-    return []
-  }
-}