Merge branch '61-rename-labels' into 'master'

Resolve "rename labels"

Closes #61

See merge request troebs/pycs!56

webui/src/assets/icons/pencil.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path fill-rule="evenodd"
+          d="M17.263 2.177a1.75 1.75 0 012.474 0l2.586 2.586a1.75 1.75 0 010 2.474L19.53 10.03l-.012.013L8.69 20.378a1.75 1.75 0 01-.699.409l-5.523 1.68a.75.75 0 01-.935-.935l1.673-5.5a1.75 1.75 0 01.466-.756L14.476 4.963l2.787-2.786zm-2.275 4.371l-10.28 9.813a.25.25 0 00-.067.108l-1.264 4.154 4.177-1.271a.25.25 0 00.1-.059l10.273-9.806-2.94-2.939zM19 8.44l2.263-2.262a.25.25 0 000-.354l-2.586-2.586a.25.25 0 00-.354 0L16.061 5.5 19 8.44z"></path>
+</svg>

webui/src/components/base/button-input.vue

@@ -1,5 +1,6 @@
 <template>
-  <button @click="$emit('click', $event)"
+  <button class="button-input"
+          @click="$emit('click', $event)"
           :class="{
             error: type === 'error',
             primary: type === 'primary',

webui/src/components/base/editable-headline.vue

@@ -0,0 +1,74 @@
+<template>
+  <h2>
+    <img alt="delete" class="delete"
+         src="@/assets/icons/x-circle.svg"
+         @click="$emit('remove', $event)">
+
+    <template v-if="!edit">
+      {{ value }}
+
+      <img alt="edit" class="edit"
+           src="@/assets/icons/pencil.svg"
+           @click="edit = true">
+    </template>
+    <template v-else>
+      <text-input placeholder="name" v-model="input"
+                  @change="change" @enter="change"/>
+
+      <button-row>
+        <button-input @click="change" type="primary">confirm</button-input>
+        <button-input @click="edit = false">cancel</button-input>
+      </button-row>
+    </template>
+  </h2>
+</template>
+
+<script>
+import TextInput from "@/components/base/text-input";
+import ButtonInput from "@/components/base/button-input";
+import ButtonRow from "@/components/base/button-row";
+
+export default {
+  name: "editable-headline",
+  components: {ButtonRow, ButtonInput, TextInput},
+  props: ['value'],
+  data: function () {
+    return {
+      input: this.value,
+      edit: false
+    }
+  },
+  methods: {
+    change: function () {
+      this.$emit('change', this.input);
+      this.edit = false;
+    }
+  }
+}
+</script>
+
+<style scoped>
+h2 {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+img {
+  width: 1.5rem;
+}
+
+.delete {
+  margin-right: 1.5rem;
+}
+
+.edit,
+.button-row {
+  margin-left: 0.75rem;
+}
+
+.text-input {
+  flex-grow: 1;
+  margin-top: -0.5rem;
+}
+</style>

webui/src/components/base/text-input.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input">
+  <div class="text-input">
     <label>
       <span class="label"><slot></slot></span>
       <input type="text"
@@ -30,11 +30,10 @@ export default {
       this.$emit('change', event.target.value);
     },
     keypress: function (event) {
-      if (event.keyCode !== 13 && event.keyCode !== 10)
-        return;
+      if (event.keyCode === 13 && event.keyCode === 10)
+        this.$emit('enter', event.target.value)
 
       this.clear();
-      this.$emit('enter', event.target.value)
     }
   }
 }

webui/src/components/projects/project-labels-window.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="project-labels-window">
     <div class="label" v-for="label in labels" :key="label.id">
-      <h2>
-        <img alt="delete" src="@/assets/icons/x-circle.svg" @click="removeLabel(label.id)">
-        {{ label.name }}
-      </h2>
+      <editable-headline :value="label.name"
+                         @change="editLabel(label.id, $event)"
+                         @remove="removeLabel(label.id)">{{ label.name }}
+      </editable-headline>
 
       <media-selector v-if="labeledImages[label.id].length > 0"
                       :project-id="currentProject.id"
@@ -29,10 +29,11 @@
 <script>
 import TextInput from "@/components/base/text-input";
 import MediaSelector from "@/components/media/media-selector";
+import EditableHeadline from "@/components/base/editable-headline";
 
 export default {
   name: "project-labels-window",
-  components: {MediaSelector, TextInput},
+  components: {EditableHeadline, MediaSelector, TextInput},
   props: ['currentProject', 'socket'],
   data: function () {
     return {
@@ -72,6 +73,9 @@ export default {
       this.socket.post('/projects/' + this.currentProject.id + '/labels', {name: value});
       this.createLabelValue = '';
     },
+    editLabel: function (id, value) {
+      this.socket.post('/projects/' + this.currentProject.id + '/labels/' + id, {name: value});
+    },
     removeLabel: function (id) {
       this.socket.post('/projects/' + this.currentProject.id + '/labels/' + id, {delete: true});
     }
@@ -88,17 +92,6 @@ export default {
   margin-bottom: 1rem;
 }
 
-h2 {
-  display: flex;
-  align-items: center;
-  margin: 0;
-}
-
-img {
-  width: 1.5rem;
-  margin-right: 0.75rem;
-}
-
 /deep/ .element {
   border: none;
 }