From 265704dc601c9d5e787ae26d1bf902b902dcbee2 Mon Sep 17 00:00:00 2001
From: Ricky Kenendy <13516105@std.stei.itb.ac.id>
Date: Thu, 28 Mar 2019 01:29:37 +0700
Subject: [PATCH] finished create simple-card
---
src/components/SimpleCard.vue | 44 ++++++++++++++++++++++++++
src/components/SimpleCardContainer.vue | 35 ++++++++++++++++++++
src/components/pages/SemuaAnggaran.vue | 18 ++++++++---
src/router/index.js | 7 ++++
4 files changed, 100 insertions(+), 4 deletions(-)
create mode 100644 src/components/SimpleCard.vue
create mode 100644 src/components/SimpleCardContainer.vue
diff --git a/src/components/SimpleCard.vue b/src/components/SimpleCard.vue
new file mode 100644
index 0000000..6471063
--- /dev/null
+++ b/src/components/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 25px;
+ padding: 0.5rem 0.25rem;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+}
+</style>
diff --git a/src/components/SimpleCardContainer.vue b/src/components/SimpleCardContainer.vue
new file mode 100644
index 0000000..7aa11f4
--- /dev/null
+++ b/src/components/SimpleCardContainer.vue
@@ -0,0 +1,35 @@
+<template>
+<b-col cols="4">
+ <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>
+.container {
+ padding: 0;
+ margin: 0;
+}
+
+</style>
diff --git a/src/components/pages/SemuaAnggaran.vue b/src/components/pages/SemuaAnggaran.vue
index 2cae2a8..ae7625f 100644
--- a/src/components/pages/SemuaAnggaran.vue
+++ b/src/components/pages/SemuaAnggaran.vue
@@ -1,14 +1,20 @@
<template>
- <div>
- Semua Anggaran
- </div>
+ <b-container>
+ <b-row>
+ <simple-card-container/>
+ <!--ini untuk visualisasi pake d3js-->
+ <b-col cols="8">
+ </b-col>
+ </b-row>
+ </b-container>
</template>
<script>
+import SimpleCardContainer from '@/components/SimpleCardContainer'
export default {
name: 'SemuaAnggaran',
components: {
-
+ 'simple-card-container' : SimpleCardContainer,
},
data() {
return {
@@ -28,4 +34,8 @@ export default {
<style lang="scss" scoped>
@import 'src/assets/css/style.scss';
+.container {
+ padding: 0;
+ margin: 0;
+}
</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 944e923..c5fb5cb 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/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',
})
--
GitLab