@gewaer/gw-browse
v0.2.3
Published
Base browse component for the Gewaer platform.
Downloads
11
Readme
Gewaer Browse Component
Gewaer Browse Component is a reusable component to present lists of resources in a table format, with ease of configuration and many configurable options.
The guts
This component relies on several other VueJS components. I will take ths time to give them a shout out:
Note
Even though all these packages are used to create our component, the main configuration options deal with Vuetable-2, in regards as the what information is presented. You can see more of this in the documentation.
Usage
NPM
npm install @gewaer/gw-browse --save
Documentation
Here is an implementation example of the component:
<template>
<gw-browse
ref="gwBrowse"
:bulk-actions="bulkActions"
:bulk-methods="bulkMethods"
:http-options="{ baseURL, headers: { Authorization: token }}"
:pagination-data="paginationData"
:pagination-path="''"
:resources="resources"
/>
</template>
import { mapState } from "vuex";
import GwBrowse from "@/npm-components/gw-browse/src/browse"
import "@gewaer/gw-browse/dist/gw-browse.css";
export default {
name: "Browse",
components: {
GwBrowse
},
data() {
return {
baseURL: process.env.VUE_APP_BASE_API_URL,
bulkActions: [
{
name: "Mark Completed",
action: "markCompleted"
},
// Default bulk methods can still be used just be defining them. If needed, you can overwrite them.
{
name: "Delete",
action: "bulkDelete"
}
],
bulkMethods: {
markCompleted: this.markCompleted
},
token: this.$store.state.User.token || Cookies.get("token")
}
},
computed: {
...mapState({
resources: state => state.Company.data.resources
})
},
methods: {
markCompleted(selected) {
axios({
url: "/some/endpoint",
method: "POST",
data: {
ids: selected
}
}).then((response) => {
// do something
});
},
paginationData(data) {
const paginationData = {
total: parseInt(data.total_rows),
per_page: parseInt(data.limit),
current_page: parseInt(data.page),
last_page: parseInt(data.total_pages)
}
const nextParams = this.$refs.gwBrowse.getAllQueryParams();
nextParams.page = nextParams.page == paginationData.last_page ? null : nextParams.page + 1;
const prevParams = this.$refs.gwBrowse.getAllQueryParams();
prevParams.page = prevParams.page == 1 ? null : prevParams.page - 1;
const nextQuery = Object.keys(nextParams).map(key => `${key}=${nextParams[key]}`);
const prevQuery = Object.keys(prevParams).map(key => `${key}=${prevParams[key]}`);
paginationData.next_page_url = nextParams.page === null ? null : `${this.baseURL}?${nextQuery.join("&")}&format=true`;
paginationData.prev_page_url = prevParams.page === null ? null : `${this.baseURL}?${prevQuery.join("&")}&format=true`;
paginationData.from = (paginationData.current_page - 1) * paginationData.per_page + 1;
paginationData.to = paginationData.from + paginationData.per_page - 1;
return paginationData;
}
}
}
Props
Vuetable-2 Props
- append-params → see Vuetable-2#
append-params
- data-path → see Vuetable-2#
data-path
- http-fetch → see Vuetable-2#
http-fetch
- http-options → see Vuetable-2#
http-options
- query-params → see Vuetable-2#
query-params
- pagination-path → see Vuetable-2#
pagination-path
bulk-actions
requires
bulk-methods
when specifying custom methods.type:
Array
default:
[ { name: "Export CSV", action: "exportCsv" }, { name: "Export PDF", action: "exportPdf" }, { name: "Delete", action: "bulkDelete" } ]
use:
Specify custom bulk actions to execute to selected records.
bulk-methods
type:
Object
default:
{}
(empty object)use:
Specify custom bulk methods to execute to selected records. You can see an example in the provided code sample.
pagination-data
type:
Function
default:
null
use:
Function to format and return a pagination object as per VuetablePagination requirements.
resources
type:
Array
default: none
required: true
use:
List of resources from which the browse component will extract the current resource being viewed.
Example:
[ { icon:"https://flaticons.net/gd/makefg.php?i=icons/Shopping/Product.png&r=255&g=255&b=255" name:"products" title:"Products" } ]
results-per-page
type:
Number
default:
25
use:
The amount of records per page.
results-per-page-options
type:
Array
default:
[25, 50, 100]
use:
List of results per page to customized the amount of records per page.
search-options
type:
Object
default:
{ text: "", filters: [] }
use:
Search options by which to filter the results in the server when initializing the component.
show-actions-delete
type:
Boolean
default:
true
use:
Tells the browse component whether or not to show the
Delete
actions button.
show-actions-edit
type:
Boolean
default:
true
use:
Tells the browse component whether or not to show the
Edit
actions button.
show-bulk-actions
type:
Boolean
default:
true
use:
Tells the browse component whether or not to show the
Bulk Actions
list.
show-create-resource
type:
Boolean
default:
true
use:
Tells the browse component whether or not to show the
Create ${resource}
actions button.
show-paginaion
type:
Boolean
default:
true
use:
Tells the browse component whether or not to show results pagination.
show-paginaion-bottom
type:
Boolean
default:
true
use:
Tells the browse component whether or not to show bottom results pagination.
show-paginaion-top
type:
Boolean
default:
true
use:
Tells the browse component whether or not to show top results pagination.
show-resource-actions
type:
Boolean
default:
true
use:
Tells the browse component whether or not to show actions bar (
Bulk Actions
,Create ${resource}
,Search
,Filters
).
show-results-per-page
type:
Boolean
default:
true
use:
Tells the browse component whether or not to show the results per page options dropdown.
License
Gewaer Browse Component is open-sourced software licensed under the MIT license.