static_src/elements/framework/dialogs/mr-change-columns/mr-change-columns.js

// Copyright 2019 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {LitElement, html, css} from 'lit-element';
import page from 'page';
import qs from 'qs';
import 'elements/chops/chops-button/chops-button.js';
import 'elements/chops/chops-dialog/chops-dialog.js';
import {SHARED_STYLES} from 'shared/shared-styles.js';
import {parseColSpec} from 'shared/issue-fields.js';

/**
 * `<mr-change-columns>`
 *
 * Dialog where the user can change columns on the list view.
 *
 */
export class MrChangeColumns extends LitElement {
  /** @override */
  static get styles() {
    return [
      SHARED_STYLES,
      css`
        .edit-actions {
          margin: 0.5em 0;
          text-align: right;
        }
        .input-grid {
          align-items: center;
          width: 800px;
          max-width: 100%;
        }
        input {
          box-sizing: border-box;
          padding: 0.25em 4px;
        }
      `,
    ];
  }

  /** @override */
  render() {
    return html`
      <chops-dialog closeOnOutsideClick>
        <h3 class="medium-heading">Change list columns</h3>
        <form id="changeColumns" @submit=${this._save}>
          <div class="input-grid">
            <label for="columnsInput">Columns: </label>
            <input
              id="columnsInput"
              placeholder="Edit columns..."
              value=${this.columns.join(' ')}
            />
          </div>
          <div class="edit-actions">
            <chops-button
              @click=${this.close}
              class="de-emphasized discard-button"
            >
              Discard
            </chops-button>
            <chops-button
              @click=${this._save}
              class="emphasized"
            >
              Update columns
            </chops-button>
          </div>
        </form>
      </chops-dialog>
    `;
  }

  /** @override */
  static get properties() {
    return {
      /**
       * Array of the currently configured issue columns, used to set
       * the default value.
       */
      columns: {type: Array},
      /**
       * Parsed query params for the current page, to be used in
       * navigation.
       */
      queryParams: {type: Object},
    };
  }

  /** @override */
  constructor() {
    super();

    this.columns = [];
    this.queryParams = {};

    this._page = page;
  }

  /**
   * Abstract out the computation of the current page. Useful for testing.
   */
  get _currentPage() {
    return window.location.pathname;
  }

  /** Updates the URL query params with the new columns. */
  save() {
    const input = this.shadowRoot.querySelector('#columnsInput');
    const newColumns = parseColSpec(input.value);

    const params = {...this.queryParams};
    params.colspec = newColumns.join('+');

    // TODO(zhangtiff): Create a shared function to change only
    // query params in a URL.
    this._page(`${this._currentPage}?${qs.stringify(params)}`);

    this.close();
  }

  /**
   * Handles form submit events.
   * @param {Event} e A click or submit event.
   */
  _save(e) {
    e.preventDefault();
    this.save();
  }

  /** Opens and resets this dialog. */
  open() {
    this.reset();
    const dialog = this.shadowRoot.querySelector('chops-dialog');
    dialog.open();
  }

  /** Closes this dialog. */
  close() {
    const dialog = this.shadowRoot.querySelector('chops-dialog');
    dialog.close();
  }

  /** Resets the form in this dialog. */
  reset() {
    this.shadowRoot.querySelector('form').reset();
  }
}

customElements.define('mr-change-columns', MrChangeColumns);