@afeefa/vue-app 0.0.302 → 0.0.304

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

@@ -1 +1 @@
-0.0.302
+0.0.304

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.302",
+  "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/AfeefaAdmin.js

@@ -7,6 +7,7 @@ import { eventBusPlugin } from '@a-vue/plugins/event-bus/EventBusPlugin'
 import { hasOptionsPlugin } from '@a-vue/plugins/has-options/HasOptionsPlugin'
 import { timeout } from '@a-vue/utils/timeout'
 import Vue from 'vue'
+import VueShortKey from 'vue-shortkey'
 
 import { adminConfig } from './config/AdminConfig'
 import routeConfigPlugin from './config/routing'
@@ -100,6 +101,7 @@ export class AfeefaAdmin {
     // plugins
     Vue.use(hasOptionsPlugin)
     Vue.use(eventBusPlugin)
+    Vue.use(VueShortKey)
 
     // load auth resources
     if (this._authService) {

package/src-admin/components/App.vue

@@ -6,7 +6,29 @@
       @click="closeFloatingSidebars"
     />
 
-    <div class="main-layout">
+    <v-overlay
+      v-if="HelpPage && shortcutInfoVisible"
+      :opacity=".8"
+      fixed
+      @click="shortcutInfoVisible = false"
+    >
+      <component
+        :is="HelpPage"
+        v-if="HelpPage"
+        v-shortkey="['esc']"
+        @shortkey.native="shortcutInfoVisible = false"
+        @close="shortcutInfoVisible = false"
+      />
+    </v-overlay>
+
+    <div
+      v-shortkey="{
+        help: ['ctrl', 'space'],
+        zen: ['ctrl', 'shift', 'z']
+      }"
+      class="main-layout"
+      @shortkey="handleShortkey"
+    >
       <navigation-bar
         :has="$has"
         :class="{showDevSkin}"
@@ -88,6 +110,9 @@ export default class App extends Vue {
   sidebarsFloating = false
   hasFloatingInformationBar = false
 
+  shortcutInfoVisible = false
+  HelpPage = adminConfig.app.components.HelpPage || null
+
   autoLogoutChannel = new BroadcastChannel('auth.autologout')
   autoLogoutStartSeconds = 0
   autoLogoutStartRemainingSeconds = 0
@@ -135,6 +160,14 @@ export default class App extends Vue {
     this.$emit('appLoaded')
   }
 
+  handleShortkey (event) {
+    if (event.srcKey === 'help') {
+      this.shortcutInfoVisible = !this.shortcutInfoVisible
+    } else {
+      sidebarService.toggleAll()
+    }
+  }
+
   get autoLogoutMessage () {
     return `Sie werden in ${this.autoLogoutRemainingSeconds} Sekunden abgemeldet.`
   }

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/components/sidebar/SidebarService.js

@@ -87,6 +87,19 @@ class SidebarService {
     this.setRailInformation(true)
   }
 
+  toggleAll () {
+    const visible = !this.navigation
+    this.setNavigation(visible)
+
+    if (this.information) {
+      if (this.mobile) {
+        this.setRailInformation(true)
+      } else {
+        this.setRailInformation(!visible)
+      }
+    }
+  }
+
   get hasFloatingOverlay () {
     if (!this.mobile) {
       return false

package/src-admin/config/AdminConfig.js

@@ -12,7 +12,8 @@ class AdminConfig {
 
     components: {
       Splash: null,
-      SidebarMenu: null
+      SidebarMenu: null,
+      HelpPage: null
     },
 
     icons: {},

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;
+  }
+}