BooksList.vue 4.24 KB
Newer Older
Mycha de Vrees's avatar
Mycha de Vrees committed
1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div class="content">
    <div class="md-layout">
      <div
        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100"
      >
        <md-card>
          <md-card-header data-background-color="green">
            <h4 class="title">Books Overview</h4>
            <p class="category">Below you can find an overview of all books</p>
          </md-card-header>
          <md-card-content>
Mycha de Vrees's avatar
Mycha de Vrees committed
13
14
15
16
17
18
19
20
21
            <div class="md-layout">
              <div class="md-layout-item md-small-size-100 md-size-33">
                <md-field>
                  <label>Search books...</label>
                  <md-input v-model="booksFilterValue" type="text"></md-input>
                  <md-icon>book</md-icon>
                </md-field>
              </div>
            </div>
Mycha de Vrees's avatar
Mycha de Vrees committed
22
            <md-table>
Mycha de Vrees's avatar
Mycha de Vrees committed
23
24
25
              <b-table striped hover borderless show-empty
                       id="booksTable"
                       ref="booksTable"
26
                       :items="booksProvider"
Mycha de Vrees's avatar
Mycha de Vrees committed
27
                       :fields="bookFields"
Mycha de Vrees's avatar
Mycha de Vrees committed
28
29
30
31
32
33
                       :busy.sync="isBusy"
                       :filter="booksFilter"
                       :current-page="currentPage"
                       :per-page="perPage"
                       :sort-by.sync="sortBy"
                       :sort-desc.sync="sortAsc"
Mycha de Vrees's avatar
Mycha de Vrees committed
34
                       @filtered="onFiltered"
Mycha de Vrees's avatar
Mycha de Vrees committed
35
              >
Mycha de Vrees's avatar
Mycha de Vrees committed
36
37
38
                <template slot="title" slot-scope="row">
                  <router-link :to="{ name: 'Book view', params: { id: row.item.id }}">{{row.value}}</router-link>
                </template>
39
                <template slot="authors" slot-scope="row">
Mycha de Vrees's avatar
Mycha de Vrees committed
40
41
                  <template v-for="(value, index) in row.value" >
                    <router-link :to="{ name: 'Author view', params: { id: value.id }}" :key="index">
Mycha de Vrees's avatar
Mycha de Vrees committed
42
                      {{ value.name }}{{ index + 1 === row.value.length ? '' : ',' }}
Mycha de Vrees's avatar
Mycha de Vrees committed
43
44
                    </router-link>
                  </template>
45
                </template>
Mycha de Vrees's avatar
Mycha de Vrees committed
46
47
48
                <template slot="serie" slot-scope="row">
                  {{ row.value.name }}
                </template>
Mycha de Vrees's avatar
Mycha de Vrees committed
49
50
              </b-table>
              <TablePagination
Mycha de Vrees's avatar
Mycha de Vrees committed
51
                :total-rows="totalRows"
Mycha de Vrees's avatar
Mycha de Vrees committed
52
53
                :per-page.sync="perPage"
                :current-page.sync="currentPage"
54
                style="margin-top: 20px;"
Mycha de Vrees's avatar
Mycha de Vrees committed
55
56
57
58
59
60
61
62
63
64
              ></TablePagination>
            </md-table>
          </md-card-content>
        </md-card>
      </div>
    </div>
  </div>
</template>

<script>
Mycha de Vrees's avatar
Mycha de Vrees committed
65
66
67
/**
 * @vue-data {Boolean} isBusy - determine isBusy state for table
 */
Mycha de Vrees's avatar
Mycha de Vrees committed
68
import { TablePagination } from '@/components'
Mycha de Vrees's avatar
Mycha de Vrees committed
69
import { mapActions, mapGetters } from 'vuex'
Mycha de Vrees's avatar
Mycha de Vrees committed
70
import _ from 'lodash'
Mycha de Vrees's avatar
Mycha de Vrees committed
71
72
73
74
75
76
77

export default {
  components: {
    TablePagination
  },
  data () {
    return {
Mycha de Vrees's avatar
Mycha de Vrees committed
78
      isBusy: false,
Mycha de Vrees's avatar
Mycha de Vrees committed
79
80
      booksFilter: null,
      booksFilterValue: null,
Mycha de Vrees's avatar
Mycha de Vrees committed
81
82
83
84
      sortBy: 'createdAt',
      sortDesc: false,
      sortAsc: true,
      perPage: 10,
Mycha de Vrees's avatar
Mycha de Vrees committed
85
86
      currentPage: 1,
      bookFields: [
87
88
89
        { key: 'id', label: 'id', sortable: true },
        { key: 'title', label: 'Title', sortable: true },
        { key: 'language', label: 'Language', sortable: true },
90
        { key: 'authors', label: 'Authors', sortable: true },
Mycha de Vrees's avatar
Mycha de Vrees committed
91
        { key: 'serie', label: 'Serie', sortable: true }
Mycha de Vrees's avatar
Mycha de Vrees committed
92
      ],
93
      bookItems: [],
Mycha de Vrees's avatar
Mycha de Vrees committed
94
95
96
97
      totalRows: this.bookRows
    }
  },
  methods: {
98
    ...mapActions(['fetchBooks']),
Mycha de Vrees's avatar
Mycha de Vrees committed
99
100
101
102
103
104
105
106
107
    onFiltered (filteredBooks) {
      this.totalRows = filteredBooks.length
      this.currentPage = 1
    },
    filterDebounce: _.debounce((filterValue, callback) => {
      callback(filterValue)
    }, 500),
    filter (filterValue) {
      this.booksFilter = filterValue
108
109
110
111
112
113
114
    },
    async booksProvider (ctx) {
      ctx.fields = Object.values(this.bookFields)
        .filter(q => q !== undefined)
        .map(q => q.key.toString())

      this.isBusy = true
115
      await this.fetchBooks({ctx, vm: this})
116
      this.isBusy = false
Mycha de Vrees's avatar
Mycha de Vrees committed
117
      return this.getAllBooks
Mycha de Vrees's avatar
Mycha de Vrees committed
118
119
120
    }
  },
  computed: {
Mycha de Vrees's avatar
Mycha de Vrees committed
121
    ...mapGetters(['getAllBooks', 'getBookCount']),
Mycha de Vrees's avatar
Mycha de Vrees committed
122
123
124
125
126
127
128
129
130
131
132
133
134
    bookRows: {
      get () {
        return this.bookItems.length
      },
      set (newVal) {
        this.totalRows = newVal
      }
    }
  },
  watch: {
    booksFilterValue (filterValue) {
      this.currentPage = 1
      this.filterDebounce(filterValue, this.filter)
Mycha de Vrees's avatar
Mycha de Vrees committed
135
136
137
138
    }
  }
}
</script>