initial commit

2020-02-02 13:47:47 +01:00
commit 2c2176937c
69 changed files with 13730 additions and 0 deletions
@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <v-toolbar flat class="primary" height="65px">
+      <div class="toolbar d-flex justify-space-between white--text">
+        <div class="d-flex align-center">
+          <div class="application-logo-container mt-1">
+            <img
+              src="../../assets/logo.svg"
+              alt="logo"
+            />
+          </div>
+          <div class="application-name ml-6 mr-12">
+            <template>
+              {{ applicationName }}
+            </template>
+          </div>
+          <div class="navigation-container d-flex">
+            <div
+              class="nav-item nav-hover mx-3"
+              v-for="item in navigationItems"
+              v-bind:key="item.routerName"
+              v-bind:class="{
+                itemSelected: selectedNavItem === item.routerName
+              }"
+              @click="
+                item.dropdownOptions.length === 0 ? onNavItemClick(item) : {}
+              "
+            >
+              <v-menu offset-y>
+                <template v-slot:activator="{ on }">
+                  <div
+                    class="fill-height d-flex align-center justify-center px-3"
+                    v-on="on"
+                  >
+                    <div>{{ item.title }}</div>
+                    <v-icon
+                      v-if="item.dropdownOptions.length > 0"
+                      class="white--text ml-3"
+                    >
+                      mdi-chevron-down
+                    </v-icon>
+                  </div>
+                </template>
+                <v-list v-if="item.dropdownOptions.length > 0" :dense="true">
+                  <div
+                    v-for="(dropdownItem, index) in item.dropdownOptions"
+                    :key="index"
+                  >
+                    <v-list-item @click="onNavItemClick(dropdownItem)">
+                      <v-icon class="mr-6 primary--text">
+                        {{ dropdownItem.icon }}
+                      </v-icon>
+                      <v-list-item-title>{{
+                        $t(dropdownItem.title)
+                      }}</v-list-item-title>
+                    </v-list-item>
+                    <v-divider
+                      class="mr-3 ml-3"
+                      v-if="index < item.dropdownOptions.length - 1"
+                    >
+                    </v-divider>
+                  </div>
+                </v-list>
+              </v-menu>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex align-center"></div>
+      </div>
+    </v-toolbar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from 'vue-property-decorator';
+import { NavigationItemInterface } from '@/interfaces/NavigationItem.interface';
+import { NavigationItemStorage } from '@/helper/NavigationItemStorage';
+
+@Component({})
+export default class NavigationView extends Vue {
+  public applicationName: string = process.env.VUE_APP_TITLE!;
+  private navigationItems: NavigationItemInterface[] = [];
+  private selectedNavItem = 'companyDashboard';
+
+  /**
+   * On click handler that activates a route
+   * @param item
+   */
+  public onNavItemClick(item: any) {
+    switch (item.routerName) {
+      case 'createCustomer':
+        break;
+      case 'createUser':
+        break;
+      case 'createCompany':
+        break;
+      default:
+        this.selectedNavItem = item.routerName;
+        this.$router.push({ name: item.routerName });
+    }
+  }
+
+  /**
+   * Watch the route url for changing the navigation bar
+   */
+  @Watch('$route', { immediate: true, deep: true })
+  private onUrlChange(routerValue: any) {
+    if (routerValue.name) {
+      this.selectedNavItem = routerValue.name;
+    }
+    this.setNavigationItems();
+  }
+
+  /**
+   * Determines the navigation items regarding the current user role
+   */
+  private setNavigationItems() {
+    this.navigationItems = NavigationItemStorage;
+  }
+}
+</script>
+
+<style>
+
+  .navigation-container {
+    height: 65px;
+  }
+
+</style>