lens-data-convert-date.html

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="../th-theme/th-theme.html"> 
<link rel="import" href="../core-input/core-input.html"> 
<link rel="import" href="../core-selector/core-selector.html"> 

<!--
A data component for converting dates with moment.js. For more info on date formats,
click <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">here</a>.

##### Example

    <lens-data-convert-date></lens-data-convert-date>

@element lens-data-convert-date
@blurb A data component for converting dates.
@status alpha
@homepage http://lenses.github.io/lens-data-convert-date
-->

<polymer-element name="lens-data-convert-date" attributes="input output dateColumn dateTypeFrom dateTypeTo">
  <template>
    <core-style ref="theme"></core-style>
    <link rel="stylesheet" href="lens-data-convert-date.css">

    <div class="lens-container lens-data"></div>
      <!-- Column Selection -->
      <label> Date column:</label>
      <core-selector selected="{{dateColumn}}" valueattr="label">
        <template repeat="{{attr in _dataAttributes}}">
          <div class="col" label="{{attr}}">{{attr}}</div>
        </template>
      </core-selector>
      
      <!-- FROM Date Type Selection -->
      <label>Select current format:</label>
      <core-selector class="selector" selected="{{dateTypeFrom}}"  valueattr="label">
        <template repeat="{{format in dateFormats}}">
          <div class="dateItem" label="{{format.type}}">{{format.type}} <span class="small">(i.e. {{format.example}})</span></div>
        </template>
      </core-selector>
      <input id="dateTypeFrom" is="core-input" placeholder="Or enter custom format" type="text" committedValue="{{dateTypeFrom}}">
      
      <!-- TO Date Type Selection -->
      <label>Select new format:</label>
      <core-selector class="selector" selected="{{dateTypeTo}}" valueattr="label">
        <template repeat="{{format in dateFormats}}">
          <div class="dateItem" label="{{format.type}}">{{format.type}} <span class="small">(i.e. {{format.example}})</span></div>
        </template>
      </core-selector>
      <input id="dateTypeTo" is="core-input" placeholder="Or enter custom format" type="text" committedValue="{{dateTypeTo}}">
      
      <p class="small">For more info on date formats, click <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">here</a> </p>
      
      <template if="{{errors.length}}">
        <p><strong>{{errors.length}} date(s) could not be converted due to invalid format:</strong></p>
        <template repeat="{{error in errors}}">
          <li>{{error.date}} (row: {{error.row}})</li>
        </template>
      </template>

    </div> <!-- end lens-container-->

  </template>
  <script src="../moment/min/moment.min.js"></script>
  <script>
    Polymer({
      /**
       *  Input data
       *
       *  @property input
       *  @type Array
       *  @default [ ]
       */
      input: [],
      dateFormats: [ 
        { type: 'YYYY MM DD', example: '2015 01 31'},
        { type: 'MMMM DD YYYY', example: 'January 31, 2015'},
        { type: 'MMM DD YYYY', example: 'Jan 31, 2015'},
        { type: 'MM-DD-YYYY', example: '01-31-2015'},
        { type: 'MM-DD-YY', example: '01-31-15'},
        { type: 'MMMM YYYY', example: 'January 2015'},
        { type: 'MMM YYYY', example: 'Jan 2015'},
        { type: 'MM-YYYY', example: '01-2015'},
        { type: 'MM-YY', example: '01-15'},
        { type: 'M-D-YYYY', example: '1-31-2015'},
        { type: 'M-D-YY', example: '1-31-15'},
        { type: 'DD MMMM YYYY', example: '31 January 2015'},
        { type: 'DD-MM-YY', example: '31-01-15'},
        { type: 'D-M-YYYY', example: '31-1-2015'},
        { type: 'D-M-YY', example: '31-1-15'},
        { type: 'MMM-DD', example: 'Jan-31'},
        { type: 'MM-DD', example: '01-31'},
        { type: 'M-D', example: '1-31'},
        { type: 'Q YYYY', example: 'Q1 2015'}
      ],

      /**
       *  Output data
       *
       *  @property output
       *  @type Array
       *  @default [ ]
       */
      output: [],

      /**
       *  Name of the column that contains dates to-be-converted.
       *
       *  @property dateColumn
       *  @type String
       *  @default null
       */

      /**
       *  Original format of the dates to-be-converted. I.e. use
       *  'DD MMMM YYYY' for dates in the style of '31 January 2015'
       *
       *  @property dateTypeFrom
       *  @type String
       *  @default ""
       */

      /**
       *  Output format of the converted dates. I.e. use
       *  'MM-DD-YY' for dates in the style of '01-31-15.'
       *
       *  @property dateTypeTo
       *  @type String
       *  @default ""
       */

      /**
       *  If false, the original data will be replaced by the new data.
       *  If true, original data will be included in the output alongside
       *  the new data.
       *
       *  @property keepOriginalData
       *  @type {Boolean}
       *  @default true
       */
      keepOriginalData: true,
      ready: function () {
        this.inputChanged();
      },
      _calculateOutput: function(){
        var self = this,
            inputLength = self.input.length;
          
        self.errors = [];
        
        // Remapping triggers the change in an observer
        self.output = self.input.map(function(item, index){
          var newColName= self.newColName(self.dateColumn, self.dateTypeTo),
              newDate = self.convertDate(item[self.dateColumn], self.dateTypeFrom, self.dateTypeTo),
              row = {},
              keys = Object.keys(item);
          
          keys.forEach(function(key) {

            // if not keeping original data, do not include the original column
            if(!self.keepOriginalData && key === self.dateColumn){
            } else {
              row[key] = item[key];
            }
          });
        
          if (newDate){
            row[newColName] = newDate
          } else {
            self.errors.push({row: index+1, date: item[self.dateColumn]})
          }

          return row;
        })
        
      },
      newColName: function(oldColName, newFormat){
        return oldColName + " (" + newFormat + ")";
      },
      convertDate: function(date, currentFormat, newFormat){
        return moment(date,currentFormat).isValid() ? moment(date, currentFormat).format(newFormat) : "";
        
      },
      inputChanged: function(){
        var self = this;
        var firstItem = self.input[0];
        if(!firstItem) {
          return;
        }
        self._dataAttributes = Object.keys(firstItem);
      },
      dateTypeFromChanged: function(){
        if (this.dateTypeFrom && this.dateTypeTo && this.dateColumn){
          this._calculateOutput();
        }
      },
      dateTypeToChanged: function(){
        if (this.dateTypeFrom && this.dateTypeTo && this.dateColumn){
          this._calculateOutput();
        }
      },
      dateColumnChanged: function(){
        if (this.dateTypeFrom && this.dateTypeTo && this.dateColumn){
          this._calculateOutput();
        }
      },
      keepOriginalDataChanged: function() {
        console.log('changed');
        this._calculateOutput();
      }

    });
  </script>
</polymer-element>