mock/article.js

@@ -10,7 +10,7 @@ const titles = [
   '1x Obstkorb',
   '5€ Rewe Gutschein',
   '10€ Cafeteria Gutschein',
-  '10€ Sodexo Gutschein',
+  '10€ Sodexo Getschein',
   '1x Massage im Firmenspa',
   '1 Tag Sprachkurs English',
   '1x Fitnesscenter',

mock/user.js

@@ -14,13 +14,13 @@ const tokens = {
 const users = {
   'admin-token': {
     roles: ['admin'],
-    introduction: 'Projektmanager bei Styria',
+    introduction: 'Projektmanager bei RedBull',
     avatar: 'https://lbsfilm.at/media/pages/about/1056669128-1567191147/square-small.jpg',
     name: 'Lukas Bachschwell'
   },
   'editor-token': {
     roles: ['editor'],
-    introduction: 'Manager bei Styria',
+    introduction: 'Backend Developer bei RedBull',
     avatar: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.mJ3OSG9AD98jJSXYhB89_QAAAA%26pid%3DApi&f=1',
     name: 'Wolfgang Römer'
   }

package.json

@@ -39,7 +39,6 @@
     "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
-    "dragula": "^3.7.2",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
     "echarts": "4.2.1",
@@ -62,8 +61,7 @@
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",
     "vuex": "3.1.0",
-    "xlsx": "0.14.1",
+    "xlsx": "0.14.1"
-    "xstate": "^4.8.0"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

src/components/Kanban/index.vue

@@ -1,281 +1,99 @@
 <template>
-  <div class="drag-container">
+  <div class="board-column">
-    <ul class="drag-list">
+    <div class="board-column-header">
-      <li
+      {{ headerText }}
-        v-for="stage in stages"
-        :key="stage.text"
-        class="drag-column"
-        :class="{ ['drag-column-' + stage.text]: true }"
-      >
-        <span class="drag-column-header">
-          <slot :name="stage.text">
-            <h2>{{ stage.text }}</h2>
-          </slot>
-        </span>
-        <img v-if="stage.image" class="personImage" :src="stage.image">
-        <div class="drag-options" />
-        <ul ref="list" class="drag-inner-list" :data-status="stage.text">
-          <li
-            v-for="block in getBlocks(stage.text)"
-            :key="block.id"
-            class="drag-item"
-            :data-block-id="block.id"
-          >
-            <slot :name="block.id">
-              <strong>{{ block.title }}</strong>
-            </slot>
-          </li>
-        </ul>
-        <div class="drag-column-footer">
-          <slot :name="`footer-${stage.text}`" />
     </div>
-      </li>
+    <draggable
-    </ul>
+      :list="list"
+      v-bind="$attrs"
+      class="board-column-content"
+      :set-data="setData"
+    >
+      <div v-for="element in list" :key="element.id" class="board-item">
+        {{ element.name }} {{ element.id }}
+      </div>
+    </draggable>
   </div>
 </template>
 
 <script>
-import dragula from 'dragula'
+import draggable from 'vuedraggable'
-import { Machine } from 'xstate'
 
 export default {
-  name: 'KanbanBoard',
+  name: 'DragKanbanDemo',
-
+  components: {
+    draggable
+  },
   props: {
-    stages: {
+    headerText: {
-      type: Array,
+      type: String,
-      required: true
+      default: 'Header'
     },
-    blocks: {
+    options: {
-      type: Array,
-      required: true
-    },
-    config: {
       type: Object,
-      default: () => ({})
+      default() {
-    },
+        return {}
-    stateMachineConfig: {
-      type: Object,
-      default: null
       }
     },
-
+    list: {
-  data() {
+      type: Array,
-    return {
+      default() {
-      machine: null
+        return []
+      }
     }
   },
-
-  computed: {
-    localBlocks() {
-      return this.blocks
-    }
-  },
-
-  updated() {
-    this.drake.containers = this.$refs.list
-  },
-
-  mounted() {
-    this.config.accepts = this.config.accepts || this.accepts
-    this.drake = dragula(this.$refs.list, this.config)
-      .on('drag', el => {
-        el.classList.add('is-moving')
-      })
-      .on('drop', (block, list, source) => {
-        let index = 0
-        for (index = 0; index < list.children.length; index += 1) {
-          if (list.children[index].classList.contains('is-moving')) break
-        }
-
-        let newState = list.dataset.status
-
-        if (this.machine) {
-          const transition = this.findTransition(list, source)
-          if (!transition) return
-          newState = this.machine.transition(source.dataset.status, transition)
-            .value
-        }
-
-        this.$emit('update-block', block.dataset.blockId, newState, index)
-      })
-      .on('dragend', el => {
-        el.classList.remove('is-moving')
-
-        window.setTimeout(() => {
-          el.classList.add('is-moved')
-          window.setTimeout(() => {
-            el.classList.remove('is-moved')
-          }, 600)
-        }, 100)
-      })
-  },
-
-  created() {
-    if (!this.stateMachineConfig) return
-    this.machine = Machine(this.stateMachineConfig)
-  },
-
   methods: {
-    getBlocks(status) {
+    setData(dataTransfer) {
-      return this.localBlocks.filter(block => block.status === status)
+      // to avoid Firefox bug
-    },
+      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-
+      dataTransfer.setData('Text', '')
-    findPossibleTransitions(sourceState) {
-      return this.machine.config.states[sourceState].on || {}
-    },
-
-    findTransition(target, source) {
-      const targetState = target.dataset.status
-      const sourceState = source.dataset.status
-      const possibleTransitions = this.findPossibleTransitions(sourceState)
-      return Object.keys(possibleTransitions).find(
-        transition => possibleTransitions[transition] === targetState
-      )
-    },
-
-    accepts(block, target, source) {
-      if (!this.machine) return true
-      const targetState = target.dataset.status
-      const sourceState = source.dataset.status
-      return Object.values(this.findPossibleTransitions(sourceState)).includes(
-        targetState
-      )
     }
   }
 }
 </script>
-
+<style lang="scss" scoped>
-<style lang="scss">
+.board-column {
-.personImage {
+  min-width: 300px;
-  height: 100px;
+  min-height: 100px;
-}
+  height: auto;
-$ease-out: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-
-ul.drag-list,
-ul.drag-inner-list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-.drag-container {
-  max-width: 1000px;
-  margin: 20px auto;
-}
-
-.drag-list {
-  display: flex;
-  align-items: flex-start;
-
-  @media (max-width: 690px) {
-    display: block;
-  }
-}
-
-.drag-column {
-  flex: 1;
-  margin: 0 10px;
-  position: relative;
-  background: rgba(black, 0.2);
   overflow: hidden;
+  background: #f0f0f0;
+  border-radius: 3px;
 
-  @media (max-width: 690px) {
+  .board-column-header {
-    margin-bottom: 30px;
+    height: 50px;
+    line-height: 50px;
+    overflow: hidden;
+    padding: 0 20px;
+    text-align: center;
+    background: #333;
+    color: #fff;
+    border-radius: 3px 3px 0 0;
   }
 
-  h2 {
+  .board-column-content {
-    font-size: 0.8rem;
+    height: auto;
-    margin: 0;
+    overflow: hidden;
-    text-transform: uppercase;
+    border: 10px solid transparent;
-    font-weight: 600;
+    min-height: 60px;
-  }
-}
-
-.drag-column-header {
     display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
     align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-}
 
-.drag-inner-list {
+    .board-item {
-  min-height: 50px;
-  color: white;
-}
-
-.drag-item {
-  padding: 10px;
-  margin: 10px;
-  //height: 100px;
-  background: rgba(black, 0.4);
-  transition: $ease-out;
-
-  &.is-moving {
-    transform: scale(1.5);
-    background: rgba(black, 0.8);
-  }
-}
-
-.drag-header-more {
       cursor: pointer;
-}
-
-.drag-options {
-  position: absolute;
-  top: 44px;
-  left: 0;
       width: 100%;
-  height: 100%;
+      height: 64px;
-  padding: 10px;
+      margin: 5px 0;
-  transform: translateX(100%);
+      background-color: #fff;
-  opacity: 0;
+      text-align: left;
-  transition: $ease-out;
+      line-height: 54px;
-
+      padding: 5px 10px;
-  &.active {
+      box-sizing: border-box;
-    transform: translateX(0);
+      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
-    opacity: 1;
-  }
-
-  &-label {
-    display: block;
-    margin: 0 0 5px 0;
-
-    input {
-      opacity: 0.6;
-    }
-
-    span {
-      display: inline-block;
-      font-size: 0.9rem;
-      font-weight: 400;
-      margin-left: 5px;
     }
   }
 }
-
-/* Dragula CSS  */
-
-.gu-mirror {
-  position: fixed !important;
-  margin: 0 !important;
-  z-index: 9999 !important;
-  opacity: 0.8;
-  list-style-type: none;
-}
-
-.gu-hide {
-  display: none !important;
-}
-
-.gu-unselectable {
-  -webkit-user-select: none !important;
-  -moz-user-select: none !important;
-  -ms-user-select: none !important;
-  user-select: none !important;
-}
-
-.gu-transit {
-  opacity: 0.2;
-}
 </style>
+

src/layout/clean.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="app-wrapper">
-    <router-view />
-  </div>
-</template>

src/layout/components/Navbar.vue

@@ -87,18 +87,6 @@ export default {
       }).catch((err) => {
         console.log('ThaErr', err)
       })
-
-      request({
-        url: 'https://joinbot.tk/kvs/gameopen',
-        method: 'get',
-        headers: { 'x-api-key': 'PMl`&xWpZ1vE)M]G;{8qIXx4k!ce|n' }
-      }).then((result) => {
-        if (result === 1) {
-          this.openGame()
-        }
-      }).catch((err) => {
-        console.log('ThaErr', err)
-      })
     }, 1000)
   },
   beforeDestroy() {
@@ -112,19 +100,6 @@ export default {
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-    },
-    openGame() {
-      window.open('/#/draggame/index', '', '"width=800,height=900"')
-      request({
-        url: 'https://joinbot.tk/kvs/gameopen',
-        method: 'post',
-        headers: { 'x-api-key': 'PMl`&xWpZ1vE)M]G;{8qIXx4k!ce|n' },
-        data: '0'
-      }).then((result) => {
-
-      }).catch((err) => {
-        console.log('ThaErr', err)
-      })
     }
   }
 }

src/router/index.js

@@ -6,7 +6,6 @@ Vue.use(Router)
 
 /* Layout */
 import Layout from '@/layout'
-import Clean from '@/layout/clean'
 
 /* Router Modules */
 import componentsRouter from './modules/components'
@@ -112,20 +111,6 @@ export const constantRoutes = [
         meta: { title: 'Profil', icon: 'user', noCache: true }
       }
     ]
-  },
-  {
-    path: '/draggame',
-    component: Clean,
-    redirect: '/draggame/index',
-    hidden: true,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/draggame/index'),
-        name: 'Draggame',
-        meta: { title: 'Draggame', icon: 'user', noCache: true }
-      }
-    ]
   }
 ]
 

src/views/dashboard/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="dashboard-container">
-    <button v-if="false" @click="open">Game</button>
     <component :is="currentRole" />
   </div>
 </template>
@@ -27,11 +26,6 @@ export default {
     if (!this.roles.includes('admin')) {
       this.currentRole = 'editorDashboard'
     }
-  },
-  methods: {
-    open() {
-      window.open('/#/draggame/index', '', '"width=800,height=900"')
-    }
   }
 }
 </script>

src/views/draggame/index.vue

@@ -1,183 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Aufgabe</h1>
-    <p>
-      Sie sind 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 verteilen.
-      <br>Wie würden Sie die Aufgaben am besten unter Ihren Kollegen verteilen
-      ? <br><br>
-      Ziehen Sie die Aufgaben dazu einfach von der Spalte <b>Aufgaben</b> in die
-      Spalten 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>

src/views/find/components/BoxCard.vue

@@ -11,7 +11,7 @@
         </el-header>
         <el-main class="skillbars">
           <div style="position:relative;">
-            <div v-for="skill in person.skills" :key="skill.name" class="progress-item">
+            <div v-for="skill in sortSkills(person.skills)" :key="skill.name" class="progress-item">
               <span>{{ skill.name }}</span>
               <el-progress :percentage="skill.strength" />
             </div>
@@ -64,7 +64,6 @@ export default {
   },
   methods: {
     sortSkills(skills) {
-      // Currently not used pls sort manually
       return skills.sort((a, b) => (a.strength > b.strength) ? -1 : 1)
     }
   }}

src/views/find/index.vue

@@ -32,7 +32,7 @@
 
     <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 :key="person.name" :person="person" />
+        <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;">
@@ -150,8 +150,15 @@ export default {
         label: 'Strateghisches Management'
       }
       ],
-      people: [
+      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: [
@@ -160,15 +167,6 @@ export default {
           { 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 }
-
-          ]
       }, {
         name: 'Lukas Bachschwell',
         avatar: 'https://lbsfilm.at/media/pages/about/1056669128-1567191147/square-small.jpg',

src/views/incentives/components/ArticleDetail.vue

@@ -45,7 +45,7 @@
           </el-col>
         </el-row>
 
-        <el-form-item style="margin-bottom: 40px;" label-width="70px" label="Beschreibung:">
+        <el-form-item style="margin-bottom: 40px;" label-width="70px" label="Summary:">
           <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="Beschreibung des Incentives" />
           <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}words</span>
         </el-form-item>

src/views/profile/components/Timeline.vue

@@ -22,24 +22,24 @@ export default {
         {
           timestamp: '2019/4/25',
           title: 'Chat mit Joinbot',
-          content: 'Sie hatten einen Gespräch mit <b>Chatbot Jo</b>',
+          content: 'Sie hatten einen Gespräch mit <b>Joinbot</b>',
           linkText: 'Zum Chatprotokoll',
           linkHref: '/'
         },
         {
           timestamp: '2019/4/20',
           title: 'Stammdaten aktualisiert',
-          content: 'Sie haben Ihre Email Addresse aktualisiert'
+          content: 'Sie haben ihre Email Addresse aktualisiert'
         },
         {
           timestamp: '2019/2/22',
           title: 'Stammdaten aktualisiert',
-          content: '<b>Julia Kramer</b> hat Ihre <b>Ausbildungsinformationen</b> aktualisiert'
+          content: '<b>Julia Kramer</b> hat ihre <b>Ausbildungsinformationen</b> aktualisiert'
         },
         {
           timestamp: '2019/1/23',
           title: 'Account erstellt',
-          content: 'Willkommen bei Styria, nutzen Sie Join für Karrierechancen und individuelle Benefits!'
+          content: 'Willkommen bei RedBull!, nutzen sie Join für Karrierechancen und indifiduelle Benefits!'
         }
       ]
     }

src/views/profile/components/UserCard.vue

@@ -21,10 +21,7 @@
         <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>Ausbildung</span></div>
         <div class="user-bio-section-body">
           <div class="text-muted">
-
+            Bachelor of Science der Medientechnik <br>(FH St. Pölten)
-            1990-1995 Studium der Wirtschaftsinformatik an der TU Wien<br>
-            1999-2001 Universitätslehrgang Kulturmanagement, Universität für Musik und darstellende Kunst Wien<br>
-            Dozent an der Fachhochschule St. Pölten<br>
           </div>
         </div>
       </div>