@afeefa/vue-app 0.0.173 → 0.0.175

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

@@ -1 +1 @@
-0.0.173
+0.0.175

package/package.json

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

package/src/components/AInfo.vue

@@ -2,6 +2,7 @@
   <v-alert
     v-bind="$attrs"
     :style="{display: inline ? 'inline-block' : 'block'}"
+    :class="['a-info', {xSmall}]"
     dense
     border="left"
     colored-border
@@ -16,11 +17,24 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: [{inline: true}]
+  props: [{inline: true, xSmall: false}]
 })
 export default class AInfo extends Vue {
 }
 </script>
 
 <style lang="scss" scoped>
+:deep(.v-icon) {
+  margin-right: .4rem;
+}
+
+.xSmall {
+  padding: .3rem .6rem;
+  font-size: .9rem;
+
+  :deep(.v-icon) {
+    margin-left: .2rem;
+    margin-right: .4rem;
+  }
+}
 </style>

package/src/components/ALoadingIndicator.vue

@@ -6,6 +6,10 @@
     :color="color"
     v-bind="$attrs"
   />
+  <div
+    v-else
+    style="height: 4px;"
+  />
 </template>
 
 <script>

package/src/components/ATable.vue

@@ -53,6 +53,12 @@ export default class ATable extends Vue {
 
       white-space: nowrap;
       vertical-align: middle;
+      max-width: 300px;
+
+      .a-table-cell-truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
 
       &.text--info {
         color: #888888 !important;

package/src/components/ATableRow.vue

@@ -117,6 +117,11 @@ export default class ATableRow extends Vue {
     line-height: .9;
   }
 
+  .textblock--tiny {
+    font-size: .8rem;
+    line-height: .8;
+  }
+
   [class*=text-] {
     color: inherit;
   }

package/src/plugins/route-config/RouteConfigPlugin.js

@@ -37,6 +37,7 @@ class RouteConfigPlugin {
 
   _routeDefinitions = []
   _config = {}
+  _scrollContainer = null
 
   _breadcrumbDefinitions = []
   _breadcrumbDefinitionMap = {}
@@ -117,6 +118,11 @@ class RouteConfigPlugin {
     return this
   }
 
+  scrollContainer (scrollContainer) {
+    this._scrollContainer = scrollContainer
+    return this
+  }
+
   routes (callback) {
     this._promise = this._promise.then(() => {
       callback = callback({
@@ -161,6 +167,17 @@ class RouteConfigPlugin {
         for (const route of this._routes) {
           this._router.addRoute(route)
         }
+
+        if (this._scrollContainer) { // scroll to 0 if not window object is used as scoll parent
+          this._router.afterEach((to, from) => {
+            if (to.path !== from.path) {
+              const el = document.querySelector(this._scrollContainer)
+              if (el) {
+                el.scrollTop = 0
+              }
+            }
+          })
+        }
       })
     })
 

package/src/utils/format-time.js

@@ -0,0 +1,17 @@
+export function formatTime (date) {
+  if (!date) {
+    return ''
+  }
+
+  const hour = addZero(date.getHours())
+  const minutes = addZero(date.getMinutes())
+
+  return `${hour}:${minutes}`
+}
+
+function addZero (i) {
+  if (i < 10) {
+    i = '0' + i
+  }
+  return i
+}

package/src-admin/components/App.vue

@@ -1,136 +1,41 @@
 <template>
-  <div>
-    <v-navigation-drawer
-      v-model="drawer"
-      app
-      left
-      width="280"
-      class="menubar"
-    >
-      <v-container
-        flex-column
-        align-center
-        fill-height
-      >
-        <a-row
-          justify-end
-          width="100%"
-        >
-          <v-app-bar-nav-icon
-            class="sidebarToggleButton mt-1 mr-2 ml-3"
-            title="Menu schließen"
-            @click="toggleDrawer"
-          >
-            <v-icon>{{ closeMenuIcon }}</v-icon>
-          </v-app-bar-nav-icon>
-        </a-row>
-
-        <router-link
-          :to="{name: rootRouteName}"
-          class="logoContainer d-flex flex-column align-center pa-6"
-        >
-          <img
-            v-if="logoUrl"
-            class="logo"
-            :src="logoUrl"
-          >
-          <div class="text-button">
-            {{ title }}
-          </div>
-        </router-link>
-
-        <component
-          :is="SidebarMenu"
-          class="px-0 mt-0 flex-grow-1"
-        />
-
-        <v-container
-          v-if="hasAuthService"
-          d-flex
-          align-center
-          gap-4
-          pa-6
-          pb-8
-        >
-          <div class="d-flex align-center gap-3">
-            <v-avatar
-              color="primary white--text"
-              size="40"
-            >
-              {{ account.first_name.charAt(0).toUpperCase() }}{{ account.last_name.charAt(0).toUpperCase() }}
-            </v-avatar>
-
-            <div>
-              <div class="accountName">
-                {{ account.first_name }}
-                <template v-if="$auth.roles[0]">
-                  ({{ $auth.roles[0].title }})
-                </template>
-              </div>
-
-              <div class="body-2 d-flex align-center">
-                <v-icon class="ml-n1 mr-1">
-                  $logoutIcon
-                </v-icon>
-                <a @click="logout()">Logout</a>
-              </div>
-            </div>
-
-            <a-context-menu v-if="$has.settings">
-              <a-context-menu-item
-                :to="{name: 'settings', params: {accountId: account.id}}"
-              >
-                <v-icon>$pencilIcon</v-icon>
-                Einstellungen
-              </a-context-menu-item>
-            </a-context-menu>
-          </div>
-        </v-container>
-      </v-container>
-    </v-navigation-drawer>
-
-    <a-loading-indicator
+  <div class="admin">
+    <v-overlay
       fixed
-      top
-      left
-      class="loadingIndicator"
-      :isLoading="!!numLoadingRequests"
-      :color="loaderColor"
+      :value="sidebarsFloating"
+      @click="closeFloatingSidebars"
     />
 
-    <v-main id="v-main">
-      <a-row
-        class="topbar"
-        align-start
+    <div class="main-layout">
+      <navigation-bar :has="$has" />
+
+      <div
+        id="v-main"
+        :class="{marginRight: hasFloatingInformationBar}"
       >
-        <v-app-bar-nav-icon
-          v-if="!drawer"
-          class="sidebarToggleButton mr-2 ml-3"
-          title="Menu öffnen"
-          @click="toggleDrawer"
+        <a-loading-indicator
+          top
+          class="loadingIndicator"
+          :isLoading="!!numLoadingRequests"
+          :color="loaderColor"
         />
 
-        <a-breadcrumbs />
-      </a-row>
-
-      <v-container
-        fluid
-        class="pa-8 pt-0"
-      >
         <sticky-header />
 
-        <router-view :class="{isLoading: !!numLoadingRequests}" />
-      </v-container>
+        <div class="pa-8 pt-4">
+          <router-view :class="{isLoading: !!numLoadingRequests}" />
+        </div>
+
+        <sticky-footer-container />
+      </div>
 
-      <sticky-footer-container />
-    </v-main>
+      <information-bar />
+    </div>
 
     <a-dialog id="app" />
 
     <a-save-indicator />
 
-    <sidebar />
-
     <flying-context-container />
   </div>
 </template>
@@ -144,18 +49,22 @@ import AppBarButtons from './app/AppBarButtons'
 import AppBarTitleContainer from './app/AppBarTitleContainer'
 import FlyingContextContainer from './FlyingContextContainer'
 import StickyFooterContainer from './StickyFooterContainer'
-import Sidebar from './Sidebar'
+import NavigationBar from './NavigationBar'
+import InformationBar from './InformationBar'
 import StickyHeader from './StickyHeader'
 import '../styles.scss'
 import { mdiBackburger } from '@mdi/js'
+import { SidebarEvent } from '@a-admin/events'
+import { sidebarService } from './sidebar/SidebarService'
 
 @Component({
   components: {
     AppBarButtons,
     AppBarTitleContainer,
+    NavigationBar,
+    InformationBar,
     FlyingContextContainer,
     StickyFooterContainer,
-    Sidebar,
     StickyHeader
   }
 })
@@ -166,39 +75,32 @@ export default class App extends Vue {
   closeMenuIcon = mdiBackburger
   numLoadingRequests = 0
 
+  sidebarsFloating = false
+  hasFloatingInformationBar = false
+
   created () {
     this.$events.on(LoadingEvent.START_LOADING, this.startLoading)
     this.$events.on(LoadingEvent.STOP_LOADING, this.stopLoading)
-    this.$emit('appLoaded')
-  }
 
-  get SidebarMenu () {
-    return adminConfig.app.components.SidebarMenu
-  }
+    this.$events.on(SidebarEvent.STATUS, ({payload: {hasFloatingOverlay, mobile, information}}) => {
+      this.sidebarsFloating = hasFloatingOverlay
+      this.hasFloatingInformationBar = mobile && information
+    })
 
-  get logoUrl () {
-    return adminConfig.app.logo
-  }
+    this.sidebarsFloating = sidebarService.hasFloatingOverlay
+    this.hasFloatingInformationBar = sidebarService.mobile && sidebarService.information
 
-  get account () {
-    if (this.hasAuthService) {
-      return this.$auth.account
-    }
-    return null
+    this.$emit('appLoaded')
   }
 
-  get title () {
-    return adminConfig.app.title
+  closeFloatingSidebars () {
+    sidebarService.closeAllFloating()
   }
 
   get loaderColor () {
     return adminConfig.app.loaderColor
   }
 
-  get rootRouteName () {
-    return adminConfig.app.rootRouteName || 'root'
-  }
-
   startLoading () {
     this.numLoadingRequests++
   }
@@ -206,66 +108,26 @@ export default class App extends Vue {
   stopLoading () {
     this.numLoadingRequests--
   }
-
-  toggleDrawer () {
-    this.drawer = !this.drawer
-  }
-
-  get hasAuthService () {
-    return !!this.$auth
-  }
-
-  logout () {
-    this.$auth.logout()
-  }
 }
 </script>
 
 
 <style lang="scss" scoped>
-.accountName {
-  line-height: 1.2;
-  word-break: break-all;
-}
-
-.logoContainer {
-  text-decoration: none;
-}
-
-.logo {
-  max-height: 80px;
-  max-width: 90%;
-}
-
 .isLoading {
   opacity: .6;
 }
 
-.sidebarToggleButton {
-  width: 36px !important;
-  height: 36px !important;
-  margin-top: 1px;
+.main-layout {
+  display: flex;
 }
 
-.topbar {
-  position: relative;
-  width: 100%;
-  left: 0;
+.loadingIndicator {
+  z-index: 3;
+  position: sticky;
   top: 0;
-  height:40px;
-  padding: .2rem 1.1rem;
-  background-color: white;
-}
-
-.a-breadcrumbs {
-  margin-top: 7px;
-}
-
-.menubar {
-  // background: #666666 !important;
 }
 
-#sidebar {
-  // background: #F4F4F4 !important;
+#v-main.marginRight {
+  margin-right: 60px;
 }
 </style>

package/src-admin/components/CollapsibleSection.vue

@@ -0,0 +1,64 @@
+<template>
+  <div :class="['collapsible-section', {collapsed}]">
+    <h-separator
+      v-bind="{...$attrs, collapsible: true}"
+      :collapsed.sync="collapsed"
+    />
+
+    <a-info
+      v-if="showHint && hint"
+      type="info"
+      x-small
+    >
+      Inhalt eingeklappt. <a @click="collapsed = !collapsed">ausklappen</a>
+    </a-info>
+
+    <div style="height: 1px;" />
+
+    <collapse-transition>
+      <div
+        v-show="!collapsed"
+        class="content"
+      >
+        <slot />
+      </div>
+    </collapse-transition>
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue, Watch } from '@a-vue'
+
+@Component({
+  props: [{showHint: true}]
+})
+export default class CollapsibleSection extends Vue {
+  collapsed = false
+  hint = false
+
+  @Watch('collapsed')
+  collapsedChanged () {
+    if (this.collapsed) {
+      setTimeout(() => {
+        this.hint = this.collapsed
+      }, 150)
+    } else {
+      this.hint = false
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.collapsible-section {
+  position: relative;
+}
+
+.a-info  {
+  position: absolute;
+  margin-top: -1rem;
+  color: #666666;
+}
+</style>

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;
-  border-left: 1px solid rgba(0, 0, 0, .12);
+  box-shadow: 0 0 17px #00000033;
+  border-left: 1px solid #DDDDDD;
 
   &:not(.visible) {
     left: 101vw;

package/src-admin/components/HSeparator.vue

@@ -0,0 +1,90 @@
+<template>
+  <div :class="['h-separator', {first}]">
+    <hr>
+
+    <div
+      :class="['label', {collapsible}]"
+      @click="collapseClick"
+    >
+      {{ label }}
+
+      <template v-if="collapsible">
+        <v-icon class="contextButton mt-n1 ml-n2">
+          {{ collapsed_ ? '$caretRightIcon' : '$caretDownIcon' }}
+        </v-icon>
+      </template>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue, Watch } from '@a-vue'
+
+@Component({
+  props: ['label', {first: false, collapsible: false, collapsed: false}]
+})
+export default class HSeparator extends Vue {
+  collapsed_ = false
+
+  created () {
+    this.collapsed_ = this.collapsed
+  }
+
+  @Watch('collapsed')
+  collapsedChangedFromOutside () {
+    this.collapsed_ = this.collapsed
+  }
+
+  collapseClick () {
+    this.collapsed_ = !this.collapsed_
+    this.$emit('update:collapsed', this.collapsed_)
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.h-separator {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 5rem 0 3rem;
+
+  &.first{
+    margin-top: 0;
+  }
+}
+
+hr {
+  border: none;
+  border-top: 2px solid #EEEEEE;
+}
+
+.label {
+  position: absolute;
+  background: white;
+  padding: 0 1rem;
+  text-transform: uppercase;
+  letter-spacing: 5px;
+  color: #CCCCCC;
+  font-size: .8rem;
+  white-space: nowrap;
+
+  left: 45%;
+  transform: translateX(-50%);
+
+  &.collapsible {
+    cursor: pointer;
+
+    &:hover {
+      color: #333333;
+
+      .v-icon {
+        color: #333333 !important;
+      }
+    }
+  }
+}
+</style>