Add Candidate and Vacancy cards (#287)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
Co-authored-by: Andrey Platov <andrey@hardcoreeng.com>

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

@@ -0,0 +1,61 @@
+<!--
+// 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 '@anticrm/presentation'
+  import type { Candidate } from '@anticrm/recruit'
+  import { Channels } from '@anticrm/presentation'
+  import { formatName } from '@anticrm/contact'
+
+  export let candidate: Candidate
+</script>
+
+<div class="flex-col card-container">
+  <div class="label">CANDIDATE</div>
+  <Avatar size={'large'} />
+  {#if candidate}
+    <div class="name">{formatName(candidate.name)}</div>
+    <div class="description">{candidate.title}</div>
+    <div class="description">{candidate.city}</div>
+    <div class="footer"><Channels value={candidate.channels} size={'small'} /></div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .card-container {
+    padding: 1rem 1.5rem 1.25rem;
+    background-color: var(--theme-button-bg-enabled);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .75rem;
+
+    .label {
+      margin-bottom: 1.75rem;
+      font-weight: 500;
+      font-size: .625rem;
+      color: var(--theme-content-dark-color);
+    }
+    .name {
+      margin: 1rem 0 .25rem;
+      font-weight: 500;
+      font-size: 1rem;
+      color: var(--theme-caption-color);
+    }
+    .description {
+      font-size: .75rem;
+      color: var(--theme-content-dark-color);
+    }
+    .footer { margin-top: 1.5rem; }
+  }
+</style>

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

@@ -21,21 +21,24 @@
   import FileUpload from './icons/FileUpload.svelte'
   import { getClient, createQuery, Channels, AttributeEditor, PDFViewer } from '@anticrm/presentation'
   import { Panel } from '@anticrm/panel'
-  import type { Candidate, Applicant } from '@anticrm/recruit'
+  import type { Candidate, Applicant, Vacancy } from '@anticrm/recruit'
   import Contact from './icons/Contact.svelte'
   import Avatar from './icons/Avatar.svelte'
   import Attachments from './Attachments.svelte'
   import Edit from './icons/Edit.svelte'
   import SocialEditor from './SocialEditor.svelte'
+  import CandidateCard from './CandidateCard.svelte'
+  import VacancyCard from './VacancyCard.svelte'
 
   import chunter from '@anticrm/chunter'
   
   import recruit from '../plugin'
-import { formatName } from '@anticrm/contact';
+  import { formatName } from '@anticrm/contact'
 
   export let _id: Ref<Applicant>
   let object: Applicant
   let candidate: Candidate
+  let vacancy: Vacancy
 
   const client = getClient()
 
@@ -45,6 +48,9 @@ import { formatName } from '@anticrm/contact';
   const candidateQuery = createQuery()
   $: if (object !== undefined) candidateQuery.query(recruit.class.Candidate, { _id: object.attachedTo }, result => { candidate = result[0] })
 
+  const vacancyQuery = createQuery()
+  $: if (object !== undefined) vacancyQuery.query(recruit.class.Vacancy, { _id: object.space }, result => { vacancy = result[0] })
+
   const dispatch = createEventDispatcher()
 
   // function saveChannels(result: any) {
@@ -67,7 +73,7 @@ import { formatName } from '@anticrm/contact';
     </div>
   </svelte:fragment> -->
 
-  <div class="flex-row-center">
+  <!-- <div class="flex-row-center">
     <div class="avatar">
       <div class="border"/>
       <Avatar />
@@ -77,6 +83,11 @@ import { formatName } from '@anticrm/contact';
       <div class="title">For {getVacancyName()}</div>
       <div class="city">at Cisco</div>
     </div>
+  </div> -->
+
+  <div class="grid-cards">
+    <CandidateCard {candidate}/>
+    <VacancyCard {vacancy}/>
   </div>
 
   <div class="attachments">
@@ -142,6 +153,12 @@ import { formatName } from '@anticrm/contact';
     margin-top: 3.5rem;
   }
 
+  .grid-cards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 1.5rem;
+  }
+
   // .container {
   //   display: flex;
   //   flex-direction: column;

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

@@ -0,0 +1,65 @@
+<!--
+// 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 Company from './icons/Company.svelte'
+  import type { Vacancy } from '@anticrm/recruit'
+
+  export let vacancy: Vacancy
+</script>
+
+<div class="flex-col card-container">
+  <div class="label">VACANCY</div>
+  <div class="flex-center logo">
+    <Company size={'large'} />
+  </div>
+  {#if vacancy}
+    <div class="name">{vacancy.name}</div>
+    <div class="description">Company</div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .card-container {
+    padding: 1rem 1.5rem 1.25rem;
+    background-color: var(--theme-button-bg-enabled);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .75rem;
+
+    .logo {
+      width: 5rem;
+      height: 5rem;
+      color: var(--primary-button-color);
+      background-color: var(--primary-button-enabled);
+      border-radius: 50%;
+    }
+    .label {
+      margin-bottom: 1.75rem;
+      font-weight: 500;
+      font-size: .625rem;
+      color: var(--theme-content-dark-color);
+    }
+    .name {
+      margin: 1rem 0 .25rem;
+      font-weight: 500;
+      font-size: 1rem;
+      color: var(--theme-caption-color);
+    }
+    .description {
+      font-size: .75rem;
+      color: var(--theme-content-dark-color);
+    }
+  }
+</style>

plugins/recruit-resources/src/components/icons/Company.svelte

@@ -0,0 +1,24 @@
+<!--
+// 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">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.3,14.7h-0.7V4c0-0.3-0.2-0.6-0.5-0.6l-7.3-2c-0.2-0.1-0.4,0-0.6,0.1C6.1,1.6,6,1.8,6,2v3.3H2 C1.6,5.3,1.3,5.6,1.3,6v8.7H0.7C0.3,14.7,0,15,0,15.3C0,15.7,0.3,16,0.7,16h14.7c0.4,0,0.7-0.3,0.7-0.7C16,15,15.7,14.7,15.3,14.7z M2.7,14.7v-8h6v8H2.7z M9.3,5.3h-2V2.9l6,1.6v10.2H10V6C10,5.6,9.7,5.3,9.3,5.3z"/>
+</svg>