px-rangepicker.html

<!--
Copyright (c) 2018, General Electric

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="../px-datetime-common/px-datetime-range-behavior.html"/>
<link rel="import" href="../px-datetime-common/px-datetime-button-behavior.html"/>
<link rel="import" href="../px-datetime-range-field/px-datetime-range-field.html"/>
<link rel="import" href="../px-overlay/px-overlay-content.html"/>
<link rel="import" href="../px-overlay/px-overlay-behavior.html"/>
<link rel="import" href="px-rangepicker-content.html"/>
<link rel="import" href="css/px-rangepicker-styles.html"/>

<!--
The datetime components rely on [Moment.js](https://momentjs.com/) and [Moment Timezone](https://momentjs.com/timezone/).

#### Usage

    <px-rangepicker
      from-moment="{{...}}"
      to-moment="{{...}}">
    </px-rangepicker>

#### Styling
The following custom property is available for styling. Please also refer to px-forms-design, px-datetime-range-field, and px-datetime-range-panel for additional style variables used by this component.

Custom property | Description
:----------------|:-------------
`px-datetime` components | the css variables are defined in the other `px-datetime` components
`--px-datetime-field-margin-bottom` | Sets the margin under the fields. If allowWrap is true this should be set to 20px.
`--px-datetime-range-field-margin-between-fields` | When `showFieldTitles` is true this is the amount of space between the fields
`--px-datetime-range-field-column-min-width` | When `fullWidth` is true this sets the min-width that each field is allowed to be before the grid wraps.
`--px-datetime-range-field-justify-fields` | Sets the flex `justify-content` value for the fields


@element px-rangepicker
@blurb Element allowing to choose a date (and time) range
@homepage index.html
@demo index.html
-->
<dom-module id="px-rangepicker">
  <template>
    <style include="px-rangepicker-styles"></style>

    <px-datetime-range-field
      id="rangeField"
      slot="dropdown-trigger"
      from-moment="{{_tempFromMomentObj}}"
      to-moment="{{_tempToMomentObj}}"
      date-format="{{dateFormat}}"
      time-format="{{timeFormat}}"
      hide-time="{{hideTime}}"
      time-zone="{{timeZone}}"
      hide-icon="{{hideIcon}}"
      show-time-zone="[[showTimeZone]]"
      block-future-dates="{{blockFutureDates}}"
      block-past-dates="{{blockPastDates}}"
      hide-validation-messages="{{hideValidationMessages}}"
      prevent-notification-on-change
      allow-wrap="[[allowWrap]]"
      show-field-titles="[[showFieldTitles]]"
      full-width="[[fullWidth]]"
      resources="[[resources]]"
      language="[[language]]"
      formats="[[formats]]"
      min-date="[[minDate]]"
      max-date="[[maxDate]]"
      required="[[required]]"
      hoist="[[hoist]]"
      container-type="[[containerType]]">
    </px-datetime-range-field>
    <px-overlay-content
      hoist="[[hoist]]"
      container-type="[[containerType]]"
      event-names='["px-datetime-button-clicked"]'>
      <px-rangepicker-content
        id="rangepickerContent"
        position-target="[[_returnFieldElem()]]"
        opened="{{opened}}"
        scroll-action="{{scrollAction}}"
        is-valid="{{isValid}}"
        from-moment="{{_tempFromMomentObj}}"
        to-moment="{{_tempToMomentObj}}"
        time-format="{{timeFormat}}"
        hide-time="{{hideTime}}"
        hide-presets="{{hidePresets}}"
        show-buttons="{{showButtons}}"
        block-future-dates="{{blockFutureDates}}"
        block-past-dates="{{blockPastDates}}"
        preset-ranges="{{presetRanges}}"
        time-zone="[[timeZone]]"
        day-week-start-index="[[dayWeekStartIndex]]"
        resources="[[resources]]"
        language="[[language]]"
        formats="[[formats]]"
        min-date="[[minDate]]"
        max-date="[[maxDate]]">
      </px-rangepicker-content>
    </px-overlay-content>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'px-rangepicker',
    behaviors: [
      PxDatetimeBehavior.TempRange,
      PxDatetimeBehavior.Buttons,
      PxOverlayBehavior.sharedProperties
    ],

    properties: {
      /**
       * Whether the panel is opened
       */
      opened: {
        type: Boolean,
        notify: true,
        observer: '_processClose'
      },
      /**
       * Moment format used to format the date
       */
      dateFormat: {
        type: String,
        value: 'MM/DD/YYYY'
      },
      /**
       * Moment format used to format the time
       */
      timeFormat: {
        type: String,
        value: 'HH:mm A'
      },
      /**
       * Whether to allow time selection as well in this date picker
       */
      hideTime: {
        type: Boolean,
        value: false
      },
      /**
       * Whether to show the preset date/time ranges
       */
      hidePresets: {
        type: Boolean,
        value: false
      },
      /**
       * Controls whether the calendar/clock icon should be hidden
       */
      hideIcon: {
        type: Boolean,
        value: false
      },
      /**
       * Whether to allow the range field to wrap at smaller screen resolutions / parent container sizes.
       */
      allowWrap: {
        type: Boolean,
        value: false
      },
      /**
       * This will remove the `to` inbetween the fields and
       * add titles above the fields. This allows for a
       * more flexable design.
       */
      showFieldTitles: {
        type: Boolean,
        value: false,
        reflectToAttribute: true
      },
      /**
       * For layout purposes.
       * This will display grid the fields. `showFieldTitles` must be true for styles to take effect.
       *
       * `--px-datetime-range-field-column-min-width` (default: 250px) - controls
       * the min-width that each field is allowed to be before the grid wraps.
       *
       * `--px-datetime-range-field-margin-between-fields` (default: 10px) - controls
       * the horizontal spacing between the fields.
       *
       * This means each field will take up half of the container that `px-datetime-range-field`
       * is in, minus the space between the fields. When the container scales smaller than 510px or
       * `(--px-datetime-range-field-column-min-width * 2 + --px-datetime-range-field-margin-between-fields)`.
       *
       * The fields will wrap under each other regardless of the `allow-wrap` prop in every browser except for IE.
       * Setting this property will override anything set in the `--px-datetime-range-field-justify-fields`
       */
      fullWidth: {
        type: Boolean,
        value: false,
        reflectToAttribute: true
      },
      /**
       * Controls if the page can be scrolled when the
       * panel is open.
       * Sets the `scrollAction` property on `iron-dropdown`
       *
       * lock - blocks scrolling from happening
       * refit - computes the new position of the panel
       * cancel - causes the overlay to close
       */
       scrollAction: {
        type: String,
        value: "lock"
      },
      /**
       * Whether the currently selected date is valid
       */
      isValid: {
        type: Boolean,
        notify: true,
        value: true
      },
      /**
       * Boolean stating if the range field is required.
       * Will result in an error if left blank.
       */
      required: {
        type: Boolean,
        value: false
      },
      /**
       * Hides the validation messages if set to true
       */
      hideValidationMessages: {
        type: Boolean,
        value: false
      },
      /**
       * Timezone display format
       * - 'dropdown': shows the timezone as a dropdown with which the user can select a different timezone. Contains only a subset of all timezones.
       * - 'extendedDropdown': shows the timezone as a dropdown with which user can select a different timezone. Contains all existing timezones (588 total).
       * - 'text': shows the timezone as text, non-editable.
       * - 'abbreviatedText': shows the timezone as abbreviated text, non-editable (e.g. UTC, PST, EST).
       */
      showTimeZone: {
        type: String,
        value: ''
      },
      /**
       * The preset date/time ranges to be displayed.
       *
       *```
       *   [
       *    {
       *      "displayText": "Last 5 Minutes",
       *      "startDateTime": "2013-02-04T22:44:30.652Z",
       *      "endDateTime": "2013-02-04T22:49:30.652Z"
       *    },
       *    {
       *      "displayText": "Last 12 Hours",
       *      "startDateTime": "2013-02-04T10:44:30.652Z",
       *      "endDateTime": "2013-02-04T22:49:30.652Z"
       *    }
       *   ]
       * ```
       *
       * @default Last 7 Days + This Month + Last Month
       */
      presetRanges: {
        type: Object,
        value: function() {
          var now = Px.moment();
          return [
            {
              "displayText": "Last 7 Days",
              "startDateTime": now.clone().subtract(7, 'days'),
              "endDateTime": now
            },
            {
              "displayText": "This Month",
              "startDateTime": now.clone().startOf('month'),
              "endDateTime": now.clone().endOf('month')
            },
            {
              "displayText": "Last Month",
              "startDateTime": now.clone().subtract(1, 'months').startOf('month'),
              "endDateTime": now.clone().subtract(1, 'months').endOf('month')
            }
          ]
        }
      },
      /**
       * Specifies if the dropdown content should get hoisted to a container in order to escape its current stacking context
       */
       hoist: {
        type: Boolean,
        value: false
      }
    },
    listeners: {
      'px-datetime-entry-icon-clicked':'_toggleBoxOpen',
      'px-datetime-button-clicked': '_buttonClicked',
      'tap' : '_handleTap'
    },
    /**
     * Key bindings for iron-a11y-keys-behavior
     */
    keyBindings: {
      'esc' : '_onEsc',
      'enter': '_onEnter'
    },

    attached: function() {
      this.$.rangeField.addEventListener('from-moment-changed', this._rangeFieldMomentChanged.bind(this));
      this.$.rangeField.addEventListener('to-moment-changed', this._rangeFieldMomentChanged.bind(this));
      this.$.rangeField.addEventListener('is-valid-changed', this._handleValidation.bind(this));
    },

    _onEsc: function(evt) {
      if(this.opened) {
        this.set('opened', false);
      }
    },

    _onEnter: function(evt) {
      if(this.opened) {
        this._validateCalendarMoment();
        this.set('opened', false);
      }
    },
    /**
     * Opens the calendar if closed, closes it if opened
     */
    _toggleBoxOpen: function() {
      this.$.rangepickerContent._toggleBoxOpen();
    },
    /**
     * If the buttons are not showing and both the range-field & range-panel
     * are valid then apply the values shown in the temp values
     * If one of those conditions are false revert back the temp
     * values to the saved momentobjs
     */
    _processClose: function(newVal,oldVal) {
      if(oldVal === undefined || newVal) { return; }
      //If we show time make sure it is valid on closing. If we show buttons don't validate
      var canApplyValues = !this.showButtons && this.$.rangepickerContent.timeIsValid && this.$.rangeField.isValid;
      if (canApplyValues){
        this._applyTempRangeMoment(canApplyValues);
      }
      else {
        this._rollbackTempFromMoment(this.fromMoment);
        this._rollbackTempToMoment(this.toMoment);
      }
    },
    /**
     * If the panel is not open then apply the changes
     * coming from the range-fields
     */
    _rangeFieldMomentChanged : function() {
      if(!this.opened) {
        this._applyTempRangeMoment();
      }
    },
    /**
     * update the `isValid` property based on validity of range-field
     */
    _handleValidation: function (e) {
      if (e.detail.value) {
        this.isValid = true
        this.$.rangepickerContent._handleValidation(true);
      }
      else  {
        this.isValid = false;
        this.$.rangepickerContent._handleValidation(false);
      }
    },
    /**
     * If the calendar is open and the rangeField is valid
     * when enter/apply is pressed apply the calendar value.
     * We only want the calendar to close if the selection is applied
     */
     _validateCalendarMoment: function() {
      if(this.opened && this.isValid) {
        this._applyTempRangeMoment();
        this.fire('px-datetime-range-submitted', {'fromMoment': this.fromMoment, 'toMoment': this.toMoment});
        this.set('opened', false);
      }
    },

    _buttonClicked: function(evt) {
      if(evt.detail.action) {
        this._validateCalendarMoment();
      } else {
        this._rollbackTempFromMoment();
        this._rollbackTempToMoment();
      }
      this.set('opened', false);
    },

    /**
     * If the calendar is open and the dropdown is selected, close the calendar
     */
    _handleTap: function(evt) {
      if(this.opened === true){
        var path = Polymer.dom(evt).path;

        for (var i=0; i<path.length; i++) {
          if (path[i].nodeName === 'PX-DROPDOWN') {
            this.set('opened', false);
            return;
          }
        }
      }
    },

    _returnFieldElem: function() {
      return this.$.rangeField;
    }

  });
</script>