Calendar view (#1174)

Signed-off-by: Andrey Sobolev <[email protected]>

Author: haiodo

Diff for: models/calendar/src/index.ts

@@ -25,6 +25,7 @@ import core, { TAttachedDoc } from '@anticrm/model-core'
 import { TSpaceWithStates } from '@anticrm/model-task'
 import workbench from '@anticrm/model-workbench'
 import calendar from './plugin'
+import view from '@anticrm/model-view'
 
 export * from '@anticrm/calendar'
 
@@ -35,6 +36,7 @@ export const DOMAIN_CALENDAR = 'calendar' as Domain
 export class TCalendar extends TSpaceWithStates implements Calendar {}
 
 @Model(calendar.class.Event, core.class.AttachedDoc, DOMAIN_CALENDAR)
+@UX(calendar.string.Event, calendar.icon.Calendar)
 export class TEvent extends TAttachedDoc implements Event {
   @Prop(TypeString(), calendar.string.Title)
   @Index(IndexKind.FullText)
@@ -85,6 +87,22 @@ export function createModel (builder: Builder): void {
       ]
     }
   }, calendar.app.Calendar)
+
+  builder.createDoc(
+    view.class.ViewletDescriptor,
+    core.space.Model,
+    {
+      label: calendar.string.Calendar,
+      icon: calendar.icon.Calendar,
+      component: calendar.component.CalendarView
+    },
+    calendar.viewlet.Calendar
+  )
+
+  // Use generic child presenter
+  builder.mixin(calendar.class.Event, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: view.component.ObjectPresenter
+  })
 }
 
 export default calendar

Diff for: models/calendar/src/plugin.ts

@@ -15,17 +15,22 @@
 
 import { calendarId } from '@anticrm/calendar'
 import calendar from '@anticrm/calendar-resources/src/plugin'
+import { Ref } from '@anticrm/core'
 import type { IntlString } from '@anticrm/platform'
 import { mergeIds } from '@anticrm/platform'
 import { AnyComponent } from '@anticrm/ui'
+import { ViewletDescriptor } from '@anticrm/view'
 
 export default mergeIds(calendarId, calendar, {
   component: {
-    CreateCalendar: '' as AnyComponent
+    CreateCalendar: '' as AnyComponent,
+    CalendarView: '' as AnyComponent
   },
   string: {
-    ApplicationLabelCalendar: '' as IntlString
+    ApplicationLabelCalendar: '' as IntlString,
+    Event: '' as IntlString
   },
-  space: {
+  viewlet: {
+    Calendar: '' as Ref<ViewletDescriptor>
   }
 })

Diff for: models/recruit/src/review.ts

@@ -81,6 +81,20 @@ export function createReviewModel (builder: Builder): void {
       archived: false
     }
   })
+
+  builder.createDoc(view.class.Viewlet, core.space.Model, {
+    attachTo: recruit.class.Review,
+    descriptor: calendar.viewlet.Calendar,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    options: {
+      lookup: {
+        attachedTo: recruit.mixin.Candidate,
+        participants: contact.class.Employee,
+        company: contact.class.Organization
+      }
+    } as FindOptions<Doc>,
+    config: []
+  })
 }
 
 function createTableViewlet (builder: Builder): void {

Diff for: packages/ui/lang/en.json

@@ -16,6 +16,8 @@
     "NotSelected": "Not selected",
     "Today": "Today",
     "English": "English",
-    "Russian": "Russian"
+    "Russian": "Russian",
+    "CalendarLeft": "<",
+    "CalendarRight": ">"
   }
 }

Diff for: packages/ui/lang/ru.json

@@ -16,6 +16,8 @@
     "NotSelected": "Не выбрано",
     "Today": "Сегодня",
     "English": "Английский",
-    "Russian": "Русский"
+    "Russian": "Русский",
+    "CalendarLeft": "<",
+    "CalendarRight": ">"
   }
 }

Diff for: packages/ui/src/components/Button.svelte

@@ -20,7 +20,7 @@
   import Icon from './Icon.svelte'
   import { onMount } from 'svelte'
 
-  export let label: IntlString
+  export let label: IntlString | undefined = undefined
   export let primary: boolean = false
   export let size: 'small' | 'medium' = 'medium'
   export let icon: Asset | AnySvelteComponent | undefined = undefined
@@ -49,7 +49,9 @@
   {#if loading}
     <Spinner />
   {:else}
-    <Label {label} />
+    {#if label}
+      <Label {label} />
+    {/if}
   {/if}
 </button>
 

Diff for: packages/ui/src/components/calendar/MonthCalendar.svelte

@@ -0,0 +1,111 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script type="ts">
+  import { areDatesEqual, day, firstDay, getWeekDayName, isWeekend, weekday } from './internal/DateUtils'
+
+  export let mondayStart = true
+  export let weekFormat: 'narrow' | 'short' | 'long' | undefined = 'short'
+  export let cellHeight: string | undefined = undefined
+  export let value: Date = new Date()
+  export let currentDate: Date = new Date()
+  export let displayedWeeksCount = 6
+
+  $: firstDayOfCurrentMonth = firstDay(currentDate, mondayStart)
+
+  function onSelect (date: Date) {
+    value = date
+  }
+
+  const todayDate = new Date()
+</script>
+
+<div class="month-calendar">
+  <div class="days-of-week-header">
+    {#each [...Array(7).keys()] as dayOfWeek}
+      <div class="day-name">{getWeekDayName(day(firstDayOfCurrentMonth, dayOfWeek), weekFormat)}</div>
+    {/each}
+  </div>
+  <div class="days-of-month">
+    {#each [...Array(displayedWeeksCount).keys()] as weekIndex}
+      {#each [...Array(7).keys()] as dayOfWeek}
+        <div style={`grid-column-start: ${dayOfWeek + 1}; grid-row-start: ${weekIndex + 1}`}>
+          <div style={`display: flex; width: 100%; height: ${cellHeight ? `${cellHeight};` : '100%;'}`}>
+            <div
+              class="cell flex-center"
+              class:weekend={isWeekend(weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek))}
+              class:today={areDatesEqual(todayDate, weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek))}
+              class:selected={weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek).getMonth() ===
+                currentDate.getMonth() && areDatesEqual(value, weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek))}
+              class:wrongMonth={weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek).getMonth() !==
+                currentDate.getMonth()}
+              on:click={() => onSelect(weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek))}
+            >
+              {#if !$$slots.cell || weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek).getMonth() !== currentDate.getMonth()}
+                {weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek).getDate()}
+              {:else}
+                <slot name="cell" date={weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek)} />
+              {/if}
+            </div>
+          </div>
+        </div>
+      {/each}
+    {/each}
+  </div>
+</div>
+
+<style lang="scss">
+  .day-name,
+  .selected-month-controller {
+    display: flex;
+    justify-content: center;
+  }
+  .days-of-week-header,
+  .days-of-month {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+  .weekend {
+    background-color: var(--theme-bg-accent-color);
+  }
+  .today {
+    color: #a66600;
+  }
+  .selected {
+    border-radius: 3px;
+    background-color: var(--primary-button-enabled);
+    border-color: var(--primary-button-focused-border);
+    color: var(--primary-button-color);
+  }
+  .cell {
+    height: 100%;
+    width: 100%;
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+  }
+  .cell:hover:not(.wrongMonth) {
+    border: 1px solid var(--primary-button-focused-border);
+    background-color: var(--primary-button-enabled);
+    color: var(--primary-button-color);
+  }
+  .wrongMonth {
+    color: var(--grayscale-grey-03);
+  }
+  .month-name {
+    font-size: 14px;
+    font-weight: bold;
+    margin: 0 5px;
+    color: var(--theme-content-dark-color);
+  }
+</style>

Diff for: packages/ui/src/components/calendar/YearCalendar.svelte

@@ -0,0 +1,68 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script type="ts">
+  import MonthCalendar from './MonthCalendar.svelte'
+
+  /**
+   * If passed, calendars will use monday as first day
+   */
+  export let mondayStart = true
+  export let value: Date = new Date()
+  export let currentDate: Date = new Date()
+  export let cellHeight: string | undefined = undefined
+  export let minWidth = '18rem'
+
+  function getMonthName (date: Date): string {
+    const locale = new Intl.NumberFormat().resolvedOptions().locale
+    return new Intl.DateTimeFormat(locale, { month: 'long' }).format(date)
+  }
+  function month (date: Date, m: number): Date {
+    date = new Date(date)
+    date.setMonth(m)
+    return date
+  }
+</script>
+
+<div class="year-erp-calendar">
+  {#each [...Array(12).keys()] as m}
+    <div class="antiComponentBox mt-2 mb-2 ml-2 mr-2 flex-grow" style={`min-width: ${minWidth};`}>
+      {getMonthName(month(value, m))}
+      <MonthCalendar {cellHeight} weekFormat="narrow" bind:value currentDate={month(currentDate, m)} {mondayStart}>
+        <!----> eslint-disable-next-line no-undef -->
+        <svelte:fragment slot="cell" let:date={date}>
+          <slot name="cell" date={date} />
+        </svelte:fragment>
+      </MonthCalendar>
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .year-erp-calendar {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    border-collapse: collapse;
+    .row {
+      display: table-row;
+    }
+    .th {
+      display: table-cell;
+    }
+    .calendar {
+      display: table-cell;
+      padding: 0.3em;
+    }
+  }
+</style>

Diff for: packages/ui/src/components/calendar/internal/DateUtils.ts

@@ -0,0 +1,69 @@
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+const DAYS_IN_WEEK = 7
+const MILLISECONDS_IN_DAY = 86400000
+
+export function firstDay (date: Date, mondayStart: boolean): Date {
+  const firstDayOfMonth = new Date(date)
+  firstDayOfMonth.setDate(1) // First day of month
+  const result = new Date(firstDayOfMonth)
+  result.setDate(
+    result.getDate() - result.getDay() + (mondayStart ? 1 : 0)
+  )
+  // Check if we need add one more week
+  if (result.getTime() > firstDayOfMonth.getTime()) {
+    result.setDate(result.getDate() - DAYS_IN_WEEK)
+  }
+  result.setHours(0)
+  result.setMinutes(0)
+  result.setSeconds(0)
+  result.setMilliseconds(0)
+  return result
+}
+
+export function getWeekDayName (weekDay: Date, weekFormat: 'narrow' | 'short' | 'long' | undefined = 'short'): string {
+  const locale = new Intl.NumberFormat().resolvedOptions().locale
+  return new Intl.DateTimeFormat(locale, {
+    weekday: weekFormat
+  }).format(weekDay)
+}
+
+export function day (firstDay: Date, offset: number): Date {
+  return new Date(firstDay.getTime() + offset * MILLISECONDS_IN_DAY)
+}
+
+export function weekday (firstDay: Date, w: number, d: number): Date {
+  return day(firstDay, w * DAYS_IN_WEEK + d)
+}
+
+export function areDatesEqual (firstDate: Date | undefined, secondDate: Date | undefined): boolean {
+  if (firstDate === undefined || secondDate === undefined) {
+    return false
+  }
+  return (
+    firstDate.getFullYear() === secondDate.getFullYear() &&
+    firstDate.getMonth() === secondDate.getMonth() &&
+    firstDate.getDate() === secondDate.getDate()
+  )
+}
+
+export function isWeekend (date: Date): boolean {
+  return date.getDay() === 0 || date.getDay() === 6
+}
+
+export function getMonthName (date: Date): string {
+  const locale = new Intl.NumberFormat().resolvedOptions().locale
+  return new Intl.DateTimeFormat(locale, { month: 'long' }).format(date)
+}

Diff for: packages/ui/src/index.ts

@@ -116,3 +116,6 @@ addStringsLoader(uiId, async (lang: string) => {
 
 export { default } from './plugin'
 export * from './colors'
+
+export { default as MonthCalendar } from './components/calendar/MonthCalendar.svelte'
+export { default as YearCalendar } from './components/calendar/YearCalendar.svelte'