almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-29 03:42:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

wip: allow to open table "editor" (readonly) for remote data layers

Browse source
This commit is contained in:
Yohan Boniface 2024-07-08 18:30:12 +02:00
parent 5909630e0e
commit 1ef416a622
3 changed files with 45 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
umap/static/umap/js/modules/tableeditor.js
View file

@ -21,9 +21,11 @@ export default class TableEditor extends WithTemplate {
this.contextmenu = new ContextMenu({ className: 'dark' }) this.contextmenu = new ContextMenu({ className: 'dark' })
this.table = this.loadTemplate(TEMPLATE) this.table = this.loadTemplate(TEMPLATE)
this.resetProperties() this.resetProperties()
this.elements.body.addEventListener('dblclick', (event) => { if (!this.datalayer.isRemoteLayer()) {
if (event.target.closest('[data-property]')) this.editCell(event.target) this.elements.body.addEventListener('dblclick', (event) => {
}) if (event.target.closest('[data-property]')) this.editCell(event.target)
})
}
this.elements.body.addEventListener('click', (event) => this.setFocus(event.target)) this.elements.body.addEventListener('click', (event) => this.setFocus(event.target))
this.elements.body.addEventListener('keydown', (event) => this.onKeyDown(event)) this.elements.body.addEventListener('keydown', (event) => this.onKeyDown(event))
this.elements.header.addEventListener('click', (event) => { this.elements.header.addEventListener('click', (event) => {
@ -33,6 +35,7 @@ export default class TableEditor extends WithTemplate {
} }
openHeaderMenu(property) { openHeaderMenu(property) {
const actions = []
let filterItem let filterItem
if (this.map.facets.has(property)) { if (this.map.facets.has(property)) {
filterItem = { filterItem = {
@ -51,20 +54,18 @@ export default class TableEditor extends WithTemplate {
}, },
} }
} }
this.contextmenu.open( actions.push(filterItem)
[event.clientX, event.clientY], if (!this.datalayer.isRemoteLayer()) {
[ actions.push({
{ label: translate('Rename this column'),
label: translate('Delete this column'), action: () => this.renameProperty(property),
action: () => this.deleteProperty(property), })
}, actions.push({
{ label: translate('Delete this column'),
label: translate('Rename this column'), action: () => this.deleteProperty(property),
action: () => this.renameProperty(property), })
}, }
filterItem, this.contextmenu.open([event.clientX, event.clientY], actions)
]
)
} }
renderHeaders() { renderHeaders() {
@ -176,32 +177,39 @@ export default class TableEditor extends WithTemplate {
this.elements.body.innerHTML = '' this.elements.body.innerHTML = ''
this.renderBody() this.renderBody()
const addButton = loadTemplate(` const actions = []
<button class="flat" type="button" data-ref="add"> if (!this.datalayer.isRemoteLayer()) {
<i class="icon icon-16 icon-add"></i>${translate('Add a new property')} const addButton = loadTemplate(`
</button>`) <button class="flat" type="button" data-ref="add">
addButton.addEventListener('click', () => this.addProperty()) <i class="icon icon-16 icon-add"></i>${translate('Add a new property')}
</button>`)
addButton.addEventListener('click', () => this.addProperty())
actions.push(addButton)
const deleteButton = loadTemplate(` const deleteButton = loadTemplate(`
<button class="flat" type="button" data-ref="delete"> <button class="flat" type="button" data-ref="delete">
<i class="icon icon-16 icon-delete"></i>${translate('Delete selected rows')} <i class="icon icon-16 icon-delete"></i>${translate('Delete selected rows')}
</button>`) </button>`)
deleteButton.addEventListener('click', () => this.deleteRows()) deleteButton.addEventListener('click', () => this.deleteRows())
actions.push(deleteButton)
}
const filterButton = loadTemplate(` const filterButton = loadTemplate(`
<button class="flat" type="button" data-ref="filters"> <button class="flat" type="button" data-ref="filters">
<i class="icon icon-16 icon-filters"></i>${translate('Filter data')} <i class="icon icon-16 icon-filters"></i>${translate('Filter data')}
</button>`) </button>`)
filterButton.addEventListener('click', () => this.map.browser.open('filters')) filterButton.addEventListener('click', () => this.map.browser.open('filters'))
actions.push(filterButton)
this.map.fullPanel.open({ this.map.fullPanel.open({
content: this.table, content: this.table,
className: 'umap-table-editor', className: 'umap-table-editor',
actions: [addButton, deleteButton, filterButton], actions: actions,
}) })
} }
editCell(cell) { editCell(cell) {
if (this.datalayer.isRemoteLayer()) return
const property = cell.dataset.property const property = cell.dataset.property
const field = `properties.${property}` const field = `properties.${property}`
const tr = event.target.closest('tr') const tr = event.target.closest('tr')

9
umap/static/umap/js/modules/ui/contextmenu.js
View file

@ -20,6 +20,7 @@ export default class ContextMenu {
`<li class="${item.className || ''}"><button tabindex="0" class="flat">${item.label}</button></li>` `<li class="${item.className || ''}"><button tabindex="0" class="flat">${item.label}</button></li>`
) )
li.addEventListener('click', () => { li.addEventListener('click', () => {
this.close()
item.action() item.action()
}) })
this.container.appendChild(li) this.container.appendChild(li)
@ -37,6 +38,12 @@ export default class ContextMenu {
} }
close() { close() {
this.container.parentNode.removeChild(this.container) try {
this.container.remove()
} catch {
// Race condition in Chrome: the focusout close has "half" removed the node
// So it's still visible in the DOM, but we calling .remove on it (or parentNode.removeChild)
// will crash.
}
} }
} }

2
umap/static/umap/js/umap.layer.js
View file

@ -1800,7 +1800,7 @@ U.DataLayer = L.Evented.extend({
}, },
tableEdit: function () { tableEdit: function () {
if (this.isRemoteLayer() || !this.isVisible()) return if (!this.isVisible()) return
const editor = new U.TableEditor(this) const editor = new U.TableEditor(this)
editor.open() editor.open()
}, },