1
0
Fork 0

feat: add "copy link" button for sharing a grid view

This commit is contained in:
Lance Edgar 2024-08-22 14:45:25 -05:00
parent 1443f5253f
commit a5c2931085

View file

@ -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: