audiobookshelf/client/components/tables/library/LibrariesTable.vue

<template>
  <div id="librariesTable" class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
    <div class="flex items-center mb-2">
      <h1 class="text-xl">{{ $strings.HeaderLibraries }}</h1>
      <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddLibrary">
        <span class="material-icons" style="font-size: 1.4rem">add</span>
      </div>
    </div>
    <draggable v-if="libraryCopies.length" :list="libraryCopies" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
      <template v-for="library in libraryCopies">
        <div :key="library.id" class="item">
          <tables-library-item :library="library" :selected="currentLibraryId === library.id" :dragging="drag" @edit="editLibrary" @click="setLibrary" />
        </div>
      </template>
    </draggable>
    <div v-if="!libraries.length" class="pb-4">
      <ui-btn @click="clickAddLibrary">{{ $strings.ButtonAddYourFirstLibrary }}</ui-btn>
    </div>

    <p v-if="libraries.length" class="text-xs mt-4 text-gray-200">
      *<strong>{{ $strings.ButtonForceReScan }}</strong> {{ $strings.MessageForceReScanDescription }}
    </p>

    <p v-if="libraries.length && libraries.some((li) => li.mediaType === 'book')" class="text-xs mt-4 text-gray-200">
      **<strong>{{ $strings.ButtonMatchBooks }}</strong> {{ $strings.MessageMatchBooksDescription }}
    </p>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      libraryCopies: [],
      currentOrder: [],
      drag: false,
      dragOptions: {
        animation: 200,
        group: 'description',
        ghostClass: 'ghost'
      },
      orderTimeout: null
    }
  },
  computed: {
    currentLibrary() {
      return this.$store.getters['libraries/getCurrentLibrary']
    },
    currentLibraryId() {
      return this.currentLibrary ? this.currentLibrary.id : null
    },
    libraries() {
      return this.$store.getters['libraries/getSortedLibraries']()
    },
    libraryScans() {
      return this.$store.state.scanners.libraryScans
    }
  },
  methods: {
    startDrag() {
      this.drag = true
      clearTimeout(this.orderTimeout)
    },
    endDrag(e) {
      this.drag = false
      this.checkOrder()
    },
    checkOrder() {
      clearTimeout(this.orderTimeout)
      this.orderTimeout = setTimeout(() => {
        this.saveOrder()
      }, 500)
    },
    saveOrder() {
      var _newOrder = 1
      var currOrder = this.libraries.map((lib) => lib.id).join(',')
      var libraryOrderData = this.libraryCopies.map((library) => {
        return {
          newOrder: _newOrder++,
          oldOrder: library.displayOrder,
          id: library.id
        }
      })
      var newOrder = libraryOrderData.map((lib) => lib.id).join(',')
      if (currOrder !== newOrder) {
        this.$axios.$post('/api/libraries/order', libraryOrderData).then((libraries) => {
          if (libraries && libraries.length) {
            this.$toast.success('Library order saved', { timeout: 1500 })
            this.$store.commit('libraries/set', libraries)
          }
        })
      }
    },
    async setLibrary(library) {
      await this.$store.dispatch('libraries/fetch', library.id)
      this.$router.push(`/library/${library.id}`)
    },
    clickAddLibrary() {
      this.$emit('showLibraryModal', null)
    },
    editLibrary(library) {
      this.$emit('showLibraryModal', library)
    },
    init() {
      this.libraryCopies = this.libraries.map((lib) => {
        return { ...lib }
      })
    },
    librariesUpdated() {
      this.init()
    }
  },
  mounted() {
    this.$store.commit('libraries/addListener', { id: 'libraries-table', meth: this.librariesUpdated })
    this.init()
  },
  beforeDestroy() {
    this.$store.commit('libraries/removeListener', 'libraries-table')
  }
}
</script>