233 lines
6.8 KiB
Vue
233 lines
6.8 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">{{ lt("WidgetList")}}</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.showeditdialog=false"/>
|
|
<v-data-table
|
|
v-model="selected"
|
|
:headers="headers"
|
|
:items="Items"
|
|
item-key="id"
|
|
:pagination.sync="pagination"
|
|
:total-items="totalItems"
|
|
:loading="loading"
|
|
:rows-per-page-items="rowsPerPageItems"
|
|
:rows-per-page-text="lt('RowsPerPage')"
|
|
class="elevation-1"
|
|
>
|
|
<template slot="items" slot-scope="props">
|
|
<td class="text-xs-left">{{ props.item.name | capitalize }}</td>
|
|
<td class="text-xs-left">{{ props.item.serial }}</td>
|
|
<td class="text-xs-left">{{ props.item.dollarAmount | currency }}</td>
|
|
<td class="text-xs-left">{{ props.item.active | boolastext }}</td>
|
|
<td class="text-xs-left">{{ props.item.roles }}</td>
|
|
<td class="text-xs-left">{{ props.item.startDate | shortdate}}</td>
|
|
<td class="text-xs-left">{{ props.item.endDate | shortdate }}</td>
|
|
<td class="justify-center layout px-0">
|
|
<v-icon class="mr-3" @click="editItem(props.item)">fa-pencil-alt</v-icon>
|
|
</td>
|
|
</template>
|
|
</v-data-table>
|
|
</div>
|
|
</v-flex>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
/* eslint-disable */
|
|
import localeText from "../api/locale";
|
|
import api from "../api/apiutil";
|
|
import WidgetEdit from "../components/inventorywidgetedit";
|
|
export default {
|
|
ltKeysRequired: [
|
|
"Widget",
|
|
"WidgetList",
|
|
"WidgetName",
|
|
"WidgetSerial",
|
|
"WidgetDollarAmount",
|
|
"Active",
|
|
"WidgetRoles",
|
|
"WidgetStartDate",
|
|
"WidgetEndDate",
|
|
"WidgetNotes",
|
|
"RowsPerPage"
|
|
],
|
|
components: {
|
|
WidgetEdit
|
|
},
|
|
data() {
|
|
return {
|
|
dialogdata: {
|
|
showeditdialog: false,
|
|
recordId: 0
|
|
},
|
|
totalItems: 0,
|
|
Items: [],
|
|
loading: true,
|
|
pagination: {},
|
|
selected: [],
|
|
rowsPerPageItems: [5, 10, 25, 99],
|
|
rowsPerPageText: "blah per blah",
|
|
headers: [
|
|
{
|
|
text: this.lt("WidgetName"),
|
|
value: "name"
|
|
},
|
|
{ text: this.lt("WidgetSerial"), value: "serial" },
|
|
{ text: this.lt("WidgetDollarAmount"), value: "dollarAmount" },
|
|
{ text: this.lt("Active"), value: "active" },
|
|
{ text: this.lt("WidgetRoles"), value: "roles" },
|
|
{ text: this.lt("WidgetStartDate"), value: "startDate" },
|
|
{ text: this.lt("WidgetEndDate"), value: "endDate" }
|
|
]
|
|
};
|
|
},
|
|
watch: {
|
|
pagination: {
|
|
handler() {
|
|
this.getDataFromApi();
|
|
/*
|
|
{
|
|
descending: false,
|
|
page: 1,
|
|
rowsPerPage: 5,
|
|
sortBy: "name",
|
|
totalItems: 0
|
|
}
|
|
*/
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
mounted() {
|
|
/* Check rights here?
|
|
e.g.
|
|
if (
|
|
roles.hasRole(roles.AuthorizationRoles.OpsAdminFull) ||
|
|
roles.hasRole(roles.AuthorizationRoles.OpsAdminLimited)
|
|
) {
|
|
addNavItem(lt.get("Operations"), "cogs", "ops");
|
|
}
|
|
*/
|
|
this.rowsPerPageText = this.lt("RowsPerPage");
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
lt: function(key) {
|
|
return localeText.get(key);
|
|
},
|
|
newItem() {
|
|
this.dialogdata.recordId = -1;
|
|
this.dialogdata.showeditdialog = true;
|
|
},
|
|
getDataFromApi() {
|
|
//debugger;
|
|
var listOptions = {
|
|
offset: 0,
|
|
limit: 5,
|
|
sort: "name",
|
|
asc: true
|
|
};
|
|
|
|
if (this.pagination.rowsPerPage && this.pagination.rowsPerPage > 0) {
|
|
listOptions.offset =
|
|
(this.pagination.page - 1) * this.pagination.rowsPerPage;
|
|
listOptions.limit = this.pagination.rowsPerPage;
|
|
}
|
|
listOptions.sort = this.pagination.sortBy;
|
|
listOptions.asc = !this.pagination.descending;
|
|
|
|
this.loading = true;
|
|
//debugger;
|
|
var listUrl = "Widget/ListWidgets?" + api.buildQuery(listOptions);
|
|
api.get(listUrl).then(res => {
|
|
// debugger;
|
|
this.loading = false;
|
|
this.Items = res.data;
|
|
this.totalItems = res.paging.count;
|
|
});
|
|
},
|
|
editItem(item) {
|
|
this.dialogdata.recordId = item.id;
|
|
this.dialogdata.showeditdialog = true;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style>
|
|
</style>
|
|
|
|
//Example api response
|
|
// {
|
|
// "data": [
|
|
// {
|
|
// "id": 1,
|
|
// "concurrencyToken": 2262471,
|
|
// "ownerId": 1,
|
|
// "name": "Handcrafted Wooden Bacon 23",
|
|
// "serial": 1,
|
|
// "dollarAmount": 25.42,
|
|
// "active": true,
|
|
// "roles": 8212,
|
|
// "startDate": "2018-11-19T12:20:42.920058",
|
|
// "endDate": "2018-11-19T15:37:47.053849",
|
|
// "notes": "Voluptas assumenda laudantium nemo cupiditate. Quia voluptatem reiciendis et. Sit non error est. Tenetur provident nostrum. Voluptatem voluptatem et."
|
|
// },
|
|
// {
|
|
// "id": 2,
|
|
// "concurrencyToken": 2262494,
|
|
// "ownerId": 1,
|
|
// "name": "Ergonomic Soft Gloves 24",
|
|
// "serial": 2,
|
|
// "dollarAmount": 530.39,
|
|
// "active": true,
|
|
// "roles": 8212,
|
|
// "startDate": "2018-11-19T12:17:32.488013",
|
|
// "endDate": "2018-11-19T17:01:18.425666",
|
|
// "notes": "Sed rerum minima blanditiis est. Praesentium consequatur numquam nostrum voluptatem libero dolores voluptatem et. Aut et nobis consectetur voluptatem minus. Ipsa nemo non in iste adipisci voluptatem. Minus consequatur in accusantium."
|
|
// },
|
|
// {
|
|
// "id": 3,
|
|
// "concurrencyToken": 2262518,
|
|
// "ownerId": 1,
|
|
// "name": "Fantastic Metal Computer 25",
|
|
// "serial": 3,
|
|
// "dollarAmount": 494.3,
|
|
// "active": true,
|
|
// "roles": 8212,
|
|
// "startDate": "2018-11-19T13:06:47.437006",
|
|
// "endDate": "2018-11-19T14:41:44.665721",
|
|
// "notes": "Facere et ex. Ipsa aspernatur itaque maiores sint nulla esse incidunt. Architecto labore voluptatem dolore iusto ut."
|
|
// }
|
|
// ],
|
|
// "paging": {
|
|
// "count": 100,
|
|
// "offset": 0,
|
|
// "limit": 3,
|
|
// "first": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=1&pageSize=3",
|
|
// "previous": null,
|
|
// "next": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=1&pageSize=3",
|
|
// "last": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=34&pageSize=3"
|
|
// }
|
|
// }
|