PyCS/webui/src/components/other/LabelTreeView.vue

<template>
  <div class="label-tree-view"
       ref="main"
       :class="{target: target}"
       draggable="true" @dragstart="dragstart" @dragend="dragend"
       @dragover="dragover" @dragleave="dragleave" @drop="drop">
    <editable-headline :value="label.name"
                       @change="editLabel(label.identifier, $event)"
                       @remove="removeLabel(label.identifier)">
      <div class="hierarchy"
           :class="{margined: label.hierarchy_level}"
           @click="collapse = !collapse">
        <img v-if="collapse"
             alt="expand"
             src="@/assets/icons/triangle-down.svg"
             :style="{opacity: label.children.length > 0 ? 1 : 0.1}">
        <img v-else
             alt="collapse"
             src="@/assets/icons/triangle-up.svg"
             :style="{opacity: label.children.length > 0 ? 1 : 0.1}">

        <div class="name" v-if="label.hierarchy_level">
          {{ label.hierarchy_level }}
        </div>
      </div>
    </editable-headline>

    <template v-if="!collapse">
      <label-tree-view v-for="child of sortedChildren" :key="child.identifier"
                       :label="child"
                       :indent="indent"
                       :targetable="droppable"
                       :style="margin"/>
    </template>
  </div>
</template>

<script>
import EditableHeadline from "@/components/base/editable-headline";

export default {
  name: "LabelTreeView",
  components: {EditableHeadline},
  props: ['label', 'indent', 'targetable'],
  data: function () {
    return {
      untouched: true,
      target: false,
      collapse: false
    }
  },
  computed: {
    droppable: function () {
      return this.targetable && this.untouched;
    },
    margin: function () {
      return {
        marginLeft: this.indent
      };
    },
    sortedChildren: function () {
      return [...this.label.children].sort((a, b) => a.name < b.name ? -1 : +1);
    }
  },
  methods: {
    editLabel: function (id, value) {
      // TODO then / error
      this.$root.socket.post(`/projects/${this.$root.project.identifier}/labels/${id}/name`, {name: value});
    },
    removeLabel: function (id) {
      // TODO then / error
      this.$root.socket.post(`/projects/${this.$root.project.identifier}/labels/${id}/remove`, {remove: true});
    },
    dragstart: function (e) {
      this.untouched = false;
      e.dataTransfer.setData('text/identifier', this.label.identifier)
      e.stopPropagation();
    },
    dragend: function () {
      this.untouched = true;
    },
    dragover: function (e) {
      e.stopPropagation();

      if (this.droppable) {
        e.preventDefault();
        this.target = true;
      }
    },
    dragleave: function () {
      this.target = false;
    },
    drop: function (e) {
      e.preventDefault();
      e.stopPropagation();
      this.dragleave();

      const element = e.dataTransfer.getData('text/identifier');
      const parent = this.label.identifier;
      this.$root.socket.post(`/projects/${this.$root.project.identifier}/labels/${element}/parent`, {parent: parent});
    }
  }
}
</script>

<style scoped>
.editable-headline {
  margin-bottom: 0.5rem;
}

.target > .editable-headline {
  text-decoration: underline;
}

.hierarchy {
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: center;
}

.hierarchy.margined {
  margin-right: 0.3rem;
}

.hierarchy .name {
  margin-top: -0.5rem;
  opacity: 0.8;
  font-size: 50%;
}
</style>