241 lines
6.0 KiB
Vue
241 lines
6.0 KiB
Vue
<template>
|
|
<div class="find-container">
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
<h1>Personen finden</h1>
|
|
</el-row>
|
|
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
<div class="components-container">
|
|
<el-drag-select
|
|
v-model="value"
|
|
style="width:500px;"
|
|
multiple
|
|
filterable
|
|
allow-create
|
|
placeholder="Wähle einen Skill"
|
|
>
|
|
|
|
<el-option v-for="item in skills_options" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-drag-select>
|
|
|
|
<div style="margin-top:30px;">
|
|
<el-tag v-for="item of value" :key="item" style="margin-right:15px;">
|
|
{{ item }}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
</el-row>
|
|
|
|
<el-row v-if="value.length > 0" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
<h3>Übereinstimmungen:</h3>
|
|
</el-row>
|
|
|
|
<el-row v-if="results.length > 0" :gutter="8">
|
|
<el-col v-for="person in results" :key="person.name" :xs="{span: 24}" style="margin-bottom:30px;">
|
|
<box-card v-key="person.name" :person="person" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-if="value.length > 0 && results.length == 0" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
<h3>Es konnten keine Übereinstimmung gefunden werden</h3>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ElDragSelect from '@/components/DragSelect' // base on element-ui
|
|
import BoxCard from './components/BoxCard'
|
|
|
|
export default {
|
|
name: 'FindForm',
|
|
components: {
|
|
ElDragSelect,
|
|
BoxCard
|
|
},
|
|
data() {
|
|
return {
|
|
value: [],
|
|
skills_options: [{
|
|
value: 'Frontend Entwicklung',
|
|
label: 'Frontend Entwicklung'
|
|
}, {
|
|
value: 'Buchhaltung',
|
|
label: 'Buchhaltung'
|
|
}, {
|
|
value: 'Projektmanagement',
|
|
label: 'Projektmanagement'
|
|
}, {
|
|
value: 'Backend-Entwicklung',
|
|
label: 'Backend-Entwicklung'
|
|
}, {
|
|
value: 'Projektorganinisation',
|
|
label: 'Projektorganinisation'
|
|
}, {
|
|
value: 'Markenschutz',
|
|
label: 'Markenschutz'
|
|
},
|
|
{
|
|
value: 'Patentrechte',
|
|
label: 'Patentrechte'
|
|
},
|
|
{
|
|
value: 'Projectorganinisation',
|
|
label: 'Projectorganinisation'
|
|
},
|
|
{
|
|
value: 'Soziale Medien',
|
|
label: 'Soziale Medien'
|
|
},
|
|
{
|
|
value: 'Online Marketing',
|
|
label: 'Online Marketing'
|
|
},
|
|
{
|
|
value: 'offline-marketing',
|
|
label: 'Offline Marketing'
|
|
},
|
|
{
|
|
value: 'konflikt-management',
|
|
label: 'Konflikt-Management'
|
|
},
|
|
{
|
|
value: 'Verhandlungsführung',
|
|
label: 'Verhandlungsführung'
|
|
},
|
|
{
|
|
value: 'Headhunting',
|
|
label: 'Headhunting'
|
|
},
|
|
{
|
|
value: 'Typographiedesign',
|
|
label: 'Typographiedesign'
|
|
},
|
|
{
|
|
value: 'Appdesign',
|
|
label: 'Appdesign'
|
|
},
|
|
{
|
|
value: 'Webdesign',
|
|
label: 'Webdesign'
|
|
},
|
|
{
|
|
value: 'Finanzamtsangelegenheiten',
|
|
label: 'Finanzamtsangelegenheiten'
|
|
},
|
|
{
|
|
value: 'Arbeitsplatzsicherheit',
|
|
label: 'Arbeitsplatzsicherheit'
|
|
},
|
|
{
|
|
value: 'Blockchain',
|
|
label: 'Blockchain'
|
|
},
|
|
{
|
|
value: 'Audio',
|
|
label: 'Audio'
|
|
},
|
|
{
|
|
value: 'Video',
|
|
label: 'Video'
|
|
},
|
|
{
|
|
value: 'Reiseplanung',
|
|
label: 'Reiseplanung'
|
|
}
|
|
],
|
|
people: [{
|
|
name: 'Franz Fiedler',
|
|
avatar: 'https://www.fhstp.ac.at/de/uber-uns/mitarbeiter-innen-a-z/fidler-franz/@@images/c23cc24d-3c45-42c8-9159-c196d19ced81.jpeg',
|
|
skills: [
|
|
{ name: 'Blockchain', strength: 100 }
|
|
]
|
|
}, {
|
|
name: 'Wolfgang Römer',
|
|
avatar: 'https://www.fhstp.ac.at/en/about-us/staff-a-z/romer-wolfgang/@@images/8fbd0752-ed91-4cb0-8c9f-b4a3da187763.jpeg',
|
|
skills: [
|
|
{ name: 'Blockchain', strength: 100 }
|
|
]
|
|
}, {
|
|
name: 'Lukas Bachschwell',
|
|
avatar: 'https://lbsfilm.at/media/pages/about/1056669128-1567191147/square-small.jpg',
|
|
skills: [
|
|
{ name: 'Blockchain', strength: 75 }
|
|
]
|
|
},
|
|
{
|
|
name: 'Victoria Kasamas',
|
|
matchterm: 'Buchhaltung',
|
|
skills: [
|
|
{ name: 'Buchhaltung', strength: 83 }
|
|
]
|
|
},
|
|
{
|
|
name: 'Anna Steinacher',
|
|
avatar: 'https://media.licdn.com/dms/image/C5603AQEuI2luHoKYcA/profile-displayphoto-shrink_800_800/0?e=1582761600&v=beta&t=Xq0C49tI4WBsaZw5ROmTPGx4g93AElaOkt4X96y3u8w',
|
|
skills: [
|
|
{ name: 'Reiseplanung', strength: 98 },
|
|
{ name: 'Video', strength: 65 }
|
|
]
|
|
}, {
|
|
name: 'Peter Steiner',
|
|
skills: [
|
|
{ name: 'Audio', strength: 98 },
|
|
{ name: 'Video', strength: 85 },
|
|
{ name: 'Programming', strength: 12 },
|
|
{ name: 'Buchhaltung', strength: 19 }
|
|
|
|
]
|
|
}, {
|
|
name: 'Alex Rodriguez',
|
|
avatar: 'https://upload.wikimedia.org/wikipedia/commons/7/72/Alex_Rodriguez.jpg',
|
|
skills: [
|
|
{ name: 'Blockchain', strength: 1 }
|
|
]
|
|
}]
|
|
}
|
|
},
|
|
computed: {
|
|
results: function() {
|
|
const resultarray = []
|
|
this.people.forEach((person) => {
|
|
for (let i = 0; i < person.skills.length; i++) {
|
|
if (this.value.includes(person.skills[i].name)) {
|
|
resultarray.push(person)
|
|
break
|
|
}
|
|
}
|
|
})
|
|
return resultarray
|
|
}
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dashboard-editor-container {
|
|
padding: 32px;
|
|
background-color: rgb(240, 242, 245);
|
|
position: relative;
|
|
|
|
.github-corner {
|
|
position: absolute;
|
|
top: 0px;
|
|
border: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.chart-wrapper {
|
|
background: #fff;
|
|
padding: 16px 16px 0;
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|