summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/ComponentTableActions.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/ComponentTableActions.vue')
-rw-r--r--webapp/src/components/ComponentTableActions.vue126
1 files changed, 0 insertions, 126 deletions
diff --git a/webapp/src/components/ComponentTableActions.vue b/webapp/src/components/ComponentTableActions.vue
deleted file mode 100644
index 989a83a..0000000
--- a/webapp/src/components/ComponentTableActions.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<i18n>
-{
- "en": {
- "search": "Search",
- "all": "All",
- "pageText": "{0}-{1} of {2}",
- "pageTextZero": "0 of 0",
- "rowsPerPageText": "Rows per page:"
- },
- "de": {
- "search": "Suche",
- "all": "Alle",
- "pageText": "{0}-{1} von {2}",
- "pageTextZero": "0 von 0",
- "rowsPerPageText": "Reihen pro page:"
- }
-}
-</i18n>
-
-<template>
- <v-layout wrap align-center class="caption font-weight-thin">
- <v-flex md3 sm5 xs12 order-md1 order-sm1 order-xs1 class="text-xs-left">
- <v-text-field
- class="search-field"
- :placeholder="$t('search')"
- :value="search"
- @input="setSearch"
- hide-details
- prepend-inner-icon="search"
- ></v-text-field>
- </v-flex>
- <v-flex md4 sm12 xs12 offset-md1 offset-sm0 offset-xs0 order-md2 order-sm3 order-xs3 class="text-md-center text-xs-right">
- {{ $t('rowsPerPageText') }}
- <v-select
- class="rows-per-page-select body-1"
- :value="pagination.rowsPerPage"
- @input="setRowsPerPage"
- :items="rowsPerPageOptions.concat({ text: $t('all'), value: -1 })"
- offset-y
- color="primary"
- hide-details
- ></v-select>
- </v-flex>
- <v-flex md4 sm6 xs12 offset-md0 offset-sm1 offset-xs0 order-md3 order-sm2 order-xs2 class="text-xs-right">
- <span class="page-text">{{
- pagination.totalItems > 0 ? $t('pageText', [
- (pagination.page - 1) * pagination.rowsPerPage + 1,
- Math.min(pagination.page * pagination.rowsPerPage, pagination.totalItems),
- pagination.totalItems
- ]) : $t('pageTextZero')
- }}</span>
- <v-btn class="page-button" icon @click="prevPage"><v-icon>keyboard_arrow_left</v-icon></v-btn>
- <v-btn class="page-button" icon @click="nextPage"><v-icon>keyboard_arrow_right</v-icon></v-btn>
- </v-flex>
- </v-layout>
-</template>
-
-<script>
-
-export default {
- name: 'ComponentTableActions',
- props: {
- pagination: {
- type: Object,
- required: true
- },
- search: {
- type: String,
- required: true
- },
- itemCount: {
- type: Number,
- required: true
- },
- rowsPerPageOptions: {
- type: Array,
- default: () => [10, 25, 50]
- }
- },
- data () {
- return {
- }
- },
- methods: {
- setRowsPerPage (value) {
- this.$emit('update:pagination', { ...this.pagination, rowsPerPage: value, page: 1 })
- },
- setPage (value) {
- this.$emit('update:pagination', { ...this.pagination, page: value })
- },
- setSearch (value) { this.$emit('update:search', value) },
- prevPage () {
- if (this.pagination.page > 1) this.setPage(this.pagination.page - 1)
- },
- nextPage () {
- if (this.pagination.page * this.pagination.rowsPerPage < this.pagination.totalItems) this.setPage(this.pagination.page + 1)
- }
- },
- created () {
- this.$emit('update:pagination', { ...this.pagination, totalItems: this.itemCount, rowsPerPage: this.rowsPerPageOptions[0] || -1 })
- this.setSearch('')
- }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.search-field {
- margin-top: 0;
- margin-left: 10px;
- margin-right: 10px;
- margin-bottom: 5px;
-}
-.rows-per-page-select {
- display: inline-block;
- margin: 0 10px 0 20px;
- width: min-content;
-}
-.page-text {
- margin-right: 20px;
-}
-.page-button {
- margin-top: 0;
- margin-bottom: 0;
-}
-</style>