Add Applications and update layout (#427)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/_layouts.scss

@@ -200,6 +200,7 @@ table {
 .mr-8 { margin-right: 2rem; }
 .mt-2 { margin-top: .5rem; }
 .mt-5 { margin-top: 1.25rem; }
+.mt-14 { margin-top: 3.5rem; }
 .mb-1 { margin-bottom: .25rem; }
 
 /* --------- */

packages/ui/src/components/Link.svelte

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+
 <script lang="ts">
   import type { IntlString, Asset } from '@anticrm/platform'
   import type { AnySvelteComponent } from '../types'
@@ -56,16 +57,16 @@
       margin-right: .25rem;
       transform-origin: center center;
       transform: scale(.75);
-      opacity: .6;
+      color: var(--theme-content-color);
     }
-    &:hover .icon { opacity: 1; }
+    &:hover .icon { color: var(--theme-caption-color); }
-    &:active .icon { opacity: .6; }
+    &:active .icon { color: var(--theme-content-accent-color); }
   }
   .disabled {
     cursor: not-allowed;
     color: var(--theme-content-trans-color);
-    .icon { opacity: .3; }
+    .icon { color: var(--theme-content-trans-color); }
-    &:hover .icon { opacity: .3; }
+    &:hover .icon { color: var(--theme-content-trans-color); }
-    &:active .icon { opacity: .3; }
+    &:active .icon { color: var(--theme-content-trans-color); }
   }
 </style>

plugins/recruit-assets/lang/en.json

@@ -11,7 +11,9 @@
     "Vacancy": "Vacancy",
     "CreateCandidates": "Create pool",
     "CandidatesName": "Pool name *",
-    "MakePrivateDescription": "Only members can see it"
+    "MakePrivateDescription": "Only members can see it",
+    "CreateAnApplication": "Create an application",
+    "NoApplicationsForCandidate": "There are no applications for this candidate."
   },
   "status": {
     "CandidateRequired": "Please select candidate"

plugins/recruit-resources/src/components/Applications.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 { Ref, Space, Doc, Class } from '@anticrm/core'
+  import type { Applicant } from '@anticrm/recruit'
+  import { createQuery } from '@anticrm/presentation'
+  import { CircleButton, IconAdd, showPopup, Label } from '@anticrm/ui'
+  import CreateApplication from './CreateApplication.svelte'
+  import FileDuo from "./icons/FileDuo.svelte"
+  import { Table } from '@anticrm/view-resources'
+
+  import core from '@anticrm/core'
+  import recruit from '../plugin'
+
+  export let objectId: Ref<Doc>
+  export let space: Ref<Space>
+  export let _class: Ref<Class<Doc>>
+
+  let applications: Applicant[] = []
+
+  const query = createQuery()
+  $: query.query(recruit.class.Applicant, { attachedTo: objectId }, result => { applications = result })
+
+  const createApp = (ev: MouseEvent): void =>
+    showPopup(CreateApplication, { candidate: objectId, preserveCandidate: true }, ev.target as HTMLElement)
+</script>
+
+<div class="applications-container">
+  <div class="flex-row-center">
+    <div class="title">Applications</div>
+    <CircleButton icon={IconAdd} size={'small'} on:click={createApp} />
+  </div>
+  {#if applications.length > 0}
+    <Table 
+      _class={recruit.class.Applicant}
+      config={['', '$lookup.space.name', '$lookup.state']}
+      options={
+        {
+          lookup: {
+            state: core.class.State,
+            space: core.class.Space
+          }
+        }
+      }
+      query={ { attachedTo: objectId } }
+    />
+  {:else}
+    <div class="flex-col-center mt-5 createapp-container">
+      <FileDuo size={'large'} />
+      <div class="small-text content-dark-color mt-2">
+        <Label label={recruit.string.NoApplicationsForCandidate} />
+      </div>
+      <div class="small-text">
+        <a href={'#'} on:click={createApp}><Label label={recruit.string.CreateAnApplication} /></a>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .applications-container {
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      margin-right: .75rem;
+      font-weight: 500;
+      font-size: 1.25rem;
+      color: var(--theme-caption-color);
+    }
+  }
+
+  .createapp-container {
+    padding: 1rem;
+    color: var(--theme-caption-color);
+    background: var(--theme-bg-accent-color);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .75rem;
+  }
+</style>

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

@@ -24,7 +24,7 @@
   import { Table } from '@anticrm/view-resources'
 
   import { uploadFile } from '../utils'
-  import Upload from './icons/Upload.svelte'
+  import UploadDuo from './icons/UploadDuo.svelte'
 
   import chunter from '@anticrm/chunter'
 
@@ -101,7 +101,7 @@
       on:drop|preventDefault|stopPropagation={fileDrop}
       on:click={ () => { inputFile.click() } }
     >
-      <Upload size={'large'} />
+      <UploadDuo size={'large'} />
       <div class="small-text content-dark-color mt-2">There are no attachments for this candidate.</div>
       <div class="small-text">
         Upload or drop files here

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

@@ -27,8 +27,7 @@
   import Edit from './icons/Edit.svelte'
   import SocialEditor from './SocialEditor.svelte'
   import AttributesBar from './AttributesBar.svelte'
-  import CreateApplication from './CreateApplication.svelte'
+  import Applications from './Applications.svelte'
-  import { Table } from '@anticrm/view-resources'
 
   import core from '@anticrm/core'
 
@@ -98,28 +97,12 @@
     </div>
   </div>
 
-  <div class="flex-col group">
+  <div class="mt-14">
-    <div class="flex-row-center">
+    <Applications objectId={object._id} _class={object._class} space={object.space} />
-      <div class="caption">Applications</div>
-      <CircleButton icon={IconAdd} size={'small'} on:click={ (ev) => { showPopup(CreateApplication, { candidate: object._id, preserveCandidate: true }, ev.target) } } />
-    </div>
-    <Table 
-      _class={recruit.class.Applicant}
-      config={['', '$lookup.space.name', '$lookup.state']}
-      options={
-        {
-          lookup: {
-            state: core.class.State,
-            space: core.class.Space
-          }
-        }
-      }
-      query={ { attachedTo: _id } }
-    />
   </div>
 
-  <div class="group">
+  <div class="mt-14">
-    <Attachments objectId={object._id} _class={object._class} space={object.space} {object}/>
+    <Attachments objectId={object._id} _class={object._class} space={object.space} />
   </div>
 
 </Panel>
@@ -139,15 +122,4 @@
     margin-top: .75rem;
     span { margin-left: .5rem; }
   }
-
-  .group {
-    margin-top: 3.5rem;
-
-    .caption {
-      margin-right: .75rem;
-      font-weight: 500;
-      font-size: 1.25rem;
-      color: var(--theme-caption-color);
-    }
-  }
 </style>

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

@@ -0,0 +1,29 @@
+<!--
+// 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}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="var(--duotone-color)" d="M13,7V3H9C7.1,3,6.2,3,5.6,3.6C5,4.2,5,5.1,5,7v10c0,1.9,0,2.8,0.6,3.4C6.2,21,7.1,21,9,21h6 c1.9,0,2.8,0,3.4-0.6S19,18.9,19,17V9h-4c-0.9,0-1.4,0-1.7-0.3C13,8.4,13,7.9,13,7z"/>
+  <g {fill}>
+    <path d="M9,12.4c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h6c0.3,0,0.6-0.3,0.6-0.6s-0.3-0.6-0.6-0.6H9z"/>
+    <path d="M13,16.4H9c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h4c0.3,0,0.6-0.3,0.6-0.6S13.3,16.4,13,16.4z"/>
+    <path d="M19.5,7.8c-0.1-0.3-0.3-0.5-0.6-0.8L15,3.2c-0.3-0.3-0.5-0.5-0.8-0.6s-0.6-0.1-1-0.1H9c-2,0-3.1,0-3.8,0.8 C4.4,3.9,4.4,5,4.4,7v10c0,2,0,3.1,0.8,3.8C5.9,21.6,7,21.6,9,21.6h6c2,0,3.1,0,3.8-0.8s0.8-1.9,0.8-3.8V8.8 C19.6,8.4,19.6,8.1,19.5,7.8z M13.6,3.6c0.1,0,0.1,0,0.1,0c0.1,0,0.2,0.2,0.4,0.4L18,7.8c0.2,0.2,0.3,0.3,0.4,0.4c0,0,0,0.1,0,0.1 H15c-0.7,0-1.2,0-1.3-0.1S13.6,7.7,13.6,7V3.6z M18.4,17c0,1.8,0,2.6-0.4,3c-0.4,0.4-1.2,0.4-3,0.4H9c-1.8,0-2.6,0-3-0.4 c-0.4-0.4-0.4-1.2-0.4-3V7c0-1.8,0-2.6,0.4-3c0.4-0.4,1.2-0.4,3-0.4h3.4V7c0,1,0,1.7,0.5,2.1C13.3,9.6,14,9.6,15,9.6h3.4V17z"/>
+  </g>
+</svg>

plugins/recruit-resources/src/plugin.ts

@@ -39,6 +39,8 @@ export default mergeIds(recruitId, recruit, {
     CandidatesName: '' as IntlString,
     CandidatesDescription: '' as IntlString,
     CreateCandidate: '' as IntlString,
+    CreateAnApplication: '' as IntlString,
+    NoApplicationsForCandidate: '' as IntlString,
 
     FirstName: '' as IntlString,
     LastName: '' as IntlString,