125 lines
4.6 KiB
Vue
125 lines
4.6 KiB
Vue
<template>
|
|
<v-layout class="fill-height" column>
|
|
<v-card>
|
|
<v-layout row>
|
|
<v-flex xs-12 pl-2 pr-2 pt-2 pb-2>
|
|
<v-data-table :headers="headers" :items="l_periode" :loading="isLoading" :pagination.sync="pagination" class="elevation-1">
|
|
<template slot="items" slot-scope="props">
|
|
<tr :class="{'amber lighten-4':isSelected(props.item)}" @click="selectPeriode(props.item)">
|
|
<td class="text-xs-center pa-2">{{ props.item.periodeID }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.periodeName }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.periodeStartDate }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.periodeEndDate }}</td>
|
|
<td v-if="props.item.periodeIsClosed === 'Y'" class="text-xs-center pa-2">YA</td>
|
|
<td v-else class="text-xs-center pa-2">TIDAK</td>
|
|
</tr>
|
|
</template>
|
|
<template>
|
|
<div class="text-xs-center">
|
|
<v-pagination v-model="page" :length="15" :total-visible="7"></v-pagination>
|
|
</div>
|
|
</template>
|
|
</v-data-table>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
table.v-table tbody td,
|
|
table.v-table tbody th {
|
|
height: 40px;
|
|
}
|
|
|
|
table.v-table thead tr {
|
|
height: 40px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
mounted() {
|
|
this.$store.dispatch("periode/getList");
|
|
},
|
|
data() {
|
|
return {
|
|
page: 1,
|
|
pagination: {
|
|
descending: false,
|
|
page: 1,
|
|
rowsPerPage: 5,
|
|
sortBy: 'periodeID',
|
|
totalItems: this.$store.state.periode.total_list,
|
|
},
|
|
headers: [
|
|
{
|
|
text: "NO",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "20%",
|
|
class: "pa-2 blue lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "PERIODE",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "20%",
|
|
class: "pa-2 blue lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "START DATE",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "20%",
|
|
class: "pa-2 blue lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "END DATE",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "20%",
|
|
class: "pa-2 blue lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "CLOSED",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "20%",
|
|
class: "pa-2 blue lighten-3 white--text"
|
|
},
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
l_periode() {
|
|
return this.$store.state.periode.periode;
|
|
},
|
|
selected: {
|
|
get() {
|
|
return this.$store.state.periode.selected;
|
|
},
|
|
set(data) {
|
|
this.$store.commit('periode/update_selected', data)
|
|
}
|
|
},
|
|
isLoading() {
|
|
return this.$store.state.periode.status_get == 1;
|
|
}
|
|
},
|
|
methods: {
|
|
isSelected(row) {
|
|
return row.periodeID == this.$store.state.periode.selected.periodeID
|
|
},
|
|
selectPeriode(per) {
|
|
const selRow = {...per};
|
|
this.selected = selRow;
|
|
}
|
|
},
|
|
}
|
|
</script> |