UBER-926 (#3765)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

models/calendar/src/index.ts

@@ -20,7 +20,8 @@ import {
   Event,
   ReccuringEvent,
   ReccuringInstance,
-  RecurringRule
+  RecurringRule,
+  Visibility
 } from '@hcengineering/calendar'
 import { Contact } from '@hcengineering/contact'
 import { DateRangeMode, Domain, IndexKind, Markup, Ref, Timestamp } from '@hcengineering/core'
@@ -60,7 +61,7 @@ export const DOMAIN_CALENDAR = 'calendar' as Domain
 @Model(calendar.class.Calendar, core.class.Space)
 @UX(calendar.string.Calendar, calendar.icon.Calendar)
 export class TCalendar extends TSpaceWithStates implements Calendar {
-  visibility!: 'public' | 'freeBusy' | 'private'
+  visibility!: Visibility
 
   sync?: boolean
 }
@@ -108,7 +109,7 @@ export class TEvent extends TAttachedDoc implements Event {
 
   access!: 'freeBusyReader' | 'reader' | 'writer' | 'owner'
 
-  visibility?: 'public' | 'freeBusy' | 'private'
+  visibility?: Visibility
 }
 
 @Model(calendar.class.ReccuringEvent, calendar.class.Event)
@@ -117,6 +118,7 @@ export class TReccuringEvent extends TEvent implements ReccuringEvent {
   rules!: RecurringRule[]
   exdate!: Timestamp[]
   rdate!: Timestamp[]
+  originalStartTime!: Timestamp
 }
 
 @Model(calendar.class.ReccuringInstance, calendar.class.Event)

models/calendar/src/migration.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 //
 
-import { Calendar, Event } from '@hcengineering/calendar'
+import { Calendar, Event, ReccuringEvent } from '@hcengineering/calendar'
 import core, { Ref, TxOperations } from '@hcengineering/core'
 import { MigrateOperation, MigrationClient, MigrationUpgradeClient } from '@hcengineering/model'
 import calendar from './plugin'
@@ -76,10 +76,21 @@ async function migrateReminders (client: MigrationClient): Promise<void> {
   }
 }
 
+async function fillOriginalStartTime (client: MigrationClient): Promise<void> {
+  const events = await client.find<ReccuringEvent>(DOMAIN_CALENDAR, {
+    _class: calendar.class.ReccuringEvent,
+    originalStartTime: { $exists: false }
+  })
+  for (const event of events) {
+    await client.update(DOMAIN_CALENDAR, { _id: event._id }, { originalStartTime: event.date })
+  }
+}
+
 export const calendarOperation: MigrateOperation = {
   async migrate (client: MigrationClient): Promise<void> {
     await fixEventDueDate(client)
     await migrateReminders(client)
+    await fillOriginalStartTime(client)
   },
   async upgrade (client: MigrationUpgradeClient): Promise<void> {
     const tx = new TxOperations(client, core.account.System)

models/tags/src/plugin.ts

@@ -37,7 +37,6 @@ export default mergeIds(tagsId, tags, {
     ColorLabel: '' as IntlString,
     WeightLabel: '' as IntlString,
     TagReferenceLabel: '' as IntlString,
-    TagLabel: '' as IntlString,
     TargetClassLabel: '' as IntlString,
     TargetCategoryLabel: '' as IntlString,
     TagReference: '' as IntlString,

packages/presentation/src/components/SpaceSelector.svelte

@@ -38,6 +38,7 @@
   export let autoSelect = true
   export let iconWithEmoji: AnySvelteComponent | Asset | ComponentType | undefined = undefined
   export let defaultIcon: AnySvelteComponent | Asset | ComponentType | undefined = undefined
+  export let readonly: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -61,6 +62,7 @@
   {component}
   {componentProps}
   {autoSelect}
+  {readonly}
   {iconWithEmoji}
   {defaultIcon}
   bind:value={space}

packages/ui/src/components/CheckBox.svelte

@@ -17,7 +17,7 @@
 
   export let checked: boolean = false
   export let symbol: 'check' | 'minus' = 'check'
-  export let size: 'small' | 'medium' = 'small'
+  export let size: 'small' | 'medium' | 'large' = 'small'
   export let circle: boolean = false
   export let accented: boolean = false
   export let readonly = false
@@ -66,6 +66,10 @@
       width: 1rem;
       height: 1rem;
     }
+    &.large {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
     &.circle {
       width: 1rem;
       height: 1rem;

packages/ui/src/components/Dropdown.svelte

@@ -27,6 +27,7 @@
   export let placeholder: IntlString
   export let items: ListItem[] = []
   export let selected: ListItem | undefined = undefined
+  export let disabled: boolean = false
 
   export let kind: ButtonKind = 'no-border'
   export let size: ButtonSize = 'small'
@@ -35,6 +36,8 @@
   export let labelDirection: TooltipAlignment | undefined = undefined
   export let focusIndex = -1
 
+  export let withSearch: boolean = true
+
   let container: HTMLElement
   let opened: boolean = false
 
@@ -45,16 +48,18 @@
 <div bind:this={container} class="min-w-0">
   <Button
     {focusIndex}
-    {icon}
+    icon={selected?.icon ?? icon}
+    iconProps={selected?.iconProps}
     width={width ?? 'min-content'}
     {size}
     {kind}
     {justify}
+    {disabled}
     showTooltip={{ label, direction: labelDirection }}
     on:click={() => {
       if (!opened) {
         opened = true
-        showPopup(DropdownPopup, { title: label, items, icon }, container, (result) => {
+        showPopup(DropdownPopup, { title: label, items, icon, withSearch }, container, (result) => {
           if (result) {
             selected = result
             dispatch('selected', result)

packages/ui/src/components/DropdownPopup.svelte

@@ -26,6 +26,7 @@
   export let icon: Asset | AnySvelteComponent
   export let placeholder: IntlString = plugin.string.SearchDots
   export let items: ListItem[]
+  export let withSearch: boolean = true
 
   let search: string = ''
   let phTraslate: string = ''
@@ -74,16 +75,18 @@
 </script>
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
-  <div class="header">
-    <input
-      bind:this={searchInput}
-      type="text"
-      bind:value={search}
-      placeholder={phTraslate}
-      on:input={(ev) => {}}
-      on:change
-    />
-  </div>
+  {#if withSearch}
+    <div class="header">
+      <input
+        bind:this={searchInput}
+        type="text"
+        bind:value={search}
+        placeholder={phTraslate}
+        on:input={(ev) => {}}
+        on:change
+      />
+    </div>
+  {/if}
   <div class="scroll">
     <div class="box">
       <ListView bind:this={list} count={objects.length} bind:selection>
@@ -97,10 +100,12 @@
               handleSelection(evt, idx)
             }}
           >
-            {#if item.image || icon}
+            {#if item.image || item.icon || icon}
               <div class="flex-center img" class:image={item.image}>
                 {#if item.image}
                   <img src={item.image} alt={item.label} />
+                {:else if item.icon}
+                  <Icon icon={item.icon} size={'medium'} iconProps={item.iconProps} />
                 {:else if typeof icon === 'string'}
                   <Icon {icon} size={'small'} />
                 {:else}
@@ -119,17 +124,17 @@
 <style lang="scss">
   .img {
     margin-right: 0.75rem;
-    flex-shrink: 0;
     width: 1.5rem;
     height: 1.5rem;
+    flex-shrink: 0;
+  }
+  .image {
+    border-color: transparent;
     color: var(--caption-color);
     background-color: var(--popup-bg-hover);
     border-radius: 50%;
     outline: none;
     overflow: hidden;
-  }
-  .image {
-    border-color: transparent;
     img {
       max-width: fit-content;
     }

packages/ui/src/components/icons/CircleAdd.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {fill}>
+  <path
+    d="M8 2C11.3 2 14 4.7 14 8C14 11.3 11.3 14 8 14C4.7 14 2 11.3 2 8C2 4.7 4.7 2 8 2ZM8 1C4.15 1 1 4.15 1 8C1 11.85 4.15 15 8 15C11.85 15 15 11.85 15 8C15 4.15 11.85 1 8 1Z"
+  />
+  <path
+    d="M12 8C12 7.72386 11.7761 7.5 11.5 7.5L8.5 7.5V4.5C8.5 4.22386 8.27614 4 8 4C7.72386 4 7.5 4.22386 7.5 4.5V7.5H4.5C4.22386 7.5 4 7.72386 4 8C4 8.27614 4.22386 8.5 4.5 8.5H7.5L7.5 11.5C7.5 11.7761 7.72386 12 8 12C8.27614 12 8.5 11.7761 8.5 11.5V8.5H11.5C11.7761 8.5 12 8.27614 12 8Z"
+  />
+</svg>

packages/ui/src/index.ts

@@ -101,6 +101,7 @@ export { default as DropdownPopup } from './components/DropdownPopup.svelte'
 export { default as DropdownLabels } from './components/DropdownLabels.svelte'
 export { default as DropdownLabelsPopup } from './components/DropdownLabelsPopup.svelte'
 export { default as DropdownLabelsIntl } from './components/DropdownLabelsIntl.svelte'
+export { default as DropdownLabelsPopupIntl } from './components/DropdownLabelsPopupIntl.svelte'
 export { default as DropdownRecord } from './components/DropdownRecord.svelte'
 export { default as ShowMore } from './components/ShowMore.svelte'
 export { default as Menu } from './components/Menu.svelte'
@@ -115,6 +116,7 @@ export { default as Timeline } from './components/Timeline.svelte'
 export { default as TimeShiftPresenter } from './components/TimeShiftPresenter.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
+export { default as IconCircleAdd } from './components/icons/CircleAdd.svelte'
 export { default as IconCopy } from './components/icons/Copy.svelte'
 export { default as IconStart } from './components/icons/Start.svelte'
 export { default as IconStop } from './components/icons/Stop.svelte'

packages/ui/src/types.ts

@@ -280,6 +280,8 @@ export interface LabelAndProps {
 export interface ListItem {
   _id: string
   label: string
+  icon?: Asset
+  iconProps?: any
   image?: string
   isSelectable?: boolean
   fontWeight?: 'normal' | 'medium' | 'semi-bold'

plugins/calendar-assets/lang/en.json

@@ -78,6 +78,10 @@
     "Busy": "Busy",
     "AddReminder": "Add reminder",
     "SeeAllNumberParticipants": "{value, plural, other {See all # participants}}",
-    "SeeAllNumberReminders": "{value, plural, other {See all # reminders}}"
+    "SeeAllNumberReminders": "{value, plural, other {See all # reminders}}",
+    "Visibility": "Visibility",
+    "Private": "Only visible to you",
+    "Public": "Visible to everyone",
+    "FreeBusy": "FreeBusy"
   }
 }

plugins/calendar-assets/lang/ru.json

@@ -78,6 +78,10 @@
     "Busy": "Занято",
     "AddReminder": "Добавить напоминание",
     "SeeAllNumberParticipants": "{value, plural, other {Увидеть всех # участников}}",
-    "SeeAllNumberReminders": "{value, plural, other {Просмотреть все # напоминаний}}"
+    "SeeAllNumberReminders": "{value, plural, other {Просмотреть все # напоминаний}}",
+    "Visibility": "Видимость",
+    "Private": "Видно только Вам",
+    "Public": "Видно всем",
+    "FreeBusy": "Скрыть детали"
   }
 }

plugins/calendar-assets/src/index.ts

@@ -26,7 +26,9 @@ loadMetadata(calendar.icon, {
   Description: `${icons}#description`,
   Participants: `${icons}#participants`,
   Repeat: `${icons}#repeat`,
-  Globe: `${icons}#globe`
+  Globe: `${icons}#globe`,
+  Private: `${icons}#private`,
+  Public: `${icons}#public`
 })
 
 addStringsLoader(calendarId, async (lang: string) => await import(`../lang/${lang}.json`))

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

@@ -82,7 +82,8 @@
         participants,
         title,
         allDay,
-        access: 'owner'
+        access: 'owner',
+        originalStartTime: allDay ? saveUTC(date) : date
       })
     } else {
       await client.addCollection(calendar.class.Event, space, attachedTo, attachedToClass, 'events', {

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

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Event, ReccuringInstance } from '@hcengineering/calendar'
-  import { Timestamp, Ref, DocumentUpdate } from '@hcengineering/core'
+  import { DocumentUpdate, Ref, Timestamp } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
   import ui, {
     ActionIcon,
@@ -29,16 +29,16 @@
     closeTooltip,
     deviceOptionsStore as deviceInfo,
     day as getDay,
+    getEventPositionElement,
     getMonday,
     getWeekDayName,
     resizeObserver,
-    showPopup,
-    getEventPositionElement
+    showPopup
   } from '@hcengineering/ui'
   import { Menu } from '@hcengineering/view-resources'
   import { createEventDispatcher, onDestroy, onMount } from 'svelte'
   import calendar from '../plugin'
-  import { updateReccuringInstance, isReadOnly } from '../utils'
+  import { isReadOnly, updateReccuringInstance } from '../utils'
   import EventElement from './EventElement.svelte'
 
   export let events: Event[]
@@ -563,7 +563,11 @@
     if (originDueDate !== event.dueDate) update.dueDate = event.dueDate
     if (Object.keys(update).length > 0) {
       if (event._class === calendar.class.ReccuringInstance) {
-        await updateReccuringInstance(update, event as ReccuringInstance)
+        await updateReccuringInstance(update, {
+          ...event,
+          date: originDate,
+          dueDate: originDueDate
+        } as ReccuringInstance)
       } else {
         await client.update(event, update)
       }

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

@@ -16,6 +16,7 @@
   import { Icon, areDatesEqual, IconArrowRight } from '@hcengineering/ui'
   import calendar from '../plugin'
   import DateEditor from './DateEditor.svelte'
+  import { createEventDispatcher } from 'svelte'
 
   export let startDate: number
   export let dueDate: number
@@ -26,10 +27,12 @@
 
   let diff = dueDate - startDate
   const allDayDuration = 24 * 60 * 60 * 1000 - 1
+  const dispatch = createEventDispatcher()
 
   function dateChange () {
     startDate = allDay ? new Date(startDate).setHours(0, 0, 0, 0) : startDate
     dueDate = startDate + (allDay ? allDayDuration : diff)
+    dispatch('change', { startDate, dueDate })
   }
 
   function dueChange () {
@@ -40,6 +43,7 @@
       dueDate = startDate + (allDay ? allDayDuration : diff)
     }
     diff = dueDate - startDate
+    dispatch('dueChange', { dueDate })
   }
 </script>
 

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

@@ -111,7 +111,6 @@
 <div class="repeatPopup-container">
   <div class="header">
     <Label label={calendar.string.Repeat} />
-    {selected}
   </div>
   <div class="content flex-col">
     <div class="flex-row-center gap-1-5">