Skip to content

Commit a172030

Browse files
MDobariyaMDobariya
committed
order entry fomr - WIP
1 parent c6667f5 commit a172030

File tree

5 files changed

+232
-7
lines changed

5 files changed

+232
-7
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"css-vars-ponyfill": "^1.9.0",
2626
"flag-icon-css": "^3.0.0",
2727
"font-awesome": "^4.7.0",
28+
"nestable2": "^1.6.0",
2829
"perfect-scrollbar": "^1.4.0",
2930
"simple-line-icons": "^2.4.1",
3031
"vue": "^2.5.17",

‎src/_nav.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@ export default {
4646
},
4747
{
4848
name: 'Products',
49-
url: '/notifications',
49+
url: '/products',
5050
icon: 'icon-bell',
5151
children: [
5252
{
5353
name: 'Items',
54-
url: '#',
54+
url: '/products/create',
5555
icon: 'icon-puzzle'
5656
},
5757
{

‎src/router/index.js

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ const InvoiceList = () => import('@/views/base/InvoiceList')
88
const CustomerList = () => import('@/views/base/CustomerList')
99
const Backlog = () => import('@/views/reports/Backlog')
1010
const Calendar = () => import('@/views/reports/Calendar')
11+
const ProductCreate = () => import('@/views/products/Create')
12+
1113

1214

1315
// Containers
@@ -178,11 +180,36 @@ export default new Router({
178180
},
179181
{
180182
path: 'create',
181-
name: 'create',
183+
name: 'Create',
182184
component: TicketCreate
183185
}
184186
]
185187
},
188+
{
189+
path: 'products',
190+
redirect: '/products/list',
191+
name: 'Products',
192+
component: {
193+
render (c) { return c('router-view') }
194+
},
195+
children: [
196+
{
197+
path: 'list',
198+
name: 'Tickets',
199+
component: TicketList
200+
},
201+
{
202+
path: 'view',
203+
name: 'View',
204+
component: TicketView
205+
},
206+
{
207+
path: 'create',
208+
name: 'Create',
209+
component: ProductCreate
210+
}
211+
]
212+
},
186213
{
187214
path: 'base',
188215
redirect: '/base/cards',

‎src/views/products/Create.vue

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<template>
2+
<b-card>
3+
<b-row>
4+
<b-col>
5+
<div id="items-hierarchy">
6+
<ol class="dd-list">
7+
<li class="dd-item" data-id="1">
8+
<div class="dd-handle"><h5>Finishing</h5></div>
9+
</li>
10+
<li class="dd-item" data-id="4">
11+
<div class="dd-handle">Finished</div>
12+
<ol class="dd-list">
13+
<li class="dd-item" data-id="1">
14+
<div class="dd-handle"><h5>Side Option</h5></div>
15+
</li>
16+
<li class="dd-item" data-id="4">
17+
<div class="dd-handle">Single Sided</div>
18+
<ol class="dd-list">
19+
<li class="dd-item" data-id="1">
20+
<div class="dd-handle"><h5>Lit Option</h5></div>
21+
</li>
22+
<li class="dd-item" data-id="4">
23+
<div class="dd-handle">Frontlit</div>
24+
</li>
25+
<li class="dd-item" data-id="5" data-foo="bar">
26+
<div class="dd-handle">Backlit</div>
27+
</li>
28+
</ol>
29+
</li>
30+
<li class="dd-item" data-id="5" data-foo="bar">
31+
<div class="dd-handle">Double Sided</div>
32+
<ol class="dd-list">
33+
<li class="dd-item" data-id="1">
34+
<div class="dd-handle"><h5>Lit Option</h5></div>
35+
</li>
36+
<li class="dd-item" data-id="4">
37+
<div class="dd-handle">Frontlit</div>
38+
</li>
39+
</ol>
40+
</li>
41+
42+
43+
</ol>
44+
</li>
45+
<li class="dd-item" data-id="5" data-foo="bar">
46+
<div class="dd-handle">Framed</div>
47+
</li>
48+
<li class="dd-item" data-id="5" data-foo="bar">
49+
<div class="dd-handle">Structure</div>
50+
</li>
51+
52+
</ol>
53+
</div>
54+
</b-col>
55+
<b-col>
56+
<b-card>
57+
<div slot="header">
58+
<strong>Finishing</strong> <small> Update</small>
59+
</div>
60+
<b-row>
61+
<b-col sm="12">
62+
<b-form-group>
63+
<label for="name">Title</label>
64+
<b-form-input type="text" id="name" placeholder="Finishing"></b-form-input>
65+
</b-form-group>
66+
</b-col>
67+
</b-row>
68+
<b-row>
69+
<b-col sm="6">
70+
<b-form-group>
71+
<label for="ccnumber">Select Item Mapping</label>
72+
<b-form-input type="text" id="mapping" placeholder="Item Auto Complete"></b-form-input>
73+
</b-form-group>
74+
</b-col>
75+
76+
<b-col sm="6">
77+
<b-form-group>
78+
<label for="ccnumber">Enter Inventory Utilization Formula</label>
79+
<b-form-input type="text" id="formula" placeholder="$qty*$width*$height"></b-form-input>
80+
</b-form-group>
81+
</b-col>
82+
</b-row>
83+
<b-row>
84+
<b-col sm="6">
85+
<b-form-group>
86+
<label for="ccnumber">Select Item Mapping</label>
87+
<b-form-input type="text" id="mapping" placeholder="Item Auto Complete"></b-form-input>
88+
</b-form-group>
89+
</b-col>
90+
91+
<b-col sm="6">
92+
<b-form-group>
93+
<label for="ccnumber">Enter Inventory Utilization Formula</label>
94+
<b-form-input type="text" id="formula" placeholder="$qty*$width*$height"></b-form-input>
95+
</b-form-group>
96+
</b-col>
97+
</b-row>
98+
<b-button variant="outline-primary">+</b-button>
99+
100+
</b-card>
101+
</b-col>
102+
</b-row>
103+
</b-card>
104+
</template>
105+
106+
<script>
107+
import 'nestable2/dist/jquery.nestable.min.css'
108+
window.jQuery = require('jquery')
109+
require('nestable2')
110+
111+
112+
export default {
113+
name: 'products',
114+
components: {
115+
},
116+
data () {
117+
return {
118+
119+
}
120+
},
121+
methods: {
122+
123+
},
124+
125+
mounted: function () {
126+
jQuery('#items-hierarchy').nestable({
127+
maxDepth: 10000
128+
});
129+
130+
}
131+
}
132+
</script>

‎src/views/tickets/Create.vue

Lines changed: 69 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,16 @@
6666
</b-col>
6767
<b-col sm="6">
6868
<b-form-group>
69-
<h6>Quantity</h6>
70-
<b-form-input type="text" id="po" placeholder="PO"></b-form-input>
69+
<b-row>
70+
<b-col sm="4">
71+
<h6>Quantity</h6>
72+
<b-form-input type="text" id="po" placeholder="qty"></b-form-input> </b-col>
73+
<b-col sm="4">
74+
<h6>Cost</h6>
75+
<b-form-input type="text" placeholder="cost"></b-form-input>
76+
</b-col>
77+
</b-row>
78+
7179
</b-form-group>
7280
</b-col>
7381
</b-row>
@@ -181,19 +189,69 @@
181189
</tab-content>
182190
<tab-content title="Other Information"
183191
icon="fa fa-info">
184-
My second tab content
192+
<b-row>
193+
<b-col sm="6">
194+
<b-card header="Shipping Information">
195+
<textarea class="form-control" rows="3"></textarea>
196+
</b-card>
197+
</b-col>
198+
199+
<b-col sm="6">
200+
<b-card header="Installation">
201+
<textarea class="form-control" rows="3"></textarea>
202+
</b-card>
203+
</b-col>
204+
</b-row>
185205
</tab-content>
186206
<tab-content title="Confirmation"
187207
icon="fa fa-check">
188-
Yuhuuu! This seems pretty damn simple
208+
209+
210+
<div class="dd">
211+
<ol class="dd-list">
212+
<li class="dd-item" data-id="1">
213+
<div class="dd-handle">Item 1</div>
214+
</li>
215+
<li class="dd-item" data-id="2">
216+
<div class="dd-handle">Item 2</div>
217+
</li>
218+
<li class="dd-item" data-id="3">
219+
<div class="dd-handle">Item 3</div>
220+
<ol class="dd-list">
221+
<li class="dd-item" data-id="4">
222+
<div class="dd-handle">Item 4</div>
223+
</li>
224+
<li class="dd-item" data-id="5" data-foo="bar">
225+
<div class="dd-handle">Item 5</div>
226+
</li>
227+
<li class="dd-item" data-id="5" data-foo="bar">
228+
<div class="dd-handle">Item 5</div>
229+
</li>
230+
</ol>
231+
</li>
232+
</ol>
233+
</div>
234+
235+
189236
</tab-content>
237+
238+
239+
190240
</form-wizard>
191241
</b-card>
242+
243+
244+
245+
192246
</template>
193247

194248
<script>
195249
import {FormWizard, TabContent} from 'vue-form-wizard'
196250
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
251+
import 'nestable2/dist/jquery.nestable.min.css'
252+
253+
window.jQuery = require('jquery')
254+
require('nestable2')
197255
//component code
198256
199257
@@ -236,6 +294,13 @@
236294
this.light = value
237295
// do nothing
238296
}
297+
},
298+
299+
mounted: function () {
300+
jQuery('.dd').nestable({
301+
maxDepth: 10000
302+
});
303+
239304
}
240305
}
241306
</script>

0 commit comments

Comments
 (0)