@afeefa/vue-app 0.0.160 → 0.0.162

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

@@ -1 +1 @@
-0.0.160
+0.0.162

package/package.json

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

package/src/components/form/EditForm.vue

@@ -60,7 +60,7 @@ export default class EditForm extends Vue {
     if (this.createModelToEdit) {
       this.modelToEdit = this.createModelToEdit(this.model)
     } else if (this.model) {
-      this.modelToEdit = this.model.cloneForEdit()
+      this.modelToEdit = this.model.clone()
     }
     this.lastJson = this.json
 

package/src/components/form/EditModal.vue

@@ -99,6 +99,10 @@ export default class EditModal extends Vue {
       this.$emit('open')
     } else {
       this.$emit('close')
+
+      setTimeout(() => { // allow client to conditionally remove <edit-modal> using v-if not before inner dialog has been removed from dom
+        this.$emit('destroyed')
+      }, 100)
     }
   }
 

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/FlyingContextContainer.vue

@@ -34,6 +34,7 @@ export default class FlyingContextContainer extends Vue {
   visible = false
   oldOverflowY = null
   isClosing = false
+  lastScrollbarWidth = 0
 
   mounted () {
     const mutationWatcher = new MutationObserver(this.domChanged)
@@ -63,9 +64,8 @@ export default class FlyingContextContainer extends Vue {
   sizeChanged () {
     if (this.visible && !this.isClosing) { // do not set size if it is already closing
       this.$nextTick(() => {
-        const scrollbarWidth = this.getScrollbarWidth()
         const el = document.documentElement
-        const newSize = el.offsetWidth - this.$el.offsetWidth + scrollbarWidth
+        const newSize = el.offsetWidth - this.$el.offsetWidth + this.lastScrollbarWidth
         this.$el.style.left = newSize + 'px'
       })
     }
@@ -80,13 +80,13 @@ export default class FlyingContextContainer extends Vue {
     if (this.visible) {
       const style = getComputedStyle(el)
       this.oldOverflowY = style.overflowY
-      const scrollbarWidth = this.getScrollbarWidth()
+      this.lastScrollbarWidth = this.getScrollbarWidth()
       setTimeout(() => {
         el.style.overflowY = 'hidden'
-        el.style.marginRight = scrollbarWidth + 'px'
+        el.style.marginRight = this.lastScrollbarWidth + 'px'
       }, 100)
 
-      this.$el.style.left = (el.offsetWidth - this.$el.offsetWidth + scrollbarWidth) + 'px'
+      this.$el.style.left = (el.offsetWidth - this.$el.offsetWidth + this.lastScrollbarWidth) + 'px'
     } else {
       el.style.overflowY = this.oldOverflowY
       el.style.marginRight = 0