Date range selector for Reader interfaces.

See #376.

Controllers/PF_Loops.php

@@ -82,6 +82,7 @@ public static function archive_feed_to_display( $args = array() ) {
 				'exclude_archived' => false,
 				'count_total'      => false,
 				'orderby'          => '',
+				'date_query'       => null,
 			),
 			$args
 		);
@@ -123,6 +124,10 @@ public static function archive_feed_to_display( $args = array() ) {
 			'offset'         => $r['start'],
 		);
 
+		if ( $r['date_query'] ) {
+			$post_args['date_query'] = $r['date_query'];
+		}
+
 		if ( empty( $post_args['orderby'] ) ) {
 			$post_args['orderby'] = [ 'meta_value' => 'DESC' ];
 		}

Core/Admin/AllContent.php

@@ -183,6 +183,23 @@ public function display_reader_builder() {
 					}
 				}
 
+				$date_range_start = isset( $_GET['date-range-start'] ) ? sanitize_text_field( wp_unslash( $_GET['date-range-start'] ) ) : '';
+				$date_range_end   = isset( $_GET['date-range-end'] ) ? sanitize_text_field( wp_unslash( $_GET['date-range-end'] ) ) : '';
+
+				if ( $date_range_start || $date_range_end ) {
+					$date_query = [];
+
+					if ( $date_range_start ) {
+						$date_query['after'] = $date_range_start;
+					}
+
+					if ( $date_range_end ) {
+						$date_query['before'] = $date_range_end;
+					}
+
+					$archive_feed_args['date_query'] = $date_query;
+				}
+
 				$items_to_display = pressforward( 'controller.loops' )->archive_feed_to_display( $archive_feed_args );
 				foreach ( $items_to_display['items'] as $item ) {
 					pressforward( 'admin.templates' )->form_of_an_item( $item, $index );

Core/Admin/Nominated.php

@@ -350,6 +350,23 @@ public function display_review_builder() {
 						$nom_args['post_parent__in'] = $parents_in_folder->posts;
 					}
 
+					$date_range_start = isset( $_GET['date-range-start'] ) ? sanitize_text_field( wp_unslash( $_GET['date-range-start'] ) ) : '';
+					$date_range_end   = isset( $_GET['date-range-end'] ) ? sanitize_text_field( wp_unslash( $_GET['date-range-end'] ) ) : '';
+
+					if ( $date_range_start || $date_range_end ) {
+						$date_query = [];
+
+						if ( $date_range_start ) {
+							$date_query['after'] = $date_range_start;
+						}
+
+						if ( $date_range_end ) {
+							$date_query['before'] = $date_range_end;
+						}
+
+						$nom_args['date_query'] = $date_query;
+					}
+
 					$nom_query = new WP_Query( $nom_args );
 
 					$count        = 0;

Core/Admin/PFTemplater.php

@@ -325,6 +325,9 @@ public function search_template() {
 	 * @param string $page Page name.
 	 */
 	public function nav_bar( $page = 'pf-all-content' ) {
+		$date_range_start = isset( $_GET['date-range-start'] ) ? sanitize_text_field( wp_unslash( $_GET['date-range-start'] ) ) : '';
+		$date_range_end   = isset( $_GET['date-range-end'] ) ? sanitize_text_field( wp_unslash( $_GET['date-range-end'] ) ) : '';
+
 		?>
 		<div class="display">
 			<div class="pf-btns btn-toolbar">
@@ -377,6 +380,7 @@ public function nav_bar( $page = 'pf-all-content' ) {
 							$this->dropdown_option( __( 'My nominations', 'pressforward' ), 'showMyNominations' );
 							$this->dropdown_option( __( 'Unread', 'pressforward' ), 'showUnread' );
 							$this->dropdown_option( __( 'Drafted', 'pressforward' ), 'showDrafted' );
+							$this->dropdown_option( __( 'Date', 'pressforward' ), 'showDate' );
 						} else {
 							if ( isset( $_POST['search-terms'] ) || isset( $_GET['by'] ) || isset( $_GET['pf-see'] ) || isset( $_GET['reveal'] ) ) {
 								$this->dropdown_option( __( 'Reset filter', 'pressforward' ), 'showNormalNominations' );
@@ -417,6 +421,21 @@ public function nav_bar( $page = 'pf-all-content' ) {
 						</ul>
 					</div>
 
+					<div class="pf-daterange-selector btn-group" role="group">
+						<button id="date-range-button" class="btn btn-small" aria-label="<?php esc_attr_e( 'Click to select date range', 'pressforward' ); ?>">
+							<i class="dashicons dashicons-calendar"></i>
+							<span class="date-range-text"><?php esc_html_e( 'All Dates', 'pressforward' ); ?></span>
+						</button>
+
+						<div id="date-range-options" class="date-range-options">
+							<label for="date-range-start"><?php esc_html_e( 'Start', 'pressforward' ); ?></label> <input type="date" id="date-range-start" class="date-range-start" name="date-range-start" value="<?php echo esc_attr( $date_range_start ); ?>" />
+
+							<label for="date-range-end"><?php esc_html_e( 'End', 'pressforward' ); ?></label> <input type="date" id="date-range-end" class="date-range-end" name="date-range-end" value="<?php echo esc_attr( $date_range_end ); ?>" />
+
+							<input type="button" class="btn btn-small date-range-submit" id="date-range-submit" class="btn btn-small" value="<?php esc_attr_e( 'Submit', 'pressforward' ); ?>" />
+						</div>
+					</div>
+
 					<div class="btn-group" role="group">
 						<a href="https://pressforwardadmin.gitbooks.io/pressforward-documentation/content/" target="_blank" id="pf-help" class="btn btn-small"><?php esc_html_e( 'Need help?', 'pressforward' ); ?></a>
 					</div>

assets/src/reader/reader.js

@@ -1,6 +1,6 @@
 /* global ajaxurl, jQuery, pf */
 
-import { __ } from '@wordpress/i18n'
+import { __, sprintf } from '@wordpress/i18n'
 
 import {
 	removeURLParameter,
@@ -262,6 +262,57 @@ jQuery(window).on('load', function () {
 		window.open("?page=pf-review", "_self")
 	});
 
+	jQuery( '.pf_container' ).on( 'click', '#date-range-button', function( evt ) {
+		evt.preventDefault();
+		jQuery( '#date-range-options' ).toggleClass( 'show' );
+	} );
+
+	jQuery( '.pf_container' ).on( 'click', '.date-range-submit', function( evt ) {
+		evt.preventDefault();
+
+		setDateRangeButtonText();
+
+		document.getElementById( 'date-range-options' ).classList.remove( 'show' );
+
+		const start = jQuery( '#date-range-start' ).val();
+		const end = jQuery( '#date-range-end' ).val();
+
+		const currentPageType = new URLSearchParams( window.location.search ).get( 'page' );
+
+		window.open( "?page=" + currentPageType + "&date-range-start=" + start + "&date-range-end=" + end, "_self" );
+	} );
+
+	const setDateRangeButtonText = () => {
+		const start = jQuery( '#date-range-start' ).val();
+		const end = jQuery( '#date-range-end' ).val();
+
+		const dateRangeButton = document.getElementById( 'date-range-button' );
+
+		if ( dateRangeButton ) {
+			const generateNewButtonText = ( startDate, endDate ) => {
+				if ( startDate && endDate ) {
+					// translators: %1$s is the start date, %2$s is the end date
+					return sprintf( __( '%1$s to %2$s', 'pressforward' ), startDate, endDate );
+				}
+
+				if ( startDate ) {
+					// translators: %1$s is the start date
+					return sprintf( __( 'Newer than %1$s', 'pressforward' ), startDate );
+				}
+
+				if ( endDate ) {
+					// translators: %1$s is the end date
+					return sprintf( __( 'Older than %1$s', 'pressforward' ), endDate );
+				}
+
+				return __( 'All Dates', 'pressforward' );
+			}
+
+			dateRangeButton.querySelector( '.date-range-text' ).textContent = generateNewButtonText( start, end );
+		}
+	}
+	setDateRangeButtonText();
+
 	jQuery('.pf_container').on('click', '.remove-nom-this-prompt', function (evt) {
 		evt.preventDefault();
 		jQuery('article.nominate-this-preview').remove();

assets/src/reader/reader.scss

@@ -227,6 +227,57 @@
 
 		}
 	}
+
+	.pf-daterange-selector {
+		position: relative;
+
+		button {
+			padding-left: 24px;
+			position: relative;
+
+			.dashicons.dashicons-calendar {
+				position: absolute;
+				font-size: 14px;
+				left: 2px;
+				top: 4px;
+			}
+		}
+	}
+
+	.date-range-options {
+		display: none;
+		background-color: #fff;
+		border: 1px solid rgba(0, 0, 0, 0.2);
+		border-radius: 6px;
+		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+		font-size: 14px;
+		padding: 8px;
+		position: absolute;
+		top: calc(100% + 2px);
+		left: 0;
+		width: 200px;
+		align-items: center;
+		grid-template-columns: auto 1fr;
+		gap: 8px;
+		z-index: 9999;
+
+		&.show {
+			display: grid;
+		}
+
+		label {
+			justify-self: end;
+		}
+
+		input[type="date"] {
+			width: 100%;
+		}
+
+		input.date-range-submit {
+			grid-column: span 2;
+			justify-self: start;
+		}
+	}
 }
 
 .tooltip {