From 3a25b67de025b4a5785fc6aa4b745bdd21c827a0 Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Wed, 29 Aug 2018 10:34:30 +0800
Subject: [PATCH] refactor navbar code

---
 resources/assets/js/components/Navbar.vue | 414 +++++++++++++---------
 1 file changed, 250 insertions(+), 164 deletions(-)

diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index 04464016..03ecc9ee 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -1,93 +1,191 @@
-<template>
-  <nav class="navbar navbar-expand-lg navbar-light bg-white">
-    <div class="container">
-      <router-link :to="{ name: user ? 'home' : 'welcome' }" class="navbar-brand">
-        {{ appName }}
-      </router-link>
+< template >
+  <
+  nav class = "navbar navbar-expand-lg navbar-light bg-white" >
+  <
+  div class = "container" >
+  <
+  router - link: to = "{ name: user ? 'home' : 'welcome' }"
+class = "navbar-brand" > {
+    {
+      appName
+    }
+  } <
+  /router-link>
 
-      <template v-if="user">
-            <el-dropdown trigger="click" align="right">
-              <el-badge :value="bellBadge > 0 ? bellBadge : ''" class="item">
-                <el-button icon="el-icon-bell" circle ></el-button>
-              </el-badge>
-              <el-dropdown-menu slot="dropdown">
-                <div id="notification">
-                  <div v-for="item in notification" :key="item">
-                    <a v-on:click.prevent='readNotification(item.id);navigateTo(item.link)'>
-                      <el-dropdown-item>
-                        <b v-if="item.is_read == 0">
-                          {{item.detail}}
-                        </b>
-                        <span v-else >
-                          {{item.detail}}
-                        </span>
-                        <br/>
-                        <span class="opacity80">
-                          {{item.time_interval}}
-                        </span>
-                      </el-dropdown-item>
-                    </a>
-                  </div>
-                </div>
-                <el-button v-if="pagination.next_page_url != null" id="notification-load-more" v-on:click='fetchPaginateBooking(pagination.next_page_url)'>Load more</el-button>
-                <div v-else id="notification-load-more"></div>
-              </el-dropdown-menu>
-            </el-dropdown>
-        </template>
+  <
+  template v -
+  if = "user" >
+  <
+el - dropdown trigger = "click"
+align = "right" >
+  <
+  el - badge: value = "bellBadge > 0 ? bellBadge : ''"
+class = "item" >
+  <
+  el - button icon = "el-icon-bell"
+circle > < /el-button> <
+  /el-badge> <
+  el - dropdown - menu slot = "dropdown" >
+  <
+  div id = "notification" >
+  <
+  div v -
+  for = "item in notification": key = "item" >
+  <
+  a v - on: click.prevent = 'readNotification(item.id);navigateTo(item.link)' >
+  <
+  el - dropdown - item >
+  <
+  b v -
+  if = "item.is_read == 0" > {
+    {
+      item.detail
+    }
+  } <
+  /b> <
+span v -
+  else >{
+      {
+        item.detail
+      }
+    } <
+    /span> <
+    br / >
+    <
+    span class = "opacity80" > {
+      {
+        item.time_interval
+      }
+    } <
+    /span> <
+    /el-dropdown-item> <
+    /a> <
+    /div> <
+    /div> <
+    el - button v -
+    if = "pagination.next_page_url != null"
+id = "notification-load-more"
+v - on: click = 'fetchPaginateBooking(pagination.next_page_url)' > Load more < /el-button> <
+  div v -
+  else id = "notification-load-more" > < /div> <
+    /el-dropdown-menu> <
+    /el-dropdown> <
+    /template>
 
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
-        <span class="navbar-toggler-icon"/>
-      </button>
+    <
+    button class = "navbar-toggler"
+type = "button"
+data - toggle = "collapse"
+data - target = "#navbarToggler"
+aria - controls = "navbarToggler"
+aria - expanded = "false" >
+  <
+  span class = "navbar-toggler-icon" / >
+  <
+  /button>
 
-      <div id="navbarToggler" class="collapse navbar-collapse">
-        <ul class="navbar-nav ml-auto">
-          <locale-dropdown/>
-        </ul>
+  <
+  div id = "navbarToggler"
+class = "collapse navbar-collapse" >
+  <
+  ul class = "navbar-nav ml-auto" >
+  <
+  locale - dropdown / >
+  <
+  /ul>
 
-        <ul class="navbar-nav ml-auto">
-          <!--Authenticated -->
-          <template v-if="user">
-            <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle text-dark"
-               href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
-              {{ user.name }}
-            </a>
-            <div class="dropdown-menu">
-              <router-link :to="{ name: 'settings.profile' }" class="dropdown-item pl-3">
-                <fa icon="cog" fixed-width/>
-                {{ $t('settings') }}
-              </router-link>
+  <
+  ul class = "navbar-nav ml-auto" >
+  <!--Authenticated -->
+  <
+  template v -
+  if = "user" >
+  <
+li class = "nav-item dropdown" >
+  <
+  a class = "nav-link dropdown-toggle text-dark"
+href = "#"
+role = "button"
+data - toggle = "dropdown"
+aria - haspopup = "true"
+aria - expanded = "false" >
+  <
+  img: src = "user.photo_url"
+class = "rounded-circle profile-photo mr-1" > {
+    {
+      user.name
+    }
+  } <
+  /a> <
+  div class = "dropdown-menu" >
+  <
+  router - link: to = "{ name: 'settings.profile' }"
+class = "dropdown-item pl-3" >
+  <
+  fa icon = "cog"
+fixed - width / > {
+    {
+      $t('settings')
+    }
+  } <
+  /router-link>
 
-              <div class="dropdown-divider"/>
-              <a href="#" class="dropdown-item pl-3" @click.prevent="logout">
-                <fa icon="sign-out-alt" fixed-width/>
-                {{ $t('logout') }}
-              </a>
-            </div>
-          </li>
-          </template>
-          <!-- Guest -->
-          <template v-else>
-            <li class="nav-item">
-              <router-link :to="{ name: 'login' }" class="nav-link" active-class="active">
-                {{ $t('login') }}
-              </router-link>
-            </li>
-            <li class="nav-item">
-              <router-link :to="{ name: 'register' }" class="nav-link" active-class="active">
-                {{ $t('register') }}
-              </router-link>
-            </li>
-          </template>
-        </ul>
-      </div>
-    </div>
-  </nav>
-</template>
+  <
+  div class = "dropdown-divider" / >
+  <
+  a href = "#"
+class = "dropdown-item pl-3"
+@click.prevent = "logout" >
+  <
+  fa icon = "sign-out-alt"
+fixed - width / > {
+    {
+      $t('logout')
+    }
+  } <
+  /a> <
+  /div> <
+  /li> <
+  /template>
+  <!-- Guest -->
+  <
+  template v -
+  else >
+    <
+    li class = "nav-item" >
+    <
+    router - link: to = "{ name: 'login' }"
+class = "nav-link"
+active - class = "active" > {
+    {
+      $t('login')
+    }
+  } <
+  /router-link> <
+  /li> <
+  li class = "nav-item" >
+  <
+  router - link: to = "{ name: 'register' }"
+class = "nav-link"
+active - class = "active" > {
+    {
+      $t('register')
+    }
+  } <
+  /router-link> <
+  /li> <
+  /template> <
+  /ul> <
+  /div> <
+  /div> <
+  /nav> <
+  /template>
 
-<script>
-import { mapGetters } from 'vuex'
+  <
+  script >
+  import {
+    mapGetters
+  } from 'vuex'
 import LocaleDropdown from './LocaleDropdown'
 import axios from 'axios'
 import Echo from "laravel-echo"
@@ -101,14 +199,14 @@ export default {
 
   data: () => ({
     appName: window.config.appName,
-    notification:[],
+    notification: [],
     //loadingNotification:false,
-    bellBadge : 0,
-    unread_message_length:0,
+    bellBadge: 0,
+    unread_message_length: 0,
     url: '/api/notification/user',
     pagination: [],
   }),
-  mounted () {
+  mounted() {
     this.listen()
     this.test()
   },
@@ -116,19 +214,21 @@ export default {
     user: 'auth/user'
   }),
   methods: {
-    async logout(){
+    async logout() {
       // Log out the user.
       await this.$store.dispatch('auth/logout');
 
       // Redirect to login.
-      this.$router.push({ name: 'login' });
+      this.$router.push({
+        name: 'login'
+      });
     },
-    test(){
-        axios.get('api/notifications').then(response => {
+    test() {
+      axios.get('api/notifications').then(response => {
         //console.log(response)
       })
     },
-    
+
     // refreshNoti() {
     //   axios.get(this.url).then(response => {
     //     this.bookingTable = response.data.data
@@ -156,8 +256,8 @@ export default {
     //       })
     //     })
     // },
-    makePagination(data){
-      let pagination ={
+    makePagination(data) {
+      let pagination = {
         current_page: data.current_page,
         last_page: data.last_page,
         next_page_url: data.next_page_url,
@@ -167,12 +267,11 @@ export default {
     },
     fetchPaginateBooking(url) {
       this.url = url;
-      //this.loadingNotification=true;
-      if(this.url !== null){
+      if (this.url !== null) {
         axios
           .get(url)
           .then((response) => {
-            this.loadingNotification=false;
+            this.loadingNotification = false;
             this.notification = this.notification.concat(response.data.message.data);
             this.bellBadge = response.data.unread_message.length;
             this.makePagination(response.data.message);
@@ -187,38 +286,25 @@ export default {
     },
 
     // notification with pusher 
-    listen(){
+    listen() {
       window.Echo = new Echo({
-          broadcaster: 'pusher',
-          key: window.config.pusherUrl,
-          cluster: 'ap1',
-          encrypted: true,
-          authEndpoint: 'broadcasting/auth',
-          auth: {
-              headers: {
-                  Authorization: 'Bearer ' + store.getters['auth/token'],
-              },
+        broadcaster: 'pusher',
+        key: window.config.pusherUrl,
+        cluster: 'ap1',
+        encrypted: true,
+        authEndpoint: 'broadcasting/auth',
+        auth: {
+          headers: {
+            Authorization: 'Bearer ' + store.getters['auth/token'],
           },
-        
+        },
+
       });
 
-
-
-                window.Echo.private(`App.User.`+ this.user.id)
-            .notification((notification) => {
-                console.log(notification);
-            });
-
-      //   window.Echo.channel('private-App.User.' + this.user.id)
-      // .listen('BroadcastNotificationCreated', response => {
-      //   if (! ('Notification' in window)) {
-      //         alert('Web Notification is not supported');
-      //         return;
-      //   }
-      //   console.log(response)
-     
-      // });
-      
+      window.Echo.private(`App.User.` + this.user.id)
+        .notification((notification) => {
+          console.log(notification);
+        });
     },
 
     // readNotification(notification_id){
@@ -235,44 +321,44 @@ export default {
     // },
     navigateTo(nav) {
       window.location.href = nav;
-    }  
+    }
   }
-}
-</script>
+} <
+/script>
 
-<style scoped>
-.profile-photo {
-  width: 2rem;
-  height: 2rem;
-  margin: -.375rem 0;
-}
-.el-dropdown-menu{
-  height: 50%;
-}
-#notification{
-  overflow-y: scroll;
-  overflow-x: hidden;
-  max-height: 100%;
-}
-#notification-load-more{
-  position: absolute;
-  width: 100%;
-  min-height: 20px;
-  background: white;
-  border: 1px solid #dcdfe6;
-}
-.el-dropdown-menu__item {
-  line-height: 26px;
-}
-.opacity80{
-  opacity: 0.8 ;
-}
-::-webkit-scrollbar {
-    width: 0px;
+<
+style scoped >
+  .profile - photo {
+    width: 2 rem;
+    height: 2 rem;
+    margin: -.375 rem 0;
+  }
+  .el - dropdown - menu {
+    height: 50 % ;
+  }#
+notification {
+  overflow - y: scroll;
+  overflow - x: hidden;
+  max - height: 100 % ;
+}#
+notification - load - more {
+    position: absolute;
+    width: 100 % ;
+    min - height: 20 px;
+    background: white;
+    border: 1 px solid# dcdfe6;
+  }
+  .el - dropdown - menu__item {
+    line - height: 26 px;
+  }
+  .opacity80 {
+    opacity: 0.8;
+  }::-webkit - scrollbar {
+    width: 0 px;
     background: transparent; /* make scrollbar transparent */
-}
-.item {
-  margin-top: 10px;
-  margin-right: 40px;
-}
-</style>
+  }
+  .item {
+    margin - top: 10 px;
+    margin - right: 40 px;
+  } <
+  /style>
\ No newline at end of file