yopa/yopa-web/resources/src/components/EditObjectForm.vue

<script>
import {castId, keyBy, objCopy, isEmpty} from "../utils";
import forEach from "lodash-es/forEach";
import axios from "axios";

export default {
  props: ['object', 'schema', 'objects'],
  name: "EditObjectForm",
  data() {
    let object = this.object;

    const model = this.schema.obj_models.find((m) => m.id === object.model);
    let properties = this.schema.prop_models.filter((m) => m.object === model.id);
    let relations = this.schema.rel_models.filter((m) => m.object === model.id);

    properties.sort((a, b) => a.name.localeCompare(b.name));
    relations.sort((a, b) => a.name.localeCompare(b.name));

    let values = {};
    properties.forEach((p) => {
      let existing = object.values[p.id] || [];

      if (existing.length) {
          values[p.id] = existing;
      } else {
        if (p.optional) {
          values[p.id] = [];
        } else {
          values[p.id] = [
            // this is the format used for values
            {
              id: null,
              // it can also have model: ... here
              value: objCopy(p.default)
            }
          ];
        }
      }
    });

    properties = keyBy(properties, 'id');
    relations = keyBy(relations, 'id');

    let model_names = {};
    this.schema.obj_models.forEach((m) => {
      model_names[m.id] = m.name;
    });

    return {
      model,
      properties,
      relations,
      haveRelations: !isEmpty(relations),
      model_names,
      values,
      name: object.name,
      relationRefs: [],
    }
  },
  methods: {
    /** Get values in the raw format without grouping */
    collectData() {
      if (isEmpty(this.name)) {
        throw new Error("Name is required");
      }

      let values = [];
      forEach(objCopy(this.values), (vv, prop_model_id) => {
        for (let v of vv) {
          v.model_id = castId(prop_model_id);
          values.push(v);
        }
      })

      let relations = [];
      for (let rref of this.relationRefs) {
        for (let r of rref.collectData()) {
          relations.push(r);
        }
      }

      return {
        model_id: this.object.model, // string is fine
        id: this.object.id,
        name: this.name,
        values,
        relations,
      };
    },

    trySave() {
      let data;
      try {
        data = this.collectData();
      } catch (e) {
        alert(e.message);
        return;
      }
      console.log('Try save', data);

      axios({
        method: 'post',
        url: '/object/update',
        data: data
      })
      .then(function (response) {
        location.href = '/object/detail/'+this.object.id;
      })
      .catch(function (error) {
        // TODO show error toast instead
        alert(error.response ?
            error.response.data :
            error)
      });
    },

    setRelationRef(el) {
      if (el) {
        this.relationRefs.push(el)
      }
    },
  },
  beforeUpdate() {
    this.relationRefs = []
  },
  mounted() {
    this.$el.parentNode
        .classList.add('EditForm');
  }
}
</script>

<template>
  <h2>Edit {{ model.name }}</h2>

  <p><input type="button" value="Save" @click="trySave"></p>

  <table>
    <tr>
      <th><label for="field-name">Name</label></th>
      <td>
        <input type="text" id="field-name" v-model="name">
      </td>
    </tr>

    <edit-property v-for="(property, pi) in properties" :model="property" :values="values[property.id]" :key="pi"></edit-property>
  </table>

  <div v-if="haveRelations">
    <h3>Relations</h3>

    <edit-relation
        v-for="relation in relations"
        :ref="setRelationRef"
        :model_id="relation.id"
        :objects="objects"
        :initialInstances="object.relations[relation.id]"
        :schema="schema"
    ></edit-relation>
  </div>
</template>