@afeefa/vue-app 0.0.64 → 0.0.65

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

@@ -1 +1 @@
-0.0.64
+0.0.65

package/package.json

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

package/src/components/ABreadcrumbs.vue

@@ -106,9 +106,10 @@ export default class ABreadcrumbs extends Vue {
   getItemTitle (title) {
     // title = title.concat(title).concat(title)
     if (title.length > 20) {
-      title = title.slice(0, 10).trim() + '...' + title.slice(-10).trim()
+      // title = title.slice(0, 10).trim() + '...' + title.slice(-10).trim()
     }
-    return title.toUpperCase()
+    return title
+    // return title.toUpperCase()
   }
 }
 </script>

package/src/components/ARichTextArea.vue

@@ -4,85 +4,84 @@
       v-if="editor"
       class="menu-bar"
     >
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('bold')}]"
-        @click="editor.chain().focus().toggleBold().run()"
-      >
-        <v-icon>{{ boldIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('italic')}]"
-        @click="editor.chain().focus().toggleItalic().run()"
-      >
-        <v-icon>{{ italicIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', 'strike', {'is-active': focus && editor.isActive('strike')}]"
-        @click="editor.chain().focus().toggleStrike().run()"
-      >
-        <v-icon>{{ strikeIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 1})}]"
-        @click="editor.chain().focus().toggleHeading({level: 1}).run()"
-      >
-        <v-icon>{{ h1Icon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 2})}]"
-        @click="editor.chain().focus().toggleHeading({level: 2}).run()"
-      >
-        <v-icon>{{ h2Icon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('bulletList')}]"
-        @click="editor.chain().focus().toggleBulletList().run()"
-      >
-        <v-icon>{{ ulIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('orderedList')}]"
-        @click="editor.chain().focus().toggleOrderedList().run()"
-      >
-        <v-icon>{{ olIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('blockquote')}]"
-        @click="editor.chain().focus().toggleBlockquote().run()"
-      >
-        <v-icon>{{ commentIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        class="menu-button"
-        @click="editor.chain().focus().undo().run()"
-      >
-        <v-icon>{{ undoIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        class="menu-button"
-        @click="editor.chain().focus().redo().run()"
-      >
-        <v-icon>{{ redoIcon }}</v-icon>
-      </v-btn>
+      <div>
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('bold')}]"
+          @click="editor.chain().focus().toggleBold().run()"
+        >
+          <v-icon>{{ boldIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('italic')}]"
+          @click="editor.chain().focus().toggleItalic().run()"
+        >
+          <v-icon>{{ italicIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', 'strike', {'is-active': focus && editor.isActive('strike')}]"
+          @click="editor.chain().focus().toggleStrike().run()"
+        >
+          <v-icon>{{ strikeIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 1})}]"
+          @click="editor.chain().focus().toggleHeading({level: 1}).run()"
+        >
+          <v-icon>{{ h1Icon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 2})}]"
+          @click="editor.chain().focus().toggleHeading({level: 2}).run()"
+        >
+          <v-icon>{{ h2Icon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('bulletList')}]"
+          @click="editor.chain().focus().toggleBulletList().run()"
+        >
+          <v-icon>{{ ulIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('orderedList')}]"
+          @click="editor.chain().focus().toggleOrderedList().run()"
+        >
+          <v-icon>{{ olIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('blockquote')}]"
+          @click="editor.chain().focus().toggleBlockquote().run()"
+        >
+          <v-icon>{{ commentIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          class="menu-button"
+          :disabled="initialValue === editor.getHTML()"
+          @click="editor.chain().focus().undo().run()"
+        >
+          <v-icon>{{ undoIcon }}</v-icon>
+        </v-btn>
+      </div>
+
+      <div>
+        <slot name="buttons" />
+      </div>
     </div>
 
     <editor-content
@@ -119,6 +118,7 @@ import {
 export default class ARichTextArea extends Vue {
   editor = null
   internalValue = null
+  initialValue = null
   focus = false
 
   boldIcon = mdiFormatBold
@@ -133,6 +133,7 @@ export default class ARichTextArea extends Vue {
   redoIcon = mdiRotateRight
 
   created () {
+    this.initialValue = this.value
     this.internalValue = this.value
   }
 
@@ -158,14 +159,20 @@ export default class ARichTextArea extends Vue {
         this.$emit('blur')
       }
     })
-
-    this.editor.commands.setContent(this.internalValue, false)
   }
 
   beforeDestroy () {
     this.editor.destroy()
   }
 
+  /**
+   * reset the text area to disable the undo button
+   * e.g. after saving the form while keeping it open
+   */
+  reset () {
+    this.initialValue = this.value
+  }
+
   @Watch('value')
   valueChanged () {
     this.internalValue = this.value
@@ -192,10 +199,6 @@ export default class ARichTextArea extends Vue {
 
 
 <style lang="scss" scoped>
-.v-input:not(.v-input--is-focused) ::v-deep .v-counter {
-  display: none;
-}
-
 .a-rich-text-editor {
   ::v-deep .ProseMirror {
     &-focused {
@@ -205,9 +208,12 @@ export default class ARichTextArea extends Vue {
 }
 
 .menu-bar {
+  display: flex;
+  justify-content: space-between;
   margin: -.2rem 0 .5rem -.2rem;
 }
 
+.menu-bar .v-btn,
 .menu-button {
   padding: 0 !important;
   width: 30px !important;
@@ -239,6 +245,10 @@ export default class ARichTextArea extends Vue {
   &.is-active {
     background: #ECECEC !important;
   }
+
+  &[disabled] {
+    background: none !important;
+  }
 }
 
 ::v-deep .ProseMirror {

package/src/components/form/EditForm.vue

@@ -28,11 +28,17 @@ export default class EditForm extends Vue {
   modelToEdit = null
   valid = false
   lastJson = null
+  forcedUnchange = false
 
   created () {
     this.reset()
   }
 
+  forceUnchanged () {
+    this.forcedUnchange = true
+    this.$emit('update:changed', false)
+  }
+
   reset () {
     if (this.createModelToEdit) {
       this.modelToEdit = this.createModelToEdit(this.model)
@@ -66,6 +72,9 @@ export default class EditForm extends Vue {
   }
 
   get changed () {
+    if (this.forcedUnchange) {
+      return false
+    }
     // console.log(this.json)
     // console.log(this.lastJson)
     return this.json !== this.lastJson

package/src/components/form/EditModal.vue

@@ -125,6 +125,8 @@ export default class EditModal extends Vue {
    * 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
   }
 }

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

@@ -64,9 +64,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()
     }
@@ -132,7 +139,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 +151,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/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,3 +1,4 @@
+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'

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
@@ -91,9 +92,8 @@
       </v-list>
     </v-navigation-drawer>
 
-    <flying-context-container />
-
     <v-app-bar
+      v-if="false"
       app
       flat
       dense
@@ -117,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>
 
@@ -145,13 +157,15 @@ 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,
-    FlyingContextContainer
+    FlyingContextContainer,
+    StickyFooterContainer
   }
 })
 export default class App extends Vue {
@@ -171,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
   }
@@ -248,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/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,5 +1,8 @@
 <template>
-  <a-row gap="2">
+  <a-row
+    gap="2"
+    v-bind="$attrs"
+  >
     <v-btn
       :small="small"
       :disabled="($has.reset && !changed) || !valid"

package/src-admin/components/index.js

@@ -20,6 +20,7 @@ import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
 import EditPage from './pages/EditPage'
 import Start from './Start.vue'
+import StickyFooter from './StickyFooter.vue'
 
 Vue.component('ListCard', ListCard)
 Vue.component('ListColumnHeader', ListColumnHeader)
@@ -46,3 +47,4 @@ 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>
 
@@ -44,7 +48,6 @@
             <slot
               name="model-table"
               :model="model"
-              :setFilter="setFilter"
             />
           </a-table-row>
         </a-table>
@@ -110,10 +113,6 @@ export default class ListView extends Mixins(ListViewMixin) {
   get hasFlyingContext () {
     return !!this.$listeners.flyingContext
   }
-
-  setFilter (name, value) {
-    this.filters[name].value = value
-  }
 }
 </script>
 

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

@@ -12,13 +12,15 @@
         :valid="valid"
       />
 
-      <edit-form-buttons
-        :changed="changed"
-        :valid="valid"
-        :has="{reset: !!modelToEdit.id}"
-        @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
-        @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>
@@ -59,6 +61,8 @@ export default class EditPage extends Vue {
    * 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
   }
 }

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',

package/src-admin/config/vuetify.js

@@ -1,8 +1,11 @@
 import {
   mdiAlarmLightOutline,
   mdiCalendar,
+  mdiCheck,
+  mdiCheckBold,
   mdiChevronRight,
   mdiClose,
+  mdiCloseThick,
   mdiDelete,
   mdiDotsHorizontal,
   mdiDotsVertical,
@@ -26,6 +29,7 @@ export default new Vuetify({
       thumbsUpIcon: mdiThumbUpOutline,
       alarmIcon: mdiAlarmLightOutline,
       closeIcon: mdiClose,
+      closeBoldIcon: mdiCloseThick,
       dotsVerticalIcon: mdiDotsVertical,
       dotsHorizontalIcon: mdiDotsHorizontal,
       logoutIcon: mdiLogoutVariant,
@@ -34,7 +38,9 @@ export default new Vuetify({
       trashCanIcon: mdiDelete,
       calendarIcon: mdiCalendar,
       searchIcon: mdiMagnify,
-      lockIcon: mdiLock
+      lockIcon: mdiLock,
+      checkIcon: mdiCheck,
+      checkBoldIcon: mdiCheckBold
     }
   },
   breakpoint: {

package/src-admin/styles.scss

@@ -15,6 +15,7 @@
 .contextButton {
   color: #AAAAAA !important;
   cursor: pointer;
+
   &:hover {
     color: #333333 !important;
   }
@@ -27,10 +28,6 @@
   }
 }
 
-.v-main {
-  margin-bottom: 2rem;
-}
-
 .theme--light.v-btn.v-btn--has-bg {
   background-color: #E9E9E9;
 }