@afeefa/vue-app 0.0.159 → 0.0.161

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

@@ -1 +1 @@
-0.0.159
+0.0.161

package/package.json

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

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

@@ -47,6 +47,7 @@
 
     <template #row="{ model, on }">
       <v-icon
+        v-if="$has.icon"
         :color="model.getIcon().color"
         size="1.5rem"
         class="mr-2"
@@ -70,9 +71,11 @@ import { FormFieldMixin } from '../FormFieldMixin'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 
 @Component({
-  props: ['value', 'q', 'listConfig']
+  props: ['value', 'q']
 })
 export default class FormFieldSearchSelect extends Mixins(FormFieldMixin) {
+  $hasOptions = ['icon']
+
   mounted () {
     if (this.validator) {
       this.$refs.input.validate()

package/src/components/index.js

@@ -4,7 +4,6 @@ import EditForm from './form/EditForm'
 import EditModal from './form/EditModal'
 import FormFieldCheckbox from './form/fields/FormFieldCheckbox'
 import FormFieldDate from './form/fields/FormFieldDate'
-import FormFieldTime from './form/fields/FormFieldTime'
 import FormFieldRadioGroup from './form/fields/FormFieldRadioGroup'
 import FormFieldRichTextArea from './form/fields/FormFieldRichTextArea'
 import FormFieldSearchSelect from './form/fields/FormFieldSearchSelect'
@@ -12,9 +11,11 @@ import FormFieldSelect from './form/fields/FormFieldSelect'
 import FormFieldSelect2 from './form/fields/FormFieldSelect2'
 import FormFieldText from './form/fields/FormFieldText'
 import FormFieldTextArea from './form/fields/FormFieldTextArea'
+import FormFieldTime from './form/fields/FormFieldTime'
 import NestedEditForm from './form/NestedEditForm'
 import ListFilterPage from './list/filters/ListFilterPage'
 import ListFilterSearch from './list/filters/ListFilterSearch'
+import ListFilterSearchSelect from './list/filters/ListFilterSearchSelect'
 import ListFilterSelect from './list/filters/ListFilterSelect'
 
 Vue.component('EditForm', EditForm)
@@ -33,3 +34,4 @@ Vue.component('FormFieldSelect2', FormFieldSelect2)
 Vue.component('ListFilterPage', ListFilterPage)
 Vue.component('ListFilterSearch', ListFilterSearch)
 Vue.component('ListFilterSelect', ListFilterSelect)
+Vue.component('ListFilterSearchSelect', ListFilterSearchSelect)

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

@@ -0,0 +1,138 @@
+<template>
+  <a-search-select
+    ref="select"
+    :listAction="listAction"
+    :selectedItems="selectedItems"
+    :getSearchInput="() => $refs.searchInput"
+    diffXControls="-.5rem"
+    diffYControls="-.5rem"
+    v-bind="$attrs"
+    @select="itemSelected"
+    @close="focusInput"
+    @beforeOpen="calculateSelectorSize"
+  >
+    <template #activator="{open}">
+      <a-text-field
+        ref="input"
+        :value="inputModel"
+        readonly
+        :label="label"
+        placeholder="Mausklick oder Space/↓-Taste zum Auswählen"
+        :clearable="!!selectedItems.length"
+        hide-details
+        @keydown.space.prevent="open"
+        @keydown.down.prevent="open"
+        @keydown.enter.prevent="open"
+        @clear="clear"
+      />
+    </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 }">
+      <v-icon
+        v-if="$has.icon"
+        :color="model.getIcon().color"
+        size="1.5rem"
+        class="mr-2"
+        v-on="on"
+        v-text="model.getIcon().icon"
+      />
+
+      <div
+        style="width:100%;"
+        v-on="on"
+      >
+        {{ model.getTitle() }}
+      </div>
+    </template>
+  </a-search-select>
+</template>
+
+
+<script>
+import { Component, Mixins } from '@a-vue'
+import { ListFilterMixin } from '../ListFilterMixin'
+import { ListAction } from '@a-vue/api-resources/ApiActions'
+
+@Component({
+  props: ['itemTitle', 'itemValue']
+})
+export default class ListFilterSearchSelect extends Mixins(ListFilterMixin) {
+  $hasOptions = ['icon']
+
+  items = []
+  inputModel = 'Alle'
+
+  async created () {
+    if (this.filter.value) {
+      const {models} = await this.createListAction()
+        .params({
+          [this.filter.name]: this.filter.value
+        })
+        .load()
+      if (models.length) {
+        this.inputModel = models[0].getTitle()
+      }
+    }
+  }
+
+  calculateSelectorSize () {
+    const input = this.$refs.input.$el
+    const inputWidth = input.offsetWidth
+    this.$refs.select.setWidth(`calc(${inputWidth}px + 1rem)`)
+  }
+
+  get selectedItems () {
+    return [this.filter.value].filter(a => a)
+  }
+
+  get listAction () {
+    return this.createListAction()
+  }
+
+  createListAction () {
+    const request = this.filter
+      .createOptionsRequest()
+    return ListAction.fromRequest(request)
+  }
+
+  itemSelected (model) {
+    if (model) {
+      this.filter.value = model.id
+      this.inputModel = model.getTitle()
+    } else {
+      this.filter.value = null
+    }
+    this.$emit('select', model)
+  }
+
+  focusInput () {
+    this.$refs.input.setFocus(true)
+  }
+
+  clear () {
+    this.itemSelected(null)
+
+    setTimeout(() => { // input clear sets internal model to ''
+      this.inputModel = 'Alle'
+    }, 100)
+  }
+}
+</script>

package/src/components/search-select/SearchSelectList.vue

@@ -73,7 +73,12 @@ export default class SearchSelectList extends Mixins(ListViewMixin) {
   }
 
   isSelected (model) {
-    return !!this.selectedItems.find(i => i.equals(model))
+    return !!this.selectedItems.find(i => {
+      if (i.equals) {
+        return i.equals(model)
+      }
+      return i === model // if list item is a string not a model e.g. in filters
+    })
   }
 
   _filtersInitialized () {

package/src-admin/components/model/ModelCount.vue

@@ -15,7 +15,7 @@ import { modelCountService } from './ModelCountService'
 import { SaveEvent } from '@a-vue/events'
 
 @Component({
-  props: ['action', 'field']
+  props: ['action', 'field', 'count']
 })
 export default class ModelCount extends Vue {
   countRequest = null
@@ -24,8 +24,12 @@ export default class ModelCount extends Vue {
   created () {
     this.$events.on(SaveEvent.STOP_SAVING, this.loadCount)
 
-    this.countRequest = modelCountService.addAction(this.action)
-    this.loadCount()
+    if (this.count) {
+      this.content = this.count
+    } else {
+      this.countRequest = modelCountService.addAction(this.action)
+      this.loadCount()
+    }
   }
 
   loadCount () {