@operato/event-view 1.0.0-beta.4 → 1.0.0-beta.40

package/src/calendar-weekly-styles.ts

@@ -0,0 +1,94 @@
+import { css } from 'lit'
+
+export const CalendarWeeklyStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    color: var(--calendar-weekly-text-color, #585858);
+  }
+
+  [head] {
+    display: flex;
+    align-items: center;
+  }
+
+  [head-week] {
+    display: flex;
+    align-items: left;
+  }
+
+  [this-week] {
+    font-size: x-large;
+  }
+
+  [nav] {
+    margin-left: auto;
+  }
+
+  ol {
+    flex: 1;
+
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: max-content;
+
+    padding: 0;
+    margin: var(--calendar-weekly-ol-margin, 9px 0);
+    border-top: var(--calendar-weekly-ol-top-border, 3px solid #999);
+  }
+
+  li {
+    position: relative;
+
+    list-style: none;
+    border: var(--calendar-weekly-border, 1px solid rgba(0, 0, 0, 0.1));
+    border-width: var(--calendar-weekly-border-width, 0 1px 1px 0px);
+    opacity: var(--calendar-weekly-opacity);
+  }
+  li:nth-child(7n + 1) {
+    border-left-width: 1px;
+  }
+
+  li[day-of-week] {
+    opacity: 1;
+    background-color: var(--calendar-current-week-background-color, #fff);
+    padding: var(--calendar-weekly-label-padding);
+    color: rgba(var(--secondary-color-rgb), 0.8);
+    text-align: center;
+  }
+
+  li[current-week] {
+    background-color: var(--calendar-current-monthly-background-color, #fff);
+    opacity: 1;
+  }
+
+  span[date-label] {
+    display: block;
+    margin: var(--calendar-weekly-date-label-margin);
+    text-align: var(--calendar-weekly-label-align, center);
+  }
+
+  li[today] > span[date-label] {
+    display: inline-block;
+    background-color: var(--calendar-weekly-date-label-background-color, #cc3300);
+    padding: var(--calendar-weekly-date-label-padding);
+    border-radius: var(--calendar-weekly-date-label-border-radius, 50%);
+    color: var(--calendar-weekly-date-label-color, #fff);
+    min-width: 16px;
+    text-align: center;
+  }
+
+  [date] div {
+    display: block;
+    font-size: small;
+  }
+
+  [event] {
+    display: block;
+    background-color: var(--calendar-weekly-background-color);
+    border: var(--calendar-weekly-event-border);
+    border-width: var(--calendar-weekly-event-border-width);
+    margin: var(--calendar-weekly-event-margin, 0 0 4px 0);
+    padding: var(--calendar-weekly-event-padding, 2px 4px 2px 4px);
+  }
+`

package/src/calendar-weekly.ts

@@ -0,0 +1,138 @@
+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 { 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
+}[]
+
+@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)
+
+    return html`
+      <div head>
+        <div this-week><b>${dayjs(new Date(this.year, this.month)).format('MMMM')}</b> ${this.year}</div>
+
+        <div nav>
+          <mwc-button
+            outlined
+            @click=${() => {
+              const dayJs = this.getLastDateOfWeek(this.year, this.week)
+              const prevWeek = dayJs.subtract(1, 'week')
+              this.moveTo(prevWeek.year(), prevWeek.month(), prevWeek.week())
+            }}
+            ><</mwc-button
+          >
+          <mwc-button
+            @click=${() => {
+              this.moveTo(dayjs().year(), dayjs().month(), dayjs().week())
+            }}
+            >Today</mwc-button
+          >
+          <mwc-button
+            @click=${() => {
+              const dayJs = this.getLastDateOfWeek(this.year, this.week)
+              const nextWeek = dayJs.add(1, 'week')
+              this.moveTo(nextWeek.year(), nextWeek.month(), nextWeek.week())
+            }}
+            >></mwc-button
+          >
+        </div>
+      </div>
+      <div head-week>
+        <div this-week><b>Week ${this.week}</b></div>
+      </div>
+
+      <ol>
+        ${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 => {
+          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
+                  >`
+              )}
+            </div>
+          </li>`
+        })}
+      </ol>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {}
+
+  findEvents(date: Date): BizEvent[] {
+    return this.eventProvider?.fetchEventsForDate(date, {}) || []
+  }
+
+  moveTo(year: number, month: number, week: number) {
+    this.year = year
+    this.month = month
+    this.week = week
+  }
+
+  getLastDateOfWeek(year: number, week: number): Dayjs {
+    const firstWeekLastDay = dayjs(new Date(year, 0, 1)).endOf('w')
+    week -= 1 // one-based week, so need the minus-one
+    return firstWeekLastDay.add(week, 'w')
+  }
+
+  createDaysForCurrentWeek(year: number, week: number): CALENDAR {
+    const lastDayjs = this.getLastDateOfWeek(year, week)
+    const weekDays = 7
+
+    return [...Array(weekDays)]
+      .map((day, index) => {
+        const date = new Date(lastDayjs.year(), lastDayjs.month(), lastDayjs.date() - index)
+        const label = dayjs(date).format('MM-DD')
+        return {
+          date,
+          label,
+          thisWeek: true,
+          today: isToday(date)
+        }
+      })
+      .reverse()
+  }
+}

package/src/event-view.ts

@@ -1,9 +1,10 @@
 import './calendar-monthly'
+import './calendar-weekly'
 
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { SampleEventProvider } from './sample-event-provider'
+import { SampleMonthlyEventProvider, SampleWeeklyEventProvider } from './sample-event-provider'
 
 @customElement('event-view')
 export class EventView extends LitElement {
@@ -13,7 +14,7 @@ export class EventView extends LitElement {
       flex-direction: column;
     }
 
-    calendar-monthly {
+    calendar-weekly {
       flex: 1;
 
       padding: 0;
@@ -21,7 +22,11 @@ export class EventView extends LitElement {
     }
   `
 
+  @property({ type: String }) format: string = 'monthly'
+
   render() {
-    return html` <calendar-monthly .eventProvider=${new SampleEventProvider()}></calendar-monthly> `
+    return this.format == 'weekly'
+      ? html` <calendar-weekly .eventProvider=${new SampleWeeklyEventProvider()}></calendar-weekly> `
+      : html` <calendar-monthly .eventProvider=${new SampleMonthlyEventProvider()}></calendar-monthly> `
   }
 }

package/src/sample-event-provider.ts

@@ -1,6 +1,6 @@
 import { EventProvider } from './event-provider'
 
-export class SampleEventProvider implements EventProvider {
+export class SampleMonthlyEventProvider implements EventProvider {
   fetchEventsForDate(date: Date, options: any) {
     return [
       {
@@ -55,3 +55,62 @@ export class SampleEventProvider implements EventProvider {
     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 []
+  }
+}

package/stories/index.stories.ts

@@ -1,60 +1,39 @@
-import { html, TemplateResult } from 'lit';
-import '../src/event-view.js';
+import '../src/event-view.js'
+
+import { html, TemplateResult } from 'lit'
 
 export default {
   title: 'EventView',
   component: 'event-view',
   argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
+    format: { control: 'select', options: ['monthly', 'weekly'], description: 'set event view format' }
   }
-};
+}
 
 interface Story<T> {
-  (args: T): TemplateResult;
-  args?: Partial<T>;
-  argTypes?: Record<string, unknown>;
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
 }
 
 interface ArgTypes {
-  title?: string;
-  counter?: number;
-  textColor?: string;
-  slot?: TemplateResult;
+  format?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  title = 'Hello world',
-  counter = 5,
-  textColor,
-  slot,
-}: ArgTypes) => html`
-  <event-view
-    style="--event-view-text-color: ${textColor || 'black'}"
-    .title=${title}
-    .counter=${counter}
-  >
-    ${slot}
-  </event-view>
-`;
-
-export const Regular = Template.bind({});
-
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
-};
-
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
-};
-
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
-};
+const Template: Story<ArgTypes> = ({ format = 'monthly' }: ArgTypes) =>
+  html`
+    <link rel="stylesheet" href="/themes/app-theme.css" />
+    <link rel="stylesheet" href="/themes/calendar-theme.css" />
+
+    <event-view format=${format}> </event-view>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {
+  format: 'monthly'
+}
+
+export const WeeklyEventView = Template.bind({})
+WeeklyEventView.args = {
+  format: 'weekly'
+}

package/themes/calendar-theme.css

@@ -25,6 +25,27 @@ body {
   --calendar-monthly-event-padding: 2px var(--padding-default);
   --calendar-monthly-event-border: 3px solid #ccc;
   --calendar-monthly-event-border-width: 0 0 0 3px;
+
+  /* weekly layout */
+  --calendar-weekly-ol-margin: var(--margin-default) 0;
+  --calendar-weekly-ol-top-border: 2px solid rgba(var(--secondary-color-rgb), 0.7);
+  --calendar-current-week-background-color: var(--theme-white-color);
+  --calendar-weekly-label-align: center;
+  --calendar-weekly-label-padding: var(--padding-narrow) 0;
+  --calendar-weekly-label-color: rgba(var(--secondary-color-rgb), 0.8);
+  --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-color: var(--theme-white-color);
+
+  --calendar-weekly-background-color: #f4f4f4;
+  --calendar-weekly-event-border-radius: var(--border-radius);
+  --calendar-weekly-event-margin: var(--padding-narrow) 0 0 0;
+  --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/tsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es2018",
+    "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "noEmitOnError": true,
     "lib": ["es2017", "dom"],
     "strict": true,