@afeefa/vue-app 0.0.173 → 0.0.174

package/src-admin/components/InformationBar.vue

@@ -0,0 +1,176 @@
+<template>
+  <div
+    v-show="visible"
+    id="information-bar"
+    :class="{mobile, rail}"
+  >
+    <div :class="['toggleButton', {rail}]">
+      <v-app-bar-nav-icon
+        :title="'Menü ' + (rail ? 'ausklappen' : 'einklappen')"
+        @click="toggleRail"
+      >
+        <v-icon>
+          {{ rail ? openMenuIcon : closeMenuIcon }}
+        </v-icon>
+      </v-app-bar-nav-icon>
+    </div>
+
+    <div
+      id="information-bar__children"
+      :class="{rail}"
+    >
+      <div class="top" />
+
+      <div class="bottom" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Vue, Watch } from '@a-vue'
+import { mdiBackburger, mdiForwardburger } from '@mdi/js'
+import { SidebarEvent } from '@a-admin/events'
+import { sidebarService, SidebarState } from './sidebar/SidebarService'
+
+@Component
+export default class InformationBar extends Vue {
+  openMenuIcon = mdiBackburger
+  closeMenuIcon = mdiForwardburger
+
+  visible = false
+  mobile = false
+  rail = false
+
+  created () {
+    this.$events.on(SidebarEvent.STATUS, ({payload: {information, informationRailed, mobile}}) => {
+      this.visible = information
+      this.rail = informationRailed
+      this.mobile = mobile
+    })
+  }
+
+  mounted () {
+    this.mutationWatcher = new MutationObserver(this.domChanged)
+    this.mutationWatcher.observe(this.$el.querySelector('#information-bar__children > .top'), { childList: true })
+    this.mutationWatcher.observe(this.$el.querySelector('#information-bar__children > .bottom'), { childList: true })
+    this.domChanged()
+  }
+
+  /**
+   * park sidebar children and attach - only for use with HMR which would remove all children on destroy 234567890
+   *
+   * s
+   */
+  destroyed () {
+    function moveChildren (from, to) {
+      for (const child of from.children) {
+        to.appendChild(child)
+      }
+    }
+
+    const elTop = document.createElement('div')
+    document.body.appendChild(elTop)
+    moveChildren(this.$el.querySelector('#information-bar__children .top'), elTop)
+
+    const elBottom = document.createElement('div')
+    document.body.appendChild(elBottom)
+    moveChildren(this.$el.querySelector('#information-bar__children .bottom'), elBottom)
+
+    this.$nextTick(() => {
+      moveChildren(elTop, document.querySelector('#information-bar__children .top'))
+      moveChildren(elBottom, document.querySelector('#information-bar__children .bottom'))
+      this.$nextTick(() => {
+        this.$events.dispatch(new SidebarEvent(SidebarEvent.STATUS, new SidebarState(sidebarService)))
+      })
+    })
+  }
+
+  @Watch('rail')
+  railChanged () {
+    this.$el.style.marginRight = this.rail ? '-240px' : 0
+  }
+
+  toggleRail () {
+    sidebarService.setRailInformation(!this.rail)
+  }
+
+  domChanged () {
+    const old = this.visible
+    const visible = this.hasSidebarItems()
+
+    if (visible && !old) {
+      sidebarService.setInformation(true)
+    }
+
+    if (!visible && old) {
+      sidebarService.setInformation(false)
+    }
+  }
+
+  getChildrenContainer () {
+    return this.$el.querySelector('#information-bar__children')
+  }
+
+  hasSidebarItems () {
+    return !!(this.$el.querySelector('#information-bar__children .top').children.length +
+      this.$el.querySelector('#information-bar__children .bottom').children.length)
+  }
+
+  hideSidebar () {
+    sidebarService.setInformation(false)
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+#information-bar {
+  position: relative;
+
+  flex: 0 0 300px;
+  width: 300px;
+  height: 100vh;
+  overflow-y: auto;
+
+  border-left: 1px solid rgba(0, 0, 0, .12);
+  transition: all .2s;
+
+  background: white;
+  padding: 4rem 1.5rem 1.5rem;
+
+  &.rail {
+    padding: 4rem .8rem .8rem;
+  }
+
+  &.mobile {
+    position: fixed;
+    z-index: 299;
+    right: 0;
+
+    &:not(.rail) {
+      border-left: none;
+      box-shadow: 0 0 7px #00000066;
+    }
+  }
+}
+
+.toggleButton {
+  position: absolute;
+  top: 0;
+  left: .3rem;
+}
+
+#information-bar__children {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.top, .bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .75rem;
+}
+</style>

package/src-admin/components/NavigationBar.vue

@@ -0,0 +1,187 @@
+<template>
+  <div
+    id="navigation-bar"
+    :class="{mobile}"
+  >
+    <div class="toggleButton">
+      <v-app-bar-nav-icon
+        title="Menü schließen"
+        @click="hideSidebar"
+      >
+        <v-icon>{{ closeMenuIcon }}</v-icon>
+      </v-app-bar-nav-icon>
+    </div>
+
+    <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>
+  </div>
+</template>
+
+<script>
+import { Component, Vue, Watch } from '@a-vue'
+import { mdiBackburger } from '@mdi/js'
+import { adminConfig } from '@a-admin/config/AdminConfig'
+import { SidebarEvent } from '@a-admin/events'
+import { sidebarService } from './sidebar/SidebarService'
+
+@Component
+export default class NavigationBar extends Vue {
+  $hasOptions = ['settings']
+
+  closeMenuIcon = mdiBackburger
+
+  visible = true
+  mobile = false
+
+  created () {
+    this.$events.on(SidebarEvent.STATUS, ({payload: {navigation, mobile}}) => {
+      this.visible = navigation
+      this.mobile = mobile
+    })
+
+    this.mobile = sidebarService.mobile
+  }
+
+  @Watch('visible')
+  visibleChanged () {
+    this.$el.style.marginLeft = this.visible ? 0 : '-300px'
+  }
+
+  hideSidebar () {
+    sidebarService.setNavigation(false)
+  }
+
+  get rootRouteName () {
+    return adminConfig.app.rootRouteName || 'root'
+  }
+
+  get logoUrl () {
+    return adminConfig.app.logo
+  }
+
+  get title () {
+    return adminConfig.app.title
+  }
+
+  get SidebarMenu () {
+    return adminConfig.app.components.SidebarMenu
+  }
+
+  get hasAuthService () {
+    return !!this.$auth
+  }
+
+  get account () {
+    if (this.hasAuthService) {
+      return this.$auth.account
+    }
+    return null
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#navigation-bar {
+  position: relative;
+
+  flex: 0 0 300px;
+  width: 300px;
+  height: 100vh;
+  overflow: hidden;
+
+  border-right: 1px solid rgba(0, 0, 0, .12);
+  transition: all .2s;
+
+  background: white;
+  padding-top: 2rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  &.mobile {
+    position: fixed;
+    box-shadow: 0 0 7px #00000066;
+    z-index: 299;
+  }
+}
+
+.toggleButton {
+  position: absolute;
+  top: 0;
+  right: .3rem;
+}
+
+.accountName {
+  line-height: 1.2;
+  word-break: break-all;
+}
+
+.logoContainer {
+  text-decoration: none;
+}
+
+.logo {
+  max-height: 80px;
+  max-width: 90%;
+}
+</style>

package/src-admin/components/StickyHeader.vue

@@ -1,10 +1,23 @@
 <template>
   <div
     id="stickyHeader"
-    :class="['d-flex align-center gap-8', {visible}]"
+    :class="{visible}"
   >
-    <app-bar-title-container class="appBarTitle flex-grow-1" />
-    <app-bar-buttons class="appBarButtons mr-2" />
+    <a-row class="topbar">
+      <v-app-bar-nav-icon
+        v-if="sidebarIconVisible"
+        class="mr-2 ml-3"
+        title="Menu öffnen"
+        @click="openSidebar"
+      />
+
+      <a-breadcrumbs />
+    </a-row>
+
+    <div :class="['d-flex align-center gap-8 mt-2']">
+      <app-bar-title-container class="appBarTitle flex-grow-1" />
+      <app-bar-buttons class="appBarButtons mr-2" />
+    </div>
   </div>
 </template>
 
@@ -12,6 +25,8 @@
 import { Component, Vue } from '@a-vue'
 import AppBarButtons from './app/AppBarButtons'
 import AppBarTitleContainer from './app/AppBarTitleContainer'
+import { SidebarEvent } from '@a-admin/events'
+import { sidebarService } from './sidebar/SidebarService'
 
 @Component({
   components: {
@@ -22,6 +37,12 @@ import AppBarTitleContainer from './app/AppBarTitleContainer'
 export default class StickyHeader extends Vue {
   visible = false
 
+  sidebarIconVisible = false
+
+  created () {
+    this.$events.on(SidebarEvent.STATUS, ({payload: {navigation, mobile}}) => (this.sidebarIconVisible = !navigation || mobile))
+  }
+
   mounted () {
     // watch mutation
     this.mutationWatcher = new MutationObserver(this.domChanged)
@@ -34,7 +55,7 @@ export default class StickyHeader extends Vue {
       ([e]) => {
         e.target.classList.toggle('is-pinned', e.intersectionRatio < 1)
       },
-      { threshold: [1] }
+      { threshold: 1 }
     )
     observer.observe(el)
 
@@ -49,6 +70,10 @@ export default class StickyHeader extends Vue {
     return !!(this.$el.querySelector('.appBarTitle').children.length +
       this.$el.querySelector('.appBarButtons').children.length)
   }
+
+  openSidebar () {
+    sidebarService.setNavigation(true)
+  }
 }
 </script>
 
@@ -56,9 +81,9 @@ export default class StickyHeader extends Vue {
 <style lang="scss" scoped>
 #stickyHeader {
   position: sticky;
-  top: -1px;
-  margin: 0 -2rem 2rem;
-  padding: 1rem 2rem;
+  left: 0;
+  top: -32px;
+  padding: .75rem 2rem;
   background-color: white;
 
   &:not(.visible) {
@@ -68,7 +93,13 @@ export default class StickyHeader extends Vue {
   &.is-pinned {
     background: white;
     z-index: 2;
-    box-shadow: 0 4px 7px -4px #00000033;
+    box-shadow: 0 0 7px #00000033;
+  }
+
+  .topbar {
+    margin-left: -18px;
+    margin-top: -18px;
+    height:40px;
   }
 }
 </style>

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

@@ -14,18 +14,13 @@
       </v-icon>
     </v-btn>
 
-    <v-avatar
-      color="#F4F4F4"
-      size="3rem"
-    >
-      <v-icon
-        :color="icon.color"
-        size="2.2rem"
-        v-text="icon.icon"
-      />
-    </v-avatar>
+    <v-icon
+      :color="icon.color"
+      size="3.5rem"
+      v-text="icon.icon"
+    />
 
-    <div class="titleContainer">
+    <div class="titleContainer ml-n2">
       <h3 v-if="subtitle">
         {{ subtitle }}
       </h3>

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

@@ -1,18 +1,13 @@
 <template>
   <div class="detailProperty">
     <div class="header">
-      <v-avatar
+      <v-icon
         v-if="_icon"
-        color="#F4F4F4"
-        size="2.5rem"
+        :color="_icon.color"
+        size="3rem"
       >
-        <v-icon
-          :color="_icon.color"
-          size="1.5rem"
-        >
-          {{ _icon.icon }}
-        </v-icon>
-      </v-avatar>
+        {{ _icon.icon }}
+      </v-icon>
 
       <div
         v-else
@@ -70,26 +65,26 @@ export default class DetailProperty extends Vue {
     height: 40px;
     margin-bottom: .5rem;
 
-    .v-avatar {
-      flex: 0 0 40px;
-      margin-right: 15px;
+    > .v-icon {
+      flex: 0 0 3rem;
+      margin-right: 1.5rem;
     }
 
     .iconPlaceholder {
-      width: 55px;
+      width: 4.5rem;
     }
 
     .label {
       display: block;
       text-transform: uppercase;
       letter-spacing: 3px;
-      border-bottom: 5px solid #CCCCCC;
+      border-bottom: 5px solid #DDDDDD;
       color: #666666;
     }
   }
 
   .content {
-    padding-left: 55px;
+    padding-left: 4.5rem;
   }
 }
 </style>

package/src-admin/components/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 
 import AppBarButton from './app/AppBarButton'
 import AppBarTitle from './app/AppBarTitle'
+import CollapsibleSection from './CollapsibleSection.vue'
 import DetailColumn from './detail/DetailColumn'
 import DetailContent from './detail/DetailContent'
 import DetailMeta from './detail/DetailMeta'
@@ -11,6 +12,7 @@ import FlyingContext from './FlyingContext.vue'
 import EditFormButtons from './form/EditFormButtons'
 import RemoveButton from './form/RemoveButton'
 import RemoveDialog from './form/RemoveDialog'
+import HSeparator from './HSeparator.vue'
 import ListCard from './list/ListCard'
 import ListColumnHeader from './list/ListColumnHeader'
 import ListContent from './list/ListContent'
@@ -20,9 +22,10 @@ import ListView from './list/ListView'
 import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
 import EditPage from './pages/EditPage'
-import SidebarItem from './SidebarItem.vue'
+import InformationBarItem from './sidebar/InformationBarItem.vue'
 import Start from './Start.vue'
 import StickyFooter from './StickyFooter.vue'
+import CollapseTransition from './transitions/CollapseTransition.vue'
 
 Vue.component('ListCard', ListCard)
 Vue.component('ListColumnHeader', ListColumnHeader)
@@ -48,7 +51,11 @@ Vue.component('DetailColumn', DetailColumn)
 Vue.component('AppBarButton', AppBarButton)
 Vue.component('AppBarTitle', AppBarTitle)
 
+Vue.component('HSeparator', HSeparator)
+Vue.component('CollapsibleSection', CollapsibleSection)
+Vue.component('CollapseTransition', CollapseTransition)
+
 Vue.component('Start', Start)
 Vue.component('FlyingContext', FlyingContext)
 Vue.component('StickyFooter', StickyFooter)
-Vue.component('SidebarItem', SidebarItem)
+Vue.component('InformationBarItem', InformationBarItem)