Skip to content
Snippets Groups Projects
Commit 02b0e22f authored by Ricky Kennedy's avatar Ricky Kennedy
Browse files

wip TableBudget

parent 8d0add0f
3 merge requests!18Asik asik,!17Merge feature-visualisasi into develop,!15New admin panel
Pipeline #13139 failed with stage
Stage:
    Hide whitespace changes
    Inline Side-by-side
    src/components/pages/PanelBackup.vue 0 → 100644
    + 277
    − 0
    View file @ 02b0e22f
    <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
    src/components/pages/PendapatanPage.vue
    + 53
    − 4
    View file @ 02b0e22f
    <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')
    }
    ......
    src/components/partials/TableBudget.vue 0 → 100644
    + 197
    − 0
    View file @ 02b0e22f
    <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 align-h='end'>
    <div v-if="data.items.admin_name === '--'">
    <div class="px-1 col-md-4 col-12">
    <b-button
    @click="switchToggleDetails(row)"
    variant="success"
    size="sm"
    class="w-100"
    >
    Pasang
    </b-button>
    </div>
    </div>
    <div v-else class="px-1 col-md-1 col-12">
    <b-button
    @click="switchToggleDetails(row)"
    variant="primary"
    size="sm"
    class="w-100"
    >
    Ubah
    </b-button>
    </div>
    <div class="px-1 col-md-1 col-12">
    <b-button
    @click="clearButtonHandler(row)"
    variant="danger"
    size="sm"
    class="w-100"
    >
    Kosongkan
    </b-button>
    </div>
    <div class="px-1 col-md-2 col-12">
    <b-button
    v-on:click="changeSeen()"
    size="sm"
    class="w-100"
    >
    Tampilkan Rincian
    </b-button>
    </div>
    </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="switchToggleDratails(row)"
    >
    Lihat
    </b-button>
    </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>
    </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>
    </b-container>
    </template>
    <script>
    export default {
    name: 'TableBudget',
    components: {
    },
    props:{
    data : Object
    },
    data() {
    return {
    seen : false,
    isBusy : 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'
    },
    switchToggleDetails : function(newRow) {
    if (this.currentRow) {
    this.currentRow.toggleDetails()
    }
    if (newRow) {
    newRow.toggleDetails()
    }
    this.currentRow = newRow
    this.selected = null
    }
    },
    created : function(){
    this.isBusy = true;
    }
    }
    </script>
    <style lang="scss" scoped>
    @import 'src/assets/css/style.scss';
    .b-table tbody tr td {
    cursor: pointer;
    }
    </style>
    \ No newline at end of file
    0% or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment