From 343aa5828e9f951cdf44c71ed19408ba84950081 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 22 Sep 2021 17:06:21 +0300
Subject: [PATCH] Add YesNo, changed Create Candidate (#211)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/CreateCandidate.svelte     | 48 +++++++++++----
 .../src/components/YesNo.svelte               | 60 +++++++++++++++++++
 2 files changed, 97 insertions(+), 11 deletions(-)
 create mode 100644 plugins/recruit-resources/src/components/YesNo.svelte

diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 060778d811..1efbf53999 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -27,11 +27,13 @@
   import type { Candidate } from '@anticrm/recruit'
   import type { Attachment } from '@anticrm/chunter'
 
-  import { EditBox, Link, showPopup, Component, CircleButton, IconFile as FileIcon, Spinner } from '@anticrm/ui'
+  import { EditBox, Link, showPopup, Component, CircleButton, IconFile as FileIcon, Spinner, Label } from '@anticrm/ui'
   import FileUpload from './icons/FileUpload.svelte'
   import Avatar from './icons/Avatar.svelte'
   import Edit from './icons/Edit.svelte'
   import SocialEditor from './SocialEditor.svelte'
+  import YesNo from './YesNo.svelte'
+
   import Girl from '../../img/girl.png'
   import Elon from '../../img/elon.png'
   import Bond from '../../img/bond.png'
@@ -141,7 +143,7 @@
       bind:space={_space}
       on:close={() => { dispatch('close') }}>
 
-  <div class="flex">
+  <div class="flex-row-center">
     <div class="avatar" on:click={() => { (kl < 3) ? kl++ : kl = 0 }}>
       <div class="border"/>
       {#if kl === 0}
@@ -158,8 +160,9 @@
     <div class="flex-col">
       <div class="name"><EditBox placeholder="John" maxWidth="9.5rem" bind:value={object.firstName}/></div>
       <div class="name"><EditBox placeholder="Appleseed" maxWidth="9.5rem" bind:value={object.lastName}/></div>
+      <div class="title"><EditBox placeholder="Title" maxWidth="9.5rem"/></div>
       <div class="city"><EditBox placeholder="Location" maxWidth="9.5rem" bind:value={object.city}/></div>
-      <div class="flex resume">
+      <!-- <div class="flex resume">
         {#if resume.uuid}
           <Link label={resume.name} href={'#'} icon={FileIcon} maxLenght={16} on:click={ () => { showPopup(PDFViewer, { file: resume.uuid }, 'right') } }/>
         {:else}
@@ -170,9 +173,14 @@
           {/if}
           <input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change={fileSelected}/>
         {/if}
-      </div>
+      </div> -->
     </div>
   </div>
+  <div class="flex-col locations">
+    <span><Label label={'Work location preferences'} /></span>
+    <div class="row"><Label label={'Onsite'} /><YesNo state={'yes'} /></div>
+    <div class="row"><Label label={'Remote'} /><YesNo state={'unknown'} /></div>
+  </div>
   <svelte:fragment slot="contacts">
     <Channels value={object.channels} />
     <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
@@ -219,15 +227,33 @@
     font-size: 1.25rem;
     color: var(--theme-caption-color);
   }
-  .city {
-    margin: .75rem 0 .125rem;
+  .title, .city {
     font-weight: 500;
     font-size: .75rem;
-    color: var(--theme-content-color);
+    color: var(--theme-content-accent-color);
   }
-  .resume a {
-    font-size: .75rem;
-    color: var(--theme-content-dark-color);
-    &:hover { color: var(--theme-content-color); }
+  .title { margin-top: .5rem; }
+  .locations {
+    margin-top: 1.5rem;
+    
+    span {
+      margin-bottom: .125rem;
+      font-weight: 500;
+      font-size: .75rem;
+      color: var(--theme-content-accent-color);
+    }
+
+    .row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: .75rem;
+      color: var(--theme-caption-color);
+    }
   }
+  // .resume a {
+  //   font-size: .75rem;
+  //   color: var(--theme-content-dark-color);
+  //   &:hover { color: var(--theme-content-color); }
+  // }
 </style>
diff --git a/plugins/recruit-resources/src/components/YesNo.svelte b/plugins/recruit-resources/src/components/YesNo.svelte
new file mode 100644
index 0000000000..34d3b88ed9
--- /dev/null
+++ b/plugins/recruit-resources/src/components/YesNo.svelte
@@ -0,0 +1,60 @@
+<!--
+// Copyright © 2020, 2021 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 { Label } from '@anticrm/ui'
+
+  export let state: 'yes' | 'no' | 'unknown'
+</script>
+
+<div class="flex-row-center yesno-container {state}" on:click={() => {
+  if (state === 'yes') state = 'no'
+  else if (state === 'no') state = 'unknown'
+  else state = 'yes'
+}}>
+  <svg class="svg-small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <circle fill="#fff" cx="8" cy="8" r="6"/>
+    {#if state === 'yes'}
+      <polygon fill="var(--primary-button-enabled)" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 "/>
+    {:else if state === 'no'}
+      <polygon fill="#F06C63" points="10.7,6 10,5.3 8,7.3 6,5.3 5.3,6 7.3,8 5.3,10 6,10.7 8,8.7 10,10.7 10.7,10 8.7,8 "/>
+    {:else}
+      <path fill="#77818E" d="M7.3,9.3h1.3V9c0.1-0.5,0.6-0.9,1.1-1.4c0.4-0.4,0.8-0.9,0.8-1.6c0-1.1-0.8-1.8-2.2-1.8c-1.4,0-2.4,0.8-2.5,2.2 h1.4c0.1-0.6,0.4-1,1-1C8.8,5.4,9,5.7,9,6.2c0,0.4-0.3,0.7-0.7,1.1c-0.5,0.5-1,0.9-1,1.7V9.3z M8,11.6c0.5,0,0.9-0.4,0.9-0.9 c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9C7.1,11.2,7.5,11.6,8,11.6z"/>
+    {/if}
+  </svg>
+  <span><Label label={state} /></span>
+</div>
+
+<style lang="scss">
+  .yesno-container {
+    padding: .25rem .5rem .25rem .25rem;
+    max-width: fit-content;
+    border-radius: 1.25rem;
+    user-select: none;
+    cursor: pointer;
+
+    &.yes { background-color: var(--primary-button-enabled); }
+    &.no { background-color: #F06C63; }
+    &.unknown { background-color: #77818E; }
+
+    span {
+      margin-left: .25rem;
+      text-transform: uppercase;
+      font-weight: 500;
+      font-size: .625rem;
+      color: var(--theme-caption-color);
+    }
+  }
+</style>