From e0b2d9e2b9e1eb6798cf7048cb7f46f3947f9aea Mon Sep 17 00:00:00 2001 From: Kaken Bok <bok@kakenbok.de> Date: Sat, 23 Nov 2024 18:28:36 +0100 Subject: [PATCH] listview dragMode + list-config component --- src-admin/components/index.js | 2 + src-admin/components/list/ListConfig.vue | 93 ++++++++++++++++++++++++ src-admin/components/list/ListView.vue | 39 ++++++++-- 3 files changed, 128 insertions(+), 6 deletions(-) create mode 100644 src-admin/components/list/ListConfig.vue diff --git a/src-admin/components/index.js b/src-admin/components/index.js index 8bdc4be..e7da12b 100644 --- a/src-admin/components/index.js +++ b/src-admin/components/index.js @@ -17,6 +17,7 @@ import RemoveDialog from './form/RemoveDialog' import HSeparator from './HSeparator' import ListColumnHeader from './list/ListColumnHeader' import ListColumnSelector from './list/ListColumnSelector' +import ListConfig from './list/ListConfig' import ListView from './list/ListView' import ModelCount from './model/ModelCount' import ModelIcon from './model/ModelIcon' @@ -27,6 +28,7 @@ import StickyFooter from './StickyFooter' import CollapseTransition from './transitions/CollapseTransition' Vue.component('ListColumnHeader', ListColumnHeader) +Vue.component('ListConfig', ListConfig) Vue.component('ListView', ListView) Vue.component('ListColumnSelector', ListColumnSelector) diff --git a/src-admin/components/list/ListConfig.vue b/src-admin/components/list/ListConfig.vue new file mode 100644 index 0000000..dfc85e3 --- /dev/null +++ b/src-admin/components/list/ListConfig.vue @@ -0,0 +1,93 @@ +<template> + <div> + <div + v-if="bulkSelection" + class="mb-4" + > + <label>Mehrfachauswahl</label> + <a-checkbox + v-model="bulkSelection_" + hide-details + label="Mehrere auswählen" + @input="updateList" + /> + </div> + + <label>Auswahlmodus</label> + <a-radio-group + v-model="dragMode" + @input="updateList" + > + <template #default> + <v-radio value="grab"> + <template #label> + <a-icon + :icon="{icon: grabIcon}" + class="mr-2" + /> Liste verschieben + </template> + </v-radio> + <v-radio value="select"> + <template #label> + <a-icon + :icon="{icon: selectIcon}" + class="mr-2" + /> Text auswählen + </template> + </v-radio> + </template> + </a-radio-group> + </div> +</template> + +<script> +import { Component, Vue } from '@a-vue' +import { mdiTextRecognition, mdiHandBackRight } from '@mdi/js' + +@Component({ + props: [{ + bulkSelection: false, + columns: false + }] +}) +export default class ListConfig extends Vue { + bulkSelection_ = false + dragMode = 'grab' + + grabIcon = mdiHandBackRight + selectIcon = mdiTextRecognition + + created () { + this.bulkSelection_ = this.listView._bulkSelection + this.dragMode = this.listView._dragMode + } + + get listView () { + let parent = this.$parent + while (parent) { + if (parent.LIST_VIEW) { + return parent + } + parent = parent.$parent + } + return null + } + + updateList () { + this.listView.setBulkSelection(this.bulkSelection_) + this.listView.setDragMode(this.dragMode) + } +} +</script> + + +<style lang="scss" scoped> +.contextButton { + font-size: .7rem; + cursor: pointer; +} + +label { + color: gray; +} +</style> diff --git a/src-admin/components/list/ListView.vue b/src-admin/components/list/ListView.vue index bebc785..8ee0552 100644 --- a/src-admin/components/list/ListView.vue +++ b/src-admin/components/list/ListView.vue @@ -29,10 +29,10 @@ </template> <template v-else-if="$scopedSlots['model-table']"> - <div class="a-table-wrapper"> + <div :class="['a-table-wrapper', _dragMode]"> <a-table> <a-table-header> - <div v-if="bulkselection" /> + <div v-if="_bulkSelection" /> <div v-if="$has.icon"> <slot name="header-icon" /> @@ -54,7 +54,7 @@ @click="emitFlyingContext(model)" > <div - v-if="bulkselection" + v-if="_bulkSelection" class="pr-2" > <a-checkbox @@ -90,7 +90,7 @@ subModel: true }" > - <div v-if="bulkselection" /> + <div v-if="_bulkSelection" /> <div v-if="$has.icon" /> @@ -167,7 +167,8 @@ import { LoadingEvent } from '@a-vue/events' 'rowClasses', 'rowListeners', { - bulkselection: false, + bulkSelection: false, + dragMode: 'grab', getSubModels: { default: () => model => [] } @@ -186,6 +187,25 @@ export default class ListView extends Mixins(ListViewMixin) { selectedModels = [] + dragMode_ = null + bulkSelection_ = null + + setDragMode (mode) { + this.dragMode_ = mode + } + + get _dragMode () { + return this.dragMode_ || this.dragMode + } + + setBulkSelection (mode) { + this.bulkSelection_ = mode + } + + get _bulkSelection () { + return this.bulkSelection_ || this.bulkSelection + } + isSelected (model) { return this.selectedModels.includes(model) } @@ -269,6 +289,10 @@ export default class ListView extends Mixins(ListViewMixin) { } startShifting (event) { + if (this._dragMode !== 'grab') { + return + } + this.scrollContainerX = this.getScrollParent(this.$el.querySelector('.a-table-wrapper'), 'h') this.scrollContainerY = this.getScrollParent(this.$el.querySelector('.a-table-wrapper'), 'v') @@ -352,7 +376,10 @@ export default class ListView extends Mixins(ListViewMixin) { overflow-x: auto; overflow-y: hidden; padding-bottom: 1rem; - cursor: grab; + + &.grab { + cursor: grab; + } } .filters:not(:empty) {