join_admin/src/views/draggame/index.vue

<template>
  <div id="app">
    <h1>Aufgabe</h1>
    <p>
      Sie sing Manager in einem Softwareunternehmen und aktuell stehen wieder
      einige neue Aufgaben an. <br>Da sie über ein tolles Team an Spezialisten
      verfügen können sie diese Aufgaben sofort an die richtigen Leute zuteilen.
      <br>Wie würden sie die Aufgaben am besten unter ihen Kollegen verteilen
      ? <br><br>
      Ziehen sie die Aufgaben dazu einfach von der Spalte <b>Aufgaben</b> in die
      Spalen der jeweiligen MitarbeiterInnen
      <br>
    </p>
    <KanBan
      :stages="stages"
      :blocks="blocks"
      @update-block="updateBlock"
      @isDone="isDoneCallback"
    />
    <button v-if="isDone" class="doneButton" @click="returnToBot">
      Fertig
    </button>
  </div>
</template>

<script>
import request from '@/utils/request'

import KanBan from '@/components/Kanban'
export default {
  name: 'App',
  components: {
    KanBan
  },
  data() {
    return {
      isDone: false,
      stages: [
        {
          text: 'Aufgaben'
        },
        { text: 'Frontend Developerin',
          image: '/frontend.png' },
        { text: 'Support Techniker', image: '/support.png' },

        { text: 'Grafikerin', image: '/grafiks.png' },
        {
          text: 'Scrum Master',
          image: '/bussinesslady.png'
        },
        { text: 'Backend Developer', image: '/coder.png' }
      ],
      blocks: [
        {
          id: 1,
          status: 'Aufgaben',
          title: 'Landingpage Bugfix',
          text: '...'
        },
        {
          id: 2,
          status: 'Aufgaben',
          title: 'Logo überarbeiten',
          text: '...'
        },
        {
          id: 3,
          status: 'Aufgaben',
          title: 'Neues Datenbankfeld',
          text: '...'
        },
        {
          id: 4,
          status: 'Aufgaben',
          title: 'Sprint 7 planen',
          text: '...'
        },
        {
          id: 5,
          status: 'Aufgaben',
          title: 'Neues Pitchdeck',
          text: '...'
        },
        {
          id: 6,
          status: 'Aufgaben',
          title: 'Kunde meldet Datenverlust',
          text: '...'
        },
        {
          id: 7,
          status: 'Aufgaben',
          title: 'Tippfehler in Produkt Übersetzung',
          text: '...'
        },
        {
          id: 8,
          status: 'Aufgaben',
          title: 'API Tests überprüfen',
          text: '...'
        }
      ]
    }
  },
  methods: {
    returnToBot() {
      request({
        url: 'https://joinbot.tk/kvs/botmessage',
        method: 'get',
        headers: { 'x-api-key': 'PMl`&xWpZ1vE)M]G;{8qIXx4k!ce|n' }
      }).then((result) => {
        window.close()
      }).catch((err) => {
        console.log('ThaErr', err)
      })
    },
    isDoneCallback(isDone) {
      this.isDone = isDone
    },
    updateBlock(id, status, index) {
      // Update specified status
      const currentBlock = this.blocks.find(b => b.id === Number(id))
      currentBlock.status = status

      // remove currnet block
      let currentList = this.blocks.filter(b => b.id !== Number(id))
      const otherLists = currentList.filter(b => b.status !== status)
      currentList = currentList.filter(b => b.status === status)

      currentList.splice(index, 0, currentBlock)
      currentList = currentList.concat(otherLists)
      this.blocks = currentList
      this.isDone =
        this.blocks.filter(block => block.status === 'Aufgaben').length === 0
      // localStorage.setItem("blocks", JSON.stringify(this.blocks));
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.drag-column-Aufgaben {
  background-color: red;
  .drag-column-header > h2 {
    color: white;
    font-size: 1rem !important;
  }
}

.doneButton {
  box-shadow: 0px 10px 14px -7px #236069;
  background: linear-gradient(to bottom, #2b84e3 5%, #3f8fcc 100%);
  background-color: #2b84e3;
  border-width: 0px;
  border-radius: 8px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  padding: 13px 32px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #3d768a;
}
.doneButton:hover {
  background: linear-gradient(to bottom, #3f8fcc 5%, #2b84e3 100%);
  background-color: #3f8fcc;
}
.doneButton:active {
  position: relative;
  top: 1px;
}
</style>