diff --git a/src/App.vue b/src/App.vue
index 6ffe61311b819f8453f8cc169efd9371afbf6fb4..ebace20873dea972b09f7200a99ad19a5d54d521 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,8 +19,10 @@ export default {
</script>
<style>
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i');
+
#app {
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
+ font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
diff --git a/src/components/pages/LoginPage.vue b/src/components/pages/LoginPage.vue
index 15941fd521dccd1088fe1ee72ae2435283373a22..c2f91150c541fb413a4921616427c08be48f882a 100644
--- a/src/components/pages/LoginPage.vue
+++ b/src/components/pages/LoginPage.vue
@@ -97,7 +97,7 @@ export default {
}
},
created : function() {
- this.$store.commit('changed','Jenis Keuangan')
+ this.$store.commit('changed','Jenis Anggaran')
},
methods: {
submitLogin: function(event) {
diff --git a/src/components/pages/SemuaAnggaran.vue b/src/components/pages/SemuaAnggaran.vue
index 2cae2a81a87eb321f127cf9b69741a2c21a75428..c049d38cabd2979a55d525e8c85013cdcfb744cb 100644
--- a/src/components/pages/SemuaAnggaran.vue
+++ b/src/components/pages/SemuaAnggaran.vue
@@ -1,14 +1,26 @@
<template>
- <div>
- Semua Anggaran
- </div>
+ <b-container>
+ <h2> SEMUA ANGGARAN APBD JABAR</h2>
+ <b-row >
+ <b-col class="bg-dark" cols="9">
+ </b-col>
+ <simple-card-container/>
+ </b-row>
+ <div id="comments-container">
+ <comments/>
+ </div>
+ </b-container>
</template>
<script>
+import SimpleCardContainer from '@/components/partials/SimpleCardContainer'
+import Comments from '@/components/partials/Comments'
+
export default {
name: 'SemuaAnggaran',
components: {
-
+ 'simple-card-container' : SimpleCardContainer,
+ 'comments' : Comments
},
data() {
return {
@@ -27,5 +39,18 @@ export default {
<style lang="scss" scoped>
@import 'src/assets/css/style.scss';
+h2 {
+ color: $primary;
+ text-shadow: 0 5px 10px rgba(50, 50, 50, 0.25);
+ margin: 10px 10px;
+}
+.container {
+ max-width: 100%;
+ #comments-container {
+ margin: 10px auto;
+ max-width: 800px;
+ height: 50vw;
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/components/partials/Comments.vue b/src/components/partials/Comments.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33472a0064aefb1d1ad21a361d267e4f3793dbf6
--- /dev/null
+++ b/src/components/partials/Comments.vue
@@ -0,0 +1,155 @@
+<template>
+ <div id="placeholder">
+ <div id="comments-container">
+ <h4 class="font-weight-bold">Komentar ({{rows}})</h4>
+ <b-card
+ bg-variant="light"
+ class="item"
+ v-for="comment in lists"
+ :key=comment.id
+ >
+ <div><small class="font-weight-bold">{{comment.name}}</small></div>
+ <b-card-text>{{comment.content}}</b-card-text>
+ <div><small class="text-muted font-italic">{{comment.timestamp}}</small></div>
+ </b-card>
+ </div>
+ <div id="comment-box">
+ <b-pagination
+ v-model="currentPage"
+ :total-rows="rows"
+ :per-page="perPage"
+ align="center"
+ />
+ <div id="comment-section">
+ <b-form-textarea
+ id="textarea"
+ v-model="text"
+ placeholder="Masukkan komentar..."
+ no-resize
+ />
+ <b-button variant="primary">Kirim</b-button>
+ </div>
+ <div>
+ <small class="text-muted font-italic">
+ Dengan mengirim komentar, Anda tunduk terhadap UU ITE yang berlaku.
+ </small>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Comments',
+ components: {
+
+ },
+ data() {
+ return {
+ perPage: 5,
+ currentPage: 1,
+ text: '',
+ items: [
+ {
+ id: 6,
+ userid: 1,
+ name: "David Timothy Panjaitan",
+ content: "Sama",
+ timestamp: "28 Maret 2019, 02.15 WIB"
+ },
+ {
+ id: 5,
+ userid: 1,
+ name: "Rifo Ahmad Genadi",
+ content: "Ngantuk",
+ timestamp: "28 Maret 2019, 02.14 WIB"
+ },
+ {
+ id: 4,
+ userid: 1,
+ name: "Rizky Andyno Ramadhan",
+ content: "Tidur tidur",
+ timestamp: "28 Maret 2019, 02.14 WIB"
+ },
+ {
+ id: 3,
+ userid: 1,
+ name: "William Rukmansa",
+ content: "Ada apa ini?",
+ timestamp: "28 Maret 2019, 00.35 WIB"
+ },
+ {
+ id: 2,
+ userid: 1,
+ name: "David Timothy Panjaitan",
+ content: "Saya masih tidak setuju",
+ timestamp: "28 Maret 2019, 00.31 WIB"
+ },
+ {
+ id: 1,
+ userid: 1,
+ name: "David Timothy Panjaitan",
+ content: "Saya tidak setuju",
+ timestamp: "28 Maret 2019, 00.28 WIB"
+ },
+ {
+ id: 0,
+ userid: 0,
+ name: "Ricky Kennedy",
+ content: "Bagus ini",
+ timestamp: "28 Maret 2019, 00.25 WIB"
+ },
+ ]
+ }
+ },
+ computed: {
+ rows() {
+ return this.items.length
+ },
+ lists() {
+ // Return just page of items needed
+ return this.items.slice(
+ (this.currentPage - 1) * this.perPage,
+ this.currentPage * this.perPage
+ )
+ },
+ },
+ methods: {
+
+ }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+
+#placeholder {
+ width: 100%;
+ height: 100%;
+ padding: 20px;
+
+ #comments-container {
+ height: 60%;
+ overflow: auto;
+
+ .item {
+ width: 100%;
+ margin-bottom: 5px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+ }
+ }
+
+ #comment-box {
+ height: 30%;
+ margin: 5% 0;
+
+ #comment-section {
+ display: flex;
+ }
+ }
+}
+
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/partials/SimpleCard.vue b/src/components/partials/SimpleCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd808dbdaa30febf35733d3f8187555d5a75f6d3
--- /dev/null
+++ b/src/components/partials/SimpleCard.vue
@@ -0,0 +1,44 @@
+<template>
+ <div>
+ <b-card bg-variant="info" text-variant="white" >
+ <b-card-text>
+ {{ jenisAnggaran }}
+ <br>
+ <b>{{ total }}</b>
+ </b-card-text>
+ </b-card>
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: 'SimpleCard',
+ props : ['jenisAnggaran','totalAnggaran'],
+ data() {
+ return {
+ total : "Rp "+this.totalAnggaran
+ }
+ },
+ methods : {
+
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+.card-body {
+ font-size: 1.25rem;
+ padding: 1rem 1.25rem;
+
+}
+
+.card {
+ width : 100%;
+ margin : 15px 0px;
+ padding: 0.5rem 0.25rem;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+}
+</style>
diff --git a/src/components/partials/SimpleCardContainer.vue b/src/components/partials/SimpleCardContainer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d4055acbd7f8bad6fa24b7443684b8b0ec631fc8
--- /dev/null
+++ b/src/components/partials/SimpleCardContainer.vue
@@ -0,0 +1,32 @@
+<template>
+<b-col cols="3">
+ <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/>
+ <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/>
+ <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/>
+ <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/>
+</b-col>
+</template>
+
+<script>
+import SimpleCard from './SimpleCard'
+
+export default {
+ name: 'SimpleCardContainer',
+ data() {
+ return {
+ }
+ },
+ components: {
+ 'simple-card':SimpleCard,
+ },
+ methods : {
+
+ },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 944e9235c1f8e1b7e85635a83609feb29264dfad..8b91436eb99ac1e21b949fcc992d9169960a19b6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,8 @@ import Pembiayaan from '@/components/pages/PembiayaanPage'
import BiayaTidakLangsung from '@/components/pages/BiayaTidakLangsungPage'
import BiayaLangsung from '@/components/pages/BiayaLangsungPage'
import SemuaAnggaran from '@/components/pages/SemuaAnggaran'
+import SimpleCardContainer from '@/components/partials/SimpleCardContainer'
+
Vue.use(Router)
export default new Router({
@@ -46,6 +48,11 @@ export default new Router({
name: 'SemuaAnggaran',
component: SemuaAnggaran
},
+ {
+ path: '/tes',
+ name: 'SimpleCardContainer',
+ component: SimpleCardContainer
+ },
],
mode: 'history',
})