diff --git a/.nyc_output/126e95e1-65f4-48bc-83ee-8648e86bd69e.json b/.nyc_output/126e95e1-65f4-48bc-83ee-8648e86bd69e.json
new file mode 100644
index 0000000000000000000000000000000000000000..9e26dfeeb6e641a33dae4961196235bdb965b21b
--- /dev/null
+++ b/.nyc_output/126e95e1-65f4-48bc-83ee-8648e86bd69e.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ec7781c302f15eadbd792aca10acf84155e8aec2..04c92c27d158a40a07d11c091b4f5b0af4e93b56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4167,7 +4167,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"aproba": {
"version": "1.2.0",
@@ -4188,12 +4189,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"
@@ -4208,17 +4211,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",
@@ -4335,7 +4341,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -4347,6 +4354,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -4361,6 +4369,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -4368,12 +4377,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"
@@ -4392,6 +4403,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -4472,7 +4484,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -4484,6 +4497,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
@@ -4569,7 +4583,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4605,6 +4620,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",
@@ -4624,6 +4640,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4667,12 +4684,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
}
}
},
diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
index 041ffd1b806a13c55bc5ddc03d9689915e05079e..da9fccd5445b4f230659c6ca0dcc60a5e22d7c21 100644
--- a/src/components/pages/BiayaLangsungPage.vue
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -10,26 +10,34 @@
/>
</b-col>
<b-col cols="12" lg="4">
- <b-card/>
+ <detail-card :detailAnggaran='detail_anggaran' />
</b-col>
</b-row>
- <div id="comments-container">
- <comments/>
- </div>
+ <b-row class="justify-content-md-center">
+ <b-col id="anggaran-detail-card" cols="12" lg="4">
+ <simple-card-container-scroll :dataBubble='data_bubble' />
+ </b-col>
+ <b-col id="comments-container" cols="12" lg="8">
+ <comments/>
+ </b-col>
+ </b-row>
+
</b-container>
</template>
<script>
-import SimpleCardContainer from '@/components/partials/SimpleCardContainer'
+import SimpleCardContainerScroll from '@/components/partials/SimpleCardContainerScroll'
import Comments from '@/components/partials/Comments'
import Visualization from '@/components/partials/Visualization'
+import DetailCard from '@/components/partials/DetailCard'
export default {
name: 'BiayaLangsung',
components: {
- 'simple-card-container' : SimpleCardContainer,
+ 'simple-card-container-scroll' : SimpleCardContainerScroll,
'comments' : Comments,
'visualization' : Visualization,
+ 'detail-card' : DetailCard
},
data() {
return {
@@ -44,6 +52,54 @@ export default {
id: 1,
active: true
}
+ ],
+ detail_anggaran : {
+ title : "Pendapatan",
+ total : "50.000.000,-",
+ persen : "50%",
+ datas : [
+ {
+ judul : "Urusan XXXX",
+ persen : "20%",
+ biaya : "1.000.000,-",
+ },
+ {
+ judul : "kegiatan YYYY",
+ persen : "20%",
+ biaya : "200.000,-"
+ },
+
+ ]
+ },
+ data_bubble : [
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
]
}
},
diff --git a/src/components/pages/SemuaAnggaran.vue b/src/components/pages/SemuaAnggaran.vue
index 881c0683f7ae9ac5ff9f215c859f83f41562ec91..c39a833e5908041f7c5c1538ac65091959c231b8 100644
--- a/src/components/pages/SemuaAnggaran.vue
+++ b/src/components/pages/SemuaAnggaran.vue
@@ -9,7 +9,7 @@
/>
</b-col>
<b-col cols="12" lg="4">
- <simple-card-container/>
+ <simple-card-container :dataBubble="data_bubble" />
</b-col>
</b-row>
<div id="comments-container">
@@ -32,7 +32,24 @@ export default {
},
data() {
return {
-
+ data_bubble : [
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ {
+ judul : "anggaran X",
+ biaya : "1000.0000"
+ },
+ ]
}
},
methods: {
diff --git a/src/components/partials/Comments.vue b/src/components/partials/Comments.vue
index c79d34257c5088d6170114d5f2e632e39b39aa36..1ed71ad0062d4fc23509349dfe0b095e6ca63bb0 100644
--- a/src/components/partials/Comments.vue
+++ b/src/components/partials/Comments.vue
@@ -6,7 +6,7 @@
bg-variant="light"
class="item"
v-for="comment in lists"
- :key=comment.id
+ :key="comment.id"
>
<div><small class="font-weight-bold">{{comment.name}}</small></div>
{{comment.content}}
diff --git a/src/components/partials/DetailCard.vue b/src/components/partials/DetailCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c6f6da78aa5018bf9efe11eb15a74ad0bba3e5f
--- /dev/null
+++ b/src/components/partials/DetailCard.vue
@@ -0,0 +1,65 @@
+<template>
+ <div>
+ <b-card
+ header="Card Header"
+ header-text-variant="light"
+ header-tag="header"
+ header-bg-variant="info"
+ bg-variant="light"
+ >
+ <div slot="header" class="text-center px-2 py-1 mb-0">
+ <h4>{{ detailAnggaran.title }}</h4>
+ <h5><b>
+ {{ "Rp "+ detailAnggaran.total + " (" + detailAnggaran.persen + ")"}}
+ </b></h5>
+ </div>
+ <b-card-text class="text-left">
+ <div v-for="data in detailAnggaran.datas" :key=data.judul>
+ {{ data.judul }}
+ <div class="text-right">
+ {{ "Rp "+ data.biaya + " ("+ data.persen +")" }}
+ </div>
+ </div>
+ </b-card-text>
+ </b-card>
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: 'DetailCard',
+ props : ['detailAnggaran'],
+ data() {
+ return {
+ total : "Rp "+this.totalAnggaran
+ }
+ },
+ methods : {
+
+ },
+ created: function () {
+ console.log('user data from parent component:')
+ console.log(this.detailAnggaran) //prints out an empty string
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.card-body {
+ font-size: 1rem;
+ padding: 1rem;
+}
+
+.card {
+ width : 100%;
+ margin-top : 10px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+}
+
+.card-header {
+ font-size: 1.25rem;
+ padding: 0.2rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/partials/SimpleCardContainer.vue b/src/components/partials/SimpleCardContainer.vue
index c59c2e4c5cfd3ded63e032a246dff08cf01f9b96..8f914b981491251e3a3afca9c8cba0facd57fcc8 100644
--- a/src/components/partials/SimpleCardContainer.vue
+++ b/src/components/partials/SimpleCardContainer.vue
@@ -1,18 +1,9 @@
<template>
-<b-row class="justify-content-md-center">
- <b-col class="px-2" md="6" lg="12" cols="12">
- <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="4.000.000.000.000,00.-"/>
- </b-col>
- <b-col class="px-2" md="6" lg="12" cols="12">
- <simple-card jenisAnggaran="BIAYA LANGSUNG" totalAnggaran="3.000.000.000.000,00.-"/>
- </b-col>
- <b-col class="px-2" md="6" lg="12" cols="12">
- <simple-card jenisAnggaran="BIAYA TIDAK LANGSUNG" totalAnggaran="2.000.000.000.000,00.-"/>
- </b-col>
- <b-col class="px-2" md="6" lg="12" cols="12">
- <simple-card jenisAnggaran="PEMBIAYAAN" totalAnggaran="1.000.000.000.000,00.-"/>
- </b-col>
-</b-row>
+ <b-row id="content-detail" class="justify-content-md-center">
+ <b-col class="px-2" md="6" lg="12" cols="12">
+ <simple-card v-for="data in dataBubble" :key="data.judul" v-bind:jenisAnggaran="data.judul" v-bind:totalAnggaran="data.biaya" />
+ </b-col>
+ </b-row>
</template>
<script>
@@ -20,6 +11,7 @@ import SimpleCard from './SimpleCard'
export default {
name: 'SimpleCardContainer',
+ props: ['dataBubble'],
data() {
return {
}
@@ -34,9 +26,13 @@ export default {
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+
b-col {
margin: 0;
}
+
+
</style>
diff --git a/src/components/partials/SimpleCardContainerScroll.vue b/src/components/partials/SimpleCardContainerScroll.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab8e46b4c57d58ca037fdb1bab67b724fc713e5e
--- /dev/null
+++ b/src/components/partials/SimpleCardContainerScroll.vue
@@ -0,0 +1,58 @@
+<template>
+ <div id="placeholder">
+ <b-row id="content-detail" class="justify-content-md-center">
+ <b-col class="px-2" md="6" lg="12" cols="12">
+ <simple-card v-for="data in dataBubble" :key="data.judul" v-bind:jenisAnggaran="data.judul" v-bind:totalAnggaran="data.biaya" />
+ </b-col>
+ </b-row>
+ </div>
+</template>
+
+<script>
+import SimpleCard from './SimpleCard'
+
+export default {
+ name: 'SimpleCardContainer',
+ props: ['dataBubble'],
+ data() {
+ return {
+ }
+ },
+ components: {
+ 'simple-card':SimpleCard,
+ },
+ methods : {
+
+ },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+
+b-col {
+ margin: 0;
+}
+
+#placeholder {
+
+ width: 100%;
+ height: 100%;
+ padding: 20px;
+
+ #content-detail {
+ padding-top: 20px;
+ height: 60%;
+ padding: 0 10px 10px;
+ overflow-y: scroll;
+ border-top: 1px solid #fff;
+ border-bottom : 1px solid #fff;
+ border-radius : 3px;
+ -webkit-overflow-scrolling: touch;
+ }
+}
+
+
+
+</style>