mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-15 04:49:00 +00:00
Add Candidate and Vacancy cards (#287)
Signed-off-by: Alexander Platov <sas_lord@mail.ru> Co-authored-by: Andrey Platov <andrey@hardcoreeng.com>
This commit is contained in:
Alexander Platov
GitHub
parent
bf8fe9142c
commit
15f309c2db
@ -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>
|
||||
@ -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;
|
||||
|
||||
65
plugins/recruit-resources/src/components/VacancyCard.svelte
Normal file
65
plugins/recruit-resources/src/components/VacancyCard.svelte
Normal file
@ -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>
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user