initial select space

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>

packages/presentation/src/components/Card.svelte

@@ -18,13 +18,16 @@
   import type { IntlString } from '@anticrm/platform'
 
   import { createEventDispatcher } from 'svelte'
+  import type { Ref, Class, Space } from '@anticrm/core'
 
   // import Close from './internal/icons/Close.svelte'
   // import ScrollBox from './ScrollBox.svelte'
-  import Button from './Button.svelte'
+  import Button from '@anticrm/ui/src/components/Button.svelte'
-  import Label from './Label.svelte'
+  import Label from '@anticrm/ui/src/components/Label.svelte'
-  import IconFolder from './icons/Folder.svelte'
+  import IconFolder from '@anticrm/ui/src/components/icons/Folder.svelte'
+  import SpaceSelect from './SpaceSelect.svelte'
 
+  export let spaceClass: Ref<Class<Space>>
   export let label: IntlString
   export let okLabel: IntlString
   export let okAction: () => void
@@ -47,6 +50,7 @@
       <span class="icon"><IconFolder size={'small'} /></span>
       <span class="overflow-label">Select Project</span>
     </div>
+    <SpaceSelect _class={spaceClass} title="Title" caption="Caption"/>
   </div>
 </form>
 

packages/presentation/src/components/SpaceInfo.svelte

@@ -0,0 +1,51 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 Avatar from './Avatar.svelte'
+
+  import type { Space } from '@anticrm/core'
+
+  export let value: Space
+  export let subtitle: string | undefined = undefined
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
+</script>
+
+<div class="flex-row-center">
+  <Avatar {size} />
+  <div class="flex-col user-info">
+    {#if subtitle}<div class="subtitle">{subtitle}</div>{/if}
+    <div class="title">{value.name}</div>
+  </div>
+</div>
+
+<style lang="scss">
+  .user-info {
+    margin-left: .5rem;
+    color: var(--theme-content-accent-color);
+
+    .subtitle {
+      font-size: .75rem;
+      color: var(--theme-content-dark-color);
+    }
+    .title {
+      font-weight: 500;
+      text-align: left;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+</style>

packages/presentation/src/components/SpaceSelect.svelte

@@ -0,0 +1,99 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 { onMount } from 'svelte'
+  import type { IntlString } from '@anticrm/platform'
+  import { getClient } from '../utils'
+
+  import { Label, showPopup } from '@anticrm/ui'
+  import Avatar from './Avatar.svelte'
+  import SpacesPopup from './SpacesPopup.svelte'
+  import Add from './icons/Add.svelte'
+  import Close from './icons/Close.svelte'
+
+  import type { Ref, Class, Space } from '@anticrm/core'
+
+  export let _class: Ref<Class<Space>>
+  export let title: IntlString
+  export let caption: IntlString
+  export let value: Ref<Space>
+  export let show: boolean = false
+
+  let selected: Space | undefined
+  let btn: HTMLElement
+
+  const client = getClient()
+
+  async function updateSelected(value: Ref<Space>) {
+    selected = await client.findOne(_class, { _id: value })
+  }
+
+  $: updateSelected(value)
+
+  onMount(() => {
+    if (btn && show) {
+      btn.click()
+      show = false
+    }
+  })
+</script>
+
+<div class="flex-row-center">
+  <button
+    class="focused-button btn"
+    class:selected={show}
+    bind:this={btn}
+    on:click|preventDefault={(ev) => {
+      showPopup(SpacesPopup, { _class, title, caption }, ev.target, (result) => {
+        if (result) {
+          value = result._id
+        }
+      })
+    }}
+  >
+    {#if selected}
+      <Avatar size={'medium'} />
+    {:else}
+      <div class="icon">
+        {#if show}<Close size={'small'} />{:else}<Add size={'small'} />{/if}
+      </div>
+    {/if}
+  </button>
+
+  <div class="selectUser">
+    <div class="title"><Label label={title} /></div>
+    <div class="caption-color">
+      {#if selected}{selected.name}{:else}<Label label={'Not selected'} />{/if}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .btn {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 50%;
+    border: none;
+  }
+
+  .selectUser {
+    margin-left: .75rem;
+    .title {
+      font-size: .75rem;
+      font-weight: 500;
+      color: var(--theme-content-accent-color);
+    }
+  }
+</style>

packages/presentation/src/components/SpacesPopup.svelte

@@ -0,0 +1,93 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 '@anticrm/platform'
+  import { createEventDispatcher } from 'svelte'
+
+  import { Label, EditWithIcon, IconSearch } from '@anticrm/ui'
+  import SpaceInfo from './SpaceInfo.svelte'
+
+  import type { Ref, Class, Space } from '@anticrm/core'
+  import { createQuery } from '../utils'
+
+  export let _class: Ref<Class<Space>>
+  export let title: IntlString
+  export let caption: IntlString
+
+  let search: string = ''
+  let objects: Space[] = []
+
+  const dispatch = createEventDispatcher()
+  const query = createQuery()
+  $: query.query(_class, {}, result => { objects = result })
+</script>
+
+<div class="popup">
+  <div class="header">
+    <div class="title"><Label label={title} /></div>
+    <EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
+    <div class="caption"><Label label={caption} /></div>
+  </div>
+  {#each objects as space}
+    <button class="menu-item" on:click={() => { dispatch('close', space) }}>
+      <SpaceInfo size={'medium'} value={space} />
+    </button>
+  {/each}
+</div>
+
+<style lang="scss">
+  .popup {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-button-bg-hovered);
+    border: 1px solid var(--theme-button-border-enabled);
+    border-radius: .75rem;
+    user-select: none;
+  }
+
+  .header {
+    text-align: left;
+    .title {
+      margin-bottom: 1rem;
+      font-weight: 500;
+      color: var(--theme-caption-color);
+    }
+    .caption {
+      margin: 1rem 0 .625rem .375rem;
+      font-size: .75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: var(--theme-content-dark-color);
+    }
+  }
+
+  .menu-item {
+    justify-content: start;
+    padding: .375rem;
+    border-radius: .5rem;
+
+    &:hover {
+      background-color: var(--theme-button-bg-pressed);
+      border: 1px solid var(--theme-bg-accent-color);
+    }
+    &:focus {
+      border: 1px solid var(--primary-button-focused-border);
+      box-shadow: 0 0 0 3px var(--primary-button-outline);
+      z-index: 1;
+    }
+  }
+</style>

packages/presentation/src/components/UserBox copy.svelte

@@ -1,133 +0,0 @@
-<!--
-// Copyright © 2020 Anticrm Platform Contributors.
-// 
-// 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 '@anticrm/platform'
-
-  import { PopupMenu, Label, EditWithIcon, IconSearch } from '@anticrm/ui'
-  import Avatar from './Avatar.svelte'
-  import UserInfo from './UserInfo.svelte'
-  import Add from './icons/Add.svelte'
-  import Close from './icons/Close.svelte'
-
-  import type { Ref, Class } from '@anticrm/core'
-  import type { Person } from '@anticrm/contact'
-  import { createQuery } from '../utils'
-
-  export let _class: Ref<Class<Person>>
-  export let title: IntlString
-  export let caption: IntlString
-  export let value: Ref<Person>
-  export let show: boolean = false
-
-  let search: string = ''
-  let selected: Person | undefined
-
-  let objects: Person[] = []
-
-  const query = createQuery()
-  $: query.query(_class, {}, result => { objects = result })
-</script>
-
-<div class="flex-row-center">
-  <PopupMenu bind:show={show}>
-    <button
-      slot="trigger"
-      class="focused-button btn"
-      class:selected={show}
-      on:click|preventDefault={() => {
-        show = !show
-      }}
-    >
-      {#if selected}
-        <Avatar size={'medium'} />
-      {:else}
-        <div class="icon">
-          {#if show}<Close size={'small'} />{:else}<Add size={'small'} />{/if}
-        </div>
-      {/if}
-    </button>
-
-    <div class="header">
-      <div class="title"><Label label={title} /></div>
-      <EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
-      <div class="caption"><Label label={caption} /></div>
-    </div>
-
-    {#each objects as person}
-      <button class="menu-item" on:click={() => {
-        selected = person
-        value = person._id
-        show = !show
-      }}><UserInfo size={'medium'} value={person} /></button>
-    {/each}
-  </PopupMenu>
-
-  <div class="selectUser">
-    <div class="title"><Label label={title} /></div>
-    <div class="caption-color">
-      {#if selected}{selected.firstName + ' ' + selected.lastName}{:else}<Label label={'Not selected'} />{/if}
-    </div>
-  </div>
-</div>
-
-<style lang="scss">
-  .btn {
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: 50%;
-    border: none;
-  }
-
-  .header {
-    text-align: left;
-    .title {
-      margin-bottom: 1rem;
-      font-weight: 500;
-      color: var(--theme-caption-color);
-    }
-    .caption {
-      margin: 1rem 0 .625rem .375rem;
-      font-size: .75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      color: var(--theme-content-dark-color);
-    }
-  }
-
-  .menu-item {
-    justify-content: start;
-    padding: .375rem;
-    border-radius: .5rem;
-
-    &:hover {
-      background-color: var(--theme-button-bg-pressed);
-      border: 1px solid var(--theme-bg-accent-color);
-    }
-    &:focus {
-      border: 1px solid var(--primary-button-focused-border);
-      box-shadow: 0 0 0 3px var(--primary-button-outline);
-      z-index: 1;
-    }
-  }
-
-  .selectUser {
-    margin-left: .75rem;
-    .title {
-      font-size: .75rem;
-      font-weight: 500;
-      color: var(--theme-content-accent-color);
-    }
-  }
-</style>

packages/presentation/src/components/UserBox.svelte

@@ -26,8 +26,6 @@
   import type { Ref, Class } from '@anticrm/core'
   import type { Person } from '@anticrm/contact'
 
-  import contact from '@anticrm/contact'
-
   export let _class: Ref<Class<Person>>
   export let title: IntlString
   export let caption: IntlString
@@ -40,7 +38,7 @@
   const client = getClient()
 
   async function updateSelected(value: Ref<Person>) {
-    selected = await client.findOne(contact.class.Person, { _id: value })
+    selected = await client.findOne(_class, { _id: value })
   }
 
   $: updateSelected(value)

packages/presentation/src/index.ts

@@ -21,3 +21,4 @@ export { default as UserInfo } from './components/UserInfo.svelte'
 export { default as Avatar } from './components/Avatar.svelte'
 export { default as MessageViewer } from './components/MessageViewer.svelte'
 export { default as AttributeEditor } from './components/AttributeEditor.svelte'
+export { default as Card } from './components/Card.svelte'

packages/ui/src/index.ts

@@ -52,7 +52,6 @@ export { default as Loading } from './components/Loading.svelte'
 export { default as Popup } from './components/Popup.svelte'
 export { default as CircleButton } from './components/CircleButton.svelte'
 export { default as Link } from './components/Link.svelte'
-export { default as Card } from './components/Card.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconClose } from './components/icons/Close.svelte'

plugins/recruit-resources/src/components/CreateApplication.svelte

@@ -16,8 +16,8 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space } from '@anticrm/core'
-  import { DatePicker, EditBox, Card, Tabs, Section, Grid, Row, Button, IconFile } from '@anticrm/ui'
+  import { DatePicker, EditBox, Tabs, Section, Grid, Row, Button, IconFile } from '@anticrm/ui'
-  import { UserBox, UserInfo, Avatar } from '@anticrm/presentation'
+  import { UserBox, Card, UserInfo, Avatar } from '@anticrm/presentation'
   import type { Employee, Person } from '@anticrm/contact'
   import Address from './icons/Address.svelte'
   import Attachment from './icons/Attachment.svelte'
@@ -55,6 +55,7 @@
       okLabel={'Save'}
       okAction={createApplication}
       canSave={candidate !== undefined}
+      spaceClass={recruit.class.Vacancy}
       on:close={() => { dispatch('close') }}>
   <Grid column={1} rowGap={1.75}>
     {#if !preserveCandidate}