Add date difference calculation functionality (#10673)

* Add date difference calculation functionality Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com> * Fix Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com> * Fix formatting Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com> --------- Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
2026-09-27 20:14:57 +02:00 · 2026-03-24 00:49:55 +05:00
parent 6f14b3d73a
commit 31246a11a0
23 changed files with 258 additions and 44 deletions
@@ -0,0 +1,107 @@
+<!--
+// Copyright © 2025 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 lang="ts">
+  import { MasterTag, Tag } from '@hcengineering/card'
+  import core, { AnyAttribute, Ref } from '@hcengineering/core'
+  import { getResource } from '@hcengineering/platform'
+  import presentation, { Card, getClient } from '@hcengineering/presentation'
+  import { Context, Process, ProcessFunction } from '@hcengineering/process'
+  import ui, { AnySvelteComponent, DropdownIntlItem, DropdownLabelsIntl } from '@hcengineering/ui'
+  import view from '@hcengineering/view'
+  import { createEventDispatcher } from 'svelte'
+  import ProcessAttribute from '../ProcessAttribute.svelte'
+  import { Analytics } from '@hcengineering/analytics'
+
+  export let func: ProcessFunction
+  export let process: Process
+  export let masterTag: Ref<MasterTag | Tag>
+  export let context: Context
+  export let attribute: AnyAttribute
+  export let props: Record<string, any> = {}
+
+  let otherDate = props?.otherDate
+  let unit = props?.unit ?? 'days'
+
+  const items: DropdownIntlItem[] = [
+    { id: 'hours', label: ui.string.Hours },
+    { id: 'days', label: ui.string.Days },
+    { id: 'weeks', label: ui.string.Weeks },
+    { id: 'months', label: ui.string.Months },
+    { id: 'years', label: ui.string.Years }
+  ]
+
+  const dispatch = createEventDispatcher()
+  const client = getClient()
+  const h = client.getHierarchy()
+
+  function save (): void {
+    dispatch('close', { otherDate, unit })
+  }
+
+  let editor: AnySvelteComponent | undefined
+
+  function getEditor (): void {
+    try {
+      const inlineEditor = h.as(h.getClass(core.class.TypeDate), view.mixin.AttributeEditor).inlineEditor
+      void getResource(inlineEditor)
+        .then((p) => {
+          editor = p
+        })
+        .catch((e: any) => {
+          Analytics.handleError(e)
+        })
+    } catch (e: any) {
+      Analytics.handleError(e)
+    }
+  }
+
+  getEditor()
+</script>
+
+<Card on:close width={'small'} label={func.label} canSave okAction={save} okLabel={presentation.string.Save}>
+  <div class="grid">
+    <ProcessAttribute
+      {process}
+      {masterTag}
+      {context}
+      attribute={{ ...attribute, label: ui.string.TargetDate }}
+      presenterClass={{
+        attrClass: core.class.TypeDate,
+        category: 'attribute'
+      }}
+      value={otherDate}
+      {editor}
+      on:change={(e) => {
+        otherDate = e.detail
+      }}
+    />
+    <div class="flex-row-center flex-gap-2">
+      <DropdownLabelsIntl {items} bind:selected={unit} />
+    </div>
+  </div>
+</Card>
+
+<style lang="scss">
+  .grid {
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr;
+    grid-auto-rows: minmax(1rem, max-content);
+    justify-content: start;
+    align-items: center;
+    row-gap: 0.75rem;
+    height: min-content;
+  }
+</style>