1<template>
2  <page-default>
3
4    <section class="app-section">
5      <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-xl">
6        <div class="row no-wrap items-center q-mb-lg">
7          <tool-bar-table :status.sync="status" :filter.sync="filter"/>
8        </div>
9        <div class="row items-center q-col-gutter-lg">
10          <div class="col-12">
11            <main-table
12              ref="mainTable"
13              v-bind="getTableProps({ type: 'http-middlewares' })"
14              :data="allMiddlewares.items"
15              :onLoadMore="handleLoadMore"
16              :endReached="allMiddlewares.endReached"
17              :loading="allMiddlewares.loading"
18            />
19          </div>
20        </div>
21      </div>
22    </section>
23
24  </page-default>
25</template>
26
27<script>
28import { mapActions, mapGetters } from 'vuex'
29import GetTablePropsMixin from '../../_mixins/GetTableProps'
30import PaginationMixin from '../../_mixins/Pagination'
31import PageDefault from '../../components/_commons/PageDefault'
32import ToolBarTable from '../../components/_commons/ToolBarTable'
33import MainTable from '../../components/_commons/MainTable'
34
35export default {
36  name: 'PageHTTPMiddlewares',
37  mixins: [
38    GetTablePropsMixin,
39    PaginationMixin({
40      fetchMethod: 'getAllMiddlewaresWithParams',
41      scrollerRef: 'mainTable.$refs.scroller',
42      pollingIntervalTime: 5000
43    })
44  ],
45  components: {
46    PageDefault,
47    ToolBarTable,
48    MainTable
49  },
50  data () {
51    return {
52      filter: '',
53      status: ''
54    }
55  },
56  computed: {
57    ...mapGetters('http', { allMiddlewares: 'allMiddlewares' })
58  },
59  methods: {
60    ...mapActions('http', { getAllMiddlewares: 'getAllMiddlewares' }),
61    getAllMiddlewaresWithParams (params) {
62      return this.getAllMiddlewares({
63        query: this.filter,
64        status: this.status,
65        ...params
66      })
67    },
68    refreshAll () {
69      if (this.allMiddlewares.loading) {
70        return
71      }
72
73      this.initFetch()
74    },
75    handleLoadMore ({ page = 1 } = {}) {
76      return this.fetchMore({ page })
77    }
78  },
79  watch: {
80    'status' () {
81      this.refreshAll()
82    },
83    'filter' () {
84      this.refreshAll()
85    }
86  },
87  beforeDestroy () {
88    this.$store.commit('http/getAllMiddlewaresClear')
89  }
90}
91</script>
92
93<style scoped lang="scss">
94
95</style>
96