<commit_before>{div, ul, li, span, i, button, input} = React.DOM
{Tooltips} = require '../constants/app_constants'


momentFormat     = 'DD/MM/YYYY'
datePickerFormat = '%d/%m/%Y'


module.exports = DateRangePicker = React.createClass
    displayName: 'DateRangePicker'

    propTypes:
        onDateFilter: React.PropTypes.func.isRequired

    getInitialState: ->
        label:     t 'daterangepicker placeholder'
        startDate: ''
        endDate:   ''


    onStartChange: (obj) ->
        date = if obj.target? then obj.target.value else
                                  "#{obj.dd}/#{obj.mm}/#{obj.yyyy}"
        @setState startDate: date, @filterize


    onEndChange: (obj) ->
        date = if obj.target then obj.target.value else
                                  "#{obj.dd}/#{obj.mm}/#{obj.yyyy}"
        @setState endDate: date, @filterize


    filterize: ->
        return if !@state.startDate ^ !@state.endDate

        start = if @state.startDate
            [d, m, y] = @state.startDate.split '/'
            "#{y}-#{m}-#{d}T00:00:00.000Z"

        end = if @state.endDate
            [d, m, y] = @state.endDate.split '/'
            "#{y}-#{m}-#{d}T23:59:59.999Z"

        @props.onDateFilter start, end


    reset: ->
        @setState
            startDate: ''
            endDate:   '',
            @filterize


    presetYesterday: ->
        @setState
            startDate: moment().subtract(1, 'day').format(momentFormat)
            endDate:   moment().subtract(1, 'day').format(momentFormat),
            @filterize


    presetLastWeek: ->
        @setState
            startDate: moment().subtract(1, 'week').format(momentFormat)
            endDate:   moment().format(momentFormat),
            @filterize


    presetLastMonth: ->
        @setState
            startDate: moment().subtract(1, 'month').format(momentFormat)
            endDate:   moment().format(momentFormat),
            @filterize


    render: ->
        div
            role:                     'menuitem'
            className:                'dropdown date-range-picker'
            'aria-describedby':       Tooltips.FILTER_DATE_RANGE
            'data-tooltip-direction': 'bottom'

            button
                className:     'dropdown-toggle'
                'data-toggle': 'dropdown'

                i className: 'fa fa-calendar'
                span className: 'btn-label',
                    "#{@state.label} "
                span className: 'caret'

            div className: 'dropdown-menu',
                ul className: 'presets list-unstyled',
                    li role: 'presentation',
                        button
                            role:    'menuitem'
                            onClick: @presetYesterday
                            t 'daterangepicker presets yesterday'

                    li role: 'presentation',
                        button
                            role:    'menuitem'
                            onClick: @presetLastWeek
                            t 'daterangepicker presets last week'

                    li role: 'presentation',
                        button
                            role:    'menuitem'
                            onClick: @presetLastMonth
                            t 'daterangepicker presets last month'

                    li role: 'presentation',
                        button
                            role:    'menuitem'
                            onClick: @reset
                            t 'daterangepicker clear'<commit_msg>Add visual indicator that date filtering is active<commit_after>{div, ul, li, span, i, button, input} = React.DOM
{Tooltips} = require '../constants/app_constants'


momentFormat     = 'DD/MM/YYYY'
datePickerFormat = '%d/%m/%Y'


module.exports = DateRangePicker = React.createClass
    displayName: 'DateRangePicker'

    propTypes:
        onDateFilter: React.PropTypes.func.isRequired

    getInitialState: ->
        label:     t 'daterangepicker placeholder'
        startDate: ''
        endDate:   ''


    onStartChange: (obj) ->
        date = if obj.target? then obj.target.value else
                                  "#{obj.dd}/#{obj.mm}/#{obj.yyyy}"
        @setState startDate: date, @filterize


    onEndChange: (obj) ->
        date = if obj.target then obj.target.value else
                                  "#{obj.dd}/#{obj.mm}/#{obj.yyyy}"
        @setState endDate: date, @filterize


    filterize: ->
        return if !@state.startDate ^ !@state.endDate

        start = if @state.startDate
            [d, m, y] = @state.startDate.split '/'
            "#{y}-#{m}-#{d}T00:00:00.000Z"

        end = if @state.endDate
            [d, m, y] = @state.endDate.split '/'
            "#{y}-#{m}-#{d}T23:59:59.999Z"

        @props.onDateFilter start, end


    reset: ->
        @setState
            startDate: ''
            endDate:   '',
            @filterize


    presetYesterday: ->
        @setState
            startDate: moment().subtract(1, 'day').format(momentFormat)
            endDate:   moment().subtract(1, 'day').format(momentFormat),
            @filterize


    presetLastWeek: ->
        @setState
            startDate: moment().subtract(1, 'week').format(momentFormat)
            endDate:   moment().format(momentFormat),
            @filterize


    presetLastMonth: ->
        @setState
            startDate: moment().subtract(1, 'month').format(momentFormat)
            endDate:   moment().format(momentFormat),
            @filterize


    render: ->
        div
            role:                     'menuitem'
            className:                'dropdown date-range-picker'
            'aria-describedby':       Tooltips.FILTER_DATE_RANGE
            'data-tooltip-direction': 'bottom'

            button
                className:       'dropdown-toggle'
                role:            'menuitem'
                'data-toggle':   'dropdown'
                'aria-selected': !!@state.startDate and !!@state.endDate

                i className: 'fa fa-calendar'
                span className: 'btn-label',
                    "#{@state.label} "
                span className: 'caret'

            div className: 'dropdown-menu',
                ul className: 'presets list-unstyled',
                    li role: 'presentation',
                        button
                            role:    'menuitem'
                            onClick: @presetYesterday
                            t 'daterangepicker presets yesterday'

                    li role: 'presentation',
                        button
                            role:    'menuitem'
                            onClick: @presetLastWeek
                            t 'daterangepicker presets last week'

                    li role: 'presentation',
                        button
                            role:    'menuitem'
                            onClick: @presetLastMonth
                            t 'daterangepicker presets last month'

                    li role: 'presentation',
                        button
                            role:    'menuitem'
                            onClick: @reset
                            t 'daterangepicker clear'
{'fraction_non_alphanumeric': 0.10891772501380453, 'fraction_numerical': 0.006073992269464384, 'mean_word_length': 1.2956273764258555, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7141756', 'n_tokens_mistral': 1957, 'n_tokens_neox': 1899, 'n_words': 398}