m2-grid.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../h2-elements/h2-button-group.html">
<link rel="import" href="../h2-elements/behaviors/base-behavior.html">
<link rel="import" href="./behavior/m2-base-behavior.html">
<link rel="import" href="./m2-field.html">
<link rel="import" href="./m2-action.html">
<!--
## A component for table.

```html
<m2-grid metadata="{{ metadata }}" value="{{ value }}"></m2-grid>
```
```
metadata = {
  title: "I am the title!",
  grids: [
    {
      name: "col1",
      label: "Col1"
    },
    {
      name: "col2",
      label: "Col2"
    },
    {
      name: "col3",
      label: "Col3"
    },
    {
      metaType: {
        type: "ACTION"
        },
      name: "actions",
      label: "Actions",
    }
  ],
  actions: {
    "action-1": {
      actionId: "action-1",
      actionName: "Action1",
      operType: 1,
      formMeta: {
        formUrl: "/url-to-send-form",
        confirm: "Sure to submit?",
        fields: [
          {
            name: "name",
            label:"Name"
          },
          {
            name: "phone",
            label:"Phone"
          },
        ],
      }
    },
    "action-2": {
      actionId: "action-2",
      actionName: "Action2",
      operType: 2,
      formMeta: {
        title: "Dialog Title",
        formUrl: "/url-to-send-form",
        confirm: "Sure to submit?",
        fields: [
          {
            name: "name",
            label:"Name",
            visible:true,
            editable:true
          },
          {
            name: "phone",
            label:"Phone",
            visible:true,
            editable:true
          },
        ],
      }
    }
  }
}

value = [
  {
    col1: "foo",
    col2: "bar",
    col3: "foobar",
    actions:["action-1","action-2"]
  },
  {
    col1: "foo",
    col2: "bar",
    col3: "foobar",
    actions:["action-1"]
  },
  {
    col1: "foo",
    col2: "bar",
    col3: "foobar",
    actions:["action-2"]
  },
  {
    col1: "foo",
    col2: "bar",
    col3: "foobar",
    actions:["action-1","action-2"]
  }
]
```
### metadata定义 (GridMeta)
|字段名|类型|Required|描述|
|:--|:--|:--|:--|
|grids|``array.<FieldMeta>``|是|表格单元格元数据|
|actions|``map.<string, ActionMeta>``|是|操作集|
|title|string|否|表格标题|
|editable|boolean|否|是否可编辑|

### [See FieldMeta](https://www.webcomponents.org/element/isuwang/metaui/elements/m2-field)
### [See ActionMeta](https://www.webcomponents.org/element/isuwang/metaui/elements/m2-action)
-->
<dom-module id="m2-grid">
  <template>
    <style>
      :host {
        font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
        font-size: 12px;
        display: block;
        overflow-x: auto;
      }

      :host thead {
        background: #595959;
        color: #fff;
      }

      :host .result-grid {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        border:1px solid #dddddd;
      }

      /*:host thead tr > th:first-of-type {*/
        /*border-top-left-radius: 4px;*/
      /*}*/

      /*:host thead tr > th:last-of-type {*/
        /*border-top-right-radius: 4px;*/
      /*}*/

      :host th, td {
        text-align: left;
        padding: 5px 10px;
        line-height: 20px;
      }

      :host th {
        padding: 12px 10px;
      }

      :host .grid-column {
        min-width: 70px;
      }

      :host .grid-row:hover {
        background: #CAF1FF;
      }

      :host tr:nth-of-type(even) {
        background-color: #dddddd;
      }

      :host .grid-actions{
        display: flex;
      }

      :host .action, :host .action-group {
        margin: 10px 5px;
        width: 100px;
        height: 30px;
      }

      :host .table-caption {
        font-size: 1.6em;
        padding-bottom: 10px;
      }

    </style>
    <slot name="filter"></slot>

    <table class="result-grid">
      <caption class="table-caption">[[ metadata.title ]]</caption>
      <thead class="grid-head">
      <tr>
        <template is="dom-repeat" items="[[ metadata.grids ]]">
          <th>[[item.label]]</th>
        </template>
      </tr>
      </thead>
      <tbody class="grid-body">
      <template is="dom-repeat" items="[[ value ]]" as="model">
        <tr class="grid-row">
          <template is="dom-repeat" items="[[ metadata.grids ]]" as="fieldMeta">
            <td class="grid-column">
              <template is="dom-if" if="[[ !isEqual(fieldMeta.metaType.type, 'ACTION') ]]">
                <m2-field class="field"
                          metadata="[[ fieldMeta ]]"
                          editable="[[ orElse(editable, metadata.editable, fieldMeta.editable) ]]"
                          context="[[ model ]]"
                          value="[[ getValueOrElse(model,fieldMeta.srcKey, fieldMeta.name) ]]">
                </m2-field>
              </template>

              <template is="dom-if" if="[[ isEqual(fieldMeta.metaType.type,'ACTION') ]]">
                <div class="grid-actions">
                  <template is="dom-repeat" items="[[ _noGroupActions(model.actions) ]]"
                            as="actionMeta">
                    <m2-action class="action"
                               metadata="[[ actionMeta ]]"
                               context="[[ model ]]">
                    </m2-action>
                  </template>
                  <template is="dom-repeat" items="[[ _groupedActions(model.actions) ]]">
                    <h2-button-group
                            class="action-group"
                            label="[[ item.group ]]">
                      <template is="dom-repeat" items="[[ item.actions ]]" as="actionMeta">
                        <m2-action metadata="[[ actionMeta ]]"
                                   context="[[ model ]]">
                        </m2-action>
                      </template>
                    </h2-button-group>
                  </template>
                </div>
              </template>

            </td>
          </template>
        </tr>
      </template>
      </tbody>
    </table>
  </template>
  <script>
    /**
     * @customElement
     * @polymer
     * @demo demo/m2-grid/index.html
     */
    class M2Grid extends Polymer.mixinBehaviors([M2BaseBehavior, BaseBehavior], Polymer.Element) {
      constructor() {
        super();
      }

      static get is() {
        return "m2-grid";
      }

      static get properties() {
        return {
          editable: {
            type: Boolean,
            value: false
          },
          /** Data for the grid.*/
          value: {
            type: Array
          },
          metadata: {
            type: Object,
            observer: '__metadataChange'
          }
        }
      }

      __metadataChange(metadata) {
        if (metadata) {
          return this.updateStyle(metadata.style);
        }
      }

      _groupedActions(actions) {
        if (!actions) return [];
        const groupedActions = [];
        const groupMap = {};
        actions.map(actionId => {
          const meta = this.getValueByKey(this.metadata.actions, actionId);
          const grp = meta.group;
          if (grp) {
            groupMap[grp] = groupMap[grp] || [];
            groupMap[grp].push(meta);
          }
        });
        for (let grp in groupMap) {
          groupedActions.push({group: grp, actions: groupMap[grp]});
        }
        return groupedActions;
      }

      _noGroupActions(actions) {
        if (!actions) return [];
        return actions.filter(actionId => {
          const meta = this.getValueByKey(this.metadata.actions, actionId);
          const grp = meta.group;
          return !grp;
        }).map(actionId => this.getValueByKey(this.metadata.actions, actionId));
      }
    }

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