Skip to content

Commit a56d8a7

Browse files
jazzlikethatjazzlikethat
committed
add new ticket
1 parent 398d0f3 commit a56d8a7

File tree

4 files changed

+197
-13
lines changed

4 files changed

+197
-13
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# coding-challenge-table
1+
# vue-coding-challenge
22

33
## Project setup
44
```

‎src/components/BarChart.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default {
5656
.range([INNER_HEIGHT, 0])
5757
5858
let yAxis = d3.axisLeft(yAxisScale)
59-
.tickValues( [maxValue / 3, maxValue / 2, maxValue] );
59+
.tickValues( [Math.floor(maxValue / 3), Math.floor(maxValue / 2), maxValue] );
6060
6161
function y(d) {
6262
return HEIGHT - yScale(d.value);

‎src/components/NewTicket.vue‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<template>
2+
<div class="form-new-ticket">
3+
<b-form @submit="onSubmit">
4+
<b-form-group
5+
id="requestorGroup"
6+
label="Requestor:"
7+
label-for="requestor"
8+
description="Employee ID who submitted the ticket"
9+
>
10+
<b-form-input
11+
id="requestor"
12+
type="number"
13+
v-model="form.Requestor"
14+
required
15+
placeholder="Enter Requestor ID (number)" />
16+
</b-form-group>
17+
18+
<b-form-group id="requestor-seniority-group" label="Requestor Seniority:" label-for="requestor-seniority">
19+
<b-form-select id="requestor-seniority" :options="requestorSeniorityArray" required v-model="form.RequestorSeniority" />
20+
</b-form-group>
21+
22+
<b-form-group
23+
id="ITOwnerGroup"
24+
label="IT Owner:"
25+
label-for="ITOwner"
26+
description="Employee ID of IT employee who serviced ticket"
27+
>
28+
<b-form-input
29+
id="ITOwner"
30+
type="number"
31+
v-model="form.ITOwner"
32+
required
33+
placeholder="Enter IT Owner ID (number)" />
34+
</b-form-group>
35+
36+
<b-form-group id="filed-against-group" label="Filed Against:" label-for="filed-against"
37+
description="Functional area the ticket was filed"
38+
>
39+
<b-form-select id="filed-aganinst" :options="FiledAgainstArray" required v-model="form.FiledAgainst" />
40+
</b-form-group>
41+
42+
<b-form-group id="ticket-type-group" label="Ticket Type:" label-for="ticket type" >
43+
<b-form-select id="ticket-type" :options="TicketTypeArray" required v-model="form.TicketType" />
44+
</b-form-group>
45+
46+
<b-form-group id="severity-group" label="Severity:" label-for="severity" description="Submitter assigned severity of ticket">
47+
<b-form-select id="severity" :options="SeverityArray" required v-model="form.Severity" />
48+
</b-form-group>
49+
50+
<b-form-group id="priority-group" label="Priority:" label-for="priority" description="IT assigned priority of ticket">
51+
<b-form-select id="priority" :options="PriorityArray" required v-model="form.Priority"></b-form-select>
52+
</b-form-group>
53+
54+
<b-form-group
55+
id="days-open-group"
56+
label="Days Open:"
57+
label-for="days-open"
58+
>
59+
<b-form-input
60+
id="days-open"
61+
type="number"
62+
v-model="form.daysOpen"
63+
required
64+
placeholder="Enter the days the ticket is open for (number)" />
65+
</b-form-group>
66+
67+
<b-form-group id="satisfaction-group" label="Satisfaction:" label-for="satisfaction">
68+
<b-form-select id="satisfaction" :options="SatisfactionArray" required v-model="form.Satisfaction"></b-form-select>
69+
</b-form-group>
70+
71+
<div class="submit-button">
72+
<b-button type="submit" variant="primary">Submit</b-button>
73+
</div>
74+
75+
</b-form>
76+
</div>
77+
</template>
78+
79+
<script>
80+
export default {
81+
name: "NewTicket",
82+
data: function() {
83+
return {
84+
form: {
85+
"Requestor": null,
86+
"RequestorSeniority": null,
87+
"ITOwner": null,
88+
"FiledAgainst": null,
89+
"TicketType": null,
90+
"Severity": null,
91+
"Priority": null,
92+
"daysOpen": null,
93+
"Satisfaction": null,
94+
"Ticket Creation Date": null
95+
},
96+
requestorSeniorityArray: [
97+
{ text: "Select One", value: null },
98+
{ text: "Junior", value: "1 - Junior" },
99+
{ text: "Regular", value: "2 - Regular" },
100+
{ text: "Senior", value: "3 - Senior" },
101+
{ text: "Management", value: "4 - Management" }
102+
],
103+
FiledAgainstArray: [{ text: "Select One", value: null }, "Access/Login", "Hardware", "Software", "Systems"],
104+
TicketTypeArray: [{ text: "Select One", value: null }, "Issue", "Request"],
105+
SeverityArray: [
106+
{ value: null, text: "Select One"},
107+
{ value: '1 - Minor', text: 'Minor' },
108+
{ value: '2 - Normal', text: 'Normal' },
109+
{ value: '3 - Major', text: 'Major' },
110+
{ value: '4 - Critical', text: 'Critical' }
111+
],
112+
PriorityArray: [
113+
{ value: null, text: "Select One"},
114+
{ value: '0 - Unassigned', text: 'Unassigned' },
115+
{ value: '1 - Low', text: 'Low' },
116+
{ value: '2 - Medium', text: 'Medium' },
117+
{ value: '3 - High', text: 'High' }
118+
],
119+
SatisfactionArray: [
120+
{ value: null, text: "Select One"},
121+
{ value: "0 - Unknown", text: 'Unknown' },
122+
{ value: "1 - Unsatisfied", text: 'Unsatisfied' },
123+
{ value: "2 - Satisfied", text: 'Satisfied' },
124+
{ value: "3 - Highly satisfied", text: 'Highly satisfied' }
125+
]
126+
}
127+
},
128+
methods: {
129+
onSubmit(evt) {
130+
evt.preventDefault();
131+
this.$emit('new-ticket-data', this.form);
132+
this.form = {
133+
"Requestor": null,
134+
"RequestorSeniority": null,
135+
"ITOwner": null,
136+
"FiledAgainst": null,
137+
"TicketType": null,
138+
"Severity": null,
139+
"Priority": null,
140+
"daysOpen": null,
141+
"Satisfaction": null,
142+
"Ticket Creation Date": null
143+
};
144+
}
145+
}
146+
}
147+
</script>
148+
149+
<style lang="scss" scoped>
150+
.form-new-ticket {
151+
text-align: initial;
152+
153+
.submit-button {
154+
text-align: center;
155+
}
156+
}
157+
</style>

‎src/components/TicketsTable.vue‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@
88
<b-modal
99
id="new-ticket-modal"
1010
title="Create new ticket"
11-
no-close-on-backdrop="true"
12-
no-close-on-esc="true"
13-
hide-footer="true"
11+
ref="myModalRef"
12+
no-close-on-backdrop
13+
no-close-on-esc
14+
hide-footer
1415
>
15-
<new-ticket></new-ticket>
16+
<new-ticket v-on:new-ticket-data="saveNewTicket"></new-ticket>
1617
</b-modal>
1718
<pie-chart attr-class="priority-chart" :chart-data="chartsData.priority"></pie-chart>
1819
<bar-chart attr-class="overall-bar-chart" :chart-data="chartsData"></bar-chart>
@@ -24,7 +25,7 @@
2425
:search-options="{
2526
enabled: true,
2627
skipDiacritics: true,
27-
externalQuery: debounceSearchInput
28+
externalQuery: debouncedSearchInput
2829
}"
2930
:pagination-options="{
3031
enabled: true,
@@ -48,10 +49,12 @@ export default {
4849
name: "TicketsTable",
4950
components: {
5051
PieChart,
51-
BarChart
52+
BarChart,
53+
NewTicket
5254
},
5355
data: function() {
5456
return {
57+
ticketsLength: 0,
5558
filteredTickets: [],
5659
columns: [
5760
{
@@ -167,7 +170,7 @@ export default {
167170
seniority: {},
168171
satisfaction: {}
169172
},
170-
debounceSearchInput: "",
173+
debouncedSearchInput: "",
171174
userSearchInput: ""
172175
}
173176
},
@@ -185,13 +188,14 @@ export default {
185188
onColumnFilter(params) {
186189
let filters = params.columnFilters;
187190
let keys = Object.keys(filters);
191+
// If some filter is removed, delete the key from the params
188192
keys.forEach(function(key) {
189193
if (filters[key] === "") {
190194
delete filters[key];
191195
}
192196
});
193197
keys = Object.keys(filters);
194-
if (keys.length === 0) {
198+
if (keys.length === 0) { // meaning no filters applied
195199
this.filteredTickets = tickets;
196200
this.getChartsData();
197201
return;
@@ -250,12 +254,35 @@ export default {
250254
251255
},
252256
setDebounceUserInput: debounce(function() {
253-
console.log('set table input');
254-
this.debounceSearchInput = this.userSearchInput;
255-
}, 500)
257+
this.debouncedSearchInput = this.userSearchInput;
258+
}, 500),
259+
saveNewTicket: function(formData) {
260+
this.$refs.myModalRef.hide();
261+
this.ticketsLength += 1;
262+
formData.ticket = this.ticketsLength;
263+
264+
// get today's date
265+
let today = new Date();
266+
let dd = today.getDate();
267+
let mm = today.getMonth() + 1; //January is 0!
268+
let yyyy = today.getFullYear();
269+
270+
if (dd < 10) {
271+
dd = '0' + dd;
272+
}
273+
if (mm < 10) {
274+
mm = '0' + mm;
275+
}
276+
today = mm + '/' + dd + '/' + yyyy;
277+
278+
formData["Ticket Creation Date"] = today;
279+
formData.CustomCreated = true;
280+
this.rows.unshift(formData);
281+
}
256282
},
257283
mounted: function() {
258284
this.filteredTickets = tickets;
285+
this.ticketsLength = this.filteredTickets.length;
259286
setTimeout(this.getChartsData);
260287
},
261288
watch: {

0 commit comments

Comments
 (0)