2019-12-26 11:45:29 +00:00
|
|
|
<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;">
|
2020-01-06 14:50:20 +00:00
|
|
|
<box-card :key="person.name" :person="person" />
|
2019-12-26 11:45:29 +00:00
|
|
|
</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'
|
|
|
|
},
|
|
|
|
{
|
2020-01-06 14:40:54 +00:00
|
|
|
value: 'Konflikt-management',
|
2019-12-26 11:45:29 +00:00
|
|
|
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'
|
2020-01-06 14:40:54 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'Bussinessplanning',
|
|
|
|
label: 'Bussinessplanning'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'Strateghisches Management',
|
|
|
|
label: 'Strateghisches Management'
|
2019-12-26 11:45:29 +00:00
|
|
|
}
|
|
|
|
],
|
2020-01-06 15:01:16 +00:00
|
|
|
people: [
|
|
|
|
{
|
|
|
|
name: 'Wolfgang Römer',
|
|
|
|
avatar: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.mJ3OSG9AD98jJSXYhB89_QAAAA%26pid%3DApi&f=1',
|
|
|
|
skills: [
|
|
|
|
{ name: 'Projektmanagement', strength: 98 },
|
|
|
|
{ name: 'Webdesign', strength: 80 },
|
|
|
|
{ name: 'Reiseplanung', strength: 55 },
|
|
|
|
{ name: 'Blumen', strength: 12 }
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Franz Fiedler',
|
|
|
|
avatar: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.eQ7zUcL1ZRRFwc-V5pXquAAAAA%26pid%3DApi&f=1',
|
|
|
|
skills: [
|
|
|
|
{ name: 'Blockchain', strength: 100 },
|
|
|
|
{ name: 'Projektmanagement', strength: 92 }
|
2020-01-06 14:40:54 +00:00
|
|
|
|
2020-01-06 15:01:16 +00:00
|
|
|
]
|
|
|
|
}, {
|
|
|
|
name: 'Lukas Bachschwell',
|
|
|
|
avatar: 'https://lbsfilm.at/media/pages/about/1056669128-1567191147/square-small.jpg',
|
|
|
|
skills: [
|
|
|
|
{ name: 'Blockchain', strength: 75 }
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Victoria Kasamas',
|
|
|
|
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: 'Johannes Gutherz',
|
|
|
|
avatar: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.xing.com%2Fimage%2Fa_7_e_1a7c18b82_6089096_5%2Fjoel-wenger-foto.256x256.jpg&f=1&nofb=1',
|
|
|
|
skills: [
|
|
|
|
{ name: 'Webdesign', strength: 43 },
|
|
|
|
{ name: 'Video', strength: 85 },
|
|
|
|
{ name: 'Reiseplanung', strength: 30 },
|
|
|
|
{ name: 'Arbeitsplatzsicherheit', strength: 55 }
|
2020-01-06 14:40:54 +00:00
|
|
|
|
2020-01-06 15:01:16 +00:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Ilse Hermann',
|
|
|
|
skills: [
|
|
|
|
{ name: 'Video', strength: 88 },
|
|
|
|
{ name: 'Reiseplanung', strength: 30 },
|
|
|
|
{ name: 'Buchhaltung', strength: 11 }
|
2020-01-06 14:40:54 +00:00
|
|
|
|
2020-01-06 15:01:16 +00:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Helene Jägermeister',
|
|
|
|
avatar: 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fais.badische-zeitung.de%2Fpiece%2F06%2F1c%2Fee%2Fe3%2F102559459.jpg&f=1&nofb=1',
|
|
|
|
skills: [
|
|
|
|
{ name: 'Wein & Käse', strength: 95 },
|
|
|
|
{ name: 'Video', strength: 30 },
|
|
|
|
{ name: 'Webdesign', strength: 79 },
|
|
|
|
{ name: 'Buchhaltung', strength: 5 }
|
2020-01-06 14:40:54 +00:00
|
|
|
|
2020-01-06 15:01:16 +00:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Peter Steiner',
|
|
|
|
avatar: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.qwuDUAC0rByOm6_eF7gHaQHaEK%26pid%3DApi&f=1',
|
|
|
|
skills: [
|
|
|
|
{ name: 'Audio', strength: 98 },
|
|
|
|
{ name: 'Video', strength: 85 },
|
|
|
|
{ name: 'Programmierkenntnisse', strength: 12 },
|
|
|
|
{ name: 'Buchhaltung', strength: 19 }
|
2019-12-26 11:45:29 +00:00
|
|
|
|
2020-01-06 15:01:16 +00:00
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Alex Rodriguez',
|
|
|
|
avatar: 'https://upload.wikimedia.org/wikipedia/commons/7/72/Alex_Rodriguez.jpg',
|
|
|
|
skills: [
|
|
|
|
{ name: 'Markenschutz', strength: 44 },
|
|
|
|
{ name: 'Blockchain', strength: 1 }
|
|
|
|
]
|
|
|
|
}]
|
2019-12-26 11:45:29 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
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>
|