@afeefa/vue-app 0.0.174 → 0.0.176

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

@@ -1 +1 @@
-0.0.174
+0.0.176

package/package.json

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

package/src/components/AInfo.vue

@@ -24,6 +24,10 @@ export default class AInfo extends Vue {
 </script>
 
 <style lang="scss" scoped>
+:deep(.v-icon) {
+  margin-right: .4rem;
+}
+
 .xSmall {
   padding: .3rem .6rem;
   font-size: .9rem;

package/src/components/ATimePicker.vue

@@ -67,7 +67,7 @@
 </template>
 
 <script>
-import { Component, Watch, Vue } from 'vue-property-decorator'
+import { Component, Watch, Vue } from '@a-vue'
 import moment from 'moment'
 import formatHour from '@a-vue/utils/format-hour'
 import formatMinutes from '@a-vue/utils/format-minutes'

package/src-admin/AfeefaAdmin.js

@@ -12,6 +12,7 @@ import routeConfigPlugin from './config/routing'
 import vuetify from './config/vuetify'
 import { authPlugin } from './plugins/AuthPlugin'
 import { configPlugin } from './plugins/ConfigPlugin'
+import { iconsPlugin } from './plugins/IconsPlugin'
 
 Vue.config.productionTip = false
 
@@ -58,6 +59,7 @@ export class AfeefaAdmin {
     adminConfig.app = this._appConfig
 
     Vue.use(configPlugin)
+    Vue.use(iconsPlugin)
 
     // authenticate current user before doing any gui-voodo
     if (this._authService) {

package/src-admin/components/DetailOrInfo.vue

@@ -0,0 +1,33 @@
+<template>
+  <information-bar-item
+    v-if="sidebar"
+    v-bind="$attrs"
+  >
+    <template #actionButton>
+      <slot name="actionButton" />
+    </template>
+
+    <slot />
+  </information-bar-item>
+
+  <detail-property
+    v-else
+    v-bind="$attrs"
+  >
+    <template #actionButton>
+      <slot name="actionButton" />
+    </template>
+
+    <slot />
+  </detail-property>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: [{sidebar: false}]
+})
+export default class DetailOrInfo extends Vue {
+}
+</script>

package/src-admin/components/FlyingContextContainer.vue

@@ -46,6 +46,25 @@ export default class FlyingContextContainer extends Vue {
     sizeWatcher.observe(this.getChildrenContainer())
   }
 
+  /**
+   * park sidebar children and attach - only for use with HMR which would remove all children on destroy 234567890
+   */
+  destroyed () {
+    function moveChildren (from, to) {
+      for (const child of from.children) {
+        to.appendChild(child)
+      }
+    }
+
+    const elTmp = document.createElement('div')
+    document.body.appendChild(elTmp)
+    moveChildren(this.getChildrenContainer(), elTmp)
+
+    this.$nextTick(() => {
+      moveChildren(elTmp, document.querySelector('#flyingContextContainer__children'))
+    })
+  }
+
   getScrollbarWidth () {
     const el = document.documentElement
     const overflowY = getComputedStyle(el)['overflow-y']
@@ -157,7 +176,8 @@ export default class FlyingContextContainer extends Vue {
   transition: left .2s;
   padding: 2rem;
   overflow-y: auto;
-  box-shadow: 0 0 7px #00000033;
+  box-shadow: 0 0 17px #00000033;
+  border-left: 1px solid #DDDDDD;
 
   &:not(.visible) {
     left: 101vw;

package/src-admin/components/InformationBar.vue

@@ -53,13 +53,12 @@ export default class InformationBar extends Vue {
     this.mutationWatcher = new MutationObserver(this.domChanged)
     this.mutationWatcher.observe(this.$el.querySelector('#information-bar__children > .top'), { childList: true })
     this.mutationWatcher.observe(this.$el.querySelector('#information-bar__children > .bottom'), { childList: true })
+
     this.domChanged()
   }
 
   /**
    * park sidebar children and attach - only for use with HMR which would remove all children on destroy 234567890
-   *
-   * s
    */
   destroyed () {
     function moveChildren (from, to) {
@@ -130,6 +129,7 @@ export default class InformationBar extends Vue {
   flex: 0 0 300px;
   width: 300px;
   height: 100vh;
+  overflow-x: hidden;
   overflow-y: auto;
 
   border-left: 1px solid rgba(0, 0, 0, .12);

package/src-admin/components/StickyHeader.vue

@@ -94,6 +94,7 @@ export default class StickyHeader extends Vue {
     background: white;
     z-index: 2;
     box-shadow: 0 0 7px #00000033;
+    border-bottom: 1px solid #EEEEEE;
   }
 
   .topbar {

package/src-admin/components/detail/DetailProperty.vue

@@ -2,11 +2,11 @@
   <div class="detailProperty">
     <div class="header">
       <v-icon
-        v-if="_icon"
-        :color="_icon.color"
+        v-if="icon"
+        :color="icon.color"
         size="3rem"
       >
-        {{ _icon.icon }}
+        {{ icon.icon }}
       </v-icon>
 
       <div
@@ -37,19 +37,9 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['icon', 'iconModelType', 'label']
+  props: ['icon', 'label']
 })
 export default class DetailProperty extends Vue {
-  get _icon () {
-    if (this.icon) {
-      return this.icon
-    }
-
-    if (this.iconModelType) {
-      const ModelClass = this.$apiResources.getModelClass(this.iconModelType)
-      return ModelClass.icon
-    }
-  }
 }
 </script>
 
@@ -63,7 +53,6 @@ export default class DetailProperty extends Vue {
     flex-wrap: nowrap;
     align-items: center;
     height: 40px;
-    margin-bottom: .5rem;
 
     > .v-icon {
       flex: 0 0 3rem;
@@ -84,6 +73,7 @@ export default class DetailProperty extends Vue {
   }
 
   .content {
+    margin-top: .5rem;
     padding-left: 4.5rem;
   }
 }

package/src-admin/components/index.js

@@ -2,17 +2,18 @@ import Vue from 'vue'
 
 import AppBarButton from './app/AppBarButton'
 import AppBarTitle from './app/AppBarTitle'
-import CollapsibleSection from './CollapsibleSection.vue'
+import CollapsibleSection from './CollapsibleSection'
 import DetailColumn from './detail/DetailColumn'
 import DetailContent from './detail/DetailContent'
 import DetailMeta from './detail/DetailMeta'
 import DetailProperty from './detail/DetailProperty'
 import DetailTitle from './detail/DetailTitle'
-import FlyingContext from './FlyingContext.vue'
+import DetailOrInfo from './DetailOrInfo'
+import FlyingContext from './FlyingContext'
 import EditFormButtons from './form/EditFormButtons'
 import RemoveButton from './form/RemoveButton'
 import RemoveDialog from './form/RemoveDialog'
-import HSeparator from './HSeparator.vue'
+import HSeparator from './HSeparator'
 import ListCard from './list/ListCard'
 import ListColumnHeader from './list/ListColumnHeader'
 import ListContent from './list/ListContent'
@@ -22,10 +23,10 @@ import ListView from './list/ListView'
 import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
 import EditPage from './pages/EditPage'
-import InformationBarItem from './sidebar/InformationBarItem.vue'
-import Start from './Start.vue'
-import StickyFooter from './StickyFooter.vue'
-import CollapseTransition from './transitions/CollapseTransition.vue'
+import InformationBarItem from './sidebar/InformationBarItem'
+import Start from './Start'
+import StickyFooter from './StickyFooter'
+import CollapseTransition from './transitions/CollapseTransition'
 
 Vue.component('ListCard', ListCard)
 Vue.component('ListColumnHeader', ListColumnHeader)
@@ -59,3 +60,4 @@ Vue.component('Start', Start)
 Vue.component('FlyingContext', FlyingContext)
 Vue.component('StickyFooter', StickyFooter)
 Vue.component('InformationBarItem', InformationBarItem)
+Vue.component('DetailOrInfo', DetailOrInfo)

package/src-admin/components/list/ListView.vue

@@ -73,7 +73,7 @@
 
     <div v-else-if="!isLoading">
       <a-info type="warning">
-        <div v-if="$has.filters">
+        <div v-if="$has.filters && meta_.count_all">
           Nichts gefunden. <a
             href=""
             @click.prevent="resetFilters()"

package/src-admin/components/sidebar/InformationBarItem.vue

@@ -4,25 +4,37 @@
       :class="['item', infoItemId, {expanded, rail}]"
       :style="{width}"
     >
-      <div
-        class="header"
-        @click="derail"
-      >
-        <v-icon
-          :color="icon.color"
-          size="2rem"
+      <a-row justify-space-between>
+        <div
+          class="header"
+          @click="derail"
         >
-          {{ icon.icon }}
-        </v-icon>
+          <v-icon
+            v-if="icon"
+            :color="icon.color"
+            size="2rem"
+          >
+            {{ icon.icon }}
+          </v-icon>
 
-        <template v-if="!rail">
-          <label class="label">{{ label }}</label>
+          <div
+            v-else
+            class="iconPlaceholder"
+          />
 
-          <v-icon class="contextButton mt-n1">
-            {{ expanded ? '$caretDownIcon' : '$caretRightIcon' }}
-          </v-icon>
-        </template>
-      </div>
+          <template v-if="!rail">
+            <label class="label">{{ label }}</label>
+
+            <v-icon class="contextButton mt-n1">
+              {{ expanded ? '$caretDownIcon' : '$caretRightIcon' }}
+            </v-icon>
+          </template>
+        </div>
+
+        <div v-if="expanded">
+          <slot name="actionButton" />
+        </div>
+      </a-row>
 
       <collapse-transition>
         <div
@@ -63,9 +75,10 @@ export default class InformationBarItem extends Vue {
   infoItemId = randomCssClass(10)
   rail = sidebarService.informationRailed
   expanded = !this.rail && this.open
+  isCreated = false
 
   created () {
-    this.$events.on(SidebarEvent.STATUS, ({payload: {informationRailed}}) => this.railChanged(informationRailed))
+    this.$events.on(SidebarEvent.STATUS, this.railChanged)
   }
 
   mounted () {
@@ -79,18 +92,24 @@ export default class InformationBarItem extends Vue {
     if (container.contains(el)) {
       container.removeChild(el)
     }
+
+    this.$events.off(SidebarEvent.STATUS, this.railChanged)
   }
 
-  railChanged (rail) {
-    if (this.rail === rail) {
+  railChanged ({payload: {informationRailed}}) {
+    if (this.rail === informationRailed) {
       return
     }
 
-    this.rail = rail
+    this.rail = informationRailed
 
-    if (!this.rail) {
-      this.expanded = false
+    if (!this.rail) { // derailed
+      if (!this.isCreated) { // open only the first time not after subsequent derailing
+        this.expanded = this.open
+      }
     }
+
+    this.isCreated = true
   }
 
   derail () {
@@ -172,7 +191,7 @@ export default class InformationBarItem extends Vue {
   border-top: 2px solid #EEEEEE;
   font-size: .9rem;
 
-  margin: .5rem -1.5rem;
-  padding: .5rem 1.5rem;
+  margin: .25rem -1.5rem;
+  padding: 1rem 1.5rem;
 }
 </style>

package/src-admin/components/sidebar/SidebarService.js

@@ -65,8 +65,8 @@ class SidebarService {
 
     this.information = information
 
-    if (information && this.mobile) {
-      this.informationRailed = true
+    if (information) { // rail if mobile, derail if desktop
+      this.informationRailed = this.mobile
     }
 
     eventBus.dispatch(new SidebarEvent(SidebarEvent.STATUS, new SidebarState(this)))

package/src-admin/config/AdminConfig.js

@@ -12,7 +12,9 @@ class AdminConfig {
     components: {
       Splash: null,
       SidebarMenu: null
-    }
+    },
+
+    icons: {}
   }
 
   config = {}

package/src-admin/models/Model.js

@@ -1,5 +1,5 @@
 import { translationService } from '@a-admin/services/TranslationService'
-import { Model as ApiResourcesModel, apiResources } from '@afeefa/api-resources-client'
+import { Model as ApiResourcesModel } from '@afeefa/api-resources-client'
 import { mdiAlphaMCircle } from '@mdi/js'
 
 import { ModelAdminConfig } from './ModelAdminConfig'
@@ -7,7 +7,6 @@ import { ModelAdminConfig } from './ModelAdminConfig'
 export { ModelAdminConfig }
 
 export class Model extends ApiResourcesModel {
-  static resourceType = null
   static routeName = null
   static routeIdKey = 'id'
 
@@ -17,17 +16,6 @@ export class Model extends ApiResourcesModel {
     return (new this()).getLink(action)
   }
 
-  static getAction (actionName) {
-    if (this.resourceType) {
-      return apiResources.getAction({
-        resourceType: this.resourceType,
-        actionName
-      })
-    }
-    console.warn('You can\'t get an action out of a model without resourceType:', this.type)
-    return null
-  }
-
   static get adminConfig () {
     return new ModelAdminConfig()
       .setIcon({
@@ -53,10 +41,6 @@ export class Model extends ApiResourcesModel {
     }
   }
 
-  getAction (action) {
-    return this.constructor.getAction(action)
-  }
-
   getIcon () {
     return this.constructor.icon
   }

package/src-admin/plugins/IconsPlugin.js

@@ -0,0 +1,13 @@
+import { adminConfig } from '../config/AdminConfig'
+
+class IconsPlugin {
+  install (Vue) {
+    Object.defineProperty(Vue.prototype, '$icons', {
+      get () {
+        return adminConfig.app.icons
+      }
+    })
+  }
+}
+
+export const iconsPlugin = new IconsPlugin()