crud-view.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../vaadin-dialog/vaadin-dialog.html">
<link rel="import" href="elements/crud-dialog.html">
<link rel="import" href="elements/crud-buttons-bar.html">
<link rel="import" href="elements/crud-confirm-dialog.html">

<dom-module id="crud-view">
  <template>
    <style>
      :host {
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
      }
      .header-wrapper {
        display: flex;
      }
      .grid-wrapper {
        flex: 1;
        display: flex;
      }
      .grid-wrapper ::slotted([slot=grid]) {
        width: 100%;
        height: 100%;
      }
    </style>

    <div class="header-wrapper">
      <slot name="header"></grid>
    </div>

    <div class="grid-wrapper">
      <slot name="grid"></slot>
    </div>

    <template id="buttons">
      <style>
        .buttons {
          display: flex;
          padding: 5px 0;
        }
        .fit {
          flex: 1;
          overflow: auto;
        }
      </style>


      <div class="buttons">
        <crud-buttons-bar
          on-action1="save" action1-text="Save" action1-disabled="[[!dirty]]"
          on-action2="cancel" action2-text="Cancel"
          on-action3="delete" action3-text="Delete" action3-disabled="[[isNew]]"
        ></crud-buttons-bar>
      </div>
    </template>

    <crud-dialog id="dialog" no-close-on-outside-click=[[_noClose]] no-close-on-esc=[[_noClose]] theme="right" on-opened-changed="__onOpened"></crud-dialog>
    <crud-confirm-dialog id="confirm"></crud-confirm-dialog>

  </template>

  <script>
    /**
     * Helper element for CRUD views.
     *
     * You have to provide content for two slots:
     *  - The `header` slot is normally for the filtering input and the new button.
     *  - The `grid` slot wraps a list element (normally a vaadin-grid) which needs
     *    to extend the `CrudListMixin`.
     *
     * , and for one template:
     *  - The `template` must be classed as `editor` and wraps the element for entity
     *    modifications.
     *    The editor is shown in a modal dialog that is opened when the `item` property
     *    is set.
     *
     * __Note__: that the template content is teleported to the body because
     * so do the the `vaadin-dialog`, hence be aware when styling the content.
     *
     * ### Demo code
     * ```
     * <crud-view editing="[[editing]]" on-close="close">
     *   <input value="{{search::input}}" slot="header"></input>
     *   <button slot="header" on-click="new">New Item</button>
     *   <vaadin-grid slot="grid" items="[[filter(items, search, items.*)]]" active-item="{{activeItem}}">
     *     ...
     *   </vaadin-grid>
     *
     *   <template cllass="editor">
     *     <my-editor id="editor" slot="editor" item="[[item]]"
     *       on-save="save" on-delete="delete" on-close="close"><my-editor>
     *   </template>
     * </crud-view>
     * ```
     *
     * @demo [A](demo/advanced-demo.html)
     * @demo demo/basic-demo.html
     */
    class CrudView extends (class extends Polymer.Element {}) {
      static get properties() {
        return {
          /**
           * The item being edited.
           * When it is set, the editor dialog is opened.
           */
          item: {
            type: Object,
            observer: '__itemChanged'
          }
        };
      }

      static get is() {
        return 'crud-view';
      }

      __createInstance(ctx, tpl) {
        var instance;
        const Templatizer = Polymer.Templatize.templatize(tpl, ctx, {
          instanceProps: {
            detail: true,
            target: true
          },
          forwardHostProp: function(prop, value) {
            if (instance) {
              instance.forwardHostProp(prop, value);
            }
          }
        });
        instance = new Templatizer({});
        return instance;
      }

      __updateVars() {
        this.dirty = this._list._editor.dirty;
        this._noClose = this.dirty || this.$.confirm.opened;
      }

      /** @private */
      save(e) {
        this._list._editor.save(e);
      }

      /** @private */
      cancel(e) {
        this._list._editor.cancel(e);
      }

      /** @private */
      delete(e) {
        this._list._editor.delete(e);
      }

      __onOpened() {
        if (this._list && !this.$.dialog.opened) {
          this._closing = true;
          this._list.close();
          this._closing = undefined;
        }
      }

      __itemChanged(item) {
        if (this._closing) {
          return;
        }

        if (!this.__editorTpl) {
          this.__editorTpl = this.querySelector('.editor');
          if (this.__editorTpl) {
            var editorRoot = this.__createInstance(this, this.__editorTpl).root;
            this.$.dialog.appendChild(editorRoot);
            this._list = this.getRootNode().host;
            this._list._editor = Array.from(this.$.dialog.querySelectorAll('*')).filter(e => e._hasCrudItemtMixin)[0];
            this.$.dialog.appendChild(this.__createInstance(this._list._editor, this.$.buttons).root);

            this._list._editor.addEventListener('dirty-changed', () => this.__updateVars());
            this._list._editor._dialog = this.$.confirm;
            this.$.confirm.addEventListener('opened-changed', () => this.__updateVars());
          }
        }

        if (item) {
          this.$.dialog.opened = true;
        } else {
          setTimeout(() => this.$.dialog.opened = false, 50);
        }
      }
    }

    window.customElements.define(CrudView.is, CrudView);
  </script>
</dom-module>