@afeefa/vue-app 0.0.63 → 0.0.66

package/src-admin/components/SidebarItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="sidebarItem">
+    <div :class="contextId">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { randomCssClass } from '@a-vue/utils/random'
+
+@Component({
+  props: [
+    {
+      top: true,
+      bottom: false
+    }
+  ]
+})
+export default class SidebarItem extends Vue {
+  contextId = randomCssClass(10)
+
+  mounted () {
+    const container = this.getSidebarContainer()
+    console.log(container)
+    container.appendChild(this.getContent())
+  }
+
+  destroyed () {
+    const container = this.getSidebarContainer()
+    const el = this.getContent()
+    if (container.contains(el)) {
+      container.removeChild(el)
+    }
+  }
+
+  getContent () {
+    return document.querySelector('.' + this.contextId)
+  }
+
+  getSidebarContainer () {
+    console.log('toporbottom', this.$props)
+    return document.querySelector('#sidebar__children > .' + this.position)
+  }
+
+  get position () {
+    if (this.bottom) {
+      return 'bottom'
+    } else {
+      return 'top'
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+</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/StickyHeader.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    id="stickyHeader"
+    :class="['d-flex align-center gap-8', {visible}]"
+  >
+    <app-bar-title-container class="appBarTitle flex-grow-1" />
+    <app-bar-buttons class="appBarButtons mr-2" />
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import AppBarButtons from './app/AppBarButtons'
+import AppBarTitleContainer from './app/AppBarTitleContainer'
+
+@Component({
+  components: {
+    AppBarButtons,
+    AppBarTitleContainer
+  }
+})
+export default class StickyHeader extends Vue {
+  visible = false
+
+  mounted () {
+    // watch mutation
+    this.mutationWatcher = new MutationObserver(this.domChanged)
+    this.mutationWatcher.observe(this.$el.querySelector('.appBarTitle'), { childList: true })
+    this.mutationWatcher.observe(this.$el.querySelector('.appBarButtons'), { childList: true })
+
+    // watch intersection
+    const el = document.querySelector('#stickyHeader')
+    const observer = new IntersectionObserver(
+      ([e]) => {
+        e.target.classList.toggle('is-pinned', e.intersectionRatio < 1)
+      },
+      { threshold: [1] }
+    )
+    observer.observe(el)
+
+    this.domChanged()
+  }
+
+  domChanged () {
+    this.visible = this.hasItems()
+  }
+
+  hasItems () {
+    return !!(this.$el.querySelector('.appBarTitle').children.length +
+      this.$el.querySelector('.appBarButtons').children.length)
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+#stickyHeader {
+  position: sticky;
+  top: -1px;
+  margin: -1rem -2rem 2rem;
+  padding: 1rem 2rem;
+
+  &:not(.visible) {
+    display: none !important;
+  }
+
+  &.is-pinned {
+    background: white;
+    z-index: 2;
+    box-shadow: 0 4px 7px -4px #00000033;
+  }
+}
+</style>

package/src-admin/components/app/AppBarButtons.vue

@@ -12,10 +12,3 @@ import { Component, Vue } from '@a-vue'
 export default class AppBarButtons extends Vue {
 }
 </script>
-
-
-<style lang="scss" scoped>
-#appBarButtons:empty {
-  display: none !important;
-}
-</style>

package/src-admin/components/app/AppBarTitle.vue

@@ -1,13 +1,36 @@
 <template>
-  <div class="d-flex align-center">
-    <v-icon
-      class="mr-2"
-      :color="icon.color"
-      size="1.8rem"
-      v-text="icon.icon"
-    />
-
-    <h2>{{ title }}</h2>
+  <div class="d-flex align-center gap-4">
+    <v-btn
+      v-if="back"
+      fab
+      x-small
+      color="#F4F4F4"
+      title="Zurück"
+      class="mr-n2"
+      @click="$router.push(back)"
+    >
+      <v-icon>
+        $arrowLeftIcon
+      </v-icon>
+    </v-btn>
+
+    <v-avatar
+      color="#F4F4F4"
+      size="3rem"
+    >
+      <v-icon
+        :color="icon.color"
+        size="2.2rem"
+        v-text="icon.icon"
+      />
+    </v-avatar>
+
+    <div class="titleContainer">
+      <h3 v-if="subtitle">
+        {{ subtitle }}
+      </h3>
+      <h2>{{ title }}</h2>
+    </div>
   </div>
 </template>
 
@@ -15,7 +38,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['icon', 'title']
+  props: ['back', 'icon', 'title', 'subtitle']
 })
 export default class appBarTitle extends Vue {
   mounted () {
@@ -41,8 +64,29 @@ export default class appBarTitle extends Vue {
 
 
 <style lang="scss" scoped>
+.titleContainer {
+  overflow: hidden;
+  margin-top: -.2rem;
+}
+
+h3 {
+  font-size: .9rem;
+  font-weight: normal;
+  margin-bottom: .1rem;
+  line-height: 1rem;
+  color: #999999;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 h2 {
-  // white-space: nowrap;
+  font-size: 1.5rem;
   line-height: 1.5rem;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>

package/src-admin/components/app/AppBarTitleContainer.vue

@@ -11,9 +11,8 @@ export default class AppBarTitleContainer extends Vue {
 }
 </script>
 
-
 <style lang="scss" scoped>
-#appBarTitleContainer:empty {
-  display: none;
+#appBarTitleContainer {
+  min-width: 0; // https://stackoverflow.com/questions/38657688/text-overflow-ellipsis-not-working-in-a-nested-flex-container
 }
 </style>

package/src-admin/components/controls/SearchSelectFormField.vue

@@ -68,6 +68,7 @@
     >
       <template #activator>
         <a-icon-button
+          small
           icon="$plusIcon"
           :text="selectableConfig.addButtonTitle || 'Hinzufügen'"
           class="mt-4"

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

@@ -1,17 +1,23 @@
 <template>
   <div class="detailProperty">
     <div class="header">
-      <v-icon
+      <v-avatar
         v-if="_icon"
-        :color="_icon.color"
-        size="2rem"
+        color="#EEEEEE"
+        size="2.5rem"
       >
-        {{ _icon.icon }}
-      </v-icon>
-      <label :class="['label', {'label--withIcon': _icon != null}]">{{ label }}</label>
+        <v-icon
+          :color="_icon.color"
+          size="1.5rem"
+        >
+          {{ _icon.icon }}
+        </v-icon>
+      </v-avatar>
+
+      <label :class="['label', {'label--withIcon': !!_icon}]">{{ label }}</label>
     </div>
 
-    <div :class="['content', {'content--withIcon': _icon != null}]">
+    <div :class="['content', {'content--withIcon': !!_icon}]">
       <a-row
         vertical
         gap="6"
@@ -52,29 +58,27 @@ export default class DetailProperty extends Vue {
     flex-wrap: nowrap;
     align-items: center;
     height: 40px;
-    .v-icon {
+
+    .v-avatar {
       flex: 0 0 40px;
       margin-right: 15px;
     }
+
     .label {
       display: block;
       text-transform: uppercase;
       letter-spacing: 2px;
-      @media (max-width: 900px), (orientation : portrait) {
-        padding-left: 55px;
-        &--withIcon {
-          padding-left: 0;
-        }
+      padding-left: 55px;
+      &--withIcon {
+        padding-left: 0;
       }
     }
   }
   .content {
+    padding-left: 55px;
     &--withIcon {
       padding-left: 55px;
     }
-    @media (max-width: 900px), (orientation : portrait) {
-      padding-left: 55px;
-    }
   }
 }
 </style>

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

@@ -1,17 +1,27 @@
 <template>
-  <a-row gap="2">
+  <a-row
+    gap="1"
+    v-bind="$attrs"
+  >
     <v-btn
-      :small="small"
-      :disabled="!changed || !valid"
+      fab
+      small
+      :disabled="($has.reset && !changed) || !valid"
       color="green white--text"
+      title="Speichern"
       @click="$emit('save')"
     >
-      Speichern
+      <v-icon>
+        $checkIcon
+      </v-icon>
     </v-btn>
 
     <v-icon
-      v-if="changed"
+      v-if="$has.reset && changed"
       :small="small"
+      :class="{disabled: !changed}"
+      :disabled="!changed"
+      color="#999999"
       text
       title="Formular zurücksetzen"
       @click="$emit('reset')"
@@ -29,10 +39,19 @@ import { mdiRotateLeft} from '@mdi/js'
   props: [
     'changed',
     'valid',
-    'small'
+    {small: false}
   ]
 })
 export default class EditFormButtons extends Vue {
+  $hasOptions = ['reset']
+
   undoIcon = mdiRotateLeft
 }
 </script>
+
+
+<style lang="scss" scoped>
+.v-icon--disabled {
+  opacity: .3;
+}
+</style>

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

@@ -1,13 +1,22 @@
 <template>
   <div>
-    <a-icon-button
-      small
-      color="red white--text"
-      :class="'removeButton-' + dialogId"
-      icon="$trashCanIcon"
-      text="Löschen"
-      @click="remove"
-    />
+    <v-hover v-slot="{ hover }">
+      <v-btn
+        :class="'removeButton-' + dialogId"
+        fab
+        small
+        :color="(hover ? 'red' : 'grey lighten-3')"
+        title="Löschen"
+        @click="remove"
+      >
+        <v-icon
+          :color="hover ? 'white' : '#999999'"
+          size="1.4rem"
+        >
+          $trashCanIcon
+        </v-icon>
+      </v-btn>
+    </v-hover>
 
     <a-dialog
       :id="dialogId"

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,10 @@ 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 SidebarItem from './SidebarItem.vue'
 import Start from './Start.vue'
+import StickyFooter from './StickyFooter.vue'
 
 Vue.component('ListCard', ListCard)
 Vue.component('ListColumnHeader', ListColumnHeader)
@@ -29,9 +29,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 +40,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 +47,6 @@ Vue.component('AppBarButton', AppBarButton)
 Vue.component('AppBarTitle', AppBarTitle)
 
 Vue.component('Start', Start)
+Vue.component('FlyingContext', FlyingContext)
+Vue.component('StickyFooter', StickyFooter)
+Vue.component('SidebarItem', SidebarItem)

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, ignoreChangesOnRouteChange)"
-        @reset="$refs.form.reset()"
-      />
+      <app-bar-button>
+        <edit-form-buttons
+          :changed="changed"
+          :valid="valid"
+          :has="{reset: !!modelToEdit.id}"
+          @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
+          @reset="$refs.form.reset()"
+        />
+      </app-bar-button>
     </template>
   </edit-form>
 </template>
@@ -53,7 +57,12 @@ export default class EditPage extends Vue {
     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
   }
 }