TSK-1311: add editors for String and Number (#3056)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>

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">

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'

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}

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>

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)