@afeefa/vue-app 0.0.225 → 0.0.227

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

@@ -1 +1 @@
-0.0.225
+0.0.227

package/package.json

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

package/src/components/ASelect.vue

@@ -5,6 +5,7 @@
     :items="items_"
     :valueComparator="compareValues"
     :style="cwm_widthStyle"
+    :multiple="multiple"
     v-bind="{...$attrs, dense, outlined}"
     v-on="$listeners"
   />
@@ -17,7 +18,7 @@ import { Model } from '@afeefa/api-resources-client'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['validator', 'defaultValue', 'items', {dense: true, outlined: true}]
+  props: ['validator', 'defaultValue', 'items', {dense: true, outlined: true, multiple: false}]
 })
 export default class ASelect extends Mixins(ComponentWidthMixin) {
   items_ = []
@@ -34,7 +35,11 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
     const setValue = this.select.setValue
     this.select.setValue = value => {
       if (this.select.isClear) {
-        value = this.defaultValue || null
+        if (this.multiple) {
+          value = this.defaultValue || []
+        } else {
+          value = this.defaultValue || null
+        }
       }
       setValue(value)
     }
@@ -98,6 +103,14 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
 </script>
 
 
+<style lang="scss">
+.v-application .v-select-list .v-list-item__action {
+  margin: 0;
+  margin-right: .5rem;
+}
+
+</style>
+
 <style lang="scss" scoped>
 .v-text-field :deep(.v-input__icon--clear) { // always show clear icon, https://github.com/vuetifyjs/vuetify/pull/15876
   opacity: 1;

package/src/components/list/filters/ListFilterSelect.vue

@@ -5,7 +5,8 @@
     :items="_items"
     itemText="itemTitle"
     itemValue="itemValue"
-    :clearable="filter.hasDefaultValue() && !filter.hasDefaultValueSet()"
+    :multiple="filter.multiple"
+    :clearable="clearable"
     :defaultValue="filter.defaultValue"
     hide-details
     v-bind="$attrs"
@@ -25,6 +26,10 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
   items = null
 
   created () {
+    if (this.filter.multiple && !this.filter.value) {
+      this.filter.value = []
+    }
+
     if (this.filter.hasOptionsRequest()) {
       this.items = this.loadRequestOptions()
     } else if (this.filter.hasOptions()) {
@@ -32,6 +37,18 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
     }
   }
 
+  get clearable () {
+    if (this.multiple) {
+      return !!this.filter.value?.length
+    }
+
+    if (this.filter.hasDefaultValue()) {
+      return !this.filter.hasDefaultValueSet()
+    }
+
+    return !!this.filter.value
+  }
+
   get _items () {
     return this.$attrs.items || this.items || []
   }

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

@@ -32,6 +32,8 @@
         <div class="a-table-wrapper">
           <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,17 @@ 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,
+      getSubModels: {
+        default: () => model => []
+      }
+    }
+  ]
 })
 export default class ListView extends Mixins(ListViewMixin) {
   $hasOptions = ['icon', 'filters']
@@ -134,6 +184,20 @@ export default class ListView extends Mixins(ListViewMixin) {
   scrollTopStart = null
   scrollContainerY = null
 
+  selectedModels = []
+
+  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) {
@@ -308,4 +372,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>