@afeefa/vue-app 0.0.139 → 0.0.141

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

@@ -1 +1 @@
-0.0.139
+0.0.141

package/package.json

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

package/src/components/AContextMenu.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="contextEditor">
+    <!-- click.stop prevents possible surrounding v-input to focus -->
     <div
       class="activator"
-      @click="open"
+      @click.stop="open"
     >
       <slot name="activator">
         <a-icon class="contextButton">

package/src/components/ATextField.vue

@@ -11,7 +11,11 @@
     @click:clear="clear"
     @blur="sanitizeInternalValue"
     v-on="listeners"
-  />
+  >
+    <template #append>
+      <slot name="append" />
+    </template>
+  </v-text-field>
 </template>
 
 

package/src/components/form/FormFieldMixin.js

@@ -54,7 +54,7 @@ export class FormFieldMixin extends Vue {
 
     if (field.hasOptionsRequest()) {
       const request = field
-        .getOptionsRequest()
+        .createOptionsRequest()
         .addParams(this.optionRequestParams || {})
         .addFilters(filters)
 

package/src/components/form/fields/FormFieldSearchSelect.vue

@@ -95,7 +95,7 @@ export default class FormFieldSearchSelect extends Mixins(FormFieldMixin) {
 
   get listAction () {
     const request = this.field
-      .getOptionsRequest()
+      .createOptionsRequest()
       .addParams(this.optionRequestParams || {})
     return ListAction.fromRequest(request)
   }

package/src/components/list/ListViewMixin.js

@@ -2,6 +2,7 @@ import { Component, Vue, Watch } from '@a-vue'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 import { sleep } from '@a-vue/utils/timeout'
 import { ListViewModel } from '@afeefa/api-resources-client'
+import axios from 'axios'
 
 import { CurrentRouteFilterSource } from './CurrentRouteFilterSource'
 import { FilterSourceType } from './FilterSourceType'
@@ -11,7 +12,6 @@ import { FilterSourceType } from './FilterSourceType'
     'models', 'meta', // given, if already loaded
     'listAction',
     'filterHistoryKey',
-    'checkBeforeLoad',
     {
       filterSource: FilterSourceType.QUERY_STRING,
       loadOnlyIfKeyword: false,
@@ -27,6 +27,7 @@ export class ListViewMixin extends Vue {
   models_ = []
   meta_ = {}
   isLoading = false
+  cancelSource = null
 
   created () {
     this.init()
@@ -123,16 +124,6 @@ export class ListViewMixin extends Vue {
   }
 
   async load () {
-    if (this.checkBeforeLoad) {
-      const canLoad = await this.checkBeforeLoad()
-      if (!canLoad) {
-        if (this.meta_.used_filters) {
-          this.listViewModel.initFromUsedFilters(this.meta_.used_filters, this.meta_.count_search)
-        }
-        return
-      }
-    }
-
     if (this.loadOnlyIfKeyword && !this.filters.q.value) {
       this.models_ = []
       this.meta_ = {}
@@ -143,10 +134,16 @@ export class ListViewMixin extends Vue {
     this.isLoading = true
     this.$emit('update:isLoading', this.isLoading)
 
+    if (this.cancelSource) {
+      this.cancelSource.cancel()
+    }
+
+    this.cancelSource = axios.CancelToken.source()
     const request = this.listViewModel.getApiRequest()
 
     const {models, meta} = await ListAction
       .fromRequest(request)
+      .cancelSource(this.cancelSource)
       .dispatchGlobalLoadingEvents(this.events)
       .load()
 

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

@@ -1,16 +1,47 @@
 <template>
-  <a-text-field
-    ref="input"
-    v-model="filter.value"
-    :maxWidth="$attrs.maxWidth || maxWidth_"
-    :label="label || 'Suche'"
-    :debounce="500"
-    v-bind="$attrs"
-    clearable
-    hide-details
-    @keyup.esc="clearValue"
-    v-on="$listeners"
-  />
+  <div>
+    <a-text-field
+      ref="input"
+      v-model="filter.value"
+      :maxWidth="$attrs.maxWidth || maxWidth_"
+      :label="label_"
+      :debounce="500"
+      v-bind="$attrs"
+      clearable
+      hide-details
+      @keyup.esc="clearValue"
+      v-on="$listeners"
+    >
+      <template
+        v-if="hasQFieldOptions()"
+        #append
+      >
+        <a-context-menu>
+          <template #activator>
+            <!-- click.prevent brings hand cursor -->
+            <!-- mousedown.stop will prevent the input focused -->
+            <a-icon
+              @click.prevent
+              @mousedown.stop
+            >
+              {{ appendIcon }}
+            </a-icon>
+          </template>
+
+          <a-context-menu-item
+            v-for="option in qFieldOptions"
+            :key="option.title"
+            @click="filters.qfield.value = option.value"
+          >
+            <a-icon :class="{selected: filters.qfield.value === option.value}">
+              $checkIcon
+            </a-icon>
+            {{ option.title }}
+          </a-context-menu-item>
+        </a-context-menu>
+      </template>
+    </a-text-field>
+  </div>
 </template>
 
 
@@ -33,5 +64,39 @@ export default class ListFilterSearch extends Mixins(ListFilterMixin) {
   setFocus (force) {
     this.$refs.input.setFocus(force)
   }
+
+  get appendIcon () {
+    if (this.hasQFieldOptions()) {
+      return '$filterIcon'
+    }
+  }
+
+  hasQFieldOptions () {
+    return this.filters.qfield && this.filters.qfield.hasOptions()
+  }
+
+  get qFieldOptions () {
+    return this.filters.qfield.options
+  }
+
+  get label_ () {
+    const label = this.label || 'Suche'
+
+    if (this.hasQFieldOptions() && !this.filters.qfield.hasDefaultValueSet()) {
+      const selected = this.qFieldOptions.filter(o => o.value === this.filters.qfield.value)[0]
+      if (selected) {
+        return `${label} (${selected.title})`
+      }
+    }
+
+    return label
+  }
 }
 </script>
+
+
+<style lang="scss" scoped>
+.contextMenuItem > *:not(.selected) {
+  opacity: 0;
+}
+</style>

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

@@ -5,7 +5,7 @@
     :items="_items"
     itemText="itemTitle"
     itemValue="itemValue"
-    :clearable="filter.value !== filter.defaultValue"
+    :clearable="filter.hasDefaultValue() && !filter.hasDefaultValueSet()"
     :defaultValue="filter.defaultValue"
     hide-details
     v-bind="$attrs"
@@ -36,44 +36,13 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
     return this.$attrs.items || this.items || []
   }
 
-  get showNullOption () {
-    // either null is a selectable option, than it should be shown in the list
-    // or the default is null, so the list should offer a 'null' option for the unselected state
-    return this.filter.nullIsOption || this.filter.defaultValue === null
-  }
-
-  createOptions () {
-    const options = []
-
-    if (this.filter.allIsOption) {
-      options.push({
-        itemTitle: 'Alle',
-        itemValue: 'all'
-      })
-    } else if (this.showNullOption) {
-      options.push({
-        itemTitle: 'Alle',
-        itemValue: null
-      })
-    }
-
-    if (this.filter.noneIsOption) {
-      options.push({
-        itemTitle: 'Keine',
-        itemValue: 'none'
-      })
-    }
-
-    return options
-  }
-
   async loadRequestOptions () {
     const {models} = await ListAction
       .fromRequest(this.filter.createOptionsRequest())
       .load()
 
     return [
-      ...this.createOptions(),
+      ...this.getOptions(),
       ...models.map(model => {
         let itemValue
         if (this.itemValue) {
@@ -93,13 +62,13 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
 
   getOptions () {
     return [
-      ...this.createOptions(),
       ...this.filter.options
-        .filter(o => o !== null) // null is already set in options (if any)
-        .map(o => ({
-          itemTitle: o ? 'Ja' : 'Nein',
-          itemValue: o
-        }))
+        .map(o => {
+          return {
+            itemTitle: o.title,
+            itemValue: o.value
+          }
+        })
     ]
   }
 }

package/src-admin/components/App.vue

@@ -94,7 +94,7 @@
       top
       left
       class="loadingIndicator"
-      :isLoading="isLoading"
+      :isLoading="!!numLoadingRequests"
       :color="loaderColor"
     />
 
@@ -119,7 +119,7 @@
       >
         <sticky-header />
 
-        <router-view :class="{isLoading}" />
+        <router-view :class="{isLoading: !!numLoadingRequests}" />
       </v-container>
 
       <sticky-footer-container />
@@ -164,7 +164,7 @@ export default class App extends Vue {
 
   drawer = true
   closeMenuIcon = mdiBackburger
-  isLoading = false
+  numLoadingRequests = 0
 
   created () {
     this.$events.on(LoadingEvent.START_LOADING, this.startLoading)
@@ -200,11 +200,11 @@ export default class App extends Vue {
   }
 
   startLoading () {
-    this.isLoading = true
+    this.numLoadingRequests++
   }
 
   stopLoading () {
-    this.isLoading = false
+    this.numLoadingRequests--
   }
 
   toggleDrawer () {

package/src-admin/config/vuetify.js

@@ -12,6 +12,7 @@ import {
   mdiDelete,
   mdiDotsHorizontal,
   mdiDotsVertical,
+  mdiFilter,
   mdiLock,
   mdiLogoutVariant,
   mdiMagnify,
@@ -58,7 +59,8 @@ export default new Vuetify({
       printerIcon: mdiPrinter,
       euroSymbol: mdiCurrencyEur,
       paletteIcon: mdiPalette,
-      addIcon: mdiPlusCircle
+      addIcon: mdiPlusCircle,
+      filterIcon: mdiFilter
     }
   },
   breakpoint: {