Skip to content

Commit c6667f5

Browse files
shabbirbharmalshabbirbharmal
committed
product selection
1 parent 0c37e3c commit c6667f5

File tree

1 file changed

+75
-27
lines changed

1 file changed

+75
-27
lines changed

‎src/views/tickets/Create.vue

Lines changed: 75 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -74,78 +74,103 @@
7474
<h6 class="border-bottom pb-2 mt-3">Select Product</h6>
7575
<b-row>
7676
<b-col cols="6" sm="4" md="3" lg="2">
77-
<div class="text-center">
78-
<i class="fa fa-circle fa-2x text-primary"></i><br>Banner
77+
<div class="text-center" @click="setProduct('Banner')">
78+
<i class="fa fa-circle fa-2x "
79+
:class="{'text-primary': (product === 'Banner'), 'text-secondary': (product !== 'Banner')}"
80+
></i><br>Banner
7981
</div>
8082
</b-col>
8183
<b-col cols="6" sm="4" md="3" lg="2">
82-
<div class="text-center">
83-
<i class="fa fa-circle fa-2x text-secondary"></i><br>Rigid
84+
<div class="text-center" @click="setProduct('Rigid')">
85+
<i class="fa fa-circle fa-2x "
86+
:class="{'text-primary': (product === 'Rigid'), 'text-secondary': (product !== 'Rigid')}"
87+
></i><br>Rigid
8488
</div>
8589
</b-col>
8690
<b-col cols="6" sm="4" md="3" lg="2">
87-
<div class="text-center">
88-
<i class="fa fa-circle fa-2x text-secondary"></i><br>Textile
91+
<div class="text-center" @click="setProduct('Textile')">
92+
<i class="fa fa-circle fa-2x "
93+
:class="{'text-primary': (product === 'Textile'), 'text-secondary': (product !== 'Textile')}"
94+
></i><br>Textile
8995
</div>
9096
</b-col>
9197
<b-col cols="6" sm="4" md="3" lg="2">
92-
<div class="text-center">
93-
<i class="fa fa-circle fa-2x text-secondary"></i><br>Unmounted
98+
<div class="text-center" @click="setProduct('Unmounted')">
99+
<i class="fa fa-circle fa-2x "
100+
:class="{'text-primary': (product === 'Unmounted'), 'text-secondary': (product !== 'Unmounted')}"
101+
></i><br>Unmounted
94102
</div>
95103
</b-col>
96104

97105
</b-row>
98-
106+
<div v-if="product !== ''">
99107
<h6 class="border-bottom pb-2 mt-3">Finishing</h6>
100108
<b-row>
101109
<b-col cols="6" sm="4" md="3" lg="2">
102-
<div class="text-center">
103-
<i class="fa fa-circle fa-2x text-primary"></i><br>Finished
110+
<div class="text-center" @click="setFinishing('Finished')">
111+
<i
112+
class="fa fa-circle fa-2x"
113+
:class="{'text-primary': (finishing === 'Finished'), 'text-secondary': (finishing !== 'Finished')}"
114+
></i><br>Finished
104115
</div>
105116
</b-col>
106117
<b-col cols="6" sm="4" md="3" lg="2">
107-
<div class="text-center">
108-
<i class="fa fa-circle fa-2x text-secondary"></i><br>Framed
118+
<div class="text-center" @click="setFinishing('Framed')">
119+
<i class="fa fa-circle fa-2x"
120+
:class="{'text-primary': (finishing === 'Framed'), 'text-secondary': (finishing !== 'Framed')}"
121+
></i><br>Framed
109122
</div>
110123
</b-col>
111124
<b-col cols="6" sm="4" md="3" lg="2">
112-
<div class="text-center">
113-
<i class="fa fa-circle fa-2x text-secondary"></i><br>Structure
125+
<div class="text-center" @click="setFinishing('Structure')">
126+
<i class="fa fa-circle fa-2x"
127+
:class="{'text-primary': (finishing === 'Structure'), 'text-secondary': (finishing !== 'Structure')}"
128+
></i><br>Structure
114129
</div>
115130
</b-col>
116131

117132
</b-row>
118-
133+
</div>
134+
<div v-if="finishing !== ''">
119135
<h6 class="border-bottom pb-2 mt-3">Sides</h6>
120136
<b-row>
121137
<b-col cols="6" sm="4" md="3" lg="2">
122-
<div class="text-center">
123-
<i class="fa fa-circle fa-2x text-primary"></i><br>Single Sided
138+
<div class="text-center" @click="setSides('Single Sided')">
139+
<i class="fa fa-circle fa-2x "
140+
:class="{'text-primary': (sides === 'Single Sided'), 'text-secondary': (sides !== 'Single Sided')}"></i><br>Single Sided
124141
</div>
125142
</b-col>
126143
<b-col cols="6" sm="4" md="3" lg="2">
127-
<div class="text-center">
128-
<i class="fa fa-circle fa-2x text-secondary"></i><br>Double Sided
144+
<div class="text-center" @click="setSides('Double Sided')">
145+
<i class="fa fa-circle fa-2x "
146+
:class="{'text-primary': (sides === 'Double Sided'), 'text-secondary': (sides !== 'Double Sided')}"
147+
></i><br>Double Sided
129148
</div>
130149
</b-col>
131150

132151
</b-row>
152+
</div>
153+
<div v-if="sides !== ''">
133154

134155
<h6 class="border-bottom pb-2 mt-3">Lite</h6>
135156
<b-row>
136157
<b-col cols="6" sm="4" md="3" lg="2">
137-
<div class="text-center">
138-
<i class="fa fa-circle fa-2x text-primary"></i><br>Frontlit
158+
<div class="text-center" @click="setLight('Frontlit')">
159+
<i class="fa fa-circle fa-2x "
160+
:class="{'text-primary': (light === 'Frontlit'), 'text-secondary': (light !== 'Frontlit')}"
161+
></i><br>Frontlit
139162
</div>
140163
</b-col>
141164
<b-col cols="6" sm="4" md="3" lg="2">
142-
<div class="text-center">
143-
<i class="fa fa-circle fa-2x text-secondary"></i><br>Backlit
165+
<div class="text-center" @click="setLight('Backlit')">
166+
<i class="fa fa-circle fa-2x"
167+
:class="{'text-primary': (light === 'Backlit'), 'text-secondary': (light !== 'Backlit')}"
168+
></i><br>Backlit
144169
</div>
145170
</b-col>
146171

147172
</b-row>
148-
173+
</div>
149174

150175
</b-card>
151176

@@ -181,11 +206,34 @@
181206
data () {
182207
return {
183208
selected: [], // Must be an array reference!
184-
show: true
209+
show: true,
210+
product: '',
211+
finishing: '',
212+
sides: '',
213+
light: ''
185214
}
186215
},
187216
methods: {
188-
click () {
217+
setProduct (value) {
218+
this.product = value
219+
this.finishing = ''
220+
this.sides = ''
221+
this.light = ''
222+
// do nothing
223+
},
224+
setFinishing (value) {
225+
this.finishing = value;
226+
this.sides = ''
227+
this.light = ''
228+
// do nothing
229+
},
230+
setSides (value) {
231+
this.sides = value
232+
this.light = ''
233+
// do nothing
234+
},
235+
setLight (value) {
236+
this.light = value
189237
// do nothing
190238
}
191239
}

0 commit comments

Comments
 (0)