170 lines
4.2 KiB
Vue
170 lines
4.2 KiB
Vue
<template>
|
|
<v-flex xs12 md12>
|
|
<div>
|
|
<v-toolbar flat>
|
|
<v-toolbar-title>
|
|
<v-icon large color="primary">fa-splotch</v-icon>
|
|
<span class="hidden-sm-and-down">Widgets</span>
|
|
</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-btn icon @click="newItem()">
|
|
<v-icon>fa-plus-circle</v-icon>
|
|
</v-btn>
|
|
<v-btn icon>
|
|
<v-icon>fa-filter</v-icon>
|
|
</v-btn>
|
|
<v-btn icon @click="getDataFromApi()">
|
|
<v-icon>fa-sync</v-icon>
|
|
</v-btn>
|
|
<v-btn icon>
|
|
<v-icon>fa-ellipsis-v</v-icon>
|
|
</v-btn>
|
|
</v-toolbar>
|
|
<WidgetEdit :dialogdata="dialogdata" v-on:dialogclose="dialogdata.dialog=false"/>
|
|
<v-data-table
|
|
v-model="selected"
|
|
:headers="headers"
|
|
:items="Items"
|
|
item-key="id"
|
|
:pagination.sync="pagination"
|
|
:total-items="totalItems"
|
|
:loading="loading"
|
|
class="elevation-1"
|
|
>
|
|
<template slot="items" slot-scope="props">
|
|
<td class="text-xs-left">{{ props.item.name }}</td>
|
|
<td class="text-xs-left">{{ props.item.serial }}</td>
|
|
<td class="text-xs-left">{{ props.item.dollarAmount }}</td>
|
|
<td class="text-xs-left">{{ props.item.active }}</td>
|
|
<td class="text-xs-left">{{ props.item.roles }}</td>
|
|
<td class="text-xs-left">{{ props.item.startDate }}</td>
|
|
<td class="text-xs-left">{{ props.item.endDate }}</td>
|
|
<td class="justify-center layout px-0">
|
|
<v-icon small class="mr-3" @click="editItem(props.item)">fa-pencil-alt</v-icon>
|
|
</td>
|
|
</template>
|
|
</v-data-table>
|
|
</div>
|
|
</v-flex>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
/* xeslint-disable */
|
|
import pagedList from "../api/pagedlist";
|
|
import WidgetEdit from "../components/inventorywidgetedit";
|
|
export default {
|
|
components: {
|
|
WidgetEdit
|
|
},
|
|
data() {
|
|
return {
|
|
dialogdata: {
|
|
dialog: false,
|
|
recordId: 2
|
|
},
|
|
editedIndex: -1,
|
|
editedItem: {
|
|
name: "",
|
|
serial: 0,
|
|
dollarAmount: 0,
|
|
active: true,
|
|
roles: 0,
|
|
startDate: undefined,
|
|
endDate: undefined
|
|
},
|
|
defaultItem: {
|
|
name: "",
|
|
serial: 0,
|
|
dollarAmount: 0,
|
|
active: true,
|
|
roles: 0,
|
|
startDate: new Date(),
|
|
endDate: undefined
|
|
},
|
|
totalItems: 0,
|
|
Items: [],
|
|
loading: true,
|
|
pagination: {},
|
|
selected: [],
|
|
headers: [
|
|
{
|
|
text: "Widget",
|
|
value: "name"
|
|
},
|
|
{ text: "Serial", value: "serial" },
|
|
{ text: "Price", value: "dollarAmount" },
|
|
{ text: "Active", value: "active" },
|
|
{ text: "Roles", value: "roles" },
|
|
{ text: "Start date", value: "startDate" },
|
|
{ text: "End date", value: "endDate" }
|
|
]
|
|
};
|
|
},
|
|
watch: {
|
|
pagination: {
|
|
handler() {
|
|
this.getDataFromApi();
|
|
/*
|
|
{
|
|
descending: false,
|
|
page: 1,
|
|
rowsPerPage: 5,
|
|
sortBy: "name",
|
|
totalItems: 0
|
|
}
|
|
*/
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getDataFromApi();
|
|
},
|
|
computed: {
|
|
formTitle() {
|
|
return this.editedIndex === -1 ? "New Item" : "Edit Item";
|
|
}
|
|
},
|
|
methods: {
|
|
toggleAll() {
|
|
if (this.selected.length) this.selected = [];
|
|
else this.selected = this.Items.slice();
|
|
},
|
|
|
|
newItem() {
|
|
this.dialogdata.recordId = -1;
|
|
this.dialogdata.dialog = true;
|
|
},
|
|
getDataFromApi() {
|
|
var listOptions = {
|
|
Offset: 0,
|
|
Limit: 5
|
|
};
|
|
|
|
if (this.pagination.rowsPerPage && this.pagination.rowsPerPage > 0) {
|
|
listOptions.Offset =
|
|
(this.pagination.page - 1) * this.pagination.rowsPerPage;
|
|
listOptions.Limit = this.pagination.rowsPerPage;
|
|
}
|
|
|
|
this.loading = true;
|
|
pagedList.fetch("Widget/ListWidgets", listOptions).then(res => {
|
|
// debugger;
|
|
this.loading = false;
|
|
this.Items = res.data;
|
|
this.totalItems = res.paging.count;
|
|
});
|
|
},
|
|
editItem(item) {
|
|
this.dialogdata.recordId = this.Items.indexOf(item);
|
|
this.dialogdata.dialog = true;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style>
|
|
</style>
|