266 lines
7.9 KiB
Vue
266 lines
7.9 KiB
Vue
<template>
|
|
<v-layout column wrap class="my-5" align-center v-if="this.formState.ready">
|
|
<v-flex xs12 mt-1 mb-2 v-if="formState.errorBoxMessage">
|
|
<v-alert
|
|
ref="errorbox"
|
|
v-show="formState.errorBoxMessage"
|
|
color="error"
|
|
icon="fa-exclamation-circle "
|
|
value="true"
|
|
transition="scale-transition"
|
|
class="multi-line"
|
|
outline
|
|
>{{ formState.errorBoxMessage }}</v-alert
|
|
>
|
|
</v-flex>
|
|
<v-flex xs12 md12>
|
|
<div v-if="this.formState.ready">
|
|
<v-toolbar flat>
|
|
<v-toolbar-title>
|
|
<v-icon large color="primary">fa-splotch</v-icon>
|
|
<span class="hidden-sm-and-down">{{
|
|
this.$gzlocale.get("WidgetList")
|
|
}}</span>
|
|
</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-btn v-if="this.rights.change" icon @click="newItem()">
|
|
<v-icon>fa-plus-circle</v-icon>
|
|
</v-btn>
|
|
<v-btn icon @click="filterMe()">
|
|
<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>
|
|
<v-data-table
|
|
v-model="selected"
|
|
:headers="headers"
|
|
:items="Items"
|
|
item-key="id"
|
|
:pagination.sync="localFormSettings.pagination"
|
|
:total-items="totalItems"
|
|
:loading="loading"
|
|
:rows-per-page-items="rowsPerPageItems"
|
|
:rows-per-page-text="this.$gzlocale.get('RowsPerPage')"
|
|
class="elevation-1"
|
|
select-all
|
|
>
|
|
<template slot="items" slot-scope="props">
|
|
<td>
|
|
<v-checkbox
|
|
v-model="props.selected"
|
|
primary
|
|
hide-details
|
|
></v-checkbox>
|
|
</td>
|
|
<td class="text-xs-left" @click="editItem(props.item)">
|
|
{{ props.item.name | capitalize }}
|
|
</td>
|
|
<td class="text-xs-left" @click="editItem(props.item)">
|
|
{{ props.item.serial }}
|
|
</td>
|
|
<td class="text-xs-left" @click="editItem(props.item)">
|
|
{{ props.item.dollarAmount | currency }}
|
|
</td>
|
|
<td class="text-xs-left" @click="editItem(props.item)">
|
|
{{ props.item.active | boolastext }}
|
|
</td>
|
|
<td class="text-xs-left" @click="editItem(props.item)">
|
|
{{ props.item.roles }}
|
|
</td>
|
|
<td class="text-xs-left" @click="editItem(props.item)">
|
|
{{ props.item.startDate | shortdate }}
|
|
</td>
|
|
<td class="text-xs-left" @click="editItem(props.item)">
|
|
{{ props.item.endDate | shortdate }}
|
|
</td>
|
|
</template>
|
|
</v-data-table>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
/* Xeslint-disable */
|
|
const FORM_KEY = "inventorywidgetlist";
|
|
|
|
export default {
|
|
beforeCreate() {
|
|
var that = this;
|
|
|
|
this.$gzlocale
|
|
.fetch([
|
|
"Widget",
|
|
"WidgetList",
|
|
"WidgetName",
|
|
"WidgetSerial",
|
|
"WidgetDollarAmount",
|
|
"Active",
|
|
"WidgetRoles",
|
|
"WidgetStartDate",
|
|
"WidgetEndDate",
|
|
"WidgetNotes",
|
|
"RowsPerPage"
|
|
])
|
|
.then(() => {
|
|
that.$_.forEach(that.headers, function setHeaderLocalizedText(header) {
|
|
header.text = that.$gzlocale.get(header.text);
|
|
});
|
|
})
|
|
.then(() => {
|
|
//don't have access to local data object until here
|
|
that.rights = window.$gz.role.getRights(this, window.$gz.type.Widget);
|
|
var formSettings = that.$gzform.getFormSettings(FORM_KEY);
|
|
/**
|
|
* {
|
|
temp: { page: that.localFormSettings.pagination.page },
|
|
saved: {
|
|
rowsPerPage: that.localFormSettings.pagination.rowsPerPage,
|
|
sortBy: that.localFormSettings.pagination.sortBy,
|
|
descending: that.localFormSettings.pagination.descending
|
|
}
|
|
}
|
|
*/
|
|
//set default values for form settings if they are not present yet
|
|
if (!formSettings.saved || !formSettings.saved.rowsPerPage) {
|
|
that.localFormSettings = {
|
|
pagination: {}
|
|
};
|
|
} else {
|
|
that.localFormSettings.pagination = {
|
|
rowsPerPage: formSettings.saved.rowsPerPage,
|
|
sortBy: formSettings.saved.sortBy,
|
|
descending: formSettings.saved.descending
|
|
};
|
|
if (formSettings.temp && formSettings.temp.page) {
|
|
that.localFormSettings.pagination.page = formSettings.temp.page;
|
|
}
|
|
}
|
|
|
|
that.formState.ready = true;
|
|
})
|
|
.catch(err => {
|
|
that.formState.ready = true; //show the form anyway so we know what's what
|
|
that.$gzHandleFormError(err);
|
|
});
|
|
},
|
|
data() {
|
|
return {
|
|
formState: {
|
|
ready: false,
|
|
loading: true,
|
|
errorBoxMessage: null,
|
|
appError: null,
|
|
serverError: {}
|
|
},
|
|
rights: window.$gz.role.defaultRightsObject(),
|
|
totalItems: 0,
|
|
Items: [],
|
|
loading: true,
|
|
localFormSettings: {
|
|
pagination: {}
|
|
},
|
|
selected: [],
|
|
rowsPerPageItems: [5, 10, 25, 99],
|
|
rowsPerPageText: "blah per blah",
|
|
headers: [
|
|
{
|
|
text: "WidgetName",
|
|
value: "name"
|
|
},
|
|
{ text: "WidgetSerial", value: "serial" },
|
|
{
|
|
text: "WidgetDollarAmount",
|
|
value: "dollarAmount"
|
|
},
|
|
{ text: "Active", value: "active" },
|
|
{ text: "WidgetRoles", value: "roles" },
|
|
{ text: "WidgetStartDate", value: "startDate" },
|
|
{ text: "WidgetEndDate", value: "endDate" }
|
|
]
|
|
};
|
|
},
|
|
watch: {
|
|
"localFormSettings.pagination": {
|
|
handler() {
|
|
this.getDataFromApi();
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
newItem() {
|
|
this.$router.push({
|
|
name: "inventory-widget-edit",
|
|
params: { id: 0 }
|
|
});
|
|
},
|
|
filterMe() {
|
|
window.$gz.eventbus.$emit(
|
|
"notify-info",
|
|
"inventoryWidgetList::filterMe -> STUB (selected items count=" +
|
|
this.selected.length +
|
|
")"
|
|
);
|
|
//console.log(this.selected);
|
|
},
|
|
getDataFromApi() {
|
|
var that = this;
|
|
var listOptions = {
|
|
offset: 0,
|
|
limit: 5,
|
|
sort: "name",
|
|
asc: true
|
|
};
|
|
|
|
if (
|
|
this.localFormSettings.pagination.rowsPerPage &&
|
|
this.localFormSettings.pagination.rowsPerPage > 0
|
|
) {
|
|
listOptions.offset =
|
|
(this.localFormSettings.pagination.page - 1) *
|
|
this.localFormSettings.pagination.rowsPerPage;
|
|
listOptions.limit = this.localFormSettings.pagination.rowsPerPage;
|
|
}
|
|
listOptions.sort = this.localFormSettings.pagination.sortBy;
|
|
listOptions.asc = !this.localFormSettings.pagination.descending;
|
|
|
|
//set the list settings in the store since we were successful at retrieval
|
|
if (
|
|
that.localFormSettings &&
|
|
that.localFormSettings.pagination &&
|
|
that.localFormSettings.pagination.rowsPerPage
|
|
) {
|
|
that.$gzform.setFormSettings(FORM_KEY, {
|
|
temp: { page: that.localFormSettings.pagination.page },
|
|
saved: {
|
|
rowsPerPage: that.localFormSettings.pagination.rowsPerPage,
|
|
sortBy: that.localFormSettings.pagination.sortBy,
|
|
descending: that.localFormSettings.pagination.descending
|
|
}
|
|
});
|
|
}
|
|
|
|
this.loading = true;
|
|
var listUrl = "Widget/ListWidgets?" + this.$gzapi.buildQuery(listOptions);
|
|
this.$gzapi.get(listUrl).then(res => {
|
|
that.loading = false;
|
|
that.Items = res.data;
|
|
that.totalItems = res.paging.count;
|
|
});
|
|
},
|
|
editItem(item) {
|
|
this.$router.push({
|
|
name: "inventory-widget-edit",
|
|
params: { id: item.id }
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|