Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<template>
<v-layout wrap justify-start>
<v-flex ml-3 xs9>
<v-text-field
label="Name"
v-model="name"
/>
</v-flex>
<v-flex ml-3 xs9>
<v-textarea
label="Description"
v-model="description"
placeholder="The description can be seen when hovering above the label"
auto-grow
/>
</v-flex>
<v-flex ml-2 xs12>
<compact-picker style="width:85%;box-shadow:none;" v-model="colour"/>
</v-flex>
<v-flex ml-1 mb-3 xs4>
<v-btn id="create-label-btn" v-if="!is_update" :loading="loading" color="teal" @click="createLabel">Create</v-btn>
<v-btn id="update-label-btn" v-else color="teal" :loading="loading" @click="updateLabel">Update</v-btn>
</v-flex>
</v-layout>
</template>
<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Prop } from "vue-property-decorator"
import * as api from "@/api";
import { Compact } from "vue-color"
import { FeedbackLabels } from "@/store/modules/feedback-labels";
@Component({
components: {
'compact-picker': Compact,
}
})
export default class FeedbackLabelForm extends Vue {
@Prop({ type: String, default: "" }) name!: string
@Prop({ type: String, default: "" }) description!: string
@Prop({ type: String, default: "#4d4d4d" }) colour!: string
@Prop({ type: Number, required: false }) readonly pk!: number
@Prop({ type: Boolean, default: false }) readonly is_update!: boolean
loading = false
get feedbackLabels () {
return FeedbackLabels.availableLabels
}
async createLabel () {
this.loading = true
const label = {
name: this.name,
description: this.description,
// @ts-ignore
colour: this.colour.hex,
}
const duplicate = this.feedbackLabels.find((val) => {
return val.name === label.name
})
if (duplicate) {
this.$notify({
title: "Label creation error",
text: "A label with the same name already exists. " +
"You can update it if you are a reviewer or ask a reviewer to update it if not.",
type: 'error',
duration: -1
})
this.resetFields()
this.loading = false
return;
}
let res
try {
res = await api.createLabel(label)
} catch (ex) {
// user will be notified by the interceptor
this.resetFields()
this.loading = false
return;
}
FeedbackLabels.ADD_LABEL(res)
this.resetFields()
this.loading = false
}
async updateLabel () {
this.loading = true
const label = {
pk: this.pk,
name: this.name,
description: this.description,
// @ts-ignore
colour: this.colour.hex,
}
let res
try {
res = await api.updateLabel(label)
} catch (ex) {
// user will be notified by the interceptor
this.loading = false
return;
}
FeedbackLabels.UPDATE_LABEL(label)
this.$emit("label-updated", label.pk)
this.loading = false
}
resetFields () {
this.name = ""
this.description = ""
this.colour = "#4d4d4d"
}
}
</script>
<style>
</style>