join_admin/src/views/find/index.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'
      },
      {
        value: 'Bussinessplanning',
        label: 'Bussinessplanning'
      },
      {
        value: 'Strateghisches Management',
        label: 'Strateghisches Management'
      }
      ],
      people: [{
        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 }

        ]
      }, {
        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: '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 }

        ]
      },
      {
        name: 'Ilse Hermann',
        skills: [
          { name: 'Video', strength: 88 },
          { name: 'Reiseplanung', strength: 30 },
          { name: 'Buchhaltung', strength: 11 }

        ]
      },
      {
        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 }

        ]
      },
      {
        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 }

        ]
      },
      {
        name: 'Alex Rodriguez',
        avatar: 'https://upload.wikimedia.org/wikipedia/commons/7/72/Alex_Rodriguez.jpg',
        skills: [
          { name: 'Markenschutz', strength: 44 },
          { 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>