admin/raven
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
John Cardinal
2018-11-22 22:40:44 +00:00
parent ca8d362a72
commit 58683fd337
3 changed files with 140 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/ayanova/src/api/apimeta.js
View File

@@ -5,7 +5,7 @@ export default {
fetchAPIInfo() {
return new Promise(function(resolve, reject) {
//step 2: get it
fetch(apiUtil.APIUrl("ServerInfo"), apiUtil.fetch())
fetch(apiUtil.APIUrl("ServerInfo"), apiUtil.fetchGetOptions())
.then(apiUtil.status)
.then(apiUtil.json)
.then(response => {

158
app/ayanova/src/components/widgetlist.vue
View File

@@ -1,30 +1,84 @@
<template>
<v-flex xs12 md4>
<v-data-table
v-model="selected"
:headers="headers"
:items="Items"
item-key="id"
:pagination.sync="pagination"
:total-items="totalItems"
:loading="loading"
class="elevation-1"
select-all
>
<template slot="items" slot-scope="props">
<td>
<v-checkbox v-model="props.selected" color="secondary" hide-details></v-checkbox>
</td>
<td>
<div style="width:200px;">{{ props.item.name }}</div>
</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>
</template>
</v-data-table>
<v-flex xs12 md12>
<div>
<v-toolbar flat color="white">
<v-toolbar-title>Widgets</v-toolbar-title>
<v-divider class="mx-2" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<v-btn slot="activator" icon large dark class="mb-2">
<v-icon large color="secondary">fa-plus-circle</v-icon>
</v-btn>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap="">
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.name" label="Name"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.serial" label="Serial"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.dollarAmount" label="Price"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.active" label="Active"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.roles" label="Roles"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.startDate" label="Start date"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn icon large dark @click="close">
<v-icon large color="secondary">fa-plus-circle</v-icon>
</v-btn>
<v-btn icon large dark @click="save">
<v-icon large color="secondary">fa-plus-circle</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
<v-data-table
v-model="selected"
:headers="headers"
:items="Items"
item-key="id"
:pagination.sync="pagination"
:total-items="totalItems"
:loading="loading"
class="elevation-1"
select-all
>
<template slot="items" slot-scope="props">
<td>
<v-checkbox v-model="props.selected" color="secondary" hide-details></v-checkbox>
</td>
<td>
<div style="width:200px;">{{ props.item.name }}</div>
</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="justify-center layout px-0">
<v-icon small class="mr-3" @click="editItem(props.item)">fa-pencil-alt</v-icon>
<v-icon small class="mr-3" @click="deleteItem(props.item)">fa-trash-alt</v-icon>
</td>
</template>
</v-data-table>
</div>
</v-flex>
</template>
@@ -35,6 +89,24 @@ import pagedList from "../api/pagedlist";
export default {
data() {
return {
dialog: false,
editedIndex: -1,
editedItem: {
name: "",
serial: 0,
dollarAmount: 0,
active: true,
roles: 0,
startDate: undefined
},
defaultItem: {
name: "",
serial: 0,
dollarAmount: 0,
active: true,
roles: 0,
startDate: new Date()
},
totalItems: 0,
Items: [],
loading: true,
@@ -73,6 +145,11 @@ export default {
mounted() {
this.getDataFromApi();
},
computed: {
formTitle() {
return this.editedIndex === -1 ? "New Item" : "Edit Item";
}
},
methods: {
toggleAll() {
if (this.selected.length) this.selected = [];
@@ -97,6 +174,35 @@ export default {
this.Items = res.data;
this.totalItems = res.paging.count;
});
},
editItem(item) {
this.editedIndex = this.Items.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialog = true;
},
deleteItem(item) {
const index = this.desserts.indexOf(item);
confirm("Are you sure you want to delete this item?") &&
this.desserts.splice(index, 1);
},
close() {
this.dialog = false;
setTimeout(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
}, 300);
},
save() {
if (this.editedIndex > -1) {
Object.assign(this.desserts[this.editedIndex], this.editedItem);
} else {
this.desserts.push(this.editedItem);
}
this.close();
}
}
};