@afeefa/vue-app 0.0.226 → 0.0.228

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

@@ -1 +1 @@
-0.0.226
+0.0.228

package/package.json

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

package/src/components/ARadioGroup.vue

@@ -7,8 +7,11 @@
     v-bind="$attrs"
     @change="$emit('input', $event)"
   >
-    <template v-for="option in options_">
+    <slot v-if="$slots.default" />
+
+    <template v-else>
       <v-radio
+        v-for="option in options_"
         :key="option.itemText"
         :value="option.itemValue"
       >

package/src-admin/components/index.js

@@ -15,12 +15,9 @@ import EditFormButtons from './form/EditFormButtons'
 import RemoveButton from './form/RemoveButton'
 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'
+import ListConfig from './list/ListConfig'
 import ListView from './list/ListView'
 import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
@@ -30,11 +27,8 @@ import Start from './Start'
 import StickyFooter from './StickyFooter'
 import CollapseTransition from './transitions/CollapseTransition'
 
-Vue.component('ListCard', ListCard)
 Vue.component('ListColumnHeader', ListColumnHeader)
-Vue.component('ListContent', ListContent)
-Vue.component('ListMeta', ListMeta)
-Vue.component('ListTitle', ListTitle)
+Vue.component('ListConfig', ListConfig)
 Vue.component('ListView', ListView)
 Vue.component('ListColumnSelector', ListColumnSelector)
 

package/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>

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

@@ -29,9 +29,11 @@
       </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="$has.icon">
                 <slot name="header-icon" />
               </div>
@@ -39,29 +41,67 @@
               <slot name="header-table" />
             </a-table-header>
 
-            <a-table-row
-              v-for="(model, index) in models_"
-              :key="model.id"
-              v-flying-context-trigger="hasFlyingContext"
-              :class="getRowClasses(model)"
-              v-bind="getRowAttributes(model)"
-              v-on="getRowListeners(model)"
-              @click="emitFlyingContext(model)"
-            >
-              <v-icon
-                v-if="$has.icon"
-                :color="model.getIcon().color"
-                size="1.2rem"
-                v-text="model.getIcon().icon"
-              />
-
-              <slot
-                name="model-table"
-                :model="model"
-                :index="index"
-                :filters="filters"
-              />
-            </a-table-row>
+            <template v-for="(model, index) in models_">
+              <a-table-row
+                :key="'model' + model.id"
+                v-flying-context-trigger="hasFlyingContext"
+                :class="[
+                  getRowClasses(model),
+                  { hasSubModels: !!getSubModels(model).length }
+                ]"
+                v-bind="getRowAttributes(model)"
+                v-on="getRowListeners(model)"
+                @click="emitFlyingContext(model)"
+              >
+                <div
+                  v-if="_bulkSelection"
+                  class="pr-2"
+                >
+                  <a-checkbox
+                    :value="isSelected(model)"
+                    hide-details
+                    class="pa-0"
+                    @input="selectClient(model)"
+                  />
+                </div>
+
+                <v-icon
+                  v-if="$has.icon"
+                  :color="model.getIcon().color"
+                  size="1.2rem"
+                  v-text="model.getIcon().icon"
+                />
+
+                <slot
+                  name="model-table"
+                  :model="model"
+                  :index="index"
+                  :filters="filters"
+                />
+              </a-table-row>
+
+              <a-table-row
+                v-for="(subModel, subIndex) in getSubModels(model)"
+                :key="subModel.id"
+                small
+                :class="{
+                  ...getRowClasses(model),
+                  last: subIndex === getSubModels(model).length - 1,
+                  subModel: true
+                }"
+              >
+                <div v-if="_bulkSelection" />
+
+                <div v-if="$has.icon" />
+
+                <slot
+                  name="subModel-table"
+                  :model="subModel"
+                  :index="subIndex"
+                  :filters="filters"
+                />
+              </a-table-row>
+            </template>
           </a-table>
         </div>
       </template>
@@ -122,7 +162,18 @@ import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 import { LoadingEvent } from '@a-vue/events'
 
 @Component({
-  props: ['rowAttributes', 'rowClasses', 'rowListeners']
+  props: [
+    'rowAttributes',
+    'rowClasses',
+    'rowListeners',
+    {
+      bulkSelection: false,
+      dragMode: 'grab',
+      getSubModels: {
+        default: () => model => []
+      }
+    }
+  ]
 })
 export default class ListView extends Mixins(ListViewMixin) {
   $hasOptions = ['icon', 'filters']
@@ -134,6 +185,39 @@ export default class ListView extends Mixins(ListViewMixin) {
   scrollTopStart = null
   scrollContainerY = null
 
+  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)
+  }
+
+  selectClient (model) {
+    if (!this.isSelected(model)) {
+      this.selectedModels.push(model)
+    } else {
+      this.selectedModels = this.selectedModels.filter(m => m !== model)
+    }
+  }
+
   @Watch('isLoading')
   isLoadingChanged () {
     if (this.events) {
@@ -205,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')
 
@@ -288,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) {
@@ -308,4 +399,19 @@ filters-below:not(:empty) {
 .a-table-row.clickable {
   cursor: pointer;
 }
+
+:deep(.a-table-row.hasSubModels) > * {
+  padding-bottom: 0;
+  border: none;
+}
+
+:deep(.a-table-row.small.subModel) > * {
+  padding-top: 0;
+  color: gray;
+}
+
+:deep(.a-table-row.small.subModel):not(.last) > * {
+  border: none;
+  padding-bottom: 0;
+}
 </style>

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

@@ -1,12 +0,0 @@
-<template>
-  <div class="listCard">
-    <slot />
-  </div>
-</template>
-
-
-<style lang="scss" scoped>
-.listCard {
-  margin-bottom: 1rem;
-}
-</style>

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

@@ -1,13 +0,0 @@
-<template>
-  <div class="listContent">
-    <slot />
-  </div>
-</template>
-
-
-<style lang="scss" scoped>
-.listContent {
-  background: #F4F4F4;
-  padding: .5rem;
-}
-</style>

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

@@ -1,13 +0,0 @@
-<template>
-  <div class="listMeta">
-    <slot />
-  </div>
-</template>
-
-
-<style lang="scss" scoped>
-.listMeta {
-  color: gray;
-  font-size: .7rem;
-}
-</style>

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

@@ -1,24 +0,0 @@
-<template>
-  <router-link
-    v-if="link"
-    :to="link"
-  >
-    <h3>
-      <slot />
-    </h3>
-  </router-link>
-
-  <h3 v-else>
-    <slot />
-  </h3>
-</template>
-
-<script>
-import { Component, Vue } from '@a-vue'
-
-@Component({
-  props: ['link']
-})
-export default class ListTitle extends Vue {
-}
-</script>