PyCS/webui/src/components/projects/project-creation-window.vue

<template>
  <div class="project-creation-window">
    <h1 class="title">Create Project</h1>

    <div class="content">
      <text-input placeholder="Name"
                  v-model="name"
                  :error="nameError"
                  @clearError="nameError = false">
        Name
      </text-input>

      <textarea-input placeholder="Description"
                      v-model="description"
                      :error="descriptionError"
                      @clearError="descriptionError = false">
        Description
      </textarea-input>

      <select-input :values="models"
                    v-model="model">
        Model
      </select-input>
    </div>

    <div class="footer">
      <button-input @click="create" type="primary">
        Create Project
      </button-input>

      <button-input @click="$emit('cancel', null)">
        Cancel
      </button-input>
    </div>
  </div>
</template>

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

export default {
  name: "project-creation-window",
  components: {ButtonInput, SelectInput, TextareaInput, TextInput},
  props: ['status', 'socket'],
  data: function() {
    return {
      name: '',
      nameError: false,
      description: '',
      descriptionError: false,
      model: null
    }
  },
  computed: {
    models: function() {
      let result = [];

      for (let o in this.status.models) {
        result.push({
          'name': this.status.models[o].name,
          'value': this.status.models[o].id
        });
      }

      return result;
    }
  },
  created: function() {
    this.model = this.models[0].value;
  },
  methods: {
    create: function() {
      this.nameError = !this.name;
      this.descriptionError = !this.description;

      if (this.nameError || this.descriptionError)
        return;

      this.socket.add(
          'projects',
          {
            status: 'create',
            name: this.name,
            description: this.description,
            model: this.model
          }
      );
      this.$emit('cancel', null);
    }
  }
}
</script>

<style scoped>
.project-creation-window {
  display: flex;
  flex-direction: column;
}

.title {
  margin: 0;
  padding: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  flex-grow: 0;
  display: flex;
}

.content {
  overflow: auto;
  padding: 1rem;
  flex-grow: 1;
}

.content > * {
  margin-bottom: 0.6rem;
}

/deep/ .content textarea {
  height: 4rem;
}

.footer {
  flex-grow: 0;
  padding: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.footer > * {
  margin-left: 0.5rem;
}

.cancel {
  cursor: pointer;
}
</style>