diff --git a/package-lock.json b/package-lock.json index 1713a45e058338e480662dd5179faa909ef85992..34f8b4cd2b873c86bbf8475ec362678df11e4c71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3705,7 +3705,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3726,12 +3727,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3746,17 +3749,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3873,7 +3879,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3885,6 +3892,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3899,6 +3907,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3906,12 +3915,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3930,6 +3941,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4010,7 +4022,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4022,6 +4035,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4107,7 +4121,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -4143,6 +4158,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4162,6 +4178,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4205,12 +4222,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -11059,6 +11078,11 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vuex": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz", + "integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg==" + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index f38793de07aaf6a7b681ca8d1c939fed395006d8..a121b3603e6a1552008f99e75d03b7943358991b 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "bootstrap": "^4.3.1", "bootstrap-vue": "^2.0.0-rc.15", "vue": "^2.6.10", - "vue-router": "^3.0.1" + "vue-router": "^3.0.1", + "vuex": "^3.1.0" }, "devDependencies": { "autoprefixer": "^7.1.2", diff --git a/src/App.vue b/src/App.vue index 8b934f953b0c618e1887b43a849d4872b84a17e2..306d66d1091f8b5aef4f6f2965b2926b0c4edfe7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,21 @@ <template> <div id="app"> + <app-navbar/> <router-view/> </div> </template> <script> + +import navbar from '@/components/Navbar' + export default { name: 'App', + components: { + 'app-navbar': navbar, + }, } + </script> <style> diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index 1c19f2a399d4735f5a3dd4ae1456f476f3de2fa4..629763357369cbd7fe04719f78abcd99eb7bb36e 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -90,6 +90,9 @@ export default { return { msg: 'Welcome to Your Vue.js App' } + }, + created : function() { + this.$store.commit('changed','Jenis Keuangan') } } </script> diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue new file mode 100644 index 0000000000000000000000000000000000000000..689e5b12900b64b463a9834794ac70c73c4af468 --- /dev/null +++ b/src/components/Navbar.vue @@ -0,0 +1,97 @@ +<template> + <div id="navbar"> + <b-navbar toggleable="lg" type="dark" variant="info"> + <b-navbar-brand> + <router-link to="/"> + APBD JABAR + </router-link> + </b-navbar-brand> + + <b-navbar-toggle target="nav_collapse" /> + + <b-collapse is-nav id="nav_collapse"> + <!-- Right aligned nav items --> + <b-navbar-nav> + <b-nav-item-dropdown v-bind:text=pilihan left> + <b-dropdown-item> + <router-link to="/Pendapatan"> + Pendapatan + </router-link> + </b-dropdown-item> + <b-dropdown-item> + <router-link to="/BiayaLangsung"> + BiayaLangsung + </router-link> + </b-dropdown-item> + <b-dropdown-item> + <router-link to="/BiayaTidakLangsung"> + Biaya Tidak Langsung + </router-link> + </b-dropdown-item> + <b-dropdown-item> + <router-link to="/Pembiayaan"> + Pembiayaan + </router-link> + </b-dropdown-item> + </b-nav-item-dropdown> + </b-navbar-nav> + + <b-navbar-nav class="ml-auto"> + <b-nav-item> + <router-link to="/Login" style="color:white;"> + Login + </router-link> + </b-nav-item> + </b-navbar-nav> + + + </b-collapse> + </b-navbar> + </div> +</template> + +<script> + +export default { + name: 'Navbar', + data () { + return { + pilihan : this.$store.state.pilihan, + } + }, + computed : { + state_watcher () { + return this.$store.state.pilihan + } + }, + methods : { + + }, + created : function() { + this.pilihan = this.$store.state.pilihan + }, + watch : { + state_watcher(newPilihan, oldPilihan) { + // console.log("lama : " + oldPilihan + ", baru :" +newPilihan) + this.pilihan = newPilihan + } + } +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped> +b-nav-item { + color: white; +} +li a { + text-decoration: none; + color : black; +} + +a { + text-decoration: none; + color : white; +} + +</style> diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue new file mode 100644 index 0000000000000000000000000000000000000000..a5f47f6a1aa7de5d296824496b8f9cc8a36fcde7 --- /dev/null +++ b/src/components/pages/BiayaLangsungPage.vue @@ -0,0 +1,31 @@ +<template> + <div> + Biaya Langsung + </div> +</template> + +<script> +export default { + name: 'BiayaLangsung', + components: { + + }, + data() { + return { + + } + }, + methods: { + + }, + created : function() { + this.$store.commit('changed','Biaya Langsung') + } +} +</script> + + +<style lang="scss" scoped> +@import 'src/assets/css/style.scss'; + +</style> \ No newline at end of file diff --git a/src/components/pages/BiayaTidakLangsungPage.vue b/src/components/pages/BiayaTidakLangsungPage.vue new file mode 100644 index 0000000000000000000000000000000000000000..dafc41113d2d81f9e5dc620688c67fd2b569b0d8 --- /dev/null +++ b/src/components/pages/BiayaTidakLangsungPage.vue @@ -0,0 +1,31 @@ +<template> + <div> + Biaya Tidak langsung + </div> +</template> + +<script> +export default { + name: 'BiayaTidakLangsung', + components: { + + }, + data() { + return { + + } + }, + methods: { + + }, + created : function() { + this.$store.commit('changed','Biaya Tidak Langsung') + } +} +</script> + + +<style lang="scss" scoped> +@import 'src/assets/css/style.scss'; + +</style> \ No newline at end of file diff --git a/src/components/pages/LandingPage.vue b/src/components/pages/LandingPage.vue index 1cc01d5da8a9baa0f0db32c4f05fee50d26d333c..24d9f8699d2d70d312edb04ce5a3081f6660b7be 100644 --- a/src/components/pages/LandingPage.vue +++ b/src/components/pages/LandingPage.vue @@ -29,6 +29,9 @@ export default { }, methods: { + }, + created : function() { + this.$store.commit('changed','Pendapatan') } } </script> diff --git a/src/components/pages/LoginPage.vue b/src/components/pages/LoginPage.vue index 9336fe2731e639516e2113cf9579d0dd36203e10..a540794a7b5110888059ce6d196e6eb691a03880 100644 --- a/src/components/pages/LoginPage.vue +++ b/src/components/pages/LoginPage.vue @@ -1,7 +1,7 @@ <template> - <v-container fluid> + <div> Ini buat login - </v-container> + </div> </template> <script> @@ -11,10 +11,15 @@ export default { }, data() { + return { + } }, methods: { + }, + created : function() { + this.$store.commit('changed','Jenis Keuangan') } } </script> diff --git a/src/components/pages/PembiayaanPage.vue b/src/components/pages/PembiayaanPage.vue new file mode 100644 index 0000000000000000000000000000000000000000..30fccfa5b72cc859cbfaf0cd085a1cfd9d2c3430 --- /dev/null +++ b/src/components/pages/PembiayaanPage.vue @@ -0,0 +1,31 @@ +<template> + <div> + Pembiayaan + </div> +</template> + +<script> +export default { + name: 'Pembiayaan', + components: { + + }, + data() { + return { + + } + }, + methods: { + + }, + created : function() { + this.$store.commit('changed','Pembiayaan') + } +} +</script> + + +<style lang="scss" scoped> +@import 'src/assets/css/style.scss'; + +</style> \ No newline at end of file diff --git a/src/components/pages/PendapatanPage.vue b/src/components/pages/PendapatanPage.vue new file mode 100644 index 0000000000000000000000000000000000000000..04b07295b428e0087e67351b049cc509d08d1412 --- /dev/null +++ b/src/components/pages/PendapatanPage.vue @@ -0,0 +1,31 @@ +<template> + <div> + Pendapatan + </div> +</template> + +<script> +export default { + name: 'Pendapatan', + components: { + + }, + data() { + return { + + } + }, + methods: { + + }, + created : function() { + this.$store.commit('changed','Pendapatan') + } +} +</script> + + +<style lang="scss" scoped> +@import 'src/assets/css/style.scss'; + +</style> \ No newline at end of file diff --git a/src/components/store/Store.js b/src/components/store/Store.js new file mode 100644 index 0000000000000000000000000000000000000000..276691d447397bf91e4d3e2cfc6cff5990308c1c --- /dev/null +++ b/src/components/store/Store.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) +Vue.prototype.$store = store +export const store = new Vuex.Store({ + state : { + pilihan:'Jenis Keuangan', + count : 0 + }, + computed: { + pilihan () { + return this.$store.getters.pilihan + } + }, + mutations : { + changed(state, pil) { + this.state.pilihan=pil + } + }, + getters : { + pilihan : (state) => { + return this.state.pilihan + } + } + +}) \ No newline at end of file diff --git a/src/main.js b/src/main.js index 9868e451f28bade2f3af204b3dd697a4f932310d..9d4ab8846d9f4d49fae15007603ed7f9b7ec9d6f 100644 --- a/src/main.js +++ b/src/main.js @@ -1,19 +1,25 @@ // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' +import Vuex from 'vuex' import App from './App' import router from './router' import BootstrapVue from 'bootstrap-vue' +import {store} from './components/store/store' + import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.config.productionTip = false Vue.use(BootstrapVue) - +Vue.use(Vuex) /* eslint-disable no-new */ new Vue({ el: '#app', router, + store, components: { App }, template: '<App/>' }) + + diff --git a/src/router/index.js b/src/router/index.js index 75398dd39a5fbbc2c123869a906e710ea231a266..ec5cd07a0e33a7a18373a2f95589702ec80443ed 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -2,6 +2,11 @@ import Vue from 'vue' import Router from 'vue-router' import LandingPage from '@/components/pages/LandingPage' import LoginPage from '@/components/pages/LoginPage' +import HelloWorld from '@/components/HelloWorld' +import Pendapatan from '@/components/pages/PendapatanPage' +import Pembiayaan from '@/components/pages/PembiayaanPage' +import BiayaTidakLangsung from '@/components/pages/BiayaTidakLangsungPage' +import BiayaLangsung from '@/components/pages/BiayaLangsungPage' Vue.use(Router) @@ -9,6 +14,11 @@ export default new Router({ routes: [ { path: '/', + name: 'HelloWorld', + component: HelloWorld + }, + { + path: '/LandingPage', name: 'LandingPage', component: LandingPage }, @@ -17,6 +27,26 @@ export default new Router({ name: 'LoginPage', component: LoginPage }, + { + path: '/Pendapatan', + name: 'PendapatanPage', + component: Pendapatan + }, + { + path: '/BiayaTidakLangsung', + name: 'BiayaTidakLangsung', + component: BiayaTidakLangsung + }, + { + path: '/BiayaLangsung', + name: 'BiayaLangsung', + component: BiayaLangsung + }, + { + path: '/Pembiayaan', + name: 'Pembiayaan', + component: Pembiayaan + }, ], mode: 'history', })