UBER-1052: Fix remainings (#3844)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

plugins/tracker-resources/src/components/CreateIssue.svelte

@@ -388,6 +388,7 @@
         ? [{ parentId: parentIssue._id, parentTitle: parentIssue.title }, ...parentIssue.parents]
         : [],
       reportedTime: 0,
+      remainingTime: 0,
       estimation: object.estimation,
       reports: 0,
       relations: relatedTo !== undefined ? [{ _id: relatedTo._id, _class: relatedTo._class }] : [],

plugins/tracker-resources/src/components/SubIssues.svelte

@@ -92,6 +92,7 @@
         dueDate: null,
         parents,
         reportedTime: 0,
+        remainingTime: 0,
         estimation: subIssue.estimation,
         reports: 0,
         relations: [],

plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte

@@ -25,6 +25,7 @@
   import SubIssuesEstimations from './SubIssuesEstimations.svelte'
   import TimeSpendReportPopup from './TimeSpendReportPopup.svelte'
   import TimeSpendReports from './TimeSpendReports.svelte'
+  import TimePresenter from './TimePresenter.svelte'
 
   export let format: 'text' | 'password' | 'number'
   export let kind: EditStyle = 'search-style'
@@ -104,6 +105,10 @@
       >
         <EstimationStatsPresenter value={object} estimation={_value} />
       </div>
+      <Label label={tracker.string.RemainingTime} />
+      <div class="ml-2 mr-4">
+        <TimePresenter value={object.remainingTime} />
+      </div>
     </div>
   </svelte:fragment>
 

plugins/tracker-resources/src/components/issues/timereport/EstimationValueEditor.svelte

@@ -0,0 +1,79 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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 type { IntlString } from '@hcengineering/platform'
+  import type { ButtonSize } from '@hcengineering/ui'
+  import { EditBox, Label, showPopup, eventToHTMLElement, Button } from '@hcengineering/ui'
+  import { EditBoxPopup } from '@hcengineering/view-resources'
+  import TimePresenter from './TimePresenter.svelte'
+
+  // export let label: IntlString
+  export let placeholder: IntlString
+  export let value: number | undefined
+  export let autoFocus: boolean = false
+  // export let maxWidth: string = '10rem'
+  export let onChange: (value: number | undefined) => void
+  export let kind: 'no-border' | 'link' | 'button' = 'no-border'
+  export let readonly = false
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'fit-content'
+
+  let shown: boolean = false
+
+  function _onchange (ev: Event) {
+    const value = (ev.target as HTMLInputElement).valueAsNumber
+    if (Number.isFinite(value)) {
+      onChange(value)
+    }
+  }
+</script>
+
+{#if kind === 'button' || kind === 'link'}
+  <Button
+    kind={kind === 'button' ? 'regular' : kind}
+    {size}
+    {justify}
+    {width}
+    on:click={(ev) => {
+      if (!shown && !readonly) {
+        showPopup(EditBoxPopup, { value, format: 'number' }, eventToHTMLElement(ev), (res) => {
+          if (Number.isFinite(res)) {
+            value = res
+            onChange(value)
+          }
+          shown = false
+        })
+      }
+    }}
+  >
+    <svelte:fragment slot="content">
+      {#if value != null}
+        <span class="caption-color overflow-label pointer-events-none"><TimePresenter {value} /></span>
+      {:else}
+        <span class="content-dark-color pointer-events-none"><Label label={placeholder} /></span>
+      {/if}
+    </svelte:fragment>
+  </Button>
+{:else if readonly}
+  {#if value != null}
+    <span class="caption-color overflow-label"><TimePresenter {value} /></span>
+  {:else}
+    <span class="content-dark-color"><Label label={placeholder} /></span>
+  {/if}
+{:else}
+  <EditBox {placeholder} bind:value format={'number'} {autoFocus} on:change={_onchange} />
+{/if}

plugins/tracker-resources/src/components/issues/timereport/ReportedTimeEditor.svelte

@@ -62,9 +62,13 @@
 
 {#if kind === 'link'}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div id="ReportedTimeEditor" class="link-container {size} flex-between" on:click={showReports}>
+  <div
+    id="ReportedTimeEditor"
+    class="link-container antiButton link {size} flex-grow flex-between"
+    on:click={showReports}
+  >
     {#if value !== undefined}
-      <span class="overflow-label">
+      <span class="flex-row-center">
         <TimePresenter {value} />
         {#if childTime !== 0}
           / <TimePresenter value={childTime} />
@@ -78,7 +82,7 @@
     </div>
   </div>
 {:else if value !== undefined}
-  <span class="overflow-label">
+  <span class="flex-row-center">
     <TimePresenter {value} />
     {#if childTime !== 0}
       / <TimePresenter value={childTime} />
@@ -90,24 +94,7 @@
 
 <style lang="scss">
   .link-container {
-    display: flex;
-    align-items: center;
-    padding: 0 0.875rem;
-    width: 100%;
-    color: var(--theme-caption-color);
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    cursor: pointer;
-
-    &.small {
-      height: 1.5rem;
-    }
-    &.medium {
-      height: 2rem;
-    }
-    &.large {
-      height: 2.25rem;
-    }
+    padding: 0px 0.75rem;
     .add-action {
       visibility: hidden;
     }

plugins/tracker-resources/src/components/issues/timereport/TimeSpendReports.svelte

@@ -46,7 +46,7 @@
         <Label label={tracker.string.ReportedTime} />:
         <span class="caption-color"><TimePresenter value={reportedTime} /></span>.
         <Label label={tracker.string.TimeSpendReports} />:
-        <span class="caption-color"><TimePresenter value={floorFractionDigits(total / 8, 3)} /></span>
+        <span class="caption-color"><TimePresenter value={floorFractionDigits(total, 3)} /></span>
       </span>
     </svelte:fragment>
     <TimeSpendReportsList {reports} />