@afeefa/vue-app 0.0.257 → 0.0.260

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

@@ -1 +1 @@
-0.0.257
+0.0.260

package/package.json

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

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

@@ -85,7 +85,7 @@ import { ListAction, GetAction } from '@a-vue/api-resources/ApiActions'
 import { Category } from '@/models'
 
 @Component({
-  props: ['itemTitle', 'itemValue', {
+  props: ['itemTitle', 'itemValue', 'optionRequestFilters', {
     selectedKey: 'id',
     getTitle: {type: Function, default: m => m.getTitle()},
     getSubtitle: {type: Function, default: m => m.getSubtitle()},
@@ -145,6 +145,7 @@ export default class ListFilterSearchSelect extends Mixins(ListFilterMixin) {
   createListAction () {
     const request = this.filter
       .createOptionsRequest()
+      .addFilters(this.optionRequestFilters || {})
     return ListAction.fromRequest(request)
   }
 

package/src-admin/components/app/AppBarTitle.vue

@@ -1,7 +1,7 @@
 <template>
   <a-row gap="4">
     <v-btn
-      v-if="back"
+      v-if="back && getLastNamedRoute()"
       fab
       x-small
       color="#F4F4F4"
@@ -59,20 +59,29 @@ export default class appBarTitle extends Vue {
     return document.getElementById('appBarTitleContainer')
   }
 
-  goToLastNamedRoute () {
-    const currentRouteName = this.$route.name
+  getLastNamedRoute () {
+    const currentRoutePath = this.$route.path
     const historyStack = routeConfigPlugin.getRouteHistory()
 
     // Durchlaufe die Historie rückwärts, um die letzte benannte Route zu finden, die sich vom aktuellen Namen unterscheidet
     for (let i = historyStack.length - 2; i >= 0; i--) {
       const route = historyStack[i]
-      if (route.name && route.name !== currentRouteName) {
-        this.$router.push({ name: route.name, params: route.params })
-        routeConfigPlugin.removeFromRouteHistoryAfterIndex(i)
-        return
+      if (route.path && route.path !== currentRoutePath) {
+        return {
+          route,
+          index: i
+        }
       }
     }
   }
+
+  goToLastNamedRoute () {
+    const routeInfo = this.getLastNamedRoute()
+    if (routeInfo) {
+      this.$router.push({ name: routeInfo.route.name, params: routeInfo.route.params })
+      routeConfigPlugin.removeFromRouteHistoryAfterIndex(routeInfo.index)
+    }
+  }
 }
 </script>
 

package/src-admin/components/controls/SearchSelectNavigator.vue

@@ -0,0 +1,124 @@
+<template>
+  <a-search-select
+    ref="select"
+    :listAction="listAction"
+    :getSearchInput="() => $refs.searchInput"
+    diffXControls="-.5rem"
+    diffYControls="-.5rem"
+    v-bind="$attrs"
+    @select="itemSelected"
+    @close="focusInput"
+    @beforeOpen="calculateSelectorSize"
+  >
+    <template #activator="{open}">
+      <a-text-field
+        ref="input"
+        readonly
+        :label="label"
+        placeholder="Mausklick oder Space/↓-Taste zum Auswählen"
+        :clearable="false"
+        appendIcon="$dropdown"
+        @keydown.space.prevent="open"
+        @keydown.down.prevent="open"
+        @keydown.enter.prevent="open"
+      />
+    </template>
+
+    <template #filters="{onSearchInputKey}">
+      <a-row gap="4">
+        <list-filter-search
+          ref="searchInput"
+          :focus="true"
+          tabindex="1"
+          maxWidth="100%"
+          :label="'Suche ' + label"
+          v-on="onSearchInputKey"
+        />
+
+        <list-filter-page
+          :has="{page_size: false, page_number: true}"
+          :totalVisible="0"
+        />
+      </a-row>
+    </template>
+
+    <template #row="{ model, on }">
+      <div
+        v-if="$has.icon"
+        class="pr-0"
+      >
+        <v-icon
+          :color="model.getIcon().color"
+          size="1.5rem"
+          class="mr-2"
+          v-on="on"
+          v-text="model.getIcon().icon"
+        />
+      </div>
+
+      <div
+        style="width:100%;"
+        v-on="on"
+      >
+        {{ getTitle(model) }}
+        <div
+          v-if="getSubtitle(model)"
+          class="grey--text mt-n1"
+        >
+          {{ getSubtitle(model) }}
+        </div>
+      </div>
+    </template>
+  </a-search-select>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { ListAction } from '@a-vue/api-resources/ApiActions'
+
+@Component({
+  props: [
+    'modelType',
+    'label',
+    'fields',
+    {
+      getTitle: {type: Function, default: m => m.getTitle()},
+      getSubtitle: {type: Function, default: m => m.getSubtitle()}
+    }]
+})
+export default class SearchSelectNavigator extends Vue {
+  $hasOptions = ['icon']
+
+  calculateSelectorSize () {
+    const input = this.$refs.input.$el
+    const inputWidth = input.offsetWidth
+    this.$refs.select.setWidth(`calc(${inputWidth}px + 1rem)`)
+  }
+
+  get listAction () {
+    return new ListAction()
+      .action({
+        resourceType: this.modelType,
+        actionName: 'list'
+      })
+      .filters()
+      .fields(this.fields)
+  }
+
+  itemSelected (model) {
+    this.$router.push(model.getLink('detail'))
+  }
+
+  focusInput () {
+    this.$refs.input.setFocus(true)
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.selectedItem,
+:deep(.a-table-row) {
+  cursor: pointer;
+}
+</style>

package/src-admin/components/index.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import AppBarButton from './app/AppBarButton'
 import AppBarTitle from './app/AppBarTitle'
 import CollapsibleSection from './CollapsibleSection'
+import SearchSelectNavigator from './controls/SearchSelectNavigator'
 import DetailColumn from './detail/DetailColumn'
 import DetailContent from './detail/DetailContent'
 import DetailMeta from './detail/DetailMeta'
@@ -50,6 +51,8 @@ Vue.component('DetailColumn', DetailColumn)
 Vue.component('AppBarButton', AppBarButton)
 Vue.component('AppBarTitle', AppBarTitle)
 
+Vue.component('SearchSelectNavigator', SearchSelectNavigator)
+
 Vue.component('HSeparator', HSeparator)
 Vue.component('CollapsibleSection', CollapsibleSection)
 Vue.component('CollapseTransition', CollapseTransition)