From 58a025867d5809abe728f00820023eb9d5140f3d Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Wed, 9 Feb 2022 13:08:54 +0900
Subject: [PATCH] Add label edit page

---
 .../projects/_id/labels/_label_id/edit.vue    | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 frontend/pages/projects/_id/labels/_label_id/edit.vue

diff --git a/frontend/pages/projects/_id/labels/_label_id/edit.vue b/frontend/pages/projects/_id/labels/_label_id/edit.vue
new file mode 100644
index 00000000..b19db410
--- /dev/null
+++ b/frontend/pages/projects/_id/labels/_label_id/edit.vue
@@ -0,0 +1,85 @@
+<template>
+  <form-creation
+    v-slot="slotProps"
+    v-bind.sync="editedItem"
+    :items="items"
+  >
+    <v-btn
+      :disabled="!slotProps.valid"
+      color="primary"
+      class="text-capitalize"
+      @click="save"
+    >
+      Save
+    </v-btn>
+  </form-creation>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { LabelDTO } from '~/services/application/label/labelData'
+import { ProjectDTO } from '~/services/application/project/projectData'
+import FormCreation from '~/components/label/FormCreation.vue';
+
+export default Vue.extend({
+  components: {
+    FormCreation,
+  },
+
+  layout: 'project',
+
+  validate({ params, app }) {
+    if (/^\d+$/.test(params.id)) {
+      return app.$services.project.findById(params.id)
+      .then((res:ProjectDTO) => {
+        return res.canDefineLabel
+      })
+    }
+    return false
+  },
+
+  data() {
+    return {
+      editedItem: {
+        text: '',
+        prefixKey: null,
+        suffixKey: null,
+        backgroundColor: '#2196F3',
+        textColor: '#ffffff'
+      } as LabelDTO,
+      items: [] as LabelDTO[]
+    }
+  },
+
+  computed: {
+    projectId(): string {
+      return this.$route.params.id
+    },
+
+    labelId(): string {
+      return this.$route.params.label_id
+    },
+
+    service(): any {
+      const type = this.$route.query.type
+      if (type === 'category') {
+        return this.$services.categoryType
+      } else {
+        return this.$services.spanType
+      }
+    },
+  },
+
+  async created() {
+    this.items = await this.service.list(this.projectId)
+    this.editedItem = await this.service.findById(this.projectId, this.labelId)
+  },
+
+  methods: {
+    async save() {
+      await this.service.update(this.projectId, this.editedItem)
+      this.$router.push(`/projects/${this.projectId}/labels`)
+    }
+  }
+})
+</script>