Some calendar view improvements (#1175)

models/recruit/src/review.ts

@@ -93,7 +93,16 @@ export function createReviewModel (builder: Builder): void {
         company: contact.class.Organization
       }
     } as FindOptions<Doc>,
-    config: []
+    config: [
+      '',
+      'title',
+      '$lookup.attachedTo',
+      'verdict',
+      { key: '', presenter: recruit.component.OpinionsPresenter, label: recruit.string.Opinions, sortingKey: 'opinions' },
+      { key: '$lookup.participants', presenter: calendar.component.PersonsPresenter, label: calendar.string.Participants, sortingKey: '$lookup.participants' },
+      '$lookup.company',
+      'modifiedOn'
+    ]
   })
 }
 
@@ -119,8 +128,6 @@ function createTableViewlet (builder: Builder): void {
       '$lookup.company',
       'date',
       'dueDate',
-      // { presenter: attachment.component.AttachmentsPresenter, label: attachment.string.Files, sortingKey: 'attachments' },
-      // { presenter: chunter.component.CommentsPresenter, label: chunter.string.Comments, sortingKey: 'comments' },
       'modifiedOn'
     ]
   })

packages/ui/src/components/Tooltip.svelte

@@ -22,6 +22,7 @@
   export let component: AnySvelteComponent | AnyComponent | undefined = undefined
   export let props: any | undefined = undefined
   export let anchor: HTMLElement | undefined = undefined
+  export let fill = false
 
   let triggerHTML: HTMLElement
   let shown: boolean = false
@@ -29,7 +30,7 @@
 </script>
 
 <div
-  class="tooltip-trigger"
+  class="tooltip-trigger" class:fill={fill}
   name={`tooltip-${label}`}
   bind:this={triggerHTML}
   on:mousemove={() => {
@@ -42,5 +43,9 @@
 <style lang="scss">
   .tooltip-trigger {
     width: fit-content;
+    &.fill {
+      width: 100%;
+      height: 100%;
+    }
   }  
 </style>

packages/ui/src/components/calendar/MonthCalendar.svelte

@@ -31,7 +31,7 @@
   const todayDate = new Date()
 </script>
 
-<div class="month-calendar">
+<div class="month-calendar flex-grow">
   <div class="days-of-week-header">
     {#each [...Array(7).keys()] as dayOfWeek}
       <div class="day-name">{getWeekDayName(day(firstDayOfCurrentMonth, dayOfWeek), weekFormat)}</div>
@@ -52,7 +52,7 @@
                 currentDate.getMonth()}
               on:click={() => onSelect(weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek))}
             >
-              {#if !$$slots.cell || weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek).getMonth() !== currentDate.getMonth()}
+              {#if !$$slots.cell }
                 {weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek).getDate()}
               {:else}
                 <slot name="cell" date={weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek)} />
@@ -89,8 +89,8 @@
     color: var(--primary-button-color);
   }
   .cell {
-    height: 100%;
-    width: 100%;
+    height: calc(100% - 5px);
+    width: calc(100% - 5px);
     border-radius: 0.5rem;
     border: 1px solid transparent;
   }

plugins/calendar-resources/src/components/CalendarView.svelte

@@ -211,18 +211,20 @@
 </div>
 
 
+{#if mode === CalendarMode.Year}
 <ScrollBox bothScroll>
-  {#if mode === CalendarMode.Year}
     <YearCalendar {mondayStart} cellHeight={'2.5rem'} bind:value={value} currentDate={currentDate(date, shifts)}>
       <svelte:fragment slot="cell" let:date>
-        <Day events={findEvents(objects, date)} {date} />
+        <Day events={findEvents(objects, date)} {date} {_class} {baseMenuClass} {options} {config} query={resultQuery} />
       </svelte:fragment>
     </YearCalendar>
+  </ScrollBox>
   {:else if mode === CalendarMode.Month}
-    <MonthCalendar {mondayStart} cellHeight={'5rem'} bind:value={value} currentDate={currentDate(date, shifts)}>
-      <svelte:fragment slot="cell" let:date={date}>        
-        <Day events={findEvents(objects, date)} {date} size={'huge'}/>
-      </svelte:fragment>
-    </MonthCalendar>  
+    <div class='flex flex-grow'>
+      <MonthCalendar {mondayStart} cellHeight={'8.5rem'} bind:value={value} currentDate={currentDate(date, shifts)}>
+        <svelte:fragment slot="cell" let:date={date}>        
+          <Day events={findEvents(objects, date)} {date} size={'huge'} {_class} {baseMenuClass} {options} {config} query={resultQuery}/>
+        </svelte:fragment>
+      </MonthCalendar>  
+    </div>
   {/if}
-</ScrollBox>

plugins/calendar-resources/src/components/Day.svelte

@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import { Event } from '@anticrm/calendar'
+  import { Class, Doc, DocumentQuery, FindOptions, Ref } from '@anticrm/core'
   import { Tooltip } from '@anticrm/ui'
   import calendar from '../plugin'
   import EventsPopup from './EventsPopup.svelte'
@@ -21,34 +22,82 @@
   export let events: Event[]
   export let date: Date
   export let size: 'small' | 'huge' = 'small'
+
+  export let _class: Ref<Class<Doc>>
+  export let query: DocumentQuery<Event> = {}
+  export let options: FindOptions<Event> | undefined = undefined
+  export let baseMenuClass: Ref<Class<Event>> | undefined = undefined
+  export let config: string[]
 </script>
 
 {#if events.length > 0}
-  <Tooltip label={calendar.string.Events} component={EventsPopup} props={{ value: events }}>
-    <div class="cell" class:huge={size === 'huge'}>
-      {date.getDate()}
-      <div class="marker" />
-    </div>
+  <Tooltip
+    fill={size === 'huge'}
+    label={calendar.string.Events}
+    component={EventsPopup}
+    props={{ value: events, _class, query, options, baseMenuClass, config }}
+  >
+    {#if size === 'huge'}
+      <div class="cell" class:huge={size === 'huge'}>
+        <div class="flex flex-reverse fs-title flex-grow">
+          {date.getDate()}
+        </div>
+      </div>
+      <div class="cell" class:huge={size === 'huge'}>
+        <div class="flex-col flex-grow">
+          {#each events.slice(0, 4) as e, ei}
+            <div class="overflow-label flex flex-between">
+              {e.title}
+              <div>
+                {new Date(e.date).getHours()}:{new Date(e.date).getMinutes()}
+              </div>
+            </div>
+          {/each}
+          {#if events.length > 4}
+            And {events.length - 4} more
+          {/if}
+        </div>
+      </div>
+    {:else}
+      <div class="cell">
+        {date.getDate()}
+        <div class="marker" />
+      </div>
+    {/if}
   </Tooltip>
+{:else if size === 'huge'}
+  <!-- <div class="cell" class:huge={size === 'huge'}> -->
+    <div class="flex flex-reverse fs-title flex-grow title">
+      {date.getDate()}
+    </div>
+  <!-- </div> -->
 {:else}
-  {date.getDate()}
+  <div class="cell">
+    {date.getDate()}
+  </div>
 {/if}
 
 <style lang="scss">
-  .marker {
-    // position: relative;
-    top: -0.25rem;
-    width: 0.25rem;
-    height: 0.25rem;
-    border-radius: 50%;
-    background-color: var(--highlight-red);
-  }
-  .huge {
-    width: 5rem;
-  }
   .cell {
     display: flex;
     flex-grow: 1;
     justify-content: center;
+
+    .marker {
+      position: relative;
+      top: -0.25rem;
+      width: 0.25rem;
+      height: 0.25rem;
+      border-radius: 50%;
+      background-color: var(--highlight-red);
+    }
+    &.huge {
+      padding: 0.25rem;
+    }
+  }
+  .title {
+    margin-top: 0.25rem;
+    margin-right: 0.25rem;
+    align-self: flex-start;
   }
 </style>

plugins/calendar-resources/src/components/EventsPopup.svelte

@@ -16,23 +16,23 @@
 <script lang="ts">
 
   import type { Event } from '@anticrm/calendar'
-  import core from '@anticrm/core'
+  import { Class, Doc, DocumentQuery, FindOptions, Ref } from '@anticrm/core'
   import { Table } from '@anticrm/view-resources'
-  import calendar from '../plugin'
 
   export let value: Event[]
+
+  export let _class: Ref<Class<Doc>>
+  export let query: DocumentQuery<Event> = {}
+  export let options: FindOptions<Event> | undefined = undefined
+  export let baseMenuClass: Ref<Class<Event>> | undefined = undefined
+  export let config: string[]
 </script>
 
 <Table 
-  _class={calendar.class.Event}
-  config={['', 'title', '$lookup.space.name', 'date', 'dueDate', 'modifiedOn']}
-  options={
-    {
-      lookup: {
-        space: core.class.Space
-      }
-    }
-  }
-  query={ { _id: { $in: value.map(it => it._id) } } }
+  _class={_class}
+  config={config}
+  {baseMenuClass}
+  options={ options }
+  query={ { ...query, _id: { $in: value.map(it => it._id) } } }
   loadingProps={{ length: value.length ?? 0 }}
 />