FeedbackLabelForm.vue

<template>
  <v-layout wrap justify-start>
    <v-flex ml-3 xs9>
      <v-text-field id="label-name"
        label="Name"
        v-model="mutableName"
      />
    </v-flex>
    <v-flex ml-3 xs9>
      <v-textarea id="label-description"
        label="Description"
        v-model="mutableDescription"
        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="mutableColour"/>
    </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, Watch } 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: "" }) readonly name!: string
  @Prop({ type: String, default: "" }) readonly description!: string
  @Prop({ type: String, default: "#4D4D4D" }) readonly colour!: string
  @Prop({ type: Number, required: false }) readonly pk!: number
  @Prop({ type: Boolean, default: false }) readonly is_update!: boolean

  mutableColour = this.colour
  mutableName = this.name
  mutableDescription = this.description

  loading = false

  @Watch('pk')
  onPkChange() { this.resetFields() }

  resetFields () {
    this.mutableName = this.name
    this.mutableDescription = this.description
    this.mutableColour = this.colour
  }

  get label () {
    return {
      name: this.mutableName,
      description: this.mutableDescription,
      // @ts-ignore
      colour: this.mutableColour.hex || this.mutableColour  // hex may be undefined when colour comes from the updater
    }
  }

  get feedbackLabels () {
    return FeedbackLabels.availableLabels
  }

  async createLabel () {
    this.loading = true

    const duplicate = this.feedbackLabels.find((val) => {
      return val.name === this.label.name
    })

    if (duplicate) {
      this.$notify({
        title: "Label creation error",
        text: "A label with the same name already exists. " + 
          "You can, however, update the label",
        type: 'error',
        duration: -1
      })
      this.resetFields()
      this.loading = false
      return;
    }

    let res
    try {
      res = await api.createLabel(this.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 = {
      ...this.label,
      pk: this.pk,
    }

    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
  }
}
</script>

<style>

</style>