From 2b3180d3f8a4f0517a910b184d37ac03b3ddadf8 Mon Sep 17 00:00:00 2001
From: Nasr Galal <nasrbue@gmail.com>
Date: Fri, 1 May 2020 23:11:14 +0200
Subject: [PATCH] fix: split main app-frame component

---
 src/components/AppFrame.vue      | 214 +------------------------------
 src/components/NavBar.vue        | 213 ++++++++++++++++++++++++++++++
 src/components/shared/Button.vue |  56 ++++++++
 3 files changed, 275 insertions(+), 208 deletions(-)
 create mode 100644 src/components/NavBar.vue
 create mode 100644 src/components/shared/Button.vue

diff --git a/src/components/AppFrame.vue b/src/components/AppFrame.vue
index 62b98393..3f4b7619 100644
--- a/src/components/AppFrame.vue
+++ b/src/components/AppFrame.vue
@@ -1,159 +1,8 @@
 <!-- App.vue -->
 <template>
   <v-app>
-    <v-navigation-drawer
-      v-model="drawer"
-      :clipped="$vuetify.breakpoint.lgAndUp"
-      app
-    >
-      <v-list dense>
-        <template v-for="item in items">
-          <v-row
-            v-if="item.heading"
-            :key="item.heading"
-            align="center"
-            :class="item.class"
-          >
-            <v-col cols="6">
-              <v-subheader v-if="item.heading">
-                {{ item.heading }}
-              </v-subheader>
-            </v-col>
-            <v-col
-              cols="6"
-              class="text-center"
-            >
-              <a
-                href="#!"
-                class="body-2 black--text"
-              >EDIT</a>
-            </v-col>
-          </v-row>
-          <v-list-group
-            v-else-if="item.children"
-            :key="item.text"
-            v-model="item.model"
-            :prepend-icon="item.model ? item.icon : item['icon-alt']"
-            append-icon=""
-            :class="item.class"
-          >
-            <template v-slot:activator>
-              <v-list-item>
-                <v-list-item-content>
-                  <v-list-item-title>
-                    {{ item.text }}
-                  </v-list-item-title>
-                </v-list-item-content>
-              </v-list-item>
-            </template>
-            <v-list-item
-              v-for="(child, i) in item.children"
-              :key="i"
-            >
-              <v-list-item-action v-if="child.icon">
-                <v-icon>{{ child.icon }}</v-icon>
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title>
-                  {{ child.text }}
-                </v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </v-list-group>
-          <v-list-item
-            v-else
-            :key="item.text"
-            :to="item.link"
-            :class="item.class"
-          >
-            <v-list-item-action>
-              <v-icon>{{ item.icon }}</v-icon>
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ item.text }}
-              </v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-        </template>
-      </v-list>
-    </v-navigation-drawer>
-
-    <v-app-bar
-      :clipped-left="$vuetify.breakpoint.lgAndUp"
-      app
-      color="blue darken-3"
-      dark
-    >
-      <v-toolbar-title
-        style="width: 300px"
-        class="ml-0 pl-4"
-      >
-        <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-        <span class="hidden-sm-and-down">Ambianic</span>
-      </v-toolbar-title>
-      <v-text-field
-        flat
-        solo-inverted
-        hide-details
-        prepend-inner-icon="search"
-        label="Search"
-        class="hidden-sm-and-down"
-      />
-      <v-spacer />
-      <v-btn
-        icon
-        v-if="!isEdgeConnected"
-        @click="$router.push('edge-connect')"
-      >
-        <v-icon>
-          mdi-download-off
-        </v-icon>
-      </v-btn>
-      <v-btn
-        icon
-      >
-        <v-badge
-          top
-          right
-          overlap
-          color="error lighten-1"
-          class="align-self-center"
-          :content="newFavorites"
-          :value="newFavorites"
-          show="false"
-        >
-          <v-icon>mdi-heart</v-icon>
-        </v-badge>
-      </v-btn>
-      <v-btn icon>
-        <v-badge
-          top
-          right
-          overlap
-          color="error lighten-1"
-          class="align-self-center"
-          :content="newAlerts"
-          :value="newAlerts"
-        >
-          <v-icon>mdi-bell</v-icon>
-        </v-badge>
-      </v-btn>
-      <v-btn
-        icon
-        to="about"
-      >
-        <v-avatar
-          size="32px"
-          item
-        >
-          <v-img
-            src="@/assets/logo5.svg"
-            alt="Ambianic.ai logo"
-          />
-        </v-avatar>
-      </v-btn>
-    </v-app-bar>
+    <!-- nav goes here -->
+    <NavBar />
 
     <v-content>
       <v-container
@@ -177,66 +26,15 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import {
-  PEER_CONNECTED
-} from '@/store/mutation-types'
-import UpdateNotification from './UpdateNotification'
+import NavBar from './NavBar.vue'
 
 export default {
   name: 'AppFrame',
   components: {
-    UpdateNotification
-  },
-  props: {
+    UpdateNotification: () => import('./UpdateNotification'), NavBar
   },
   data: () => ({
-    dialog: false,
-    drawer: null,
-    newFavorites: 0,
-    newAlerts: 2,
-    on: true,
-    items: [
-      { icon: 'history', text: 'Timeline', link: '/timeline' },
-      // { icon: 'mdi-account-heart-outline', text: 'People', link: '/people' },
-      // class: 'hidden-sm-and-down' ensures that an item is not shown
-      // on small screens. For example flows are only visible on screens with
-      // enough space for a smooth user experience.
-      // { icon: 'mdi-pipe', text: 'Flows', link: '/flows' },
-      // {
-      //  icon: 'keyboard_arrow_up',
-      //  'icon-alt': 'keyboard_arrow_down',
-      //  text: 'Labels',
-      //  model: true,
-      //  children: [
-      //    { icon: 'add', text: 'Create label' }
-      //  ]
-      // },
-      // {
-      //  icon: 'keyboard_arrow_up',
-      //  'icon-alt': 'keyboard_arrow_down',
-      //  text: 'More',
-      //  model: false,
-      //  children: [
-      //    { text: 'Sources' },
-      //    { text: 'Components' },
-      //    { text: 'Integrations' }
-      //  ]
-      // },
-      { icon: 'mdi-video-input-antenna', text: 'Connect', link: '/edge-connect' },
-      // { icon: 'settings', text: 'Settings', link: '/settings' },
-      { icon: 'chat_bubble', text: 'Send feedback', link: '/feedback' },
-      { icon: 'help', text: 'Help', link: '/help' },
-      { icon: 'info', text: 'About Ambianic', link: '/about' }
-    ]
-  }),
-  computed: {
-    ...mapState({
-      isEdgeConnected: function (state) {
-        console.debug(`app frame: state.pnp.peerConnectionStatus: ${state.pnp.peerConnectionStatus}`)
-        return state.pnp.peerConnectionStatus === PEER_CONNECTED
-      }
-    })
-  }
+    // ...
+  })
 }
 </script>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 00000000..ff563730
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,213 @@
+<template>
+  <v-flex>
+    <v-app-bar
+      :clipped-left="$vuetify.breakpoint.lgAndUp"
+      app
+      color="blue darken-3"
+      dark
+    >
+      <v-toolbar-title
+        style="width: 300px"
+        class="ml-0 pl-4"
+      >
+        <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+        <span class="hidden-sm-and-down">Ambianic</span>
+      </v-toolbar-title>
+      <v-text-field
+        flat
+        solo-inverted
+        hide-details
+        prepend-inner-icon="search"
+        label="Search"
+        class="hidden-sm-and-down"
+      />
+      <v-spacer />
+
+      <amb-button
+        with-badge
+        is-icon
+        icon="download-off"
+        v-if="!isEdgeConnected"
+        @click="$router.push('edge-connect')"
+      />
+
+      <!-- test -->
+      <amb-button
+        with-badge
+        is-icon
+        icon="heart"
+        :badge-content="newFavorites"
+        :badge-value="newFavorites"
+      />
+
+      <amb-button
+        with-badge
+        is-icon
+        icon="bell"
+        :badge-content="newAlerts"
+        :badge-value="newAlerts"
+      />
+
+      <amb-button
+        is-icon
+        to="about"
+      >
+        <v-avatar
+          size="32px"
+          item
+        >
+          <v-img
+            src="@/assets/logo5.svg"
+            alt="Ambianic.ai logo"
+          />
+        </v-avatar>
+      </amb-button>
+    </v-app-bar>
+
+    <!-- drawer -->
+    <v-navigation-drawer
+      v-model="drawer"
+      :clipped="$vuetify.breakpoint.lgAndUp"
+      app
+    >
+      <v-list dense>
+        <template v-for="item in items">
+          <v-row
+            v-if="item.heading"
+            :key="item.heading"
+            align="center"
+            :class="item.class"
+          >
+            <v-col cols="6">
+              <v-subheader v-if="item.heading">
+                {{ item.heading }}
+              </v-subheader>
+            </v-col>
+            <v-col
+              cols="6"
+              class="text-center"
+            >
+              <a
+                href="#!"
+                class="body-2 black--text"
+              >EDIT</a>
+            </v-col>
+          </v-row>
+          <v-list-group
+            v-else-if="item.children"
+            :key="item.text"
+            v-model="item.model"
+            :prepend-icon="item.model ? item.icon : item['icon-alt']"
+            append-icon=""
+            :class="item.class"
+          >
+            <template v-slot:activator>
+              <v-list-item>
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ item.text }}
+                  </v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </template>
+            <v-list-item
+              v-for="(child, i) in item.children"
+              :key="i"
+            >
+              <v-list-item-action v-if="child.icon">
+                <v-icon>{{ child.icon }}</v-icon>
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>
+                  {{ child.text }}
+                </v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list-group>
+          <v-list-item
+            v-else
+            :key="item.text"
+            :to="item.link"
+            :class="item.class"
+          >
+            <v-list-item-action>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ item.text }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </template>
+      </v-list>
+    </v-navigation-drawer>
+  </v-flex>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import {
+  PEER_CONNECTED
+} from '@/store/mutation-types'
+
+export default {
+  name: 'NavBar',
+  components: {
+    AmbButton: () => import('./shared/Button.vue')
+  },
+  data: () => ({
+    dialog: false,
+    drawer: true,
+    on: true,
+    newFavorites: 0,
+    newAlerts: 2,
+    logo: '../assets/logo5.svg',
+    items: [
+      { icon: 'history', text: 'Timeline', link: '/timeline' },
+      // { icon: 'mdi-account-heart-outline', text: 'People', link: '/people' },
+      // class: 'hidden-sm-and-down' ensures that an item is not shown
+      // on small screens. For example flows are only visible on screens with
+      // enough space for a smooth user experience.
+      // { icon: 'mdi-pipe', text: 'Flows', link: '/flows' },
+      // {
+      //  icon: 'keyboard_arrow_up',
+      //  'icon-alt': 'keyboard_arrow_down',
+      //  text: 'Labels',
+      //  model: true,
+      //  children: [
+      //    { icon: 'add', text: 'Create label' }
+      //  ]
+      // },
+      // {
+      //  icon: 'keyboard_arrow_up',
+      //  'icon-alt': 'keyboard_arrow_down',
+      //  text: 'More',
+      //  model: false,
+      //  children: [
+      //    { text: 'Sources' },
+      //    { text: 'Components' },
+      //    { text: 'Integrations' }
+      //  ]
+      // },
+      { icon: 'mdi-video-input-antenna', text: 'Connect', link: '/edge-connect' },
+      // { icon: 'settings', text: 'Settings', link: '/settings' },
+      { icon: 'chat_bubble', text: 'Send feedback', link: '/feedback' },
+      { icon: 'help', text: 'Help', link: '/help' },
+      { icon: 'info', text: 'About Ambianic', link: '/about' }
+    ]
+  }),
+  computed: {
+    ...mapState({
+      isEdgeConnected: function (state) {
+        console.debug(`app frame: state.pnp.peerConnectionStatus: ${state.pnp.peerConnectionStatus}`)
+        return state.pnp.peerConnectionStatus === PEER_CONNECTED
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/shared/Button.vue b/src/components/shared/Button.vue
new file mode 100644
index 00000000..6fda295f
--- /dev/null
+++ b/src/components/shared/Button.vue
@@ -0,0 +1,56 @@
+<template>
+  <v-btn
+    :icon="isIcon"
+    :to="to"
+  >
+    <v-badge
+      v-if="withBadge"
+      top
+      right
+      overlap
+      color="error lighten-1"
+      class="align-self-center"
+      :content="badgeContent"
+      :value="badgeValue"
+    >
+      <v-icon>mdi-{{ icon }}</v-icon>
+    </v-badge>
+    <slot />
+  </v-btn>
+</template>
+
+<script>
+export default {
+  name: 'Button',
+  props: {
+    isIcon: {
+      type: Boolean,
+      default: false
+    },
+    badgeContent: {
+      type: Number,
+      default: null
+    },
+    badgeValue: {
+      type: Number,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    withBadge: {
+      type: Boolean,
+      default: false
+    },
+    to: {
+      type: String,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>