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) {