q42-cms-components/tools/crud-store.js

import { ServerStore } from './server-store.js';

export class CRUDStore extends ServerStore {

  static get docs() {
    return `CRUDStore is een ServerStore subclass die een standaard REST API voor collecties implementeert,
      en ook het bijbehorende JSON schema ophaalt. <ul>
        <li><code>path</code> geeft de url van de API aan, het schema komt van <code><i>path</i>/schema</code>
        <li><code>options</code> heeft dezelfde properties als bij ServerStore.
      </ul>
      <b>Reactive data properties</b>
      <ul>
        <li><code>items</code> De lijst met items in de collectie.
          De items bevatten niet alle properties, gebruik daarvoor <code>getItemById</code>.
        <li><code>schema</code> Het JSON schema van de items in de collectie
        <li><code>fields</code> Object met velden voor het <a href="#listing"><code>listing</code></a> component
        <li><code>displayField</code> De propertynaam van de items die kan worden gebruikt om de item te tonen.
      </ul>`
  }

  constructor(path, options) {
    let { initial = {}, loaders = {}, computed = {} } = options || {};
    super({
      initial: {
        items: [],
        schema: { properties: {} },
        ...initial
      },
      loaders: {
        items: () => this.fetch(this.path),
        schema: () => this.fetch(`${this.path}/schema`),
        ...loaders
      },
      computed: {
        fields: () => this.fieldsObjectForProps(Object.keys(this.schema.properties)),
        displayField: () => {
          for (var name in this.fields) {
            return this.fields[name];
          }
          return '';
        },
        ...computed
      }
    });

    this.path = path;
  }

  create(item) {
    // when creating an item, the id is an empty string (comes from schema)
    // id & created will be set by the server
    delete item.id;
    delete item.created;

    return this.postJson(this.path, item).then(this.updaters.items);
  }
  static get createDocs() {
    return `POST een nieuw item en update de lijst met items.`;
  }

  update(item) {
    return this.putJson(`${this.path}/${item.id}`, item).then(this.updaters.items);
  }
  static get updateDocs() {
    return `PUT een bestaand item en update de lijst met items.`;
  }

  upsert(item) {
    return item.id ? this.update(item) : this.create(item);
  }
  static get upsertDocs() {
    return `Als het item nog geen <code>id</code> heeft, doe een <code>create</code>, anders een <code>update</code>.`;
  }

  delete(item) {
    return this.del(`${this.path}/${item.id}`, item).then(this.updaters.items);
  }
  static get deleteDocs() {
    return `DELETE een bestaand item en update de lijst met items.`;
  }

  getItemById(id) {
    return this.fetch(`${this.path}/${id}`);
  }
  static get getItemByIdDocs() {
    return `GET een item, inclusief alle details.`;
  }

  fieldsObjectForProps(propNames) {
    var fields = {};
    var props = this.schema.properties;
    propNames.forEach(name => {
      var prop = props[name];
      if (prop && prop.title) {
        fields[prop.title] = name;
      }
    });
    return fields;
  }

}