diff --git a/public/css/components/primevue.css b/public/css/components/primevue.css index ac1950334..97b918011 100644 --- a/public/css/components/primevue.css +++ b/public/css/components/primevue.css @@ -3578,6 +3578,12 @@ transition: box-shadow 0.15s; margin-right: 0.5rem; } + +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler > svg, +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler > svg * { + pointer-events: none; +} + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { color: #495057; border-color: transparent; diff --git a/public/js/components/Stv/Studentenverwaltung/List.js b/public/js/components/Stv/Studentenverwaltung/List.js index aff26a2db..c47a65885 100644 --- a/public/js/components/Stv/Studentenverwaltung/List.js +++ b/public/js/components/Stv/Studentenverwaltung/List.js @@ -141,6 +141,7 @@ export default { if (row.getData().bnaktiv === false) { row.getElement().classList.add('text-black','text-opacity-50','fst-italic'); } + row.getElement().draggable = true }, ajaxRequestFunc: (url, config, params) => { @@ -207,6 +208,10 @@ export default { handler: (data) => { this.getExpandedRows() } + }, + { + event: 'rowMouseDown', + handler: this.handleMouseDown } ], focusObj: null, // TODO(chris): this should be in the filter component @@ -220,7 +225,8 @@ export default { selectedColumnValues: [], tagEndpoint: ApiTag, currentEndpoint: null, - headerFilterActive: false + headerFilterActive: false, + dragSource: [] } }, computed: { @@ -236,7 +242,9 @@ export default { + ': ' + (this.count || 0) + ''; }, selectedDragObject() { - return this.selected.map(item => { + let items = this.dragSource?.length ? this.dragSource : this.selected; + + return items.map(item => { let type, id; if (item.uid) { type = 'student'; @@ -381,15 +389,6 @@ export default { this.selectedColumnValues = this.selectedRows.filter(row => row.getData().prestudent_id !== undefined && row.getData().prestudent_id).map(row => row.getData().prestudent_id); this.$emit('update:selected', data); - - // set selected elements draggable - const tableEl = this.$refs.table?.$refs?.table; - if (tableEl) { - const oldDragables = tableEl.querySelectorAll('[draggable]'); - for (const draggable of oldDragables) - draggable.removeAttribute('draggable'); - } - rows.forEach(row => row.getElement().draggable = true); }, autoSelectRows(data) { if (Array.isArray(this.lastSelected) && this.lastSelected.length){ @@ -459,6 +458,7 @@ export default { this.$refs.table.tabulator.setData(endpoint.url, params, method); }, dragCleanup(evt) { + this.dragSource = []; if (evt.dataTransfer.dropEffect == 'none') return; // aborted or wrong target @@ -557,7 +557,16 @@ export default { }, handleHeaderFilter(filterActive){ this.headerFilterActive = filterActive; - } + }, + handleMouseDown(e, row) + { + let data = row.getData(); + let id = data.uid ?? data.prestudent_id ?? data.person_id; + + const isAlreadySelected = this.selected?.some(row => (row.uid ?? row.prestudent_id ?? row.person_id) === id); + + this.dragSource = (isAlreadySelected && this.selected?.length) ? this.selected : [data]; + }, }, // TODO(chris): focusin, focusout, keydown and tabindex should be in the filter component // TODO(chris): filter component column chooser has no accessibilty features