Changeset 3814

Timestamp:

08/16/2016 04:28:32 PM (10 years ago)

Author:

iandunn

Message:

WordCamp Post Type: Convert [application-status] to a React-based table.

This adds the ability to search and sort the data, and lays the groundwork for adding meetups to the table.

Location:

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt

Files:

• applications/tracker.php (modified) (6 diffs)
• javascript/tracker (added)
• javascript/tracker/build (added)
• javascript/tracker/build/tracker.min.css (added)
• javascript/tracker/build/tracker.min.js (added)
• javascript/tracker/source (added)
• javascript/tracker/source/components (added)
• javascript/tracker/source/components/filterable-table (added)
• javascript/tracker/source/components/filterable-table/filterable-table.jsx (added)
• javascript/tracker/source/components/filterable-table/header-cell.jsx (added)
• javascript/tracker/source/components/filterable-table/header.jsx (added)
• javascript/tracker/source/components/filterable-table/row.jsx (added)
• javascript/tracker/source/components/filterable-table/style.scss (added)
• javascript/tracker/source/components/filterable-table/table.jsx (added)
• javascript/tracker/source/components/search-field (added)
• javascript/tracker/source/components/search-field/search-field.jsx (added)
• javascript/tracker/source/components/sorting-indicator (added)
• javascript/tracker/source/components/sorting-indicator/sorting-indicator.jsx (added)
• javascript/tracker/source/components/sorting-indicator/style.scss (added)
• javascript/tracker/source/stores (added)
• javascript/tracker/source/stores/table-store.js (added)
• javascript/tracker/source/style.scss (added)
• javascript/tracker/source/tracker.jsx (added)
• package.json (added)
• views/applications/tracker/shortcode-application-tracker.php (deleted)
• webpack.config.js (added)

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt/applications/tracker.php

@@ -2 +2 @@
 
 namespace WordPress_Community\Applications\Tracker;
+use \WordCamp_Loader;
 defined( 'WPINC' ) or die();
 
 const SHORTCODE_SLUG = 'application-tracker';
 
-add_shortcode( SHORTCODE_SLUG, __NAMESPACE__ . '\render_status_shortcode' );
-add_action( 'wp_print_styles', __NAMESPACE__ . '\print_shortcode_styles'  );
+add_shortcode( SHORTCODE_SLUG,    __NAMESPACE__ . '\render_status_shortcode' );
+add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_scripts'         );
 
 /**
@@ -13 +14 @@
  */
 function render_status_shortcode() {
-        $statuses   = \WordCamp_Loader::get_post_statuses();
-        $milestones = \WordCamp_Loader::map_statuses_to_milestones();
-        $posts      = get_active_wordcamps( $statuses );
-
-        ob_start();
-
-        require_once( dirname( __DIR__ ) . '/wcpt-wordcamp/wordcamp-admin.php'                             );
-        require(      dirname( __DIR__ ) . '/views/applications/tracker/shortcode-application-tracker.php' );
-
-        return ob_get_clean();
+        return '<div id="wpc-application-tracker">Loading Application Tracker...</div>';
 }
 
@@ -28 +20 @@
  * Get camps that are active enough to be shown on the tracker
  *
- * @param array $statuses
- *
  * @return array
  */
-function get_active_wordcamps( $statuses ) {
+function get_active_wordcamps() {
+        $wordcamps          = array();
+        $statuses           = WordCamp_Loader::get_post_statuses();
+        $milestones         = WordCamp_Loader::map_statuses_to_milestones();
         $inactive_timestamp = strtotime( '60 days ago' );
 
@@ -39 +32 @@
         $shown_statuses = array_keys( $shown_statuses );
 
-        $wordcamps = get_posts( array(
+        $raw_posts = get_posts( array(
                 'post_type'      => WCPT_POST_TYPE_ID,
                 'post_status'    => $shown_statuses,
@@ -47 +40 @@
         ) );
 
-        foreach ( $wordcamps as $key => $wordcamp ) {
-                $wordcamp->last_update_timestamp = get_last_update_timestamp( $wordcamp->ID );
+        foreach ( $raw_posts as $key => $post ) {
+                $last_update_timestamp = get_last_update_timestamp( $post->ID );
 
-                if ( $wordcamp->last_update_timestamp <= $inactive_timestamp ) {
-                        unset( $wordcamps[ $key ] );
+                if ( $last_update_timestamp <= $inactive_timestamp ) {
+                        continue;
                 }
 
-                $wordcamp->url = filter_var( get_post_meta( $wordcamp->ID, 'URL', true ), FILTER_VALIDATE_URL );
+                $wordcamps[] = array(
+                        'city'       => $post->post_title,
+                        'cityUrl'    => filter_var( get_post_meta( $post->ID, 'URL', true ), FILTER_VALIDATE_URL ),
+                        'applicant'  => get_post_meta( $post->ID, 'Organizer Name', true ),
+                        'milestone'  => $milestones[ $post->post_status ],
+                        'status'     => $statuses[ $post->post_status ],
+                        'lastUpdate' => human_time_diff( time(), $last_update_timestamp ) . ' ago',
+                );
         }
 
@@ -80 +80 @@
 
 /**
- * Print CSS styles for the [application-tracker] shortcode.
+ * Enqueue scripts and styles
  */
-function print_shortcode_styles() {
+function enqueue_scripts() {
         global $post;
 
-        if ( empty( $post->post_content ) || ! has_shortcode( $post->post_content, SHORTCODE_SLUG ) ) {
+        wp_register_script(
+                'wpc-application-tracker',
+                plugins_url( 'javascript/tracker/build/tracker.min.js', dirname( __FILE__ ) ),
+                array(),
+                1,
+                true
+        );
+
+        wp_register_style(
+                'wpc-application-tracker',
+                plugins_url( 'javascript/tracker/build/tracker.min.css', dirname( __FILE__ ) ),
+                array( 'dashicons', 'list-tables' ),
+                1
+        );
+
+        if ( ! is_a( $post, 'WP_POST' ) || ! has_shortcode( $post->post_content, SHORTCODE_SLUG ) ) {
                 return;
         }
-        
-        ?>
 
-        <style type="text/css">
-                .application-tracker.striped > tbody > :nth-child( odd ) {
-                        background-color: #f9f9f9;
-                }
+        wp_enqueue_script( 'wpc-application-tracker' );
 
-                /* Show extra data on large screens */
-                .application-tracker .milestone,
-                .application-tracker .applicant {
-                        display: none;
-                }
+        wp_localize_script(
+                'wpc-application-tracker',
+                'wpcApplicationTracker',
+                array(
+                        'applications'     => get_active_wordcamps(),
+                        'displayColumns'   => get_display_columns(),
+                        'initialSortField' => 'city',
+                )
+        );
 
-                @media screen and ( min-width: 750px ) {
-                        .application-tracker .applicant {
-                                display: table-cell;
-                        }
-                }
+        wp_enqueue_style( 'wpc-application-tracker' );
+}
 
-                @media screen and ( min-width: 850px ) {
-                        .application-tracker .milestone {
-                                display: table-cell;
-                        }
-                }
-        </style>
-
-        <?php
+/**
+ * Get the columns headers
+ *
+ * @return array
+ */
+function get_display_columns() {
+        return array(
+                'city'       => 'City',
+                'applicant'  => 'Applicant',
+                'milestone'  => 'Milestone',
+                'status'     => 'Status',
+                'lastUpdate' => 'Updated',
+        );
 }