golden/frontend/res/imp/ignore-summary-sk.html

<!-- The <ignore-summary-sk> custom element declaration.

Displays a summary of an ignore rule.

  Attributes:
    None.

  Events:
    'delete'
       The element will produce a 'deleted' event when the delete button is
       pressed. The id of the deleted ignore rule will be included in
       e.detail.

    'edit'
       The element will produce an 'edit' event when the edit button is
       pressed. The state of the ignore rule will be included in e.detail.

  Methods:
    None.

-->

<link rel="import" href="../common/imp/linkify-sk.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">

<link rel="import" href="shared-styles.html">

<dom-module id="ignore-summary-sk">
  <template>
    <style include="shared-styles">
      div,
      pre {
        display: inline-block;
        margin: 0 0.5em 0 0;
        font-family: monospace;
      }
      #name {
        width: 18em;
        color: #D95F02;
      }
      #updatedBy {
        width: 18em;
        color: #D95F02;
      }
      #query {
        width: 20em;
        overflow: auto;
        color: #1B9E77;
        word-wrap: break-word;
        vertical-align: middle;
      }
      #note {
        width: 20em;
        overflow: auto;
        color: #66A61E;
        word-wrap: break-word;
        vertical-align: middle;
      }
      #expires {
        width: 5em;
        color: #7570B3;
      }
      #count {
        width: 8em;
        color: #A6761D;
      }
      paper-button {
        min-width: 2em;
      }
    </style>
    <div id="name">{{value.name}}</div>
    <div id="expires">{{_humanDiffDate(value.expires)}}</div>
    <div id="updatedBy">{{value.updatedBy}}</div>
    <pre id="query"><a href$="{{_queryHref(value.query)}}">{{_splitAmp(value.query)}}</a></pre>
    <div id="note"><linkify-sk text="{{value.note}}"></linkify-sk></div>
    <div id="count">{{value.exclusiveCount}} / {{value.count}}</div>
    <paper-button id="edit" title="Edit"><iron-icon icon="create"></iron-icon></paper-button>
    <paper-button id="delete" title="Delete"><iron-icon icon="delete"></iron-icon></paper-button>
  </template>
  <script>
    (function () {
      Polymer({
        is: 'ignore-summary-sk',

        properties: {
          value: {
            type: Object,
            value: function () { return {}; }
          }
        },

        ready: function () {
          this.listen(this.$.edit, 'click', "_handleEditClick");
          this.listen(this.$.delete, 'click', "_handleDeleteClick");
        },

        _handleEditClick: function() {
            this.fire('edit', this.value);
        },

        _handleDeleteClick: function() {
            this.fire('delete', this.value);
        },

        // Make an alias to split by ampersand.
        _splitAmp: sk.query.splitAmp,

        _humanDiffDate: function (s) {
          var ms = Date.parse(s);
          return ms < Date.now() ? 'Expired' : sk.human.diffDate(s);
        },

        _queryHref: function (query) {
          return '/list?include=true&query=' + encodeURIComponent(query);
        }
      });
    }());
  </script>
</dom-module>