diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-04-29 20:52:39 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-05-05 07:25:19 +0300 |
commit | b1a7191eb287fe92c82d3346f2a9587e41c62d2b (patch) | |
tree | fef7e2b1f08703233183fd2c86dccb4ba193af0b /src/components/Global | |
parent | 3be801aa07ed85c8a90eb6f53a807a1cc57cdaa9 (diff) | |
download | webui-vue-b1a7191eb287fe92c82d3346f2a9587e41c62d2b.tar.xz |
Add export functionality to Sensors page
- Create TableToolbarExport component to be used as a slot
in TableToolbar
- Allows selected table items to be exported
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I929347e046af8a5d5188e4c4fd9fc874e067cce5
Diffstat (limited to 'src/components/Global')
-rw-r--r-- | src/components/Global/TableToolbar.vue | 3 | ||||
-rw-r--r-- | src/components/Global/TableToolbarExport.vue | 35 |
2 files changed, 37 insertions, 1 deletions
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index 041a9c18..331f0076 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -15,6 +15,7 @@ > {{ action.label }} </b-button> + <slot name="export"></slot> <b-button variant="primary" class="d-block" @@ -38,7 +39,7 @@ export default { }, actions: { type: Array, - required: true, + default: () => [], validator: prop => { return prop.every(action => { return ( diff --git a/src/components/Global/TableToolbarExport.vue b/src/components/Global/TableToolbarExport.vue new file mode 100644 index 00000000..ed1d980f --- /dev/null +++ b/src/components/Global/TableToolbarExport.vue @@ -0,0 +1,35 @@ +<template> + <b-link + class="btn btn-primary d-block align-self-center" + :download="download" + :href="href" + > + {{ $t('global.action.export') }} + </b-link> +</template> + +<script> +export default { + props: { + data: { + type: Array, + default: () => [] + }, + fileName: { + type: String, + default: 'data' + } + }, + computed: { + dataForExport() { + return JSON.stringify(this.data); + }, + download() { + return `${this.fileName}.json`; + }, + href() { + return `data:text/json;charset=utf-8,${this.dataForExport}`; + } + } +}; +</script> |