From 8e389c2cb19414b53f27cbcdb9827b70cb859895 Mon Sep 17 00:00:00 2001
From: Vyacheslav Tumanov <me@slavatumanov.me>
Date: Tue, 25 Apr 2023 21:14:25 +0500
Subject: [PATCH] TSK-1311: add editors for String and Number (#3056)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>
---
 .../src/components/BooleanPresenter.svelte     | 16 +++++++++++-----
 .../src/components/NumberEditor.svelte         |  2 +-
 .../src/components/NumberPresenter.svelte      | 18 ++++++++++++++----
 .../src/components/StringPresenter.svelte      | 15 ++++++++++-----
 tests/sanity/tests/recruit.spec.ts             |  9 +++++----
 5 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/plugins/view-resources/src/components/BooleanPresenter.svelte b/plugins/view-resources/src/components/BooleanPresenter.svelte
index 595fe65abd..08f176a39a 100644
--- a/plugins/view-resources/src/components/BooleanPresenter.svelte
+++ b/plugins/view-resources/src/components/BooleanPresenter.svelte
@@ -1,29 +1,35 @@
 <!--
 // 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 { BooleanIcon, Label } from '@hcengineering/ui'
   import { getBooleanLabel } from '../utils'
+  import BooleanEditor from './BooleanEditor.svelte'
 
   export let value: any
   export let inline: boolean = false
+  export let onChange: ((value: any) => void) | undefined = undefined
 </script>
 
 <div class="{inline ? 'inline-presenter' : 'flex-presenter'} yesno-container">
-  <div class="icon small-gap"><BooleanIcon {value} /></div>
-  <span><Label label={getBooleanLabel(value)} /></span>
+  {#if onChange !== undefined}
+    <BooleanEditor {onChange} {value} />
+  {:else}
+    <div class="icon small-gap"><BooleanIcon {value} /></div>
+    <span><Label label={getBooleanLabel(value)} /></span>
+  {/if}
 </div>
 
 <style lang="scss">
diff --git a/plugins/view-resources/src/components/NumberEditor.svelte b/plugins/view-resources/src/components/NumberEditor.svelte
index 992fda5d94..2f403e58ca 100644
--- a/plugins/view-resources/src/components/NumberEditor.svelte
+++ b/plugins/view-resources/src/components/NumberEditor.svelte
@@ -22,7 +22,7 @@
   // export let label: IntlString
   export let placeholder: IntlString
   export let value: number | undefined
-  export let focus: boolean
+  export let focus: boolean = false
   // export let maxWidth: string = '10rem'
   export let onChange: (value: number | undefined) => void
   export let kind: 'no-border' | 'link' | 'button' = 'no-border'
diff --git a/plugins/view-resources/src/components/NumberPresenter.svelte b/plugins/view-resources/src/components/NumberPresenter.svelte
index 1c4f597b17..d36de7514f 100644
--- a/plugins/view-resources/src/components/NumberPresenter.svelte
+++ b/plugins/view-resources/src/components/NumberPresenter.svelte
@@ -1,20 +1,30 @@
 <!--
 // 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 NumberEditor from './NumberEditor.svelte'
+  import { getEmbeddedLabel, IntlString } from '@hcengineering/platform'
+
   export let value: number | undefined
+  export let onChange: ((value: number | undefined) => void) | undefined = undefined
+  export let placeholder: IntlString = getEmbeddedLabel(' ')
+  export let kind: 'no-border' | 'link' | 'button' = 'link'
 </script>
 
-<span>{value || ''}</span>
+{#if onChange !== undefined}
+  <NumberEditor {onChange} {value} {placeholder} {kind} />
+{:else}
+  <span>{value || ''}</span>
+{/if}
diff --git a/plugins/view-resources/src/components/StringPresenter.svelte b/plugins/view-resources/src/components/StringPresenter.svelte
index dd8d93ce22..2f602e4d1c 100644
--- a/plugins/view-resources/src/components/StringPresenter.svelte
+++ b/plugins/view-resources/src/components/StringPresenter.svelte
@@ -1,23 +1,26 @@
 <!--
 // 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 { getEmbeddedLabel } from '@hcengineering/platform'
+  import { getEmbeddedLabel, IntlString } from '@hcengineering/platform'
   import { LabelAndProps, tooltip } from '@hcengineering/ui'
+  import StringEditor from './StringEditor.svelte'
 
   export let value: string | string[] | undefined
+  export let onChange: ((value: string) => void) | undefined = undefined
+  export let placeholder: IntlString = getEmbeddedLabel('')
 
   $: tooltipParams = getTooltip(value)
 
@@ -40,7 +43,9 @@
     {#each value as str, i}
       <span class:ml-1={i !== 0}>{str}</span>
     {/each}
-  {:else}
+  {:else if onChange === undefined}
     {value ?? ''}
+  {:else}
+    <StringEditor {onChange} value={value ?? ''} {placeholder} />
   {/if}
 </span>
diff --git a/tests/sanity/tests/recruit.spec.ts b/tests/sanity/tests/recruit.spec.ts
index 48916f5ea1..ccc82c738b 100644
--- a/tests/sanity/tests/recruit.spec.ts
+++ b/tests/sanity/tests/recruit.spec.ts
@@ -49,11 +49,12 @@ test.describe('recruit tests', () => {
 
     await page.click(`text="${last} ${first}"`)
 
-    await expect(page.locator(`text=${first}`).first()).toBeVisible()
-    await expect(page.locator(`text=${last}`).first()).toBeVisible()
-    await expect(page.locator(`text=${loc}`).first()).toBeVisible()
-
     const panel = page.locator('.popupPanel')
+
+    expect(await panel.locator('[placeholder="First name"]').inputValue()).toEqual(first)
+    expect(await panel.locator('[placeholder="Last name"]').inputValue()).toEqual(last)
+    expect(await panel.locator('[placeholder="Location"]').inputValue()).toEqual(loc)
+
     await panel.locator('[id="gmail\\:string\\:Email"]').scrollIntoViewIfNeeded()
     await panel.locator('[id="gmail\\:string\\:Email"]').click()
     expect(await page.locator('.cover-channel >> input').inputValue()).toEqual(email)