This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<v-layout row justify-center>
|
||||
<v-dialog v-model="dialogdata.dialog" persistent max-width="600px">
|
||||
<v-dialog v-model="dialogdata.showeditdialog" persistent max-width="600px">
|
||||
<!-- <v-btn slot="activator" color="primary" dark>Open Dialog</v-btn> -->
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
@@ -57,12 +57,8 @@
|
||||
export default {
|
||||
props: {
|
||||
dialogdata: {
|
||||
dialog: false,
|
||||
showeditdialog: false,
|
||||
recordId: 0
|
||||
},
|
||||
dialog: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: () => ({})
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<v-icon>fa-ellipsis-v</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<WidgetEdit :dialogdata="dialogdata" v-on:dialogclose="dialogdata.dialog=false"/>
|
||||
<WidgetEdit :dialogdata="dialogdata" v-on:dialogclose="dialogdata.showeditdialog=false"/>
|
||||
<v-data-table
|
||||
v-model="selected"
|
||||
:headers="headers"
|
||||
@@ -60,27 +60,8 @@ export default {
|
||||
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
|
||||
showeditdialog: false,
|
||||
recordId: 0
|
||||
},
|
||||
totalItems: 0,
|
||||
Items: [],
|
||||
@@ -121,20 +102,11 @@ export default {
|
||||
mounted() {
|
||||
this.getDataFromApi();
|
||||
},
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "New Item" : "Edit Item";
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
toggleAll() {
|
||||
if (this.selected.length) this.selected = [];
|
||||
else this.selected = this.Items.slice();
|
||||
},
|
||||
|
||||
newItem() {
|
||||
this.dialogdata.recordId = -1;
|
||||
this.dialogdata.dialog = true;
|
||||
this.dialogdata.showeditdialog = true;
|
||||
},
|
||||
getDataFromApi() {
|
||||
var listOptions = {
|
||||
@@ -158,7 +130,7 @@ export default {
|
||||
},
|
||||
editItem(item) {
|
||||
this.dialogdata.recordId = item.id;
|
||||
this.dialogdata.dialog = true;
|
||||
this.dialogdata.showeditdialog = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -167,3 +139,57 @@ export default {
|
||||
|
||||
<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"
|
||||
// }
|
||||
// }
|
||||
@@ -1,46 +1,44 @@
|
||||
<template>
|
||||
<v-layout column wrap="" class="my-5" align-center>
|
||||
<v-flex xs12>
|
||||
<v-container grid-list-xl>
|
||||
<v-layout row wrap="" align-top>
|
||||
<WidgetTop/>
|
||||
<WidgetList/>
|
||||
<WarehouseTop/>
|
||||
<POTop/>
|
||||
<PartTop/>
|
||||
<PartAssemblyTop/>
|
||||
<v-flex xs12 md4>
|
||||
<v-card class="elevation-0 transparent">
|
||||
<v-card-text class="text-xs-center">
|
||||
<v-icon x-large color="accent">fa-lightbulb</v-icon>
|
||||
</v-card-text>
|
||||
<v-card-title primary-title class="layout justify-center">
|
||||
<div class="headline text-xs-center">Material Design</div>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<!-- <v-layout align-center justify-center row fill-height>
|
||||
<v-layout column wrap class="my-5" align-center>
|
||||
<v-flex xs12>
|
||||
<v-container grid-list-xl>
|
||||
<v-layout row wrap align-top>
|
||||
<WidgetList/>
|
||||
<WarehouseTop/>
|
||||
<POTop/>
|
||||
<PartTop/>
|
||||
<PartAssemblyTop/>
|
||||
<v-flex xs12 md4>
|
||||
<v-card class="elevation-0 transparent">
|
||||
<v-card-text class="text-xs-center">
|
||||
<v-icon x-large color="accent">fa-lightbulb</v-icon>
|
||||
</v-card-text>
|
||||
<v-card-title primary-title class="layout justify-center">
|
||||
<div class="headline text-xs-center">Material Design</div>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<!-- <v-layout align-center justify-center row fill-height>
|
||||
<WidgetTop/>
|
||||
<PartTop/>
|
||||
<PartAssemblyTop/>
|
||||
<WarehouseTop/>
|
||||
<POTop/>
|
||||
</v-layout>-->
|
||||
</v-layout>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* xeslint-disable */
|
||||
import WidgetTop from "../components/inventorywidgettop";
|
||||
import WidgetList from "../components/widgetlist";
|
||||
import WidgetList from "../components/inventorywidgetlist";
|
||||
import WarehouseTop from "../components/inventorywarehousetop";
|
||||
import POTop from "../components/inventorypotop";
|
||||
import PartTop from "../components/inventoryparttop";
|
||||
@@ -62,7 +60,6 @@ import lt from "../api/locale";
|
||||
//import _ from "../utils/libs/lodash.js";
|
||||
export default {
|
||||
components: {
|
||||
WidgetTop,
|
||||
WidgetList,
|
||||
WarehouseTop,
|
||||
POTop,
|
||||
|
||||
@@ -19,17 +19,8 @@ INITIAL TESTING NOTES:
|
||||
- Add new item
|
||||
- Filter list
|
||||
- Refresh
|
||||
- Ellipsis submenu with mass ops options and other list wide options appear there
|
||||
- maybe a vertical menu button instead of the separate delete and edit to save space.
|
||||
- No, decided go into edit then can do any ops from that dialog, so essentially each item only requires a single edit icon
|
||||
- Kind of weird to scroll to the right to edit and you forget which record you are looking at maybe as the name dissappears
|
||||
- Solved by doing any edit from within the edit dialog so you know what you're looking at before you act on it.
|
||||
- Checkboxes take up too much space to their right eating up valuable real-estate [solution: remove checkboxes entirely]
|
||||
- Selection isn't an everyday thing, wonder if there is a better way, maybe selectively hide the selection boxes?? TTM THOUGH
|
||||
- Decided that the whole list actions will be at the top menu ellipsis thing and so user can filter then take an action that applies to all items in the list
|
||||
- In other words you don't select one by one, you filter first to get what you want and then apply the action
|
||||
- So for example user can tag all the items they want to work with by filtering, then mass tagging until have all tagged then filter by tag and apply mass ops
|
||||
- This elminates the need for the checkboxes for now
|
||||
- Ellipsis submenu with mass ops options and other list wide options appear there
|
||||
|
||||
- Edit / Trash buttons in grid are too small on a phone with fat fingers
|
||||
- Solution: remove delete, make edit bigger and delete from within edit dialog
|
||||
- Edit dialog needs to be inserted from external component, can't be needing to define it in side every list as that's two very different things
|
||||
|
||||
Reference in New Issue
Block a user