@afeefa/vue-app 0.0.195 → 0.0.196

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

@@ -1 +1 @@
-0.0.195
+0.0.196

package/package.json

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

package/src/components/ACategory.vue

@@ -0,0 +1,112 @@
+<template>
+  <div :class="['a-category', {dark: theme === 'dark'}]">
+    <div
+      class="border"
+      :style="{background: borderColor}"
+    />
+
+    <div
+      :class="['content', {hasRemove: $has.remove}]"
+      :title="category.title"
+    >
+      <div
+        v-for="parentCategory in parentCategories"
+        :key="parentCategory.id"
+        class="parent"
+      >
+        {{ parentCategory.title }}
+      </div>
+
+      <div>{{ category.title }}</div>
+    </div>
+
+    <div
+      v-if="$has.remove"
+      class="remove"
+    >
+      <a-icon
+        small
+        class="iconButton"
+        @click="$emit('remove')"
+      >
+        $closeCircleIcon
+      </a-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: ['category', 'theme', 'color']
+})
+export default class ACategory extends Vue {
+  $hasOptions = [{remove: false}]
+
+  get borderColor () {
+    return this.color || this.category.color || 'gray'
+  }
+
+  get parentCategories () {
+    const parents = []
+    let parent = this.category.parent
+    while (parent) {
+      parents.unshift(parent)
+      parent = parent.parent
+    }
+    return parents
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.a-category {
+  background: white;
+  white-space: nowrap;
+  font-size: 1rem;
+  display: flex;
+  align-items: stretch;
+  padding-right: .2rem;
+
+  &.dark {
+    background: #F6F6F6;
+  }
+
+  .border {
+    flex: 0 0 5px;
+  }
+
+  .content {
+    padding: .4rem .5rem;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    line-height: 1;
+    color: rgba(0, 0, 0, .87);
+
+    max-width: 200px;
+
+    > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .parent {
+      font-size: .8rem;
+      color: #999999;
+      line-height: 1;
+    }
+
+    &.hasRemove {
+      padding-right: .5rem;
+    }
+  }
+
+  .remove {
+    align-self: center;
+    margin-top: -.1rem;
+    padding-right: .6rem;
+  }
+}
+</style>

package/src/components/APopup.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="popup">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { Component, Mixins, Watch } from '@a-vue'
+import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
+import { UsesPositionServiceMixin } from '../services/position/UsesPositionServiceMixin'
+import { positionService, PositionConfig } from '../services/PositionService'
+
+@Component({
+  props: ['position']
+})
+export default class APopup extends Mixins(CancelOnEscMixin, UsesPositionServiceMixin) {
+  popupTrigger = null
+  currentPosition = null
+
+  created () {
+    window.addEventListener('mousedown', this.onClickOutside)
+    window.addEventListener('wheel', this.onScroll, {passive: false})
+    window.addEventListener('touchmove', this.onScroll)
+    window.addEventListener('keydown', this.onScroll)
+
+    this.currentPosition = (this.position || new PositionConfig())
+      .setTarget(this)
+      .onAnchorEl(anchorEl => {
+        this.popupTrigger = anchorEl
+      })
+
+    this.urp_registerPositionWatcher(this.currentPosition)
+
+    this.coe_watchCancel()
+  }
+
+  mounted () {
+    this.getContainer().appendChild(this.$el)
+  }
+
+  destroyed () {
+    window.removeEventListener('mousedown', this.onClickOutside)
+    window.removeEventListener('wheel', this.onScroll)
+    window.removeEventListener('touchmove', this.onScroll)
+    window.removeEventListener('keydown', this.onScroll)
+
+    const container = this.getContainer()
+    if (container.contains(this.$el)) {
+      container.removeChild(this.$el)
+    }
+  }
+
+  @Watch('position')
+  positionChanged () {
+    this.currentPosition.update(this.position)
+  }
+
+  getContainer () {
+    return document.getElementById('popupContainer')
+  }
+
+  coe_cancelOnEsc () {
+    this.close()
+    return false
+  }
+
+  onScroll (event) {
+    // ignore esc event
+    if (event instanceof KeyboardEvent) {
+      const key = event.key || event.keyCode
+      if (key === 'Escape' || key === 'Esc' || key === 27) {
+        return
+      }
+    }
+
+    // ignore child popup scroll / event
+    if (this.targetIsIncludedPopup(event.target)) {
+      return
+    }
+
+    if (this.$el.contains(event.target)) {
+      if (!(event instanceof KeyboardEvent)) { // no keydown, must be wheel/touchmove
+        const scrollParent = positionService.getScrollParent(event.target, true)
+        if (!this.$el.contains(scrollParent)) { // do not scroll at all if target is not scrollable
+          event.preventDefault()
+        }
+      }
+      return
+    }
+
+    this.close()
+  }
+
+  targetIsIncludedPopup (target) {
+    const popups = this.getContainer().children
+    let foundMyself = false
+    for (const popup of popups) {
+      if (foundMyself) {
+        if (popup.contains(target)) {
+          return true
+        }
+      }
+      foundMyself = popup === this.$el
+    }
+    return false
+  }
+
+  close () {
+    this.$emit('close')
+  }
+
+  onClickOutside (e) {
+    // popup clicked
+    if (this.$el.contains(e.target)) {
+      return
+    }
+
+    // trigger clicked
+    if (this.popupTrigger.contains(e.target)) {
+      return
+    }
+
+    // check included popup clicked
+    if (this.targetIsIncludedPopup(e.target)) {
+      return
+    }
+
+    this.close()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.popup {
+  position: absolute;
+  background-color: white;
+  padding: 1rem;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2), 0 2px 10px 0 rgba(0, 0, 0, .2);
+}
+</style>

package/src/components/APopupMenu.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="popupMenu">
+    <div
+      class="trigger"
+      @click="open"
+    >
+      <slot />
+    </div>
+
+    <popup-menu-list
+      v-if="visible"
+      :items="items"
+      :position="position"
+      v-bind="$attrs"
+      @close="close"
+      @click="click"
+    >
+      <template #item="{ item }">
+        <component
+          :is="itemRenderer || ItemRenderer"
+          :item="item"
+        />
+      </template>
+    </popup-menu-list>
+  </div>
+</template>
+
+
+<script>
+import { PositionConfig } from '../services/PositionService'
+import { Component, Vue } from '@a-vue'
+import PopupMenuList from './popup-menu/PopupMenuList'
+import ItemRenderer from './popup-menu/ItemRenderer'
+
+@Component({
+  props: ['items', 'itemRenderer'],
+  components: {
+    PopupMenuList
+  }
+})
+export default class APopupMenu extends Vue {
+  visible = false
+  ItemRenderer = ItemRenderer
+
+  open () {
+    this.visible = true
+  }
+
+  click (item) {
+    this.$emit('select', item)
+    this.close()
+  }
+
+  close () {
+    this.visible = false
+  }
+
+  get position () {
+    const position = new PositionConfig()
+      .setAnchor(this, '.trigger')
+      .targetLeft().anchorRight()
+      .targetMiddle().anchorMiddle()
+    return position
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+#popupContainer .selectPopup {
+  padding: .5rem;
+}
+
+.trigger {
+  display: inline-block;
+}
+</style>

package/src/components/form/EditForm.vue

@@ -19,6 +19,7 @@
 
 <script>
 import { Component, Vue, Watch } from '@a-vue'
+// import { getDiff } from 'json-difference'
 
 @Component({
   props: [
@@ -102,6 +103,8 @@ export default class EditForm extends Vue {
     }
     // console.log(this.lastJson)
     // console.log(this.json)
+    // console.log(JSON.stringify(getDiff(this.lastJson, this.json)))
+
     return this.json !== this.lastJson
   }
 

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

@@ -0,0 +1,194 @@
+<template>
+  <div v-if="categories_">
+    <v-input
+      ref="validationInput"
+      :value="model[name]"
+      :rules="validationRules"
+      hide-details="auto"
+    >
+      <div>
+        <v-label v-if="false">
+          <a-row gap="2">
+            <strong v-if="false">{{ label }}</strong>
+
+            <a-popup-menu
+              v-if="selectedCategories.length && isMultiple"
+              :items="categories"
+              :canSelectParent="false"
+              @select="add"
+            >
+              <a-icon
+                size="1.3rem"
+                class="contextButton mt-n1"
+                title="Bearbeiten"
+              >
+                $addIcon
+              </a-icon>
+            </a-popup-menu>
+          </a-row>
+        </v-label>
+
+        <div
+          v-if="selectedCategories.length"
+          class="categories"
+        >
+          <a-category
+            v-for="category in selectedCategories"
+            :key="category.id"
+            :category="{...category, parent: {title: label}}"
+            theme="dark"
+            :has="{remove: true}"
+            :color="color"
+            @remove="remove(category)"
+          />
+        </div>
+
+        <a-popup-menu
+          v-if="!selectedCategories.length"
+          :items="categories_"
+          :canSelectParent="false"
+          class="mt-2"
+          @select="add"
+        >
+          <a-icon-button
+            small
+            icon="$plusIcon"
+            :text="label"
+          />
+        </a-popup-menu>
+
+        <a-popup-menu
+          v-else-if="isMultiple && selectedCategories.length < maxItems"
+          :items="categories_"
+          :canSelectParent="false"
+          class="mt-1"
+          @select="add"
+        >
+          <a>{{ label }} hinzufügen</a>
+        </a-popup-menu>
+      </div>
+    </v-input>
+
+    <div
+      v-if="errorMessages.length"
+      class="mt-4 error--text"
+    >
+      {{ errorMessages[0] }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Mixins } from '@a-vue'
+import { FormFieldMixin } from '../FormFieldMixin'
+import { ListAction } from '@a-vue/api-resources/ApiActions'
+
+@Component({
+  props: [
+    'color',
+    {
+      getChildren: {
+        default: () => i => i.children || []
+      }
+    },
+    'categories'
+  ]
+})
+export default class FormFieldCategory extends Mixins(FormFieldMixin) {
+  categories_ = null
+  errorMessages = []
+
+  async created () {
+    if (this.categories) {
+      this.initCategories(this.categories)
+    } else {
+      await this.loadCategories()
+    }
+
+    this.$nextTick(() => { // wait for root v-if
+      this.$refs.validationInput.validate(true)
+    })
+  }
+
+  mounted () {
+
+  }
+
+  add (category) {
+    if (this.isMultiple) {
+      this.remove(category) // add again at end
+      this.model[this.name].push(category)
+    } else {
+      this.model[this.name] = category
+    }
+
+    this.$emit('add', category)
+  }
+
+  remove (category) {
+    if (this.isMultiple) {
+      this.model[this.name] = this.selectedCategories.filter(c => c.id !== category.id)
+    } else {
+      this.model[this.name] = null
+    }
+
+    this.$emit('remove', category)
+  }
+
+  get selectedCategories () {
+    if (this.isMultiple) {
+      return this.model[this.name]
+    } else {
+      return [this.model[this.name]].filter(c => c)
+    }
+  }
+
+  get isMultiple () {
+    return this.field.getRelatedType().isList
+  }
+
+  async loadCategories () {
+    const request = this.field.createOptionsRequest()
+    const {models} = await ListAction.fromRequest(request).load()
+    this.initCategories(models)
+  }
+
+  initCategories (models) {
+    this.categories_ = models.map(m => {
+      let children = this.getChildren(m).map(c => ({
+        ...c,
+        color: this.color
+      }))
+
+      if (children.length === 1) {
+        m = children[0]
+        children = []
+      }
+
+      return {
+        ...m,
+        color: this.color,
+        children
+      }
+    })
+  }
+
+  get maxItems () {
+    return this.validator?.getParam('max') || 100000
+  }
+}
+
+</script>
+
+
+<style lang="scss" scoped>
+:deep() .v-messages__message {
+  color: #EE5252;
+}
+
+.categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+}
+</style>

package/src/components/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 
 import EditForm from './form/EditForm'
 import EditModal from './form/EditModal'
+import FormFieldCategory from './form/fields/FormFieldCategory'
 import FormFieldCheckbox from './form/fields/FormFieldCheckbox'
 import FormFieldDate from './form/fields/FormFieldDate'
 import FormFieldRadioGroup from './form/fields/FormFieldRadioGroup'
@@ -25,6 +26,7 @@ Vue.component('FormFieldText', FormFieldText)
 Vue.component('FormFieldTextArea', FormFieldTextArea)
 Vue.component('FormFieldRichTextArea', FormFieldRichTextArea)
 Vue.component('FormFieldRadioGroup', FormFieldRadioGroup)
+Vue.component('FormFieldCategory', FormFieldCategory)
 Vue.component('FormFieldCheckbox', FormFieldCheckbox)
 Vue.component('FormFieldDate', FormFieldDate)
 Vue.component('FormFieldTime', FormFieldTime)

package/src/components/popup-menu/ItemRenderer.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="itemRenderer">
+    <div
+      class="border"
+      :style="{background: color}"
+    />
+    <div class="content">
+      {{ item.title }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: ['item']
+})
+export default class ItemRenderer extends Vue {
+  get color () {
+    return this.item.color || 'gray'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.itemRenderer {
+  min-width: 200px;
+  line-height: 1.2;
+  display: flex;
+  font-size: .9rem;
+
+  .border {
+    flex: 0 0 4px;
+    margin-right: .5rem;
+  }
+
+  .content {
+    padding: .2rem .2rem;
+  }
+}
+</style>

package/src/components/popup-menu/PopupMenuList.vue

@@ -0,0 +1,194 @@
+<template>
+  <a-popup
+    :class="['popupMenuList', 'level-' + nestLevel]"
+    :position="position"
+    @close="$emit('close')"
+  >
+    <template v-if="parent">
+      <div
+        :class="['item parent', {selected: selectedItem === parent}]"
+        @click="click(parent)"
+      >
+        <div class="content">
+          <slot
+            name="item"
+            :item="parent"
+          />
+        </div>
+      </div>
+
+      <hr>
+    </template>
+
+    <input
+      v-if="items.length > 20"
+      v-model="filterTerm"
+      type="text"
+      class="inputElement inputElement--filter"
+      placeholder="Filtern"
+      autofocus
+    >
+
+    <div
+      v-for="item in filteredItems"
+      :key="item.id"
+      @click="click(item)"
+    >
+      <div
+        :class="['item', {isFolder: item.children?.length, selected: selectedItem === item}]"
+        :data-id="item.id"
+      >
+        <div class="content">
+          <slot
+            name="item"
+            :item="item"
+          />
+        </div>
+
+        <a-icon
+          v-if="item.children?.length"
+          icon="chevron-right"
+          class="more"
+        >
+          $chevronRightIcon
+        </a-icon>
+      </div>
+
+      <popup-menu-list
+        v-if="item.children?.length && selectedItem === item"
+        :parent="canSelectParent && item"
+        :items="item.children"
+        :level="nestLevel + 1"
+        :position="getPosition(item)"
+        @close="closeNested"
+        @click="clickNested"
+      >
+        <template #item="{ item: subItem }">
+          <slot
+            name="item"
+            :item="subItem"
+          />
+        </template>
+      </popup-menu-list>
+    </div>
+    <p
+      v-if="filteredItems.length === 0"
+      class="noItems"
+    >
+      Keine Einträge
+    </p>
+  </a-popup>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { PositionConfig } from '../../services/PositionService'
+
+@Component({
+  props: ['items', 'parent', 'level', 'position', {canSelectParent: true}],
+  name: 'popup-menu-list'
+})
+export default class PopupMenuList extends Vue {
+  selectedItem = null
+  filterTerm = ''
+
+  get nestLevel () {
+    return this.level || 0
+  }
+
+  get filteredItems () {
+    if (!this.filterTerm) {
+      return this.items
+    } else {
+      return this.items.filter(item => {
+        return item.title.toLowerCase().includes(this.filterTerm.toLowerCase())
+      })
+    }
+  }
+
+  click (item) {
+    if (item === this.parent) { // parent item
+      this.$emit('click', item)
+    } else if (item.children?.length) { // container
+      this.openNested(item)
+    } else { // single item
+      this.$emit('click', item)
+    }
+  }
+
+  clickNested (item) {
+    this.$emit('click', item)
+  }
+
+  openNested (item) {
+    this.selectedItem = item
+  }
+
+  closeNested () {
+    this.selectedItem = null
+  }
+
+  getPosition (item) {
+    // console.log('getPosition this.' + `.item[data-id="${item.id}"]`)
+    const position = new PositionConfig()
+      .setAnchor(this, `.item[data-id="${item.id}"]`)
+      .targetLeft().anchorRight()
+      .targetMiddle().anchorMiddle()
+      .diffX('.2rem')
+    return position
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+#popupContainer .popupMenuList {
+  padding: .3rem .5rem;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.noItems {
+  font-size: .8rem;
+  font-weight:bold;
+  margin: .5em 0;
+  white-space: nowrap;
+}
+
+.inputElement--filter {
+  font-size: .8rem;
+  margin-bottom: .5em;
+  padding: .5em;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  margin: .2rem 0;
+
+  cursor: pointer;
+  user-select: none;
+
+  &:hover,
+  &.selected {
+    background-color: #ECECEC;
+  }
+
+  &.isFolder {
+    color: #666666;
+  }
+
+  .more {
+    text-align: right;
+    margin-left: 1rem;
+    color: #999999;
+    font-size: .8rem;
+  }
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #DDDDDD;
+}
+</style>

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

@@ -153,15 +153,33 @@ export default class SearchSelectList extends Mixins(ListViewMixin) {
   }
 
   findActiveIndexForLocalSearch () {
+    let firstMatchingIndex = -1
+
     for (const [index, model] of this.models_.entries()) {
       const regex = new RegExp(`^${this.localSearchKey}`, 'i')
       if (model.getTitle().match(regex)) {
-        if (this.activeModelIndex === index) {
+        if (this.activeModelIndex < 0) { // return first item found if nothing selected before
+          return index
+        }
+
+        if (this.activeModelIndex === index) { // ignore selected item
           continue
         }
-        return index
+
+        if (firstMatchingIndex < 0) { // save first item to later jump to, if no item after selected can be found
+          firstMatchingIndex = index
+        }
+
+        if (index > this.activeModelIndex) { // return first item after selected
+          return index
+        }
       }
     }
+
+    if (firstMatchingIndex >= 0) { // jump to first item of list that matchs
+      return firstMatchingIndex
+    }
+
     return this.activeModelIndex
   }
 }

package/src-admin/components/App.vue

@@ -35,6 +35,8 @@
     <a-save-indicator />
 
     <flying-context-container />
+
+    <div id="popupContainer" />
   </div>
 </template>
 
@@ -128,4 +130,11 @@ export default class App extends Vue {
 #v-main.marginRight {
   margin-right: 60px;
 }
+
+#popupContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 400;
+}
 </style>

package/src-admin/config/vuetify.js

@@ -8,6 +8,7 @@ import {
   mdiCheckBold,
   mdiChevronRight,
   mdiClose,
+  mdiCloseCircle,
   mdiCloseThick,
   mdiCurrencyEur,
   mdiDelete,
@@ -44,6 +45,7 @@ export default new Vuetify({
       alarmIcon: mdiAlarmLightOutline,
       alertIcon: mdiAlert,
       closeIcon: mdiClose,
+      closeCircleIcon: mdiCloseCircle,
       closeBoldIcon: mdiCloseThick,
       dotsVerticalIcon: mdiDotsVertical,
       dotsHorizontalIcon: mdiDotsHorizontal,