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();
}
}
};

13
devdocs/todo.txt
View File

@@ -7,17 +7,18 @@ Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQyNjY5Njc3IiwiZXhwIjoi
- Make the following widgets for small screen, drag out size and see what can be done to benefit medium+ sizes, so two sizes for now
- Just get basic Functionality working then iterate rather than trying to plabn out everything at once!!
- Mockup filter popup dialog or filter in place near header with expansion thing
- Edit dialog or edit in place?
- Widget list component that works with real data
- https://vuetifyjs.com/en/components/data-tables#example-server
- Displays as a smaller item with maybe a count of widgets only that is expandable into a list of widgets
- paging, sorting, filtering (by tag), items per page
- Widget list component that works with real data
- paging, sorting, filtering (columns and by tag), items per page
- Single column sorting only
- Filter by popup dialog
- generic dialog that accepts a object specifying column names and types and builds a UI with the options on it
- when applied it saves it as an object that is sent up to the server for each column sorted on in query string
- Server list needs to accept those options and sort accordingly.
- are we getting into huge territory needing more advanced utility at server?
- Saved as a whole grid component? or Stored locally with client so each client app can have individual settings (i.e. phone vs desktop can have alternate settings for same user)
- are we getting into huge territory needing more advanced utility at server for querying from client?
- Saved filter as a whole grid component? or Stored locally with client so each client app can have individual settings (i.e. phone vs desktop can have alternate settings for same user)
or both saveable as a pick item from teh main or as a whole preset grid widget? TIME TO MARKET!!!
- Each item can be edited if they have the rights or viewed etc by opening into crud component
- List should remember where the user was when they go to edit and back again