WordPress.org

Making WordPress.org

Changeset 7976


Ignore:
Timestamp:
12/17/2018 07:34:12 AM (6 months ago)
Author:
vedjain
Message:

WCPT Application Tracker: Multiple changes in rendering of application status report, see desc.

  1. Add customRender option to allow specifying different render logic in application tracker report.
  2. Send timestamp for lastUpdated column instead of humanize_time_diff. Move logic for humanize_time_diff to frontend, because its a very simple logic, and would make a easy fix for #2501
  3. Use customRender option to display X time ago instead of absolute timestamp.
Location:
sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt/javascript/tracker/source/components/filterable-table/filterable-table.jsx

    r3814 r7976  
    1010        initialSortField : PropTypes.string.isRequired,
    1111        columns          : PropTypes.object,
     12        customRender     : PropTypes.object,
    1213    },
    1314
     
    6364            'sortOrder'   : this.state.sortOrder,
    6465            'sortField'   : this.state.sortField,
     66            'sortFunction': this.props.sortFunction
    6567        } );
    6668
     
    7880                    sortOrder       = { this.state.sortOrder }
    7981                    handleSortEvent = { this.handleSortEvent }
     82                    customRender    = { this.props.customRender }
    8083                />
    8184            </div>
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt/javascript/tracker/source/components/filterable-table/row.jsx

    r3814 r7976  
    33export default React.createClass( {
    44    propTypes : {
    5         columns : PropTypes.object,
    6         row     : PropTypes.object,
     5        columns      : PropTypes.object,
     6        row          : PropTypes.object,
     7        customRender : PropTypes.object,
    78    },
    89
    910    getDefaultProps : function() {
    1011        return {
    11             columns : {},
    12             row     : {},
     12            columns      : {},
     13            row          : {},
     14            customRender : {},
    1315        };
    1416    },
     
    2123         * shouldn't be displayed, like URLs.
    2224         */
    23         for ( let i in this.props.columns ) {
     25        for ( let columnName in this.props.columns ) {
    2426            let cellContent = '';
    2527
    26             if ( ! this.props.columns.hasOwnProperty( i ) ) {
     28            if ( ! this.props.columns.hasOwnProperty( columnName ) ) {
    2729                continue;
    2830            }
    2931
    30             if ( this.props.row[ i + 'Url' ] ) {
    31                 cellContent = <a href={ this.props.row[ i + 'Url' ] }>{ this.props.row[ i ] }</a>;
     32            if ( this.props.row[ columnName + 'Url' ] ) {
     33                cellContent = <a href={ this.props.row[ columnName + 'Url' ] }>{ this.props.row[ columnName ] }</a>;
     34            } else if ( this.props.customRender[ columnName ] ) {
     35                cellContent = this.props.customRender[ columnName ]( this.props.row[ columnName ] );
    3236            } else {
    33                 cellContent = this.props.row[ i ];
     37                cellContent = this.props.row[ columnName ];
    3438            }
    3539
     40
    3641            cells.push(
    37                 <td className={ i } key={ i }>
     42                <td className={ columnName } key={ columnName }>
    3843                    { cellContent }
    3944                </td>
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt/javascript/tracker/source/components/filterable-table/table.jsx

    r3814 r7976  
    1010        sortOrder       : PropTypes.oneOf( [ 'asc', 'desc' ] ),
    1111        handleSortEvent : PropTypes.func.isRequired,
     12        customRender    : PropTypes.object,
    1213    },
    1314
     
    2223    render : function() {
    2324        const rows = this.props.rows.map( function( row, index ) {
    24             return <TableRow columns={ this.props.columns } row={ row } key={ index } />;
     25            return (
     26                <TableRow
     27                    columns      = { this.props.columns }
     28                    row          = { row }
     29                    key          = { index }
     30                    customRender = { this.props.customRender }
     31                />
     32            );
    2533        }.bind( this ) );
    2634
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt/javascript/tracker/source/stores/table-store.js

    r7975 r7976  
    6565     * @returns {number}
    6666     */
    67     _sortRows : function(a, b ) {
    68         a = a[ filters.sortField ].toLowerCase();
    69         b = b[ filters.sortField ].toLowerCase();
     67    _sortRows : function( a, b ) {
     68        a = a[ filters.sortField ].toString().toLowerCase();
     69        b = b[ filters.sortField ].toString().toLowerCase();
    7070
    7171        if ( a > b ) {
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt/javascript/tracker/source/tracker.jsx

    r3814 r7976  
    77require( './style.scss' );
    88
     9/**
     10 * Courtesy: https://stackoverflow.com/a/3177838/1845153
     11 *
     12 * Converts unix seconds into human readable time.
     13 * Looks like exact javascript convert of WordPress's human_time_diff, except this always compares from current time, instead of getting two arguments.
     14 *
     15 * @param {int} date Unix timestamp date to compare from
     16 *
     17 * @returns {string} Human readable time ago
     18 */
     19const timeSince = ( date ) => {
     20
     21    const seconds = Math.floor( (new Date() / 1000 ) - date );
     22
     23    let interval = Math.floor(seconds / 31536000);
     24
     25    if (interval > 1) {
     26        return interval + " years";
     27    }
     28    interval = Math.floor(seconds / 2592000);
     29    if (interval > 1) {
     30        return interval + " months";
     31    }
     32    interval = Math.floor(seconds / 86400);
     33    if (interval > 1) {
     34        return interval + " days";
     35    }
     36    interval = Math.floor(seconds / 3600);
     37    if (interval > 1) {
     38        return interval + " hours";
     39    }
     40    interval = Math.floor(seconds / 60);
     41    if (interval > 1) {
     42        return interval + " minutes";
     43    }
     44    return Math.floor(seconds) + " seconds";
     45};
     46
     47/**
     48 * Custom render function for lastUpdatedColumn. Will display X time ago instead of unix timestamp
     49 */
     50const renderHumanizeTime = ( time ) => {
     51    return timeSince( time ) + " ago";
     52};
     53
     54
    955ReactDOM.render(
    1056    <FilterableTable
    1157        initialSortField = { wpcApplicationTracker.initialSortField }
    1258        columns          = { wpcApplicationTracker.displayColumns }
     59        customRender     = {
     60            {
     61                lastUpdate: renderHumanizeTime
     62            }
     63        }
    1364    />,
    1465    document.getElementById( 'wpc-application-tracker' )
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt/wcpt-event/tracker.php

    r7841 r7976  
    1515 */
    1616function render_status_shortcode() {
    17     return '<div id="wpc-application-tracker">Loading Application Tracker...</div>';
     17    return '<div id="wpc-application-tracker">Loading WordCamp Application Tracker...</div>';
    1818}
    1919
     
    7070            'milestone'  => $milestones[ $post->post_status ],
    7171            'status'     => $statuses[ $post->post_status ],
    72             'lastUpdate' => human_time_diff( time(), $last_update_timestamp ) . ' ago',
     72            'lastUpdate' => $last_update_timestamp,
    7373        );
    7474    }
Note: See TracChangeset for help on using the changeset viewer.