product-admin/src-client/components/product-table-view/product-table-view.html

EA admin screens

<link rel="import" href="../admin-shared-styles/admin-shared-styles.html" />
<link rel="import" href="../bms-behaviors-util/bms-behaviors-util.html" />
<link rel="import" href="./product-table-check.html" />
<dom-module id="product-table-view">
  <template>
    <style include="admin-shared-styles"></style>
    <style>
    /* local styles go here */
	:host ::content {
		min-height: 100%;
		background-color: white;
		display: block;
	}

    header {
      margin-bottom: 30px;
    }

    #header-text {
      border-bottom: 1px solid #A3A3A3;
      padding-bottom: 0.25em;
      padding-top: 1em;
      margin-top: 0;
      font-size: 1.25em;
      font-weight: normal;
      margin-bottom: -1em;
    }

    #dropdownFilter {
      --px-dropdown-bg-color--default: #fff;
      --px-dropdown-bg-color--hover: #fff;
      --px-dropdown-border-color: #fff;
      --px-base-text-color: #0194BB;
      --px-dropdown-bg-color--opened: #fff;
      display: inline-block;
      position: relative;
      left: -0.5em;
    }

    #circle-plus-icon,
    #edit-icon {
      color: #0A9EC1;
    }

    #new-product-btn {
      float: right;
      position: relative;
      right: 10em;
      top: -0.5em;
    }

    #new-product-btn-text {
      font-size: 0.9em;
      color: black;
    }

    #container {
      width: 90%;
      margin: 0 auto;
    }

    table {
      border-collapse: collapse;
    }

    th,
    td {
      padding: 5px 20px;
      display: table-cell;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    #active-header,
    #description-header,
    #product-code-header,
    #product-name-header {
      text-align: left;
    }

    #pph-header,
    #est-cycle-header {
      text-align: center;
    }

    #active-header {
      padding: 0;
      width: 3em;
    }

    #product-code-header,
    #product-name-header {
      width: 10em;
    }

    #pph-header {
      width: 6.5em;
    }

    #est-cycle-header {
      width: 8em;
    }

    #description-header {
      width: 15em;
    }

    #edit-header {
      width: 1em;
    }

    #active {
      text-align: left;
    }

	#edit {
	  overflow: visible;
	}

    #product-code,
    #product-name {
      text-align: left;
      max-width: 200px;
    }

    #pph,
    #est-cycle {
      text-align: right;
      max-width: 200px;
    }

    #description {
      text-align: left;
      max-width: 400px;
    }

    #table-header {
      border-bottom: 1px solid #A3A3A3;
    }

    px-spinner {
      margin: 0 auto;
      padding-top: 10em;
    }

    #customer-data-table {
      table-layout: fixed;
      width: 100%;
    }

    #errorDiv {
      text-align: center;
    }

    #alert-message-container {
      display: inline-block;
    }

    #noDataMsgDiv {
      text-align: center;
    }

    #alert-message-container-nodata {
      display: inline-block;
    }
    </style>
    <iron-ajax id="getProductsRequest" method="GET" url="[[ getProductsUrl ]]" headers='{"accept": "application/json", "timeout": 120000, "Cache-Control": "no-cache"}' content-type="application/json" handle-as="json" on-response="_handleGetProductResponse" on-error="_handleGetProductError" loading="{{loading}}"></iron-ajax>
    <!-- local DOM goes here -->
    <div id="container">
      <header>
        <h2 id="header-text">[[ localize("headingProducts") ]]</h2>
      </header>
      <!-- TODO:  this need to extract out to parent. -->
      <div id="errorDiv">
      </div>
      <template is="dom-if" if="{{loading}}">
        <px-spinner id="spinner" size="100"></px-spinner>
      </template>
      <template is="dom-if" if="{{!loading}}">
        <div id="container-body">
          <button id="new-product-btn" class="btn btn--small btn--bare btn--icon" on-tap="_openCreateModal">
            <span id="new-product-btn-text"><i id="circle-plus-icon" class="fa fa-plus-circle"></i> [[ localize("createNewProduct") ]]</span>
          </button>
          <px-dropdown id="dropdownFilter" display-value="View All Products">
            <px-dropdown-content class="px-dropdown-content" extend-dropdown="true" extend-dropdown-by="60" items='[{"key": "products.all", "val": "View All Products"}, {"key": "products.active", "val": "View Active"}, {"key": "products.inactive", "val": "View Inactive"}]'>
            </px-dropdown-content>
            <!-- TODO: localize the above `items` stuff -->
          </px-dropdown>
          <table id="customer-data-table">
            <tr id="table-header">
              <th id="active-header">[[ localize("active") ]]</th>
              <th id="product-code-header">[[ localize("productCode") ]]</th>
              <th id="product-name-header">[[ localize("productName") ]]</th>
              <th id="pph-header">[[ localize("currentSpecificationRateLabel") ]]</th>
              <th id="est-cycle-header">[[ localize("estCycle") ]]</th>
              <th id="description-header">[[ localize("productLongDescription") ]]</th>
              <th id="edit-header"></th>
            </tr>
            <template is="dom-repeat" items="{{tableData}}">
              <tr>
                <td id="active">
                  <product-table-check product="{{item}}"></product-table-check>
                </td>
                <td id="product-code">{{item.productCode}}</td>
                <td id="product-name">{{item.productDescription}}</td>
                <td id="pph">{{item.currentSpecificationRate}} [[localize("currentSpecificationRateLabel")]]</td>
                <td id="est-cycle">{{item.estCycleTimeHours}} [[ localize("hr") ]] {{item.estCycleTimeMinutes}} [[ localize("min") ]]</td>
                <td id="description">{{item.longDescription}}</td>
                <td id="edit">
                  <a on-tap="_openEditModal">
                    <i id="edit-icon" class="fa fa-pencil-square-o"></i>
                  </a>
                </td>
              </tr>
            </template>
          </table>
        </div>
      </template>
    </div>
    <edit-product id="editProductModal" assets="{{assets}}" language="{{language}}" resources="{{resources}}" product="{{selectedProduct}}"></edit-product>
    <edit-product is-create="true" id="createProductModal" assets="{{assets}}" language="{{language}}" resources="{{resources}}"></edit-product>
  </template>
  <script>
  var ProductTableView = (function(util, undefined) {

    var pxModalPrototype = document.createElement("px-modal").constructor.prototype;


    return Polymer({
      is: 'product-table-view',
      behaviors: [
        Polymer.AppLocalizeBehavior,
        bms.behaviors.util
      ],
      properties: {
        tableData: {
          type: Array,
          value: function() {
            return [];
          }
        },
        products: {
          type: Array,
          value: function() {
            return [];
          }
        },
        showErrorMsg: {
          type: Boolean,
          value: false
        },
        acknowledge: {
          type: String,
          value: "acknowledge"
        },
        getProductsUrl: {
          type: String,
          value: function() {
            return util.properties.BASE_PATH.value.concat("/getProducts");
          }
        },
		currentFilterSelected: {
			type: String,
			value: "products.all"
		},
        selectedProduct: Object

      },
      _openEditModal: function(event) {
        var product = event.model.__data__.item;
        var edit = this.$.editProductModal;
        var modal = edit.querySelector("px-modal");

        this.selectedProduct = {};
        this.set("selectedProduct", product);
        edit.product.assets = product.assets;

        modal.modalButtonClicked();
        modal.fire("refresh");

      },
      _openCreateModal: function() {
        var modal = this.$.createProductModal.querySelector("px-modal");
        this.$.createProductModal.product = {
          productDescription: "",
          productCode: "",
          longDescription: "",
          currentSpecificationRate: 0,
          estCycleTimeHours: 0,
          estCycleTimeMinutes: 0,
          assets: [],
          specifications: [],
          active: "true"
        };
        modal.modalButtonClicked();
        modal.fire("refresh");
      },
      _handleGetProductError: function(errResponse) {
        //TODO:  localize and put proper wording when we get proper messages.
        errResponse.messageTitle = this.localize("error");
        errResponse.errorMessage = this.localize("getProductError");
        this.fire('alert-error-message', errResponse)

      },
      _handleGetProductResponse: function(data) {
        var apiData = data.detail.response._embedded.resource;

        apiData = apiData.map(function(product) {
          return updateCycleTime(product);
        });

        this.set("products", apiData);

        // set table with all the data retrieved from the API by default
        this.set("tableData", this.products);
      },
      attached: function() {
        this.$.getProductsRequest.generateRequest();
        this.addEventListener("createProduct", modalAddNewProductHandler);
        this.addEventListener("updateProduct", modalUpdateProductHandler);
        this.addEventListener('px-dropdown-value-changed', dropdownFilter);
		this.$.getProductsRequest.addEventListener('response', persistFilterSelection.bind(this));
      }
    });

	function persistFilterSelection() {
		this.fire("px-dropdown-value-changed", {
			key: this.currentFilterSelected
		});
	}

	function dropdownFilter(event) {
		var filteredData;
		var dropdownSelection = event.detail.key || "products.all";

		this.currentFilterSelected = dropdownSelection;

		switch (dropdownSelection) {
			case 'products.all':
				filteredData = this.products;
				break;
			case 'products.active':
				filteredData = this.products.filter(function(product) {
					return product.active === 'true';
				});
				break;
			case 'products.inactive':
				filteredData = this.products.filter(function(product) {
					return product.active === 'false';
				});
				break;
			default:
				filteredData = this.products;
		}

		this.tableData = [];
		this.set('tableData', filteredData);
	}

    function modalUpdateProductHandler(event) {
      console.log("~modalUpdateProductHandler");
      for (var index = 0; index < this.products.length; index += 1) {
        var currentProduct = this.products[index];
        var updatedProduct = event.detail;
        if (currentProduct.pk !== updatedProduct.pk) continue;

        updatedProduct = updateCycleTime(updatedProduct);
        updatedProduct.active = currentProduct.active;

        this.splice("products", index, 1, updatedProduct);
        this.fire("px-dropdown-value-changed", {
          key: this.$$("px-dropdown").selectedKey
        });

        break;
      }
    }

    function modalAddNewProductHandler(event) {
      console.log("~modalAddNewProductHandler");
      this.$.getProductsRequest.generateRequest();
    }

    function updateCycleTime(product) {
      var cycleHrMin = util.convertCycleTimeToHrMin(product.currentSpecificationCycleTime);
      product.estCycleTimeMinutes = cycleHrMin.mins;
      product.estCycleTimeHours = cycleHrMin.hrs;

      return product;
    }


  })(bms.behaviors.util);
  </script>
</dom-module>