UBERF-4062 (#3892)

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

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

@@ -29,6 +29,7 @@
   import ReccurancePopup from './ReccurancePopup.svelte'
   import VisibilityEditor from './VisibilityEditor.svelte'
   import CalendarSelector from './CalendarSelector.svelte'
+  import LocationEditor from './LocationEditor.svelte'
 
   export let attachedTo: Ref<Doc> = calendar.ids.NoAttached
   export let attachedToClass: Ref<Class<Doc>> = calendar.class.Event
@@ -46,6 +47,7 @@
   const duration = defaultDuration
   let dueDate = startDate + duration
   let allDay = false
+  let location = ''
 
   let reminders = [30 * 60 * 1000]
 
@@ -93,6 +95,7 @@
         participants,
         visibility,
         title,
+        location,
         allDay,
         access: 'owner',
         originalStartTime: allDay ? saveUTC(date) : date
@@ -108,6 +111,7 @@
         participants,
         reminders,
         title,
+        location,
         allDay,
         access: 'owner'
       })
@@ -163,6 +167,7 @@
     <EventTimeExtraButton bind:allDay bind:rules on:repeat={setRecurrance} on:allday={allDayChangeHandler} />
   </div>
   <div class="block rightCropPadding">
+    <LocationEditor bind:value={location} />
     <EventParticipants bind:participants bind:externalParticipants />
   </div>
   <div class="block flex-no-shrink">

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

@@ -30,6 +30,7 @@
   import ReccurancePopup from './ReccurancePopup.svelte'
   import VisibilityEditor from './VisibilityEditor.svelte'
   import CalendarSelector from './CalendarSelector.svelte'
+  import LocationEditor from './LocationEditor.svelte'
 
   export let object: Event
   $: readOnly = isReadOnly(object)
@@ -48,6 +49,7 @@
   let space = object.space
 
   let description = object.description
+  let location = object.location
 
   let rules: RecurringRule[] = (object as ReccuringEvent).rules ?? []
 
@@ -78,6 +80,9 @@
     if (object.space !== space) {
       update.space = space
     }
+    if (object.location !== location) {
+      update.location = location
+    }
     if (allDay !== object.allDay) {
       update.date = allDay ? saveUTC(startDate) : startDate
       update.dueDate = allDay ? saveUTC(dueDate) : dueDate
@@ -164,6 +169,7 @@
     <EventTimeExtraButton bind:allDay bind:rules on:repeat={setRecurrance} on:allday={allDayChangeHandler} noRepeat />
   </div>
   <div class="block rightCropPadding">
+    <LocationEditor bind:value={location} />
     <EventParticipants bind:participants bind:externalParticipants disabled={readOnly} />
   </div>
   <div class="block flex-no-shrink">

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { Button, EditBox, Icon, IconArrowRight, parseURL } from '@hcengineering/ui'
+  import calendar from '../plugin'
+
+  export let value: string | undefined
+
+  function isLink (value: string | undefined): boolean {
+    if (value === undefined) return false
+    const url = parseURL(value)
+    return url.startsWith('http://') || url.startsWith('https://')
+  }
+
+  function open () {
+    if (value === undefined) return
+    const url = parseURL(value)
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+      window.open(url, '_blank')
+    }
+  }
+</script>
+
+<div class="flex-row-center flex-gap-1 container">
+  <Icon icon={calendar.icon.Location} size={'small'} />
+  <div class="flex-row-center">
+    <EditBox bind:value placeholder={calendar.string.Location} kind={'ghost'} fullSize focusable />
+    {#if isLink(value)}
+      <div class="tool">
+        <Button focusIndex={4} kind={'ghost'} size={'small'} icon={IconArrowRight} on:click={open} />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .tool {
+    visibility: hidden;
+  }
+
+  .container:hover {
+    .tool {
+      visibility: visible;
+    }
+  }
+</style>