LibraryTrackTable.vue 7.2 KB
Newer Older
1 2 3
<template>
  <div>
    <div class="ui inline form">
4
      <div class="fields">
5
        <div class="ui six wide field">
6
          <label><translate>Search</translate></label>
Eliot Berriot's avatar
Eliot Berriot committed
7
          <input type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
8 9
        </div>
        <div class="ui field">
10
          <label><translate>Import status</translate></label>
11
          <select class="ui dropdown" v-model="importedFilter">
12 13 14 15
            <option :value="null"><translate>Any</translate></option>
            <option :value="'imported'"><translate>Imported</translate></option>
            <option :value="'not_imported'"><translate>Not imported</translate></option>
            <option :value="'import_pending'"><translate>Import pending</translate></option>
16 17
          </select>
        </div>
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
        <div class="field">
          <label><translate>Ordering</translate></label>
          <select class="ui dropdown" v-model="ordering">
            <option v-for="option in orderingOptions" :value="option[0]">
              {{ option[1] }}
            </option>
          </select>
        </div>
        <div class="field">
          <label><translate>Ordering direction</translate></label>
          <select class="ui dropdown" v-model="orderingDirection">
            <option value="+"><translate>Ascending</translate></option>
            <option value="-"><translate>Descending</translate></option>
          </select>
        </div>
33
      </div>
34
    </div>
35 36 37 38 39 40 41 42 43 44 45 46
    <div class="dimmable">
      <div v-if="isLoading" class="ui active inverted dimmer">
          <div class="ui loader"></div>
      </div>
      <action-table
        v-if="result"
        @action-launched="fetchData"
        :objects-data="result"
        :actions="actions"
        :action-url="'federation/library-tracks/action/'"
        :filters="actionFilters">
        <template slot="header-cells">
47 48 49 50 51 52
          <th><translate>Status</translate></th>
          <th><translate>Title</translate></th>
          <th><translate>Artist</translate></th>
          <th><translate>Album</translate></th>
          <th><translate>Published date</translate></th>
          <th v-if="showLibrary"><translate>Library</translate></th>
53 54 55 56 57
        </template>
        <template slot="action-success-footer" slot-scope="scope">
          <router-link
            v-if="scope.result.action === 'import'"
            :to="{name: 'library.import.batches.detail', params: {id: scope.result.result.batch.id }}">
Eliot Berriot's avatar
Eliot Berriot committed
58 59 60 61
            <translate
              :translate-params="{id: scope.result.result.batch.id}">
              Import #%{ id } launched
            </translate>
62 63 64 65
          </router-link>
        </template>
        <template slot="row-cells" slot-scope="scope">
          <td>
66 67 68
            <span v-if="scope.obj.status === 'imported'" class="ui basic green label"><translate>In library</translate></span>
            <span v-else-if="scope.obj.status === 'import_pending'" class="ui basic yellow label"><translate>Import pending</translate></span>
            <span v-else class="ui basic label"><translate>Not imported</translate></span>
69 70 71 72 73
          </td>
          <td>
            <span :title="scope.obj.title">{{ scope.obj.title|truncate(30) }}</span>
          </td>
          <td>
74
            <span class="discrete link" @click="updateSearch({key: 'artist', value: scope.obj.artist_name})" :title="scope.obj.artist_name">{{ scope.obj.artist_name|truncate(30) }}</span>
75 76
          </td>
          <td>
77
            <span class="discrete link" @click="updateSearch({key: 'album', value: scope.obj.album_title})" :title="scope.obj.album_title">{{ scope.obj.album_title|truncate(20) }}</span>
78 79 80 81 82
          </td>
          <td>
            <human-date :date="scope.obj.published_date"></human-date>
          </td>
          <td v-if="showLibrary">
83
            <span class="discrete link" @click="updateSearch({key: 'domain', value: scope.obj.library.actor.domain})">{{ scope.obj.library.actor.domain }}</span>
84 85 86 87
          </td>
        </template>
      </action-table>
    </div>
88 89
    <div>
      <pagination
90
        v-if="result && result.count > paginateBy"
91 92 93 94 95 96
        @page-changed="selectPage"
        :compact="true"
        :current="page"
        :paginate-by="paginateBy"
        :total="result.count"
        ></pagination>
97

98
      <span v-if="result && result.results.length > 0">
Eliot Berriot's avatar
Eliot Berriot committed
99 100 101 102
        <translate
          :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}">
          Showing results %{ start }-%{ end } on %{ total }
        </translate>
103 104
      </span>
    </div>
105 106 107 108 109 110 111
  </div>
</template>

<script>
import axios from 'axios'
import _ from 'lodash'

112
import Pagination from '@/components/Pagination'
113
import ActionTable from '@/components/common/ActionTable'
114
import OrderingMixin from '@/components/mixins/Ordering'
115

116
export default {
117
  mixins: [OrderingMixin],
118 119 120 121 122
  props: {
    filters: {type: Object, required: false},
    showLibrary: {type: Boolean, default: false}
  },
  components: {
123 124
    Pagination,
    ActionTable
125
  },
126 127 128 129 130
  data () {
    return {
      isLoading: false,
      result: null,
      page: 1,
131
      paginateBy: 25,
132
      search: '',
133 134 135 136 137 138 139 140 141
      importedFilter: null,
      orderingDirection: '-',
      ordering: 'published_date',
      orderingOptions: [
        ['published_date', 'Published date'],
        ['title', 'Title'],
        ['album_title', 'Album title'],
        ['artist_name', 'Artist name']
      ]
142 143 144 145 146 147
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
148 149 150 151 152 153
    updateSearch ({key, value}) {
      if (value.indexOf(' ') > -1) {
        value = `"${value}"`
      }
      this.search = `${key}:${value}`
    },
154 155 156
    fetchData () {
      let params = _.merge({
        'page': this.page,
157
        'page_size': this.paginateBy,
158
        'ordering': this.getOrderingAsString(),
159 160
        'q': this.search
      }, this.filters)
161
      if (this.importedFilter !== null) {
162
        params.status = this.importedFilter
163
      }
164 165 166 167 168 169 170 171 172 173 174
      let self = this
      self.isLoading = true
      self.checked = []
      axios.get('/federation/library-tracks/', {params: params}).then((response) => {
        self.result = response.data
        self.isLoading = false
      }, error => {
        self.isLoading = false
        self.errors = error.backendErrors
      })
    },
175 176 177 178 179
    selectPage: function (page) {
      this.page = page
    }
  },
  computed: {
Eliot Berriot's avatar
Eliot Berriot committed
180 181 182 183 184
    labels () {
      return {
        searchPlaceholder: this.$gettext('Search by title, artist, domain...')
      }
    },
185 186 187
    actionFilters () {
      var currentFilters = {
        q: this.search
188
      }
189 190
      if (this.filters) {
        return _.merge(currentFilters, this.filters)
191
      } else {
192
        return currentFilters
193
      }
194 195
    },
    actions () {
196
      let msg = this.$gettext('Import')
197 198 199
      return [
        {
          name: 'import',
200
          label: msg,
201 202 203
          filterCheckable: (obj) => { return obj.status === 'not_imported' }
        }
      ]
204 205 206
    }
  },
  watch: {
207 208 209 210 211 212 213 214
    orderingDirection: function () {
      this.page = 1
      this.fetchData()
    },
    ordering: function () {
      this.page = 1
      this.fetchData()
    },
215
    search (newValue) {
216 217
      this.page = 1
      this.fetchData()
218 219 220
    },
    page () {
      this.fetchData()
221 222
    },
    importedFilter () {
223
      this.page = 1
224
      this.fetchData()
225 226 227 228
    }
  }
}
</script>