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" />
|
||||
|
||||
<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"
|
||||
native-type="submit"
|
||||
icon-pack="fas"
|
||||
|
@ -209,6 +216,12 @@
|
|||
% endif
|
||||
|
||||
</${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>
|
||||
</script>
|
||||
|
||||
|
@ -223,6 +236,11 @@
|
|||
## nb. this tracks whether grid.fetchFirstData() happened
|
||||
fetchedFirstData: false,
|
||||
|
||||
## dummy input value needed for sharing links on *insecure* sites
|
||||
% if getattr(request, 'scheme', None) == 'http':
|
||||
shareLink: null,
|
||||
% endif
|
||||
|
||||
## filtering
|
||||
% if grid.filterable:
|
||||
filters: ${json.dumps(grid.get_vue_filters())|n},
|
||||
|
@ -268,6 +286,11 @@
|
|||
template: '#${grid.vue_tagname}-template',
|
||||
computed: {
|
||||
|
||||
directLink() {
|
||||
const params = new URLSearchParams(this.getAllParams())
|
||||
return `${request.path_url}?${'$'}{params}`
|
||||
},
|
||||
|
||||
% if grid.filterable:
|
||||
|
||||
addFilterChoices() {
|
||||
|
@ -346,12 +369,50 @@
|
|||
|
||||
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) {
|
||||
if (value != undefined) {
|
||||
return value.toLocaleString('en')
|
||||
}
|
||||
},
|
||||
|
||||
getAllParams() {
|
||||
return {
|
||||
...this.getBasicParams(),
|
||||
% if grid.filterable:
|
||||
...this.getFilterParams(),
|
||||
% endif
|
||||
}
|
||||
},
|
||||
|
||||
getBasicParams() {
|
||||
const params = {
|
||||
% if grid.paginated and grid.paginate_on_backend:
|
||||
|
|
Loading…
Reference in a new issue