@afeefa/vue-app 0.0.220 → 0.0.221

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.220
+0.0.221

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.220",
+  "version": "0.0.221",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src-admin/components/index.js

@@ -17,6 +17,7 @@ import RemoveDialog from './form/RemoveDialog'
 import HSeparator from './HSeparator'
 import ListCard from './list/ListCard'
 import ListColumnHeader from './list/ListColumnHeader'
+import ListColumnSelector from './list/ListColumnSelector'
 import ListContent from './list/ListContent'
 import ListMeta from './list/ListMeta'
 import ListTitle from './list/ListTitle'
@@ -35,6 +36,7 @@ Vue.component('ListContent', ListContent)
 Vue.component('ListMeta', ListMeta)
 Vue.component('ListTitle', ListTitle)
 Vue.component('ListView', ListView)
+Vue.component('ListColumnSelector', ListColumnSelector)
 
 Vue.component('EditPage', EditPage)
 Vue.component('EditFormButtons', EditFormButtons)

package/src-admin/components/list/ListColumnSelector.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <a-context-menu>
+      <template #activator>
+        <div class="contextButton">
+          {{ selectedColumns.length }}/{{ Object.keys(columns).length }}
+        </div>
+      </template>
+
+      <a-checkbox-group
+        v-model="selectedColumns"
+        :options="options"
+        vertical
+        v-on="$listeners"
+        @input="columnSelected"
+      />
+    </a-context-menu>
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: ['columns']
+})
+export default class ListColumnSelector extends Vue {
+  selectedColumns = []
+
+  created () {
+    this.selectedColumns = Object.keys(this.columns)
+      .filter(k => this.columns[k].visible)
+  }
+
+  get options () {
+    return Object.keys(this.columns).map(k => {
+      return {
+        itemText: this.columns[k].title,
+        itemValue: k
+      }
+    })
+  }
+
+  columnSelected () {
+    for (const key in this.columns) {
+      this.columns[key].visible = this.selectedColumns.includes(key)
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.contextButton {
+  font-size: .7rem;
+  cursor: pointer;
+}
+</style>

package/src-admin/components/list/ListView.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="listView">
+  <div
+    class="listView"
+    @mousedown="startShifting"
+  >
     <div
       v-if="$has.filters"
       class="filters"
@@ -29,7 +32,9 @@
         <div class="a-table-wrapper">
           <a-table>
             <a-table-header>
-              <div v-if="$has.icon" />
+              <div v-if="$has.icon">
+                <slot name="header-icon" />
+              </div>
 
               <slot name="header-table" />
             </a-table-header>
@@ -99,7 +104,7 @@
 
     <div
       v-if="$has.filters"
-      class="filters"
+      class="filters filters-below"
     >
       <slot
         name="filters-below"
@@ -122,6 +127,11 @@ import { LoadingEvent } from '@a-vue/events'
 export default class ListView extends Mixins(ListViewMixin) {
   $hasOptions = ['icon', 'filters']
 
+  xStart = null
+  scrollLeftStart = null
+  yStart = null
+  scrollTopStart = null
+
   @Watch('isLoading')
   isLoadingChanged () {
     if (this.events) {
@@ -191,6 +201,81 @@ export default class ListView extends Mixins(ListViewMixin) {
     }
     this.$emit('flyingContext', model)
   }
+
+  startShifting (event) {
+    if (this.scrollContainerX || this.scrollContainerY) {
+      window.addEventListener('mouseup', this.stopShifting)
+      window.addEventListener('mousemove', this.shift)
+
+      this.$el.style.userSelect = 'none'
+
+      if (this.scrollContainerX) {
+        this.xStart = event.clientX
+        this.scrollLeftStart = this.scrollContainerX.scrollLeft
+      }
+
+      if (this.scrollContainerY) {
+        this.yStart = event.clientY
+        this.scrollTopStart = this.scrollContainerY.scrollTop
+      }
+    }
+  }
+
+  stopShifting (event) {
+    window.removeEventListener('mouseup', this.stopShifting)
+    window.removeEventListener('mousemove', this.shift)
+
+    this.$el.style.userSelect = 'auto'
+  }
+
+  shift (event) {
+    if (this.scrollContainerX || this.scrollContainerY) {
+      if (this.scrollContainerX) {
+        const diffX = this.xStart - event.clientX
+        this.scrollContainerX.scrollLeft = this.scrollLeftStart + diffX
+      }
+
+      if (this.scrollContainerY) {
+        const diffY = this.yStart - event.clientY
+        this.scrollContainerY.scrollTop = this.scrollTopStart + diffY
+      }
+    }
+  }
+
+  @Watch('$route.name')
+  routeChanged () {
+    if (this.scrollContainerX) {
+      this.scrollContainerX.scrollLeft = 0
+    }
+
+    if (this.scrollContainerY) {
+      this.scrollContainerY.scrollTop = 0
+    }
+  }
+
+  get scrollContainerX () {
+    return this.getScrollParent(this.$el.querySelector('.a-table-wrapper'), 'h')
+  }
+
+  get scrollContainerY () {
+    return this.getScrollParent(this.$el.querySelector('.a-table-wrapper'), 'v')
+  }
+
+  getScrollParent (node, direction) {
+    if (node == null) {
+      return null
+    }
+
+    if (direction === 'h' && (node.scrollWidth > node.clientWidth)) {
+      return node
+    }
+
+    if (direction === 'v' && (node.scrollHeight > node.clientHeight)) {
+      return node
+    }
+
+    return this.getScrollParent(node.parentNode, direction)
+  }
 }
 </script>
 
@@ -199,15 +284,26 @@ export default class ListView extends Mixins(ListViewMixin) {
 .listView {
   max-width: 100%;
   padding-top: .2rem; // unless, floating input labels might be cut
+}
+
+.a-table-wrapper {
+  max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
+  padding-bottom: 1rem;
+  cursor: grab;
 }
 
-.filters {
+.filters:not(:empty) {
   margin-left: 4px;
   margin-bottom: 2rem;
 }
 
+filters-below:not(:empty) {
+  margin-left: 4px;
+  margin-top: 2rem;
+}
+
 :deep(.a-table-row > :last-child) {
   width: 100%;
 }