@afeefa/vue-app 0.0.303 → 0.0.304

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

@@ -1 +1 @@
-0.0.303
+0.0.304

package/package.json

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

package/src/components/ARadioGroup.vue

@@ -94,6 +94,7 @@ export default class ARadioGroup extends Vue {
 <style lang="scss" scoped>
 .v-input {
   margin: 0;
+  padding: 0;
 
   &.alignTop .v-radio {
     align-items: flex-start;

package/src/components/list/ListFilterBar.vue

@@ -1,56 +1,106 @@
 <template>
   <div class="listFilterBar">
     <a-row>
-      <list-filter-search2
-        label="Suche"
-        maxWidth="220"
-        focus
-        :translateOption="title => {
-          return title
-            .replace('Sprint', $t('SPRINT'))
-            .replace('Kunde', $t('KUNDE'))
-        }"
-      />
-
-      <div
+      <v-btn
         class="filterToggle"
         @click="collapsed = !collapsed"
       >
         <a-row>
-          <v-icon
-            class="mr-2"
-            color="#CCCCCC"
-          >
+          <v-icon color="#BBBBBB">
             $filterIcon
           </v-icon>
 
-          <div>Filter {{ countSelectedFilters }}/{{ countFilters }}</div>
+          <div>{{ countSelectedFilters }}/{{ countFilters }}</div>
 
           <v-icon
-            class="contextButton"
+            class="contextButton ml-n1"
             size="2rem"
           >
             {{ collapsed ? '$caretRightIcon' : '$caretDownIcon' }}
           </v-icon>
         </a-row>
-      </div>
+      </v-btn>
+
+      <list-filter-search2
+        label="Suche"
+        maxWidth="220"
+        focus
+        :translateOption="title => {
+          return title
+            .replace('Sprint', $t('SPRINT'))
+            .replace('Kunde', $t('KUNDE'))
+        }"
+      />
     </a-row>
 
     <collapse-transition>
       <div
         v-show="!collapsed"
-        class="content"
+        class="mt-4"
       >
-        <a-grid
-          ref="filterGrid"
-          gap="3"
-          cols="3"
-          even
-          class="mt-4 pa-4"
+        <a-row
+          v-if="hasShortcuts"
+          gap="1"
+          class="shortcuts mb-2"
+        >
+          <slot name="shortcuts" />
+        </a-row>
+
+        <div
           style="background: #F4F4F4;"
+          class="pa-4"
         >
-          <slot />
-        </a-grid>
+          <a-grid
+            ref="filterGrid"
+            gap="3"
+            cols="3"
+            even
+          >
+            <slot />
+          </a-grid>
+
+          <a-row
+            gap="6"
+            class="mt-3"
+          >
+            <list-filter-page :has="{page: false}" />
+
+            <a-radio-group
+              v-model="dragMode"
+              row
+              hide-details
+              @input="updateList"
+            >
+              <template #default>
+                <v-radio value="grab">
+                  <template #label>
+                    <a-icon
+                      :icon="{icon: grabIcon}"
+                      class="ml-n1 mr-1"
+                    /> Liste verschieben
+                  </template>
+                </v-radio>
+                <v-radio value="select">
+                  <template #label>
+                    <a-icon
+                      :icon="{icon: selectIcon}"
+                      class="ml-n1 mr-1"
+                    /> Text auswählen
+                  </template>
+                </v-radio>
+              </template>
+            </a-radio-group>
+
+            <v-btn
+              v-if="countSelectedFilters"
+              small
+              class="ml-n4"
+              @click="resetFilters"
+            >
+              Alles zurücksetzen
+            </v-btn>
+          </a-row>
+        </div>
       </div>
     </collapse-transition>
 
@@ -70,7 +120,7 @@
       </v-chip>
     </div>
 
-    <list-filter-page />
+    <list-filter-page :has="{page_size: false}" />
   </div>
 </template>
 
@@ -78,12 +128,17 @@
 <script>
 import { Component, Vue } from '@a-vue'
 import { ListFilterEvent } from '@a-vue/events'
+import { mdiTextRecognition, mdiHandBackRight } from '@mdi/js'
 
 @Component
 export default class ListFilterBar extends Vue {
   collapsed = true
   selectedFilters = []
 
+  grabIcon = mdiHandBackRight
+  selectIcon = mdiTextRecognition
+  dragMode = 'grab'
+
   created () {
     this.$events.on(ListFilterEvent.CHANGE, this.listFilterChanged)
   }
@@ -112,7 +167,7 @@ export default class ListFilterBar extends Vue {
   }
 
   get countSelectedFilters () {
-    const coreFilters = ['q', 'qfield', 'page', 'page_size']
+    const coreFilters = ['q', 'qfield', 'page']
     let minus = 0
     for (const name of coreFilters) {
       if (!this.filters[name].hasDefaultValueSet()) {
@@ -145,20 +200,36 @@ export default class ListFilterBar extends Vue {
     }
   }
 
+  resetFilters () {
+    this.listView.resetFilters()
+  }
+
   resetFilter (name) {
     this.listView.resetFilter(name)
     this.setSelectedFilter(name, null, null)
   }
+
+  get hasShortcuts () {
+    return this.$slots.shortcuts && !!this.$slots.shortcuts.length
+  }
+
+  updateList () {
+    this.listView.setDragMode(this.dragMode)
+  }
 }
 </script>
 
 
 <style lang="scss" scoped>
 .filterToggle {
-  cursor: pointer;
-  background: #F4F4F4;
-  padding: 0 4px;
-  margin-left: .5rem;
+  padding: 0 0 0 5px !important;
+  margin-right: 10px;
+  height: 2.5rem !important;
+
+  div {
+    font-size: .8rem;
+    color: #666666;
+  }
 }
 
 .chip-container {
@@ -170,9 +241,4 @@ export default class ListFilterBar extends Vue {
 ::v-deep(.aPagination) {
   margin-top: 14px;
 }
-
-::v-deep(.pageSizeSelect) {
-  margin-top: 15px;
-}
-
 </style>

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

@@ -84,9 +84,12 @@ export default class ListFilterSearch2 extends Mixins(ListFilterMixin) {
     max-width: unset;
   }
 
+  .v-input--radio-group__input {
+    gap: 8px;
+  }
+
   .v-radio {
-    margin-right: 14px !important;
-    margin-top: -4px;
+    margin-right: 6px !important;
   }
 
   .v-input--selection-controls__input {

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

@@ -391,7 +391,7 @@ export default class ListView extends Mixins(ListViewMixin) {
 
 .filters:not(:empty) {
   margin-left: 4px;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 }
 
 filters-below:not(:empty) {

package/src-admin/styles.scss

@@ -115,3 +115,13 @@ html {
     row-gap: 4px * $i;
   }
 }
+
+@media print {
+  #navigation-bar {
+    display: none !important;
+  }
+
+  #information-bar {
+    display: none;
+  }
+}