feat: add "copy link" button for sharing a grid view
This commit is contained in:
parent
1443f5253f
commit
a5c2931085
|
@ -16,6 +16,13 @@
|
||||||
ref="gridFilters" />
|
ref="gridFilters" />
|
||||||
|
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
|
|
||||||
|
<b-button @click="copyDirectLink()"
|
||||||
|
title="Copy grid link to clipboard"
|
||||||
|
:is-small="smallFilters">
|
||||||
|
<b-icon pack="fas" icon="share-alt" />
|
||||||
|
</b-button>
|
||||||
|
|
||||||
<b-button type="is-primary"
|
<b-button type="is-primary"
|
||||||
native-type="submit"
|
native-type="submit"
|
||||||
icon-pack="fas"
|
icon-pack="fas"
|
||||||
|
@ -209,6 +216,12 @@
|
||||||
% endif
|
% endif
|
||||||
|
|
||||||
</${b}-table>
|
</${b}-table>
|
||||||
|
|
||||||
|
## dummy input field needed for sharing links on *insecure* sites
|
||||||
|
% if getattr(request, 'scheme', None) == 'http':
|
||||||
|
<b-input v-model="shareLink" ref="shareLink" v-show="shareLink"></b-input>
|
||||||
|
% endif
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -223,6 +236,11 @@
|
||||||
## nb. this tracks whether grid.fetchFirstData() happened
|
## nb. this tracks whether grid.fetchFirstData() happened
|
||||||
fetchedFirstData: false,
|
fetchedFirstData: false,
|
||||||
|
|
||||||
|
## dummy input value needed for sharing links on *insecure* sites
|
||||||
|
% if getattr(request, 'scheme', None) == 'http':
|
||||||
|
shareLink: null,
|
||||||
|
% endif
|
||||||
|
|
||||||
## filtering
|
## filtering
|
||||||
% if grid.filterable:
|
% if grid.filterable:
|
||||||
filters: ${json.dumps(grid.get_vue_filters())|n},
|
filters: ${json.dumps(grid.get_vue_filters())|n},
|
||||||
|
@ -268,6 +286,11 @@
|
||||||
template: '#${grid.vue_tagname}-template',
|
template: '#${grid.vue_tagname}-template',
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
|
directLink() {
|
||||||
|
const params = new URLSearchParams(this.getAllParams())
|
||||||
|
return `${request.path_url}?${'$'}{params}`
|
||||||
|
},
|
||||||
|
|
||||||
% if grid.filterable:
|
% if grid.filterable:
|
||||||
|
|
||||||
addFilterChoices() {
|
addFilterChoices() {
|
||||||
|
@ -346,12 +369,50 @@
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
copyDirectLink() {
|
||||||
|
|
||||||
|
if (navigator.clipboard) {
|
||||||
|
// this is the way forward, but requires HTTPS
|
||||||
|
navigator.clipboard.writeText(this.directLink)
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// use deprecated 'copy' command, but this just
|
||||||
|
// tells the browser to copy currently-selected
|
||||||
|
// text..which means we first must "add" some text
|
||||||
|
// to screen, and auto-select that, before copying
|
||||||
|
// to clipboard
|
||||||
|
this.shareLink = this.directLink
|
||||||
|
this.$nextTick(() => {
|
||||||
|
let input = this.$refs.shareLink.$el.firstChild
|
||||||
|
input.select()
|
||||||
|
document.execCommand('copy')
|
||||||
|
// re-hide the dummy input
|
||||||
|
this.shareLink = null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$buefy.toast.open({
|
||||||
|
message: "Link was copied to clipboard",
|
||||||
|
type: 'is-info',
|
||||||
|
duration: 2000, // 2 seconds
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
renderNumber(value) {
|
renderNumber(value) {
|
||||||
if (value != undefined) {
|
if (value != undefined) {
|
||||||
return value.toLocaleString('en')
|
return value.toLocaleString('en')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getAllParams() {
|
||||||
|
return {
|
||||||
|
...this.getBasicParams(),
|
||||||
|
% if grid.filterable:
|
||||||
|
...this.getFilterParams(),
|
||||||
|
% endif
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
getBasicParams() {
|
getBasicParams() {
|
||||||
const params = {
|
const params = {
|
||||||
% if grid.paginated and grid.paginate_on_backend:
|
% if grid.paginated and grid.paginate_on_backend:
|
||||||
|
|
Loading…
Reference in a new issue