@afeefa/vue-app 0.0.62 → 0.0.65

package/src-admin/components/App.vue

@@ -3,8 +3,9 @@
     <v-navigation-drawer
       v-model="drawer"
       app
-      fixeds
       left
+      width="280"
+      class="menubar"
     >
       <v-container
         flex-column
@@ -92,6 +93,7 @@
     </v-navigation-drawer>
 
     <v-app-bar
+      v-if="false"
       app
       flat
       dense
@@ -115,23 +117,35 @@
       />
     </v-app-bar>
 
-    <v-main>
+    <v-main id="v-main">
+      <a-row class="topbar">
+        <v-app-bar-nav-icon
+          class="sidebarToggleButton mr-2 ml-n1"
+          @click="toggleDrawer"
+        />
+        <a-breadcrumbs />
+      </a-row>
+
       <v-container
         fluid
         class="pa-4"
       >
-        <div class="d-flex align-center">
-          <app-bar-title-container class="flex-grow-1 mb-4" />
-          <app-bar-buttons class="mr-2  mb-4" />
+        <div class="sticky-app-bar d-flex align-center">
+          <app-bar-title-container class="flex-grow-1" />
+          <app-bar-buttons class="mr-2" />
         </div>
 
         <router-view :class="{isLoading}" />
       </v-container>
+
+      <sticky-footer-container v-if="true" />
     </v-main>
 
     <a-dialog id="app" />
 
     <a-save-indicator />
+
+    <flying-context-container />
   </div>
 </template>
 
@@ -142,12 +156,16 @@ import { appConfig } from '@a-admin/config/AppConfig'
 import { sleep } from '@a-vue/utils/timeout'
 import AppBarButtons from './app/AppBarButtons'
 import AppBarTitleContainer from './app/AppBarTitleContainer'
+import FlyingContextContainer from './FlyingContextContainer'
+import StickyFooterContainer from './StickyFooterContainer'
 import '../styles.scss'
 
 @Component({
   components: {
     AppBarButtons,
-    AppBarTitleContainer
+    AppBarTitleContainer,
+    FlyingContextContainer,
+    StickyFooterContainer
   }
 })
 export default class App extends Vue {
@@ -167,6 +185,17 @@ export default class App extends Vue {
     this.$emit('appLoaded')
   }
 
+  mounted () {
+    const el = document.querySelector('.sticky-app-bar')
+    const observer = new IntersectionObserver(
+      ([e]) => {
+        e.target.classList.toggle('is-pinned', e.intersectionRatio < 1)
+      },
+      { threshold: [1] }
+    )
+    observer.observe(el)
+  }
+
   get SidebarMenu () {
     return appConfig.components.SidebarMenu
   }
@@ -244,4 +273,24 @@ export default class App extends Vue {
   height: 36px !important;
   margin-top: 1px;
 }
+
+.topbar {
+  position: relative;
+  width: 100%;
+  left: 0;
+  top: 0;
+  padding: .2rem 1rem;
+}
+.sticky-app-bar {
+  position: sticky;
+  top: -1px;
+  margin: -1rem -1rem 0;
+  padding: 1rem;
+
+  &.is-pinned {
+    background: white;
+    z-index: 2;
+    box-shadow: 0 4px 7px -4px #00000033;
+  }
+}
 </style>

package/src-admin/components/FlyingContext.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="flyingContext">
+    <div :class="contextId">
+      <slot v-if="isVisible" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Watch, Vue } from '@a-vue'
+import { FlyingContextEvent } from '@a-vue/events'
+import { randomCssClass } from '@a-vue/utils/random'
+
+@Component({
+  props: [{show: false}]
+})
+export default class FlyingContext extends Vue {
+  isVisible = false
+  contextId = randomCssClass(10)
+
+  created () {
+    this.$events.on(FlyingContextEvent.HIDE_ALL, this.onHide)
+  }
+
+  mounted () {
+    if (this.show) {
+      this.showChanged()
+    }
+  }
+
+  @Watch('show')
+  showChanged () {
+    if (this.isVisible === this.show) {
+      return
+    }
+
+    this.isVisible = this.show
+
+    if (this.isVisible) {
+      const container = this.getSidebarContainer()
+      container.appendChild(this.getContent())
+    } else {
+      this.$el.appendChild(this.getContent())
+    }
+  }
+
+  destroyed () {
+    const container = this.getSidebarContainer()
+    const el = this.getContent()
+    if (container.contains(el)) {
+      container.removeChild(el)
+    }
+
+    this.$events.off(FlyingContextEvent.HIDE_ALL, this.onHide)
+  }
+
+  onHide () {
+    if (this.isVisible) {
+      this.$el.appendChild(this.getContent())
+      this.isVisible = false
+      this.$emit('hide')
+    }
+  }
+
+  getContent () {
+    return document.querySelector('.' + this.contextId)
+  }
+
+  getSidebarContainer () {
+    return document.getElementById('flyingContextContainer__children')
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+</style>

package/src-admin/components/FlyingContextContainer.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    id="flyingContextContainer"
+    :class="{visible}"
+  >
+    <a
+      href=""
+      @click.prevent="hide"
+    >close</a>
+
+    <br>
+    <br>
+
+    <div id="flyingContextContainer__children" />
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { FlyingContextEvent } from '@a-vue/events'
+
+@Component({
+  props: []
+})
+export default class FlyingContextContainer extends Vue {
+  visible = false
+
+  mounted () {
+    this.mutationWatcher = new MutationObserver(this.domChanged)
+    this.mutationWatcher.observe(this.getChildrenContainer(), { childList: true })
+
+    window.addEventListener('mousedown', this.onClickOutside)
+  }
+
+  domChanged () {
+    const container = this.getChildrenContainer()
+    this.visible = !!container.children.length
+  }
+
+  hide () {
+    if (this.visible) {
+      this.$events.dispatch(new FlyingContextEvent(FlyingContextEvent.HIDE_ALL))
+    }
+  }
+
+  getChildrenContainer () {
+    return this.$el.querySelector('#flyingContextContainer__children')
+  }
+
+  onClickOutside (e) {
+    // check if trigger is clicked
+    let parent = e.target
+    while (parent) {
+      if (parent.classList.contains('flyingContextTrigger')) {
+        return
+      }
+      parent = parent.parentElement
+    }
+
+    // check if flying context ist clicked
+    if (!this.$el.contains(e.target)) {
+      this.hide()
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+#flyingContextContainer {
+  position: fixed;
+  z-index: 200;
+  right: 0;
+  width: 60vw;
+  height: 80vh;
+  top: 10vh;
+  background: rgba($color: white, $alpha: .6);
+  border: 1px solid black;
+  transition: right .2s;
+
+  &:not(.visible) {
+    right: -80vw;
+  }
+}
+</style>

package/src-admin/components/StickyFooter.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="stickyFooter">
+    <div :class="contextId">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { randomCssClass } from '@a-vue/utils/random'
+
+@Component
+export default class StickyFooter extends Vue {
+  contextId = randomCssClass(10)
+
+  mounted () {
+    const container = this.getFooterContainer()
+    container.appendChild(this.getContent())
+  }
+
+  destroyed () {
+    const container = this.getFooterContainer()
+    const el = this.getContent()
+    if (container.contains(el)) {
+      container.removeChild(el)
+    }
+  }
+
+  getContent () {
+    return document.querySelector('.' + this.contextId)
+  }
+
+  getFooterContainer () {
+    return document.getElementById('stickyFooterContainer__children')
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+</style>

package/src-admin/components/StickyFooterContainer.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-footer
+    id="stickyFooterContainer"
+    fixed
+    app
+    inset
+    :class="{visible}"
+  >
+    <div id="stickyFooterContainer__children" />
+  </v-footer>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: []
+})
+export default class StickyFooterContainer extends Vue {
+  visible = false
+
+  mounted () {
+    this.mutationWatcher = new MutationObserver(this.domChanged)
+    this.mutationWatcher.observe(this.getChildrenContainer(), { childList: true })
+  }
+
+  domChanged () {
+    const container = this.getChildrenContainer()
+    this.visible = !!container.children.length
+
+    this.$nextTick(() => {
+      const mainStyle = document.getElementById('v-main').style
+      if (this.visible) {
+        mainStyle.paddingBottom = this.$el.offsetHeight + 'px'
+      } else {
+        mainStyle.paddingBottom = '0px'
+      }
+    })
+  }
+
+  getChildrenContainer () {
+    return this.$el.querySelector('#stickyFooterContainer__children')
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+#stickyFooterContainer {
+  background: white;
+  padding: 0;
+
+  &:not(.visible) {
+    display: none;
+  }
+
+  &__children {
+    width: 100%;
+  }
+}
+
+#stickyFooterContainer__children {
+  background: #F5F5F5;
+  padding: 1rem;
+}
+</style>

package/src-admin/components/form/EditFormButtons.vue

@@ -1,8 +1,11 @@
 <template>
-  <a-row gap="2">
+  <a-row
+    gap="2"
+    v-bind="$attrs"
+  >
     <v-btn
       :small="small"
-      :disabled="!changed || !valid"
+      :disabled="($has.reset && !changed) || !valid"
       color="green white--text"
       @click="$emit('save')"
     >
@@ -10,7 +13,7 @@
     </v-btn>
 
     <v-icon
-      v-if="changed"
+      v-if="$has.reset && changed"
       :small="small"
       text
       title="Formular zurücksetzen"
@@ -33,6 +36,8 @@ import { mdiRotateLeft} from '@mdi/js'
   ]
 })
 export default class EditFormButtons extends Vue {
+  $hasOptions = ['reset']
+
   undoIcon = mdiRotateLeft
 }
 </script>

package/src-admin/components/index.js

@@ -7,6 +7,7 @@ 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 EditFormButtons from './form/EditFormButtons'
 import RemoveButton from './form/RemoveButton'
 import ListCard from './list/ListCard'
@@ -17,11 +18,9 @@ import ListTitle from './list/ListTitle'
 import ListView from './list/ListView'
 import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
-import CreatePage from './pages/CreatePage'
-import DetailPage from './pages/DetailPage'
 import EditPage from './pages/EditPage'
-import ListPage from './pages/ListPage'
 import Start from './Start.vue'
+import StickyFooter from './StickyFooter.vue'
 
 Vue.component('ListCard', ListCard)
 Vue.component('ListColumnHeader', ListColumnHeader)
@@ -29,9 +28,6 @@ Vue.component('ListContent', ListContent)
 Vue.component('ListMeta', ListMeta)
 Vue.component('ListTitle', ListTitle)
 Vue.component('ListView', ListView)
-Vue.component('ListPage', ListPage)
-
-Vue.component('CreatePage', CreatePage)
 
 Vue.component('EditPage', EditPage)
 Vue.component('EditFormButtons', EditFormButtons)
@@ -43,7 +39,6 @@ Vue.component('ModelIcon', ModelIcon)
 Vue.component('DetailContent', DetailContent)
 Vue.component('DetailMeta', DetailMeta)
 Vue.component('DetailTitle', DetailTitle)
-Vue.component('DetailPage', DetailPage)
 Vue.component('DetailProperty', DetailProperty)
 Vue.component('DetailColumn', DetailColumn)
 
@@ -51,3 +46,5 @@ Vue.component('AppBarButton', AppBarButton)
 Vue.component('AppBarTitle', AppBarTitle)
 
 Vue.component('Start', Start)
+Vue.component('FlyingContext', FlyingContext)
+Vue.component('StickyFooter', StickyFooter)

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

@@ -8,12 +8,16 @@
       />
     </div>
 
+    <slot
+      v-if="$scopedSlots.models"
+      name="before-models"
+    />
+
     <template v-if="models_.length">
       <template v-if="$scopedSlots.models">
         <slot
           name="models"
           :models="models_"
-          :setFilter="setFilter"
         />
       </template>
 
@@ -28,7 +32,11 @@
           <a-table-row
             v-for="model in models_"
             :key="model.id"
-            :class="getModelClass(model)"
+            v-flying-context-trigger="hasFlyingContext"
+            :class="{selectable: hasFlyingContext}"
+            v-bind="getRowAttributes(model)"
+            v-on="getRowListeners(model)"
+            @click="$emit('flyingContext', model)"
           >
             <v-icon
               v-if="$has.icon"
@@ -40,7 +48,6 @@
             <slot
               name="model-table"
               :model="model"
-              :setFilter="setFilter"
             />
           </a-table-row>
         </a-table>
@@ -50,7 +57,6 @@
         <div
           v-for="model in models_"
           :key="model.id"
-          :class="getModelClass(model)"
         >
           <slot
             name="model"
@@ -76,7 +82,7 @@ import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 import { LoadingEvent } from '@a-vue/events'
 
 @Component({
-  props: ['modelClass']
+  props: ['rowAttributes', 'rowListeners']
 })
 export default class ListView extends Mixins(ListViewMixin) {
   $hasOptions = ['icon']
@@ -93,12 +99,19 @@ export default class ListView extends Mixins(ListViewMixin) {
     this.$emit('update:isLoading', this.isLoading)
   }
 
-  getModelClass (model) {
-    return this.modelClass && this.modelClass(model)
+  getRowAttributes (model) {
+    if (typeof this.rowAttributes === 'function') {
+      return this.rowAttributes(model)
+    }
+    return this.rowAttributes
+  }
+
+  getRowListeners (model) {
+    return (this.rowListeners && this.rowListeners(model)) || {}
   }
 
-  setFilter (name, value) {
-    this.filters[name].value = value
+  get hasFlyingContext () {
+    return !!this.$listeners.flyingContext
   }
 }
 </script>

package/src-admin/components/pages/EditPage.vue

@@ -4,19 +4,23 @@
     :model="model"
     :createModelToEdit="createModelToEdit"
   >
-    <template #default="{model, changed, valid}">
+    <template #form="{modelToEdit, changed, valid}">
       <slot
-        :model="model"
+        name="form"
+        :modelToEdit="modelToEdit"
         :changed="changed"
         :valid="valid"
       />
 
-      <edit-form-buttons
-        :changed="changed"
-        :valid="valid"
-        @save="$emit('save', model)"
-        @reset="$refs.form.reset()"
-      />
+      <sticky-footer>
+        <edit-form-buttons
+          :changed="changed"
+          :valid="valid"
+          :has="{reset: !!modelToEdit.id}"
+          @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
+          @reset="$refs.form.reset()"
+        />
+      </sticky-footer>
     </template>
   </edit-form>
 </template>
@@ -30,10 +34,11 @@ import { DialogEvent } from '@a-vue/events'
 })
 export default class EditPage extends Vue {
   unregisterRouterHook = null
+  ignoreChangesOnRouteChange_ = false
 
   created () {
     this.unregisterRouterHook = this.$router.beforeEach(async (to, from, next) => {
-      if (this.$refs.form.changed) {
+      if (this.$refs.form.changed && !this.ignoreChangesOnRouteChange_) {
         const result = await this.$events.dispatch(new DialogEvent(DialogEvent.SHOW, {
           title: 'Änderungen verwerfen?',
           message: 'Im Formular sind nicht gespeicherte Änderungen. Sollen diese verworfen werden?',
@@ -51,5 +56,14 @@ export default class EditPage extends Vue {
   destroyed () {
     this.unregisterRouterHook()
   }
+
+  /**
+   * hook to allow to leave a just created (saved) model
+   */
+  ignoreChangesOnRouteChange () {
+    // this.$refs.form.forceUnchanged()
+    console.info('TODO switch form to forceUnchanged')
+    this.ignoreChangesOnRouteChange_ = true
+  }
 }
 </script>

package/src-admin/components/routes/DataRouteMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue, Watch } from '@a-vue'
+import { Component, Vue } from '@a-vue'
 
 Component.registerHooks([
   'beforeRouteEnter',
@@ -7,6 +7,7 @@ Component.registerHooks([
 
 let onLoadCallback = () => {}
 let routerHookCalled = false
+let lastResult = null // cache last result because of hmr reload
 
 function onLoad (callback) {
   onLoadCallback = callback
@@ -52,24 +53,32 @@ export class DataRouteMixin extends Vue {
 
   /**
    * triggered both, if route name or route params change
-   */
-  @Watch('$route.params')
-  async routeParamsChanged () {
-    if (routerHookCalled) {
-      return
-    }
+   @Watch('$route.params')
+   async routeParamsChanged () {
+     if (routerHookCalled) {
+       return
+     }
 
-    if (!this.drm_isLoaded) {
-      const result = await load(this.$route)
+     if (!this.drm_isLoaded) {
+       const result = await load(this.$route)
 
-      if (result !== false) {
-        this.drm_onLoad(result)
-        this.drm_isLoaded = true
-      }
-    }
-  }
+       if (result !== false) {
+         this.drm_onLoad(result)
+         this.drm_isLoaded = true
+       }
+     }
+   }
+   */
 
   drm_onLoad (result) {
     onLoadCallback(this, result)
+    lastResult = result
+  }
+
+  created () {
+    // hmr reload creates vm but not triggers route enter
+    if (!routerHookCalled) {
+      onLoadCallback(this, lastResult)
+    }
   }
 }

package/src-admin/config/routing.js

@@ -1,7 +1,3 @@
-import CreateRoute from '@a-admin/components/routes/CreateRoute'
-import DetailRoute from '@a-admin/components/routes/DetailRoute'
-import EditRoute from '@a-admin/components/routes/EditRoute'
-import ListRoute from '@a-admin/components/routes/ListRoute'
 import { routeConfigPlugin } from '@a-vue/plugins/route-config/RouteConfigPlugin'
 
 export default routeConfigPlugin
@@ -9,13 +5,6 @@ export default routeConfigPlugin
     linkActiveClass: 'active'
   })
 
-  .defaultComponents({
-    list: ListRoute,
-    new: CreateRoute,
-    detail: DetailRoute,
-    edit: EditRoute
-  })
-
   .defaultBreadcrumbTitles({
     edit: 'Bearbeiten',
     new: 'Neu'