PyCS/webui/src/components/projects/settings/general-settings.vue

<template>
  <div class="general-settings">
    <text-input placeholder="Project ID"
                :value="projectId"
                readonly="readonly">
      Project ID
    </text-input>

    <text-input placeholder="Project Root"
                :value="$root.project.root_folder"
                readonly="readonly">
      Project Root
    </text-input>

    <text-input placeholder="Data Root"
                :value="$root.project.data_folder"
                readonly="readonly">
      Data Root
    </text-input>

    <text-input placeholder="Name"
                :value="name"
                @change="sendName"
                :error="nameError"
                @clearError="nameError = false">
      Name
    </text-input>

    <textarea-input placeholder="Description"
                    :value="description"
                    @change="sendDescription"
                    :error="descriptionError"
                    @clearError="descriptionError = false">
      Description
    </textarea-input>

    <div class="text">Delete Project</div>
    <confirmed-button-input @click="deleteProject">
      <template v-slot:first>
        <button-input>
          Delete Project
        </button-input>
      </template>
      <template v-slot:second>
        <button-input type="error">
          Do you really want to delete this project? <br>
          This cannot be undone.
        </button-input>
      </template>
    </confirmed-button-input>
  </div>
</template>

<script>
import TextInput from "@/components/base/text-input";
import TextareaInput from "@/components/base/textarea-input";
import ConfirmedButtonInput from "@/components/base/confirmed-button-input";
import ButtonInput from "@/components/base/button-input";

export default {
  name: "general-settings",
  components: {ButtonInput, ConfirmedButtonInput, TextareaInput, TextInput},
  created: function () {
    this.name = this.$root.project.name;
    this.description = this.$root.project.description;

    console.log(this.$root.project);
  },
  data: function () {
    return {
      name: '',
      nameError: false,
      description: '',
      descriptionError: false,
    }
  },
  methods: {
    sendName: function (value) {
      this.name = value;

      // check input
      if (!value) {
        this.nameError = true;
        return;
      }

      // TODO then / error
      this.$root.socket.post(`/projects/${this.projectId}/name`, {name: value});
    },
    sendDescription: function (value) {
      this.description = value;

      // check input
      console.log(value, !value);
      if (!value) {
        this.descriptionError = true;
        return;
      }

      // TODO then / error
      this.$root.socket.post(`/projects/${this.projectId}/description`, {description: value});
    },
    deleteProject: function () {
      // TODO then / error
      this.$root.socket.post(`/projects/${this.projectId}/remove`, {remove: true})
    }
  },
  computed: {
    projectId: function () {
      return this.$root.project.identifier;
    }
  }
}
</script>

<style scoped>
.general-settings > * {
  margin-bottom: 0.4rem;
}

.general-settings > :last-child {
  margin-bottom: 0;
}

.general-settings .text {
  font-size: 80%;
  margin-bottom: 0.1rem;
}
</style>