Timestamp inline presenter (#2601)

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

models/contact/src/index.ts

@@ -38,6 +38,7 @@ import {
   Index,
   Model,
   Prop,
+  ReadOnly,
   TypeDate,
   TypeRef,
   TypeString,
@@ -95,6 +96,7 @@ export class TContact extends TDoc implements Contact {
     city!: string
 
   @Prop(TypeTimestamp(), contact.string.CreatedOn)
+  @ReadOnly()
     createOn!: Timestamp
 }
 

models/recruit/src/index.ts

@@ -157,6 +157,7 @@ export class TApplicant extends TTask implements Applicant {
   declare assignee: Ref<Employee> | null
 
   @Prop(TypeTimestamp(), contact.string.CreatedOn)
+  @ReadOnly()
     createOn!: Timestamp
 }
 

models/view/src/index.ts

@@ -379,7 +379,12 @@ export function createModel (builder: Builder): void {
   })
 
   classPresenter(builder, core.class.TypeBoolean, view.component.BooleanPresenter, view.component.BooleanEditor)
-  classPresenter(builder, core.class.TypeTimestamp, view.component.TimestampPresenter)
+  classPresenter(
+    builder,
+    core.class.TypeTimestamp,
+    view.component.TimestampPresenter,
+    view.component.TimestampPresenter
+  )
   classPresenter(builder, core.class.TypeDate, view.component.DatePresenter, view.component.DateEditor)
   classPresenter(builder, core.class.Space, view.component.ObjectPresenter)
   classPresenter(builder, core.class.Class, view.component.ClassRefPresenter)

plugins/view-resources/src/components/TimestampPresenter.svelte

@@ -14,9 +14,22 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { TimeSince } from '@hcengineering/ui'
+  import { Button, ButtonSize, TimeSince } from '@hcengineering/ui'
 
   export let value: number
+  export let kind: 'no-border' | 'link' = 'no-border'
+  export let readonly = false
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'fit-content'
 </script>
 
+{#if kind === 'link'}
+  <Button {kind} {size} {justify} {width}>
+    <svelte:fragment slot="content">
       <TimeSince {value} />
+    </svelte:fragment>
+  </Button>
+{:else}
+  <TimeSince {value} />
+{/if}