@afeefa/vue-app 0.0.320 → 0.0.322

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

@@ -1 +1 @@
-0.0.320
+0.0.322

package/package.json

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

package/src/components/list/ListFilterBar.vue

@@ -99,6 +99,8 @@
             >
               Alles zurücksetzen
             </v-btn>
+
+            <slot name="append" />
           </a-row>
         </div>
       </div>

package/src/components/mixins/ComponentWidthMixin.js

@@ -42,7 +42,7 @@ export class ComponentWidthMixin extends Vue {
     }
 
     if (maxWidth) {
-      styles.push(`max-width: ${this.cwm_toPixel_(maxWidth)}; background: yellow`)
+      styles.push(`max-width: ${this.cwm_toPixel_(maxWidth)}`)
     }
 
     return styles.join(' ')

package/src/utils/deep-merge.js

@@ -0,0 +1,20 @@
+/**
+ * Recursively merges source into target.
+ * Returns a new object without mutating target or source.
+ * Arrays and non-plain-objects are overwritten (not merged).
+ */
+export function deepMerge (target, source) {
+  const result = { ...target }
+  for (const key of Object.keys(source)) {
+    if (
+      result[key] && typeof result[key] === 'object' && !Array.isArray(result[key]) &&
+      source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])
+    ) {
+      result[key] = deepMerge(result[key], source[key])
+    } else {
+      result[key] = source[key]
+    }
+  }
+  return result
+}
+

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

@@ -2,9 +2,17 @@
   <div>
     <a-context-menu>
       <template #activator>
-        <div class="contextButton">
-          {{ selectedColumns.length }}/{{ Object.keys(columns_).length }}
-        </div>
+        <v-btn
+          class="columnsButton"
+          title="Spalten wählen"
+        >
+          <v-icon color="#BBBBBB">
+            {{ mdiViewColumn }}
+          </v-icon>
+          <div class="ml-1">
+            {{ selectedColumns.length }}/{{ Object.keys(columns_).length }}
+          </div>
+        </v-btn>
       </template>
 
       <a-draggable-checkbox-group
@@ -24,21 +32,43 @@
         v-on="$listeners"
         @input="columnSelected"
       />
+
+      <v-btn
+        v-if="drag"
+        x-small
+        text
+        class="mt-2 reset-button"
+        @click="resetColumnOrder"
+      >
+        <v-icon
+          small
+          class="mr-1"
+        >
+          {{ mdiRestore }}
+        </v-icon>
+        Reihenfolge zurücksetzen
+      </v-btn>
     </a-context-menu>
   </div>
 </template>
 
 <script>
 import { Component, Vue } from '@a-vue'
+import { mdiRestore, mdiViewColumn } from '@mdi/js'
 
 @Component({
   props: ['columns', 'storageKey', {drag: false}]
 })
 export default class ListColumnSelector extends Vue {
+  mdiViewColumn = mdiViewColumn
+  mdiRestore = mdiRestore
+
   columns_ = {}
+  defaultColumns = {}
   selectedColumns = []
 
   created () {
+    this.defaultColumns = JSON.parse(JSON.stringify(this.columns))
     this.loadColumnConfiguration()
     this.saveColumnConfiguration()
   }
@@ -54,9 +84,18 @@ export default class ListColumnSelector extends Vue {
   }
 
   columnSelected () {
-    for (const key in this.columns) {
-      this.columns[key].visible = this.selectedColumns.includes(key)
+    for (const key in this.columns_) {
+      this.columns_[key].visible = this.selectedColumns.includes(key)
     }
+    this.$emit('update:columns', this.columns_)
+    this.saveColumnConfiguration()
+  }
+
+  resetColumnOrder () {
+    this.columns_ = JSON.parse(JSON.stringify(this.defaultColumns))
+    this.selectedColumns = Object.keys(this.columns_)
+      .filter(k => this.columns_[k].visible)
+    this.$emit('update:columns', this.columns_)
     this.saveColumnConfiguration()
   }
 
@@ -126,8 +165,19 @@ export default class ListColumnSelector extends Vue {
 
 
 <style lang="scss" scoped>
-.contextButton {
-  font-size: .7rem;
-  cursor: pointer;
+.columnsButton {
+  padding: 0 8px 0 5px !important;
+  height: 2.2rem !important;
+
+  div {
+    font-size: .8rem;
+    color: #666666;
+  }
+}
+
+.reset-button {
+  font-size: .75rem;
+  text-transform: none;
+  letter-spacing: normal;
 }
 </style>