first commit + add fe component vue accone

apps/components/oneNavbarComponent.vue

@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <one-menu-drawer :drawer="drawer"> </one-menu-drawer>
+    <!-- <one-menu-notification :drawer="drawer_notification"> </one-menu-notification> -->
+    <one-dialog-notification></one-dialog-notification>
+    <v-toolbar id="topbar" fixed app>
+      <v-toolbar-side-icon
+        class="hidden-sm-and-down"
+        style="color:#795548"
+        @click.stop="togleDrawer()"
+      ></v-toolbar-side-icon>
+      <v-layout row>
+        <v-flex class="pt-1" xs8>
+          <p class="mb-0">
+            <a
+              href="#"
+              style="
+                padding-bottom: 0px;
+                margin-bottom: 0px;
+                text-decoration: none;
+                color:#795548;
+                font-size: 18px;
+                font-weight: bold;
+              "
+              >ACCONE</a
+            >
+          </p>
+          <p class="mb-0">
+            <span
+              style="text-decoration: none; color: #682913; font-size: 12px"
+              class="ml-0 mt-0 bread-crumb"
+              >{{ bread_crumb }}</span
+            >
+          </p>
+        </v-flex>
+        <v-flex xs4 class="mt-2 text-xs-right align-right">
+          <a
+            href="#"
+            class="mt-3"
+            style="
+              min-height: 10px;
+              text-decoration: none;
+              color: #795548;
+              font-size: 22px;
+              margin-right: 15px;
+            "
+            >{{ xusername }}</a
+          >
+          <v-badge color="red">
+            <template v-if="total > 0" v-slot:badge>
+              <span>{{ total }}</span>
+            </template>
+            <v-btn
+              class="pt-0 pb-2"
+              icon
+              @click="openNotification"
+              flat
+            >
+              <v-icon style="color: #795548;" medium> notifications </v-icon>
+            </v-btn>
+          </v-badge>
+        </v-flex>
+      </v-layout>
+
+      <!-- <v-btn class="ml-4" icon>
+      <v-icon>apps</v-icon>
+    </v-btn> -->
+
+      <!-- PROFILE MENU -->
+      <v-menu
+        :close-on-content-click="true"
+        :nudge-width="200"
+        offset-overflow
+        left
+        bottom
+      >
+        <template v-slot:activator="{ on }">
+          <v-btn class="" icon v-on="on">
+            <v-icon style="color: #795548;">apps</v-icon>
+          </v-btn>
+        </template>
+
+        <v-card>
+          <v-list>
+            <v-list-tile avatar>
+              <v-list-tile-content>
+                <v-list-tile-title>{{ xusername }}</v-list-tile-title>
+                <v-list-tile-sub-title>{{ xstaffname }}</v-list-tile-sub-title>
+              </v-list-tile-content>
+            </v-list-tile>
+          </v-list>
+
+          <v-divider></v-divider>
+
+          <v-list>
+            <v-list-tile @click="change_password">
+              <v-list-tile-action>
+                <v-icon>security</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-title>Change Password</v-list-tile-title>
+            </v-list-tile>
+          </v-list>
+          <v-list>
+            <v-list-tile @click="logout">
+              <v-list-tile-action>
+                <v-icon>no_meeting_room</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-title>Log Out</v-list-tile-title>
+            </v-list-tile>
+          </v-list>
+        </v-card>
+      </v-menu>
+      <!-- End of PROFILE MENU -->
+
+      <one-cp></one-cp>
+    </v-toolbar>
+  </div>
+</template>
+<style scoped>
+.bread-crumb {
+  margin-left: 20px;
+  font-weight: normal !important;
+}
+.v-badge__badge {
+  top: 0px;
+  right: 0px;
+}
+#topbar{
+  background-color: #F2E5D3;
+}
+</style>
+<script>
+module.exports = {
+  components: {
+    "one-menu-drawer": httpVueLoader("./oneMenuDrawer.vue"),
+    "one-cp": httpVueLoader("./oneChangePassword.vue"),
+    "one-menu-notification": httpVueLoader("./oneNotificationDrawer.vue"),
+    "one-dialog-notification": httpVueLoader("./oneDialogNotification.vue"),
+  },
+
+  data: function () {
+    return {
+      drawer: false,
+      drawer_notification: false,
+    };
+  },
+  watch: {
+    is_page_allowed: function (new_ipa, old_ipa) {
+      if (!new_ipa) {
+        var dashboard = this.$store.state.system.dashboard;
+        if (dashboard == "") {
+          //this.logout()
+          console.log("go-to", "logout");
+        } else {
+          //window.location.href = '/' + dashboard
+          console.log("go-to dashboard", dashboard);
+        }
+      }
+    },
+  },
+  mounted() {
+    this.$store.dispatch("system/getlistnotif")
+  },
+  computed: {
+    total() {
+      return this.$store.state.system.total;
+    },
+    is_page_allowed() {
+      return this.$store.state.system.is_page_allowed;
+    },
+    bread_crumb() {
+      return this.$store.state.system.bread_crumb;
+    },
+    xusername() {
+      var un = "";
+      if (localStorage.getItem("user")) {
+        var retrievedObject = localStorage.getItem("user");
+        var dtuser = JSON.parse(retrievedObject);
+
+        un = dtuser.M_UserUsername;
+      }
+      return un;
+    },
+    xstaffname() {
+      var un = "";
+      if (localStorage.getItem("user")) {
+        var retrievedObject = localStorage.getItem("user");
+        var dtuser = JSON.parse(retrievedObject);
+
+        un = dtuser.M_StaffName;
+      }
+      return un;
+    },
+  },
+
+  methods: {
+    openNotification() {
+      this.$store.commit("system/update_dialogNotification", true)
+    },
+    togleDrawer() {
+      this.drawer = !this.drawer;
+    },
+    change_password() {
+      this.$store.commit("system/update_change_password_dialog", true);
+    },
+    logout() {
+      window.one_logout("/one-ui/test/vuex/one-login");
+    },
+  },
+};
+</script>