@afeefa/vue-app 0.0.298 → 0.0.300

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

@@ -1 +1 @@
-0.0.298
+0.0.300

package/package.json

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

package/src/components/ADatePicker.vue

@@ -81,6 +81,11 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     this.setFocus()
   }
 
+  @Watch('formattedDate')
+  formattedDateChanged () {
+    this.$emit('displayedDateChanged', this.formattedDate)
+  }
+
   get clearable () {
     if (this.validator && this.validator.getParam('filled')) {
       return false

package/src/components/APagination.vue

@@ -1,5 +1,8 @@
 <template>
-  <a-row gap="3">
+  <a-row
+    gap="3"
+    class="aPagination"
+  >
     <v-pagination
       ref="pagination"
       class="pagination-nav"
@@ -35,6 +38,7 @@ export default class APagination extends Vue {
 <style scoped lang="scss">
 :deep(.v-pagination) {
   gap: .3rem;
+
   .v-pagination__item,
   .v-pagination__more,
   .v-pagination__navigation {

package/src/components/ASelect.vue

@@ -8,6 +8,7 @@
     :multiple="multiple"
     v-bind="{...$attrs, dense, outlined}"
     v-on="$listeners"
+    @change="selectedItemTitleChanged"
   />
 </template>
 
@@ -47,6 +48,14 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
     this.init()
   }
 
+  @Watch('$attrs.value')
+  selectedItemTitleChanged () {
+    this.$nextTick(() => {
+      const title = this.$refs.select?.selectedItems[0]?.itemTitle
+      this.$emit('selectedItemTitleChanged', title)
+    })
+  }
+
   @Watch('items')
   itemsChanged () {
     this.init()
@@ -86,6 +95,8 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
       this.items_ = items
     }
 
+    this.selectedItemTitleChanged()
+
     if (this.validator) {
       this.$nextTick(() => {
         const valid = this.select.validate(true)
@@ -95,6 +106,8 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
           this.select.selectedItems = [{
             itemTitle: 'Ungültiger Wert'
           }]
+
+          this.selectedItemTitleChanged()
         }
       })
     }

package/src/components/index.js

@@ -21,6 +21,7 @@ import ListFilterSearch from './list/filters/ListFilterSearch'
 import ListFilterSearch2 from './list/filters/ListFilterSearch2'
 import ListFilterSearchSelect from './list/filters/ListFilterSearchSelect'
 import ListFilterSelect from './list/filters/ListFilterSelect'
+import ListFilterBar from './list/ListFilterBar'
 
 Vue.component('EditForm', EditForm)
 Vue.component('NestedEditForm', NestedEditForm)
@@ -43,3 +44,4 @@ Vue.component('ListFilterSearch2', ListFilterSearch2)
 Vue.component('ListFilterSelect', ListFilterSelect)
 Vue.component('ListFilterSearchSelect', ListFilterSearchSelect)
 Vue.component('ListFilterDate', ListFilterDate)
+Vue.component('ListFilterBar', ListFilterBar)

package/src/components/list/ListFilterBar.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="listFilterBar">
+    <a-row>
+      <list-filter-search2
+        label="Suche"
+        maxWidth="220"
+        :translateOption="title => {
+          return title
+            .replace('Sprint', $t('SPRINT'))
+            .replace('Kunde', $t('KUNDE'))
+        }"
+      />
+
+      <div
+        class="filterToggle"
+        @click="collapsed = !collapsed"
+      >
+        <a-row>
+          <v-icon
+            class="mr-2"
+            color="#CCCCCC"
+          >
+            $filterIcon
+          </v-icon>
+
+          <div>Filter {{ countSelectedFilters }}/{{ countFilters }}</div>
+
+          <v-icon
+            class="contextButton"
+            size="2rem"
+          >
+            {{ collapsed ? '$caretRightIcon' : '$caretDownIcon' }}
+          </v-icon>
+        </a-row>
+      </div>
+    </a-row>
+
+    <collapse-transition>
+      <div
+        v-show="!collapsed"
+        class="content"
+      >
+        <a-grid
+          ref="filterGrid"
+          gap="3"
+          cols="3"
+          even
+          class="mt-4 pa-4"
+          style="background: #F4F4F4;"
+        >
+          <slot />
+        </a-grid>
+      </div>
+    </collapse-transition>
+
+    <div
+      v-if="collapsed"
+      :class="['chip-container', selectedFilters.length ? 'mt-4' : '']"
+    >
+      <v-chip
+        v-for="filter in selectedFilters"
+        :key="filter.name"
+        color="#EEEEEE"
+        text-color="#666666"
+        close
+        @click:close="resetFilter(filter.name)"
+      >
+        <div>{{ filter.label }}: <b>{{ filter.value }}</b></div>
+      </v-chip>
+    </div>
+
+    <list-filter-page />
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { ListFilterEvent } from '@a-vue/events'
+
+@Component
+export default class ListFilterBar extends Vue {
+  collapsed = true
+  selectedFilters = []
+
+  created () {
+    this.$events.on(ListFilterEvent.CHANGE, this.listFilterChanged)
+  }
+
+  destroyed () {
+    this.$events.off(ListFilterEvent.CHANGE, this.listFilterChanged)
+  }
+
+  get listView () {
+    let parent = this.$parent
+    while (parent) {
+      if (parent.LIST_VIEW) {
+        return parent
+      }
+      parent = parent.$parent
+    }
+    return null
+  }
+
+  get filters () {
+    return this.listView.filters
+  }
+
+  get countFilters () {
+    return this.$slots.default.filter(vnode => !!vnode.tag).length
+  }
+
+  get countSelectedFilters () {
+    const coreFilters = ['q', 'qfield', 'page', 'page_size']
+    let minus = 0
+    for (const name of coreFilters) {
+      if (!this.filters[name].hasDefaultValueSet()) {
+        minus++
+      }
+    }
+    return Object.values(this.filters).filter(f => !f.hasDefaultValueSet()).length - minus
+  }
+
+  listFilterChanged ({payload: {name, label, value}}) {
+    this.setSelectedFilter(name, label, value)
+  }
+
+  setSelectedFilter (name, label, value) {
+    const hasValue = !this.filters[name].hasDefaultValueSet()
+
+    if (!hasValue) {
+      this.selectedFilters = this.selectedFilters.filter(f => f.name !== name)
+    } else {
+      if (this.selectedFilters.some(f => f.name === name)) {
+        this.selectedFilters = this.selectedFilters.map(f => {
+          if (f.name === name) {
+            return { name, label, value }
+          }
+          return f
+        })
+      } else {
+        this.selectedFilters.push({ name, label, value })
+      }
+    }
+  }
+
+  resetFilter (name) {
+    this.listView.resetFilter(name)
+    this.setSelectedFilter(name, null, null)
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.filterToggle {
+  cursor: pointer;
+  background: #F4F4F4;
+  padding: 0 4px;
+  margin-left: .5rem;
+}
+
+.chip-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+::v-deep(.aPagination) {
+  margin-top: 14px;
+}
+
+::v-deep(.pageSizeSelect) {
+  margin-top: 15px;
+}
+
+</style>

package/src/components/list/ListFilterEvent.js

@@ -0,0 +1,5 @@
+import { BaseEvent } from '@a-vue/plugins/event-bus/BaseEvent'
+
+export class ListFilterEvent extends BaseEvent {
+  static CHANGE = 'ListFilterEvent:change'
+}

package/src/components/list/ListFilterMixin.js

@@ -1,12 +1,23 @@
-import { Component, Vue } from '@a-vue'
+import { Component, Vue, Watch } from '@a-vue'
+import { ListFilterEvent } from '@a-vue/events'
 
 @Component({
   props: ['name', 'label', 'optionRequestParams']
 })
 export class ListFilterMixin extends Vue {
+  displayValue = null
   name_ = null
   maxWidth_ = null
 
+  @Watch('displayValue')
+  displayValueChanged () {
+    this.$events.dispatch(new ListFilterEvent(ListFilterEvent.CHANGE, {
+      name: this.name,
+      label: this.label,
+      value: this.displayValue
+    }))
+  }
+
   get _name () {
     return this.name || this.name_
   }

package/src/components/list/ListViewMixin.js

@@ -125,6 +125,11 @@ export class ListViewMixin extends Vue {
     this.load()
   }
 
+  resetFilter (filterName) {
+    this.filters[filterName].reset()
+    this.listViewModel.filterValueChanged(filterName)
+  }
+
   resetFilters () {
     this.listViewModel.resetFilters()
   }

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

@@ -8,6 +8,7 @@
     hide-details
     v-bind="$attrs"
     v-on="$listeners"
+    @displayedDateChanged="displayedDateChanged"
   />
 </template>
 
@@ -18,5 +19,8 @@ import { ListFilterMixin } from '../ListFilterMixin'
 
 @Component
 export default class ListFilterDate extends Mixins(ListFilterMixin) {
+  displayedDateChanged (formattedDate) {
+    this.displayValue = formattedDate
+  }
 }
 </script>

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

@@ -1,10 +1,10 @@
 <template>
   <a-row gap="8">
     <a-pagination
-      v-if="count && numPages > 1"
+      v-if="$has.page && count && numPages > 1"
       v-model="filter.value"
       :length="numPages"
-      :total-visible="_totalVisible"
+      :totalVisible="_totalVisible"
     >
       <template v-if="$has.page_number">
         <span class="pageNumber">{{ filter.value }} / {{ numPages }}</span>
@@ -14,6 +14,7 @@
     <a-select
       v-if="$has.page_size"
       v-model="pageSizeFilter.value"
+      class="pageSizeSelect"
       :label="label || 'Anzahl'"
       :items="pageSizeFilter.options"
       :defaultValue="pageSizeFilter.defaultValue"
@@ -32,7 +33,7 @@ import { ListFilterMixin } from '../ListFilterMixin'
   props: ['totalVisible']
 })
 export default class ListFilterPage extends Mixins(ListFilterMixin) {
-  $hasOptions = ['page_size', {page_number: false}]
+  $hasOptions = ['page', 'page_size', {page_number: false}]
 
   name_ = 'page'
 
@@ -41,7 +42,7 @@ export default class ListFilterPage extends Mixins(ListFilterMixin) {
   }
 
   get _totalVisible () {
-    return this.totalVisible === undefined ? 7 : this.totalVisible // allow 0 for totalVisible
+    return this.totalVisible === undefined ? 11 : this.totalVisible // allow 0 for totalVisible
   }
 
   get numPages () {

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

@@ -27,7 +27,13 @@
 import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
 
-@Component
+@Component({
+  props: [{
+    translateOption: {
+      default: () => title => title
+    }
+  }]
+})
 export default class ListFilterSearch2 extends Mixins(ListFilterMixin) {
   name_ = 'q'
   maxWidth_ = 200
@@ -50,7 +56,7 @@ export default class ListFilterSearch2 extends Mixins(ListFilterMixin) {
   get qFieldOptions () {
     return this.filters.qfield.options.map(o => ({
       ...o,
-      itemText: o.title,
+      itemText: this.translateOption(o.title),
       itemValue: o.value
     }))
   }
@@ -61,7 +67,8 @@ export default class ListFilterSearch2 extends Mixins(ListFilterMixin) {
     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})`
+        const qFieldTitle = this.translateOption(selected.title)
+        return `${label} (${qFieldTitle})`
       }
     }
 
@@ -73,6 +80,10 @@ export default class ListFilterSearch2 extends Mixins(ListFilterMixin) {
 
 <style lang="scss" scoped>
 ::v-deep() {
+  .v-text-field .v-label {
+    max-width: unset;
+  }
+
   .v-radio {
     margin-right: 14px !important;
     margin-top: -4px;

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

@@ -141,6 +141,11 @@ export default class ListFilterSearchSelect extends Mixins(ListFilterMixin) {
     }
   }
 
+  @Watch('inputModel')
+  inputModelChanged () {
+    this.displayValue = this.inputModel
+  }
+
   calculateSelectorSize () {
     const input = this.$refs.input.$el
     const inputWidth = input.offsetWidth

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

@@ -11,6 +11,7 @@
     hide-details
     v-bind="$attrs"
     v-on="$listeners"
+    @selectedItemTitleChanged="selectedItemTitleChanged"
   />
 </template>
 
@@ -34,6 +35,10 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
     this.reloadOptions()
   }
 
+  selectedItemTitleChanged (title) {
+    this.displayValue = title
+  }
+
   get clearable () {
     if (this.multiple) {
       return !!this.filter.value?.length

package/src/events.js

@@ -4,3 +4,4 @@ export { SaveEvent } from './components/save-indicator/SaveEvent'
 export { AlertEvent } from './components/alert/AlertEvent'
 export { DialogEvent } from './components/dialog/DialogEvent'
 export { FlyingContextEvent } from './components/flying-context/FlyingContextEvent'
+export { ListFilterEvent } from './components/list/ListFilterEvent'

package/src-admin/components/HSeparator.vue

@@ -6,13 +6,26 @@
       :class="['label', {collapsible}]"
       @click="collapseClick"
     >
-      {{ label }}
-
-      <template v-if="collapsible">
-        <v-icon class="contextButton mt-n1 ml-n2">
-          {{ collapsed_ ? '$caretRightIcon' : '$caretDownIcon' }}
+      <a-row>
+        <v-icon
+          v-if="icon"
+          class="mr-2"
+          color="#CCCCCC"
+        >
+          {{ icon }}
         </v-icon>
-      </template>
+
+        <div>{{ label }}</div>
+
+        <template v-if="collapsible">
+          <v-icon
+            class="contextButton"
+            size="2rem"
+          >
+            {{ collapsed_ ? '$caretRightIcon' : '$caretDownIcon' }}
+          </v-icon>
+        </template>
+      </a-row>
     </div>
   </div>
 </template>
@@ -22,7 +35,7 @@
 import { Component, Vue, Watch } from '@a-vue'
 
 @Component({
-  props: ['label', {first: false, collapsible: false, collapsed: false}]
+  props: ['label', 'icon', {first: false, collapsible: false, collapsed: false}]
 })
 export default class HSeparator extends Vue {
   collapsed_ = false
@@ -59,7 +72,7 @@ export default class HSeparator extends Vue {
 
 hr {
   border: none;
-  border-top: 2px solid #EEEEEE;
+  border-top: 2px solid #DDDDDD;
 }
 
 .label {
@@ -67,12 +80,12 @@ hr {
   background: white;
   padding: 0 1rem;
   text-transform: uppercase;
-  letter-spacing: 5px;
-  color: #CCCCCC;
-  font-size: .8rem;
+  letter-spacing: 3px;
+  color: #BBBBBB;
+  font-size: .9rem;
   white-space: nowrap;
 
-  left: 45%;
+  left: 50%;
   transform: translateX(-50%);
 
   &.collapsible {
@@ -81,7 +94,7 @@ hr {
     &:hover {
       color: #333333;
 
-      .v-icon {
+      .v-icon.contextButton {
         color: #333333 !important;
       }
     }

package/src-admin/styles.scss

@@ -79,6 +79,10 @@ html {
   color: #616161 !important;
 }
 
+.v-text-field {
+  background: white;
+}
+
 .theme--light.v-btn.v-btn--disabled,
 .theme--light.v-btn.v-btn--disabled span,
 .theme--light.v-btn.v-btn--disabled .v-icon,