@afeefa/vue-app 0.0.257 → 0.0.258

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

@@ -1 +1 @@
-0.0.257
+0.0.258

package/package.json

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

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,7 +59,7 @@ export default class appBarTitle extends Vue {
     return document.getElementById('appBarTitleContainer')
   }
 
-  goToLastNamedRoute () {
+  getLastNamedRoute () {
     const currentRouteName = this.$route.name
     const historyStack = routeConfigPlugin.getRouteHistory()
 
@@ -67,12 +67,21 @@ export default class appBarTitle extends Vue {
     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
+        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,146 @@
+<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"
+        :rules="validationRules"
+        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',
+    'customValidator',
+    'additionalRules',
+    {
+      getTitle: {type: Function, default: m => m.getTitle()},
+      getSubtitle: {type: Function, default: m => m.getSubtitle()}
+    }]
+})
+export default class SearchSelectNavigator extends Vue {
+  $hasOptions = ['icon']
+
+  mounted () {
+    if (this.validator) {
+      this.$refs.input.validate()
+    }
+  }
+
+  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)
+  }
+
+  get validator () {
+    const validator = this.customValidator
+    if (this.additionalRules) {
+      validator.setAdditionalRules(this.additionalRules)
+    }
+    return validator
+  }
+
+  get validationRules () {
+    const label = this.label
+    return (this.validator && this.validator.getRules(label)) || []
+  }
+}
+</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)