diff --git a/src/components/pages/PanelAdministrator.vue b/src/components/pages/PanelAdministrator.vue
index 19984f0bb6c5d1122509b923a4ec87dd13f8f43a..a615523aada605bba4bc75a82fb431704080e5b7 100644
--- a/src/components/pages/PanelAdministrator.vue
+++ b/src/components/pages/PanelAdministrator.vue
@@ -24,128 +24,8 @@
</b-card>
</b-tab>
<b-tab v-if="this.$store.state.user.role == 2" title="Pengaturan Admin">
- <!-- Table Pagination + Filter -->
- <b-pagination
- v-model="currentPage"
- :total-rows="totalRows"
- :per-page="perPage"
- align="center"
- />
- <b-form-input
- v-model="filter"
- placeholder="Ketik untuk menyaring urusan/admin..."
- />
- <div class="mb-3">
- <small class="text-muted font-italic">
- Menampilkan {{ totalRows }} baris urusan
- </small>
- </div>
- <b-table
- show-empty
- striped
- hover
- stacked="sm"
- :items="items"
- :fields="fields"
- :current-page="currentPage"
- :per-page="perPage"
- :filter="filter"
- @filtered="filterTrigger"
- >
- <template slot="aksi" slot-scope="row">
- <div v-if="row.item.admin === '-'">
- <div class="px-1 col-md-6 col-12">
- <b-button
- @click="switchToggleDetails(row)"
- variant="success"
- size="sm"
- class="w-100"
- >
- Pasang
- </b-button>
- </div>
- </div>
- <b-row class="mx-0" v-else>
- <div class="px-1 col-md-6 col-12">
- <b-button
- @click="switchToggleDetails(row)"
- variant="primary"
- size="sm"
- class="w-100"
- >
- Ubah
- </b-button>
- </div>
- <div class="px-1 col-md-6 col-12">
- <b-button
- @click="clearButtonHandler(row)"
- variant="danger"
- size="sm"
- class="w-100"
- >
- Kosongkan
- </b-button>
- </div>
- </b-row>
- </template>
- <template slot="row-details" slot-scope="row">
- <b-card
- bg-variant="light"
- >
- <small><b>Mohon pilih Admin dari daftar di bawah ini:</b></small>
- <b-form-select
- v-model="selected"
- :options="options"
- size="sm"
- />
- <b-button
- @click="assignAdmin(row)"
- variant="primary"
- size="sm"
- class="float-right mt-2 ml-2"
- >
- Pilih Admin
- </b-button>
- <b-button
- @click="switchToggleDetails(null)"
- size="sm"
- class="float-right mt-2"
- >
- Batalkan
- </b-button>
- </b-card>
- </template>
- <template slot="empty">
- <div align="center">Tidak ada data untuk ditampilkan</div>
- </template>
- <template slot="emptyfiltered">
- <div align="center">Data tidak ditemukan</div>
- </template>
- </b-table>
- <b-pagination
- v-model="currentPage"
- :total-rows="totalRows"
- :per-page="perPage"
- align="center"
- />
-
- <!-- Modal Component -->
- <b-modal
- id="confirmation-modal"
- centered
- title="Konfirmasi"
- v-model="modalVisibility"
- ok-title="Kosongkan"
- cancel-title="Batal"
- ok-variant="danger"
- @ok="clearAdminHandler"
- >
- <p align="center" class="my-4">
- Apakah Anda yakin ingin mengosongkan Admin?<br>
- <b>Tindakan ini tidak dapat diurungkan.</b>
- </p>
- </b-modal>
- </b-tab>
+ <table-budget :data='dataTable' :key="dataTable.current_item.id" v-on:changeActivity="updateActivity($event)" />
+ </b-tab>
</b-tabs>
</b-card>
</div>
@@ -154,11 +34,14 @@
<script>
import Comments from '@/components/partials/Comments'
+import TableBudget from '@/components/partials/TableBudget'
+
export default {
name: 'PanelAdministrator',
components: {
'comments' : Comments,
+ 'table-budget' : TableBudget
},
data() {
return {
@@ -215,8 +98,40 @@ export default {
{ value: '2', text: 'William Rukmansa' },
{ value: '3', text: 'Ricky Kennedy' }
],
+ dataTable : {
+ perPage: 5,
+ currentPage: 1,
+ fields : {
+ activity_name : {
+ label : 'Activity Name',
+ sortable : true,
+ },
+ admin_name : {
+ label : 'Admin Name',
+ sortable : true,
+ },
+ actions : {
+ label : 'Actions'
+ }
+ },
+ current_item: {
+ id : 99, activity_name:'current activity', admin_name : 'aaa'
+ },
+ items: [
+ { id: 1, activity_name: 'A', admin_name: 'Flintstone' },
+ { id: 2, activity_name: 'B', admin_name: 'Flintstone' },
+ { id: 3, activity_name: 'C', admin_name: 'Rubbleaskldjf klsajdfklsajdkalskjdfklsjdfalkdflksdj fljslkfjskldfj lksajlkfjsdl ksalksjdfklasjdlkjfs lkdjfklsajfklasklfmasdlkfsj oidfamslkdfmi saldkfmsialfi madlifsm' },
+ { id: 4, activity_name: 'D', admin_name: 'Rubble' },
+ { id: 5, activity_name: 'E', admin_name: 'Flintstone' },
+ { id: 6, activity_name: 'F', admin_name: 'Rubble' },
+ { id: 7, activity_name: 'G', admin_name: 'Gazzoo' },
+ { id: 8, activity_name: 'H', admin_name: 'Slate' },
+ { id: 9, activity_name: 'I', admin_name: 'Slaghoople' },
+ // { id: 10, first_name: 'Ricky', last_name: 'Kennedy' }
+ ],
+ }
}
- },
+ },
created : function() {
if (this.$store.state.user.role <= 0) {
this.$router.push({name: 'LandingPage'});
@@ -252,7 +167,28 @@ export default {
filterTrigger(item) {
this.totalRows = item.length
this.currentPage = 1
- }
+ },
+
+ updateCurrentActivity: function(id, activity_name, admin_name) {
+ this.dataTable.current_item.id = id;
+ this.dataTable.current_item.activity_name = activity_name;
+ this.dataTable.current_item.admin_name = admin_name;
+ console.log(this.dataTable.current_item.activity_name)
+ },
+
+ updateActivity: function(event) {
+ var element = this.dataTable.items.find( function(element){
+ if (element.id === event ){
+ console.log("before");
+ console.log(element);
+ return element;
+ }
+ })
+
+ this.updateCurrentActivity(element.id, element.activity_name, element.admin_name);
+
+ },
+
}
}
</script>
diff --git a/src/components/pages/PanelBackup.vue b/src/components/pages/PanelBackup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..19984f0bb6c5d1122509b923a4ec87dd13f8f43a
--- /dev/null
+++ b/src/components/pages/PanelBackup.vue
@@ -0,0 +1,277 @@
+<template>
+ <div id="placeholder">
+ <div id="container">
+ <b-card no-body>
+ <b-tabs card>
+ <b-tab title="Komentar" active>
+ <b-card no-body>
+ <b-tabs pills vertical card>
+ <b-tab title="Entri Komentar" disabled/>
+ <b-tab
+ v-for="item in urusan"
+ :key=item.judul
+ v-bind:title="item.judul">
+ <b-tabs content-class="mt-3">
+ <b-tab title="Belum dibalas" active>
+ <comments replyable/>
+ </b-tab>
+ <b-tab title="Semua">
+ <comments replyable/>
+ </b-tab>
+ </b-tabs>
+ </b-tab>
+ </b-tabs>
+ </b-card>
+ </b-tab>
+ <b-tab v-if="this.$store.state.user.role == 2" title="Pengaturan Admin">
+ <!-- Table Pagination + Filter -->
+ <b-pagination
+ v-model="currentPage"
+ :total-rows="totalRows"
+ :per-page="perPage"
+ align="center"
+ />
+ <b-form-input
+ v-model="filter"
+ placeholder="Ketik untuk menyaring urusan/admin..."
+ />
+ <div class="mb-3">
+ <small class="text-muted font-italic">
+ Menampilkan {{ totalRows }} baris urusan
+ </small>
+ </div>
+ <b-table
+ show-empty
+ striped
+ hover
+ stacked="sm"
+ :items="items"
+ :fields="fields"
+ :current-page="currentPage"
+ :per-page="perPage"
+ :filter="filter"
+ @filtered="filterTrigger"
+ >
+ <template slot="aksi" slot-scope="row">
+ <div v-if="row.item.admin === '-'">
+ <div class="px-1 col-md-6 col-12">
+ <b-button
+ @click="switchToggleDetails(row)"
+ variant="success"
+ size="sm"
+ class="w-100"
+ >
+ Pasang
+ </b-button>
+ </div>
+ </div>
+ <b-row class="mx-0" v-else>
+ <div class="px-1 col-md-6 col-12">
+ <b-button
+ @click="switchToggleDetails(row)"
+ variant="primary"
+ size="sm"
+ class="w-100"
+ >
+ Ubah
+ </b-button>
+ </div>
+ <div class="px-1 col-md-6 col-12">
+ <b-button
+ @click="clearButtonHandler(row)"
+ variant="danger"
+ size="sm"
+ class="w-100"
+ >
+ Kosongkan
+ </b-button>
+ </div>
+ </b-row>
+ </template>
+ <template slot="row-details" slot-scope="row">
+ <b-card
+ bg-variant="light"
+ >
+ <small><b>Mohon pilih Admin dari daftar di bawah ini:</b></small>
+ <b-form-select
+ v-model="selected"
+ :options="options"
+ size="sm"
+ />
+ <b-button
+ @click="assignAdmin(row)"
+ variant="primary"
+ size="sm"
+ class="float-right mt-2 ml-2"
+ >
+ Pilih Admin
+ </b-button>
+ <b-button
+ @click="switchToggleDetails(null)"
+ size="sm"
+ class="float-right mt-2"
+ >
+ Batalkan
+ </b-button>
+ </b-card>
+ </template>
+ <template slot="empty">
+ <div align="center">Tidak ada data untuk ditampilkan</div>
+ </template>
+ <template slot="emptyfiltered">
+ <div align="center">Data tidak ditemukan</div>
+ </template>
+ </b-table>
+ <b-pagination
+ v-model="currentPage"
+ :total-rows="totalRows"
+ :per-page="perPage"
+ align="center"
+ />
+
+ <!-- Modal Component -->
+ <b-modal
+ id="confirmation-modal"
+ centered
+ title="Konfirmasi"
+ v-model="modalVisibility"
+ ok-title="Kosongkan"
+ cancel-title="Batal"
+ ok-variant="danger"
+ @ok="clearAdminHandler"
+ >
+ <p align="center" class="my-4">
+ Apakah Anda yakin ingin mengosongkan Admin?<br>
+ <b>Tindakan ini tidak dapat diurungkan.</b>
+ </p>
+ </b-modal>
+ </b-tab>
+ </b-tabs>
+ </b-card>
+ </div>
+ </div>
+</template>
+
+<script>
+import Comments from '@/components/partials/Comments'
+
+export default {
+ name: 'PanelAdministrator',
+ components: {
+ 'comments' : Comments,
+ },
+ data() {
+ return {
+ currentRow: null,
+ clearedRowPointer: null,
+ modalVisibility: false,
+ totalRows: 1,
+ currentPage: 1,
+ perPage: 15,
+ filter: null,
+ selected: 'urusan',
+ fields: ['urusan', 'admin', 'aksi'],
+ urusan : [
+ { judul: "Pendapatan", url: "" },
+ { judul: "Pembiayaan", url: "" },
+ { judul: "Biaya Langsung", url: "" },
+ { judul: "Biaya Tidak Langsung", url: "" },
+ ],
+ items : [
+ { urusan: 'Biaya Langsung', admin: 'Rifo Ahmad Genadi'},
+ { urusan: 'Biaya Tak Langsung', admin: 'David Timothy Panjaitan'},
+ { urusan: 'Pembiayaan', admin: '-'},
+ { urusan: 'Pendapatan', admin: '-'},
+ { urusan: 'A', admin: 'Rifo Ahmad Genadi'},
+ { urusan: 'B', admin: 'David Timothy Panjaitan'},
+ { urusan: 'C', admin: '-'},
+ { urusan: 'D', admin: '-'},
+ { urusan: 'E', admin: 'Rifo Ahmad Genadi'},
+ { urusan: 'F', admin: 'David Timothy Panjaitan'},
+ { urusan: 'G', admin: '-'},
+ { urusan: 'H', admin: '-'},
+ { urusan: 'I', admin: 'Rifo Ahmad Genadi'},
+ { urusan: 'J', admin: 'David Timothy Panjaitan'},
+ { urusan: 'K', admin: '-'},
+ { urusan: 'L', admin: '-'},
+ { urusan: 'M', admin: 'Rifo Ahmad Genadi'},
+ { urusan: 'N', admin: 'David Timothy Panjaitan'},
+ { urusan: 'O', admin: '-'},
+ { urusan: 'P', admin: '-'},
+ { urusan: 'Q', admin: 'Rifo Ahmad Genadi'},
+ { urusan: 'R', admin: 'David Timothy Panjaitan'},
+ { urusan: 'S', admin: '-'},
+ { urusan: 'T', admin: '-'},
+ { urusan: 'U', admin: 'Rifo Ahmad Genadi'},
+ { urusan: 'V', admin: 'David Timothy Panjaitan'},
+ { urusan: 'W', admin: '-'},
+ { urusan: 'X', admin: '-'},
+ { urusan: 'Y', admin: 'Rifo Ahmad Genadi'},
+ { urusan: 'Z', admin: 'David Timothy Panjaitan'},
+ ],
+ options: [
+ { value: '0', text: 'Rifo Ahmad Genadi' },
+ { value: '1', text: 'David Timothy Panjaitan' },
+ { value: '2', text: 'William Rukmansa' },
+ { value: '3', text: 'Ricky Kennedy' }
+ ],
+ }
+ },
+ created : function() {
+ if (this.$store.state.user.role <= 0) {
+ this.$router.push({name: 'LandingPage'});
+ return
+ }
+
+ this.totalRows = this.items.length
+ this.$store.commit('changed','Jenis Anggaran')
+ },
+ methods: {
+ assignAdmin : function(row) {
+ row.item.admin = this.options[this.selected].text
+ this.switchToggleDetails(null)
+ },
+ clearButtonHandler : function(row) {
+ this.modalVisibility = true
+ this.clearedRowPointer = row
+ },
+ clearAdminHandler : function() {
+ this.clearedRowPointer.item.admin = "-"
+ this.switchToggleDetails(null)
+ },
+ switchToggleDetails : function(newRow) {
+ if (this.currentRow) {
+ this.currentRow.toggleDetails()
+ }
+ if (newRow) {
+ newRow.toggleDetails()
+ }
+ this.currentRow = newRow
+ this.selected = null
+ },
+ filterTrigger(item) {
+ this.totalRows = item.length
+ this.currentPage = 1
+ }
+ }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+
+#placeholder {
+ padding: 30px 20px;
+
+ #container {
+ height: auto;
+ width: 100%;
+ min-width: 250px;
+ max-width: 1000px;
+ margin: auto;
+ border-radius: 5px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/pages/PendapatanPage.vue b/src/components/pages/PendapatanPage.vue
index d10e93592525e1d1d8a24de584d3c04eca31711b..d14ce62e954f8f0c316e18135e2a1e0d95ec552f 100644
--- a/src/components/pages/PendapatanPage.vue
+++ b/src/components/pages/PendapatanPage.vue
@@ -1,23 +1,72 @@
<template>
- <div>
- Pendapatan
+ <div class="content">
+ <table-budget :data ='data'/>
</div>
</template>
<script>
+import TableBudget from '@/components/partials/TableBudget'
+
export default {
name: 'Pendapatan',
components: {
-
+ 'table-budget' : TableBudget
},
data() {
return {
-
+ data :{
+ perPage: 5,
+ currentPage: 1,
+ fields : {
+ activity_name : {
+ label : 'Activity Name',
+ sortable : true,
+ },
+ admin_name : {
+ label : 'Admin Name',
+ sortable : true,
+ },
+ actions : {
+ label : 'Actions'
+ }
+ },
+ current_item: {
+ id : 99, activity_name:'current activity', admin_name : '--'
+ },
+ items: [
+ { id: 1, activity_name: 'Aaaaaaaaaaaa', admin_name: 'Flintstone' },
+ { id: 2, activity_name: 'B', admin_name: 'Flintstone' },
+ { id: 3, activity_name: 'C', admin_name: 'Rubbleaskldjf klsajdfklsajdkalskjdfklsjdfalkdflksdj fljslkfjskldfj lksajlkfjsdl ksalksjdfklasjdlkjfs lkdjfklsajfklasklfmasdlkfsj oidfamslkdfmi saldkfmsialfi madlifsm' },
+ { id: 4, activity_name: 'D', admin_name: 'Rubble' },
+ { id: 5, activity_name: 'E', admin_name: 'Flintstone' },
+ { id: 6, activity_name: 'F', admin_name: 'Rubble' },
+ { id: 7, activity_name: 'G', admin_name: 'Gazzoo' },
+ { id: 8, activity_name: 'H', admin_name: 'Slate' },
+ { id: 9, activity_name: 'I', admin_name: 'Slaghoople' },
+ // { id: 10, first_name: 'Ricky', last_name: 'Kennedy' }
+ ],
+ }
+ }
+ },
+ computed: {
+ rows() {
+ return this.items.length
}
},
methods: {
+ changeSeen : function() {
+ this.seen = !this.seen;
+ if(this.rows % 5 !== 0) {
+ var remainder = this.rows % 5;
+ var number_of_blank = 5 - remainder;
+ for(var i=0; i < number_of_blank; i++) {
+ this.items.push({id : '--' , first_name : '--', last_name: '--' } );
+ }
+ }
+ }
},
+ //ini jangan dihapus
created : function() {
this.$store.commit('changed','Anggaran Pendapatan')
}
diff --git a/src/components/partials/TableBudget.vue b/src/components/partials/TableBudget.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3693398353309f093c36101c88c6a21a4db62d47
--- /dev/null
+++ b/src/components/partials/TableBudget.vue
@@ -0,0 +1,241 @@
+<template>
+ <b-container class="content justify-content-center">
+ <b-col>
+ <b-row align-h='left'>
+ <h3>
+ {{ "Activity : " + data.current_item.activity_name }}
+ <br><br>
+ {{"Admin : " + data.current_item.admin_name}}
+ </h3>
+ </b-row>
+ <b-row v-if="showCard">
+ <b-card >
+ <small><b>Mohon pilih Admin dari daftar di bawah ini:</b></small>
+ <b-form-select
+ v-model="selected"
+ :options="options"
+ size="sm"
+ />
+ <b-button
+ @click="updateAdmin()"
+ variant="primary"
+ size="sm"
+ class="float-right mt-2 ml-2"
+ >
+ Pilih Admin
+ </b-button>
+ <b-button
+ v-on:click="changeShowCardState()"
+ size="sm"
+ class="float-right mt-2"
+ >
+ Batalkan
+ </b-button>
+ </b-card>
+ </b-row>
+ <b-row class="my-2" align-h="end">
+ <b-col
+ v-if="data.current_item.admin_name === '--'"
+ cols="auto"
+ >
+ <b-button
+ v-on:click="changeShowCardState()"
+ variant="success"
+ size="sm"
+ >
+ Pasang Admin
+ </b-button>
+ </b-col>
+ <b-col
+ v-else
+ cols="auto"
+ >
+ <b-button
+ v-on:click="changeShowCardState()"
+ variant="primary"
+ size="sm"
+ >
+ Ubah Admin
+ </b-button>
+ <b-button
+ v-on:click="showModal()"
+ variant="danger"
+ size="sm"
+ >
+ Hapus Admin
+ </b-button>
+ </b-col>
+ <b-col
+ cols="auto"
+ >
+ <b-button
+ v-on:click="changeSeen()"
+ size="sm"
+ >
+ Tampilkan Rincian
+ </b-button>
+ </b-col>
+ </b-row>
+
+ <b-row align-h='center' v-if="seen" class=" justify-content-center overflow-auto">
+ <b-table
+ hover
+ responsive
+ id="my-table"
+ :items="data.items"
+ :per-page="data.perPage"
+ :current-page="data.currentPage"
+ :fields="data.fields"
+ small
+ striped
+ :busy="isBusy"
+ stacked="md"
+ fixed
+ >
+ <div slot="table-busy" class="text-center text-danger my-2">
+ <b-spinner class="align-middle"></b-spinner>
+ <strong>Loading...</strong>
+ </div>
+ <template slot="actions" slot-scope="row" >
+ <b-button
+ size="sm"
+ v-on:click="seeDetail(row)"
+ >
+ Lihat
+ </b-button>
+ </template>
+ </b-table>
+
+ <b-pagination
+ v-model="data.currentPage"
+ :total-rows="rows"
+ :per-page="data.perPage"
+ aria-controls="my-table"
+ ></b-pagination>
+ </b-row>
+ </b-col>
+ <!-- Modal Component -->
+ <b-modal
+ id="confirmation-modal"
+ centered
+ title="Konfirmasi"
+ v-model="modalVisibility"
+ ok-title="Kosongkan"
+ cancel-title="Batal"
+ ok-variant="danger"
+ @ok="removeAdmin()"
+ >
+ <p align="center" class="my-4">
+ Apakah Anda yakin ingin mengosongkan Admin?<br>
+ <b>Tindakan ini tidak dapat diurungkan.</b>
+ </p>
+ </b-modal>
+ </b-container>
+</template>
+
+<script>
+export default {
+ name: 'TableBudget',
+ components: {
+
+ },
+ props:{
+ data : {
+ type : Object
+ }
+ },
+ data() {
+ return {
+ seen : false,
+ isBusy : false,
+ showCard : false,
+ options: [
+ { value: '0', text: 'Rifo Ahmad Genadi' },
+ { value: '1', text: 'David Timothy Panjaitan' },
+ { value: '2', text: 'William Rukmansa' },
+ { value: '3', text: 'Ricky Kennedy' }
+ ],
+ selected : 0,
+ modalVisibility : false
+ }
+ },
+ computed: {
+ rows() {
+ return this.data.items.length
+ }
+ },
+ methods: {
+ getData : function() {
+ return this.data;
+ },
+ changeSeen : function() {
+ this.isBusy = true;
+ this.seen = !this.seen;
+ if(this.rows % 5 !== 0) {
+ var remainder = this.rows % 5;
+ var number_of_blank = 5 - remainder;
+ for(var i=0; i < number_of_blank; i++) {
+ this.data.items.push({id : '-' , activity_name : 'J', admin_name: '--' } );
+ }
+ }
+ this.isBusy = false;
+
+ },
+ // tambahkan property table
+ // :tbody-tr-class="rowClass"
+
+ rowClass( items, type ) {
+ if(!items) return
+ if(items.admin_name === '--')
+ return 'table-danger'
+ else
+ return 'table-success'
+ },
+
+ changeShowCardState : function() {
+ this.showCard = !this.showCard;
+ },
+
+ removeAdmin : function() {
+ this.data.current_item.admin_name = '--';
+ },
+
+ updateAdmin : function() {
+ this.data.current_item.admin_name = this.options[this.selected].text;
+ },
+ seeDetail : function(row) {
+ this.$emit('changeActivity',row.item.id);
+ },
+ showModal : function() {
+ this.modalVisibility = true;
+ }
+
+ },
+
+ created : function(){
+ this.isBusy = true;
+ }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+* {
+ margin: 0%;
+ padding: 0%;
+}
+
+.b-table tbody tr td {
+ cursor: pointer;
+}
+
+.col-auto {
+ padding : 0px 5px;
+}
+
+.card {
+ width: 100%;
+}
+
+</style>
\ No newline at end of file