From f6d1a5f477961a21005d77d6f8f0c0effc03e947 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Mon, 4 Oct 2021 18:04:25 +0300
Subject: [PATCH] Add AttributeEditor (#231)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/AttributeEditor.svelte     | 51 +++++++++++++++++++
 .../src/components/AttributesBar.svelte       | 36 +++----------
 2 files changed, 59 insertions(+), 28 deletions(-)
 create mode 100644 plugins/recruit-resources/src/components/AttributeEditor.svelte

diff --git a/plugins/recruit-resources/src/components/AttributeEditor.svelte b/plugins/recruit-resources/src/components/AttributeEditor.svelte
new file mode 100644
index 0000000000..305b32e53d
--- /dev/null
+++ b/plugins/recruit-resources/src/components/AttributeEditor.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 type { Asset, IntlString } from '@anticrm/platform'
+  import type { AnySvelteComponent } from '@anticrm/ui'
+  import { CircleButton, Label } from '@anticrm/ui'
+
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let label: IntlString
+  export let component: AnySvelteComponent
+  export let props: any
+  export let minimize: boolean = false
+</script>
+
+{#if icon}
+  <div class="flex-row-center">
+    <CircleButton icon={icon} size={'large'} />
+    {#if !minimize}
+      <div class="flex-col with-icon">
+        <Label {label} />
+        <div class="value"><svelte:component this={component} {...props} /></div>
+      </div>
+    {/if}
+  </div>
+{:else}
+  <div class="flex-col">
+    <Label {label} />
+    <div class="value"><svelte:component this={component} {...props} /></div>
+  </div>
+{/if}
+
+<style lang="scss">
+  .with-icon { margin-left: .5rem; }
+  .value {
+    font-weight: 500;
+    color: var(--theme-caption-color);
+  }
+</style>
\ No newline at end of file
diff --git a/plugins/recruit-resources/src/components/AttributesBar.svelte b/plugins/recruit-resources/src/components/AttributesBar.svelte
index 87e6fb0ded..55a89b2b99 100644
--- a/plugins/recruit-resources/src/components/AttributesBar.svelte
+++ b/plugins/recruit-resources/src/components/AttributesBar.svelte
@@ -17,44 +17,24 @@
   import { CircleButton, Label } from '@anticrm/ui'
   import Location from './icons/Location.svelte'
   import YesNoPresenter from './YesNoPresenter.svelte'
+  import AttributeEditor from './AttributeEditor.svelte'
 
-  export let minimize: boolean = true
+  export let minimize: boolean = false
 </script>
 
 <div class="flex-row-center small-text">
-  <div class="icon-wrap column">
-    <CircleButton icon={Location} size={'large'} />
-    {#if !minimize}
-      <div class="noicon-column">
-        <Label label={'Location'} />
-        <div class="value">Moscow</div>
-      </div>
-    {/if}
+  <div class="column">
+    <AttributeEditor icon={Location} label={'Location'} component={Label} props={{ label: 'Moscow' }} />
   </div>
-  <div class="noicon-column column">
-    <Label label={'Onsite'} />
-    <YesNoPresenter state={'yes'} />
+  <div class="column">
+    <AttributeEditor label={'Onsite'} component={YesNoPresenter} props={{ state: 'yes' }} />
   </div>
-  <div class="noicon-column column">
-    <Label label={'Remote'} />
-    <YesNoPresenter state={'no'} />
+  <div class="column">
+    <AttributeEditor label={'Remote'} component={YesNoPresenter} props={{ state: 'no' }} />
   </div>
 </div>
 
 <style lang="scss">
-  .icon-wrap {
-    display: flex;
-    align-items: center;
-  }
-  .noicon-column {
-    display: flex;
-    flex-direction: column;
-  }
-  .icon-wrap .noicon-column { margin-left: .5rem; }
-  .value {
-    font-weight: 500;
-    color: var(--theme-caption-color);
-  }
   .column + .column {
     position: relative;
     margin-left: 3rem;