MoveableList

MoveableList.vue

<template>
  <v-flex>
    <v-subheader>{{header}}</v-subheader>
    <v-list class="cardContainer">
      <v-list-tile
        v-for="(item, i) in from"
        :key="i"
        @click="moveItem(to, from, item)"
      >
        <v-list-tile-title v-text="item[textKey]"></v-list-tile-title>
      </v-list-tile>
    </v-list>
  </v-flex>
</template>

<script>
export default {
  data: () => ({}),
  props: ['to', 'from', 'textKey', 'idKey', 'header'],
  methods: {
    moveItem(to, from, item) {
      const i = from.findIndex(m => m[this.idKey] === item[this.idKey]);
      to.push(from[i]);
      from.splice(i, 1);
      this.sortArrays();
    },
    sortArrays() {
      const sortFunc = (a, b) => {
        if (a[this.textKey].toUpperCase() < b[this.textKey].toUpperCase()) {
          return -1;
        } if (a[this.textKey].toUpperCase() > b[this.textKey].toUpperCase()) {
          return 1;
        }
        return 0;
      };
      this.to.sort((a, b) => (sortFunc(a, b)));
      this.from.sort((a, b) => (sortFunc(a, b)));
    },
  },
};
</script>

<style>
.cardContainer{
  height: 194px !important;
  padding: 0px;
  overflow-y: scroll !important;
  border: 1px solid #818181;
}
</style>