@afeefa/vue-app 0.0.63 → 0.0.66

package/src/components/form/EditModal.vue

@@ -1,6 +1,7 @@
 <template>
   <a-modal
     :title="title"
+    :beforeClose="beforeClose"
     :show.sync="show_"
     v-bind="$attrs"
   >
@@ -10,16 +11,18 @@
 
     <edit-form
       v-if="show_"
+      ref="form"
       :model="model"
+      :createModelToEdit="createModelToEdit"
     >
-      <template #fields>
+      <template #form="{modelToEdit, changed, valid}">
         <slot
-          name="fields"
-          :model="model"
+          name="form"
+          :modelToEdit="modelToEdit"
+          :changed="changed"
+          :valid="valid"
         />
-      </template>
 
-      <template #default="{changed, valid}">
         <a-row
           class="mt-8 mb-1 pb-1 gap-4"
           right
@@ -31,25 +34,14 @@
             Schließen
           </v-btn>
 
-          <a-row gap="2">
-            <v-btn
-              small
-              :disabled="!changed || !valid"
-              color="green white--text"
-              @click="save"
-            >
-              Speichern
-            </v-btn>
-
-            <v-icon
-              v-if="changed"
-              small
-              text
-              @click="reset"
-            >
-              {{ undoIcon }}
-            </v-icon>
-          </a-row>
+          <edit-form-buttons
+            :changed="changed"
+            :valid="valid"
+            small
+            :has="{reset: !!modelToEdit.id}"
+            @save="$emit('save', modelToEdit, ignoreChangesOnClose)"
+            @reset="$refs.form.reset()"
+          />
         </a-row>
       </template>
     </edit-form>
@@ -59,21 +51,26 @@
 
 <script>
 import { Component, Vue, Watch } from '@a-vue'
-import { mdiRotateLeft} from '@mdi/js'
+import { DialogEvent } from '@a-vue/events'
 
 @Component({
-  props: ['model', 'title', 'show']
+  props: ['model', 'createModelToEdit', 'title', 'show']
 })
 export default class EditModal extends Vue {
   show_ = false
+  ignoreChangesOnClose_ = false
 
-  undoIcon = mdiRotateLeft
+  created () {
+    if (this.show) { // open on create with v-show
+      this.open()
+    }
+  }
 
   /**
    * visiblility changes from outside
    * this will trigger the show_ watcher,
    * forward the change to the modal and
-   * later emit a open/close event
+   * later emit an open/close event
    */
   @Watch('show')
   showChanged () {
@@ -90,7 +87,6 @@ export default class EditModal extends Vue {
   @Watch('show_')
   show_Changed () {
     if (this.show_) {
-      this.reset()
       this.$emit('open')
     } else {
       this.$emit('close')
@@ -101,16 +97,37 @@ export default class EditModal extends Vue {
     this.show_ = true
   }
 
-  close () {
-    this.show_ = false
+  async beforeClose () {
+    // run only if show_ is true to prevent double checks with a-modal
+    if (this.show_ && this.$refs.form.changed && !this.ignoreChangesOnClose_) {
+      const result = await this.$events.dispatch(new DialogEvent(DialogEvent.SHOW, {
+        title: 'Änderungen verwerfen?',
+        message: 'Im Formular sind nicht gespeicherte Änderungen. Sollen diese verworfen werden?',
+        yesButton: 'Verwerfen'
+      }))
+      if (result !== DialogEvent.RESULT_YES) {
+        return false
+      }
+    }
+    return true
   }
 
-  reset () {
-    this.$emit('reset')
+  async close () {
+    const result = await this.beforeClose()
+    if (!result) {
+      return
+    }
+
+    this.show_ = false
   }
 
-  save () {
-    this.$emit('save')
+  /**
+   * hook to allow to leave a just created (saved) model
+   */
+  ignoreChangesOnClose () {
+    // this.$refs.form.forceUnchanged()
+    console.info('TODO switch form to forceUnchanged')
+    this.ignoreChangesOnClose_ = true
   }
 }
 </script>

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

@@ -1,7 +1,9 @@
 <template>
-  <a-rich-text-area
-    v-model="model[name]"
-  />
+  <a-rich-text-area v-model="model[name]">
+    <template #buttons>
+      <slot name="buttons" />
+    </template>
+  </a-rich-text-area>
 </template>
 
 <script>

package/src/components/list/ListViewMixin.js

@@ -11,6 +11,7 @@ import { FilterSourceType } from './FilterSourceType'
     'listAction',
     'filterHistoryKey',
     'loadOnlyIfKeyword',
+    'checkBeforeLoad',
     {
       filterSource: FilterSourceType.QUERY_STRING,
       events: true,
@@ -64,9 +65,16 @@ export class ListViewMixin extends Vue {
       .on('change', this.filtersChanged) // listen to change
 
     this._filtersInitialized()
+    this.$emit('update:filters', this.filters)
+    this.$emit('update:listViewModel', this.listViewModel)
 
     if (this.models) {
       this.$emit('update:count', this.meta_.count_search)
+
+      this.$emit('onLoad', {
+        models: this.models_,
+        meta: this.meta_
+      })
     } else {
       this.load()
     }
@@ -113,6 +121,16 @@ export class ListViewMixin extends Vue {
   }
 
   async load () {
+    if (this.checkBeforeLoad) {
+      const canLoad = await this.checkBeforeLoad()
+      if (!canLoad) {
+        if (this.meta_.used_filters) {
+          this.listViewModel.initFromUsedFilters(this.meta_.used_filters, this.meta_.count_search)
+        }
+        return
+      }
+    }
+
     if (this._loadOnlyIfKeyword && !this.filters.q.value) {
       this.models_ = []
       this.meta_ = {}
@@ -132,7 +150,7 @@ export class ListViewMixin extends Vue {
 
     if (!models) { // error happened
       this.isLoading = false
-      this.$emit('update:isLoading', this.isLoading)
+      this.$emit('update:isLoading', false)
       return
     }
 
@@ -144,8 +162,13 @@ export class ListViewMixin extends Vue {
     }
 
     this.isLoading = false
-    this.$emit('update:isLoading', this.isLoading)
+    this.$emit('update:isLoading', false)
 
     this.$emit('update:count', this.meta_.count_search)
+
+    this.$emit('onLoad', {
+      models,
+      meta
+    })
   }
 }

package/src/components/mixins/ClickOutsideMixin.js

@@ -25,10 +25,14 @@ export class ClickOutsideMixin extends Vue {
     // popup clicked
     const thisIndex = getZIndex(this.$el)
     const targetIndex = getZIndex(e.target)
-    if (targetIndex > thisIndex) {
+    if (targetIndex > 10 && targetIndex > thisIndex) { // sidebar === 6
       return
     }
 
+    this.com_onClickOutside()
     this.$emit('click:outside')
   }
+
+  com_onClickOutside () {
+  }
 }

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

@@ -67,7 +67,6 @@ export default class SearchSelectList extends Mixins(ListViewMixin) {
     if (this.q) {
       this.filters.q.value = this.q
     }
-    this.$emit('update:filters', this.filters)
   }
 }
 </script>

package/src/components/vue/Component.js

@@ -32,9 +32,16 @@ function propsWithDefaults (props) {
         // property: { some object }, should be a normal vue props object
         } else if (value && typeof value === 'object' && value.constructor === Object) {
           normalizedProps[subProp] = value
-        // property: true, null, ...
+        // property: true, false, null, ...
         } else {
-          normalizedProps[subProp] = { default: value }
+          if (typeof value === 'boolean') {
+            normalizedProps[subProp] = {
+              type: Boolean,
+              default: value
+            }
+          } else {
+            normalizedProps[subProp] = { default: value }
+          }
         }
       })
     } else {

package/src/events.js

@@ -1,4 +1,6 @@
+export { BaseEvent } from './plugins/event-bus/BaseEvent'
 export { LoadingEvent } from './components/loading-indicator/LoadingEvent'
 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'

package/src-admin/bootstrap.js

@@ -1,5 +1,6 @@
 import './config/event-bus'
 import './config/components'
+import './directives'
 
 import { translationPlugin } from '@a-admin/plugins/translation/TranslationPlugin'
 import { apiResourcesPlugin } from '@a-vue/plugins/api-resources/ApiResourcesPlugin'

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
@@ -72,66 +73,47 @@
       </v-container>
     </v-navigation-drawer>
 
-    <v-navigation-drawer
-      v-if="false"
-      app
-      clipped
-      right
-    >
-      <v-list>
-        <v-list-item
-          v-for="n in 5"
-          :key="n"
-          link
-        >
-          <v-list-item-content>
-            <v-list-item-title>Item {{ n }}</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-
-    <v-app-bar
-      app
-      flat
-      dense
-      color="#FAFAFA"
-    >
-      <div class="d-flex align-start mt-n2">
+    <a-loading-indicator
+      fixed
+      top
+      left
+      class="loadingIndicator"
+      :isLoading="isLoading"
+      :color="loaderColor"
+    />
+
+    <v-main id="v-main">
+      <a-row
+        start
+        class="topbar"
+      >
         <v-app-bar-nav-icon
-          class="sidebarToggleButton mr-2 ml-n1"
+          class="sidebarToggleButton mr-2 ml-4"
           @click="toggleDrawer"
         />
-        <a-breadcrumbs class="mt-2" />
-      </div>
-
-      <a-loading-indicator
-        fixed
-        top
-        left
-        class="loadingIndicator"
-        :isLoading="isLoading"
-        :color="loaderColor"
-      />
-    </v-app-bar>
-
-    <v-main>
+
+        <a-breadcrumbs />
+      </a-row>
+
       <v-container
         fluid
-        class="pa-4"
+        class="pa-8 pt-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>
+        <sticky-header />
 
         <router-view :class="{isLoading}" />
       </v-container>
+
+      <sticky-footer-container />
     </v-main>
 
     <a-dialog id="app" />
 
     <a-save-indicator />
+
+    <sidebar />
+
+    <flying-context-container />
   </div>
 </template>
 
@@ -142,17 +124,24 @@ 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 Sidebar from './Sidebar'
+import StickyHeader from './StickyHeader'
 import '../styles.scss'
 
 @Component({
   components: {
     AppBarButtons,
-    AppBarTitleContainer
+    AppBarTitleContainer,
+    FlyingContextContainer,
+    StickyFooterContainer,
+    Sidebar,
+    StickyHeader
   }
 })
 export default class App extends Vue {
   drawer = true
-  mainDrawer = false
   isLoading = false
   account = null
 
@@ -199,16 +188,6 @@ export default class App extends Vue {
     this.drawer = !this.drawer
   }
 
-  @Watch('drawer')
-  async drawerChanged () {
-    if (this.drawer) {
-      this.mainDrawer = false
-    } else {
-      await sleep(0.1)
-      this.mainDrawer = true
-    }
-  }
-
   get hasAuthService () {
     return !!appConfig.authService
   }
@@ -244,4 +223,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;
+}
+
+.a-breadcrumbs {
+  margin-top: 7px;
+}
+
+.menubar {
+  // background: #666666 !important;
+}
+
+#sidebar {
+  // background: #F4F4F4 !important;
+}
 </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/Sidebar.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-navigation-drawer
+    id="sidebar"
+    v-model="visible"
+    app
+    right
+    disable-resize-watcher
+    width="220"
+  >
+    <div id="sidebar__children">
+      <div class="top" />
+      <div class="bottom" />
+    </div>
+  </v-navigation-drawer>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: []
+})
+export default class Sidebar extends Vue {
+  visible = false
+
+  mounted () {
+    this.mutationWatcher = new MutationObserver(this.domChanged)
+    this.mutationWatcher.observe(this.$el.querySelector('#sidebar__children > .top'), { childList: true })
+    this.mutationWatcher.observe(this.$el.querySelector('#sidebar__children > .bottom'), { childList: true })
+
+    this.domChanged()
+  }
+
+  domChanged () {
+    this.visible = this.hasSidebarItems()
+  }
+
+  getChildrenContainer () {
+    return this.$el.querySelector('#sidebar__children')
+  }
+
+  hasSidebarItems () {
+    return !!(this.$el.querySelector('#sidebar__children .top').children.length +
+      this.$el.querySelector('#sidebar__children .bottom').children.length)
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+#sidebar {
+  &__children {
+    width: 100%;
+  }
+}
+
+#sidebar__children {
+  height: 100%;
+  padding: 2rem;
+  // padding-left: 4rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+</style>