Merge pull request #590 from ProgressPlanner/filip/v18/set-date-format

New task provider: Set the date format

Author: ilicfilip

CHANGELOG.md

@@ -1,6 +1,10 @@
 
 = 1.8.0 =
 
+Added these recommendations from Ravi:
+
+* Set date format.
+
 Enhancements:
 
 * Redesign of the admin pages.

assets/css/page-widgets/suggested-tasks.css

@@ -192,6 +192,7 @@
 		&:not(.prpl-column-content) {
 			display: flex;
 			flex-direction: column;
+			padding-top: 3px; /* To prevent custom radio and checkbox from being cut off. */
 		}
 
 		/* Inputs. */
@@ -427,4 +428,15 @@
 
 		}
 	}
+
+	/* Set the date format. */
+	&#prpl-popover-set-date-format {
+
+		.prpl-radio-wrapper {
+
+			.date-time-text {
+				min-width: 10rem;
+			}
+		}
+	}
 }

assets/js/recommendations/set-date-format.js

@@ -0,0 +1,115 @@
+/* global prplInteractiveTaskFormListener, prplDocumentReady, progressPlanner */
+
+/*
+ * Set the site date format.
+ *
+ * Dependencies: progress-planner/recommendations/interactive-task
+ */
+
+prplInteractiveTaskFormListener.customSubmit( {
+	taskId: 'set-date-format',
+	popoverId: 'prpl-popover-set-date-format',
+	callback: () => {
+		const format = document.querySelector(
+			'#prpl-popover-set-date-format input[name="date_format"]:checked'
+		);
+		const customFormat = document.querySelector(
+			'#prpl-popover-set-date-format input[name="date_format_custom"]'
+		);
+
+		fetch( progressPlanner.ajaxUrl, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/x-www-form-urlencoded',
+			},
+			body: new URLSearchParams( {
+				action: 'prpl_interactive_task_submit_set-date-format',
+				nonce: progressPlanner.nonce,
+				date_format: format.value,
+				date_format_custom: customFormat.value,
+			} ),
+		} );
+	},
+} );
+
+prplDocumentReady( () => {
+	// Handle date format radio button clicks
+	document
+		.querySelectorAll(
+			'#prpl-popover-set-date-format input[name="date_format"]'
+		)
+		.forEach( function ( input ) {
+			input.addEventListener( 'click', function () {
+				if ( 'date_format_custom_radio' !== this.id ) {
+					const customInput = document.querySelector(
+						'#prpl-popover-set-date-format input[name="date_format_custom"]'
+					);
+					const fieldset = customInput.closest( 'fieldset' );
+					const exampleElement = fieldset.querySelector( '.example' );
+					const formatText =
+						this.parentElement.querySelector(
+							'.format-i18n'
+						).textContent;
+
+					customInput.value = this.value;
+					exampleElement.textContent = formatText;
+				}
+			} );
+		} );
+
+	// Handle custom date format input
+	const customDateInput = document.querySelector(
+		'input[name="date_format_custom"]'
+	);
+
+	customDateInput.addEventListener( 'click', function () {
+		document.getElementById( 'date_format_custom_radio' ).checked = true;
+	} );
+
+	customDateInput.addEventListener( 'input', function () {
+		document.getElementById( 'date_format_custom_radio' ).checked = true;
+
+		const format = this;
+		const fieldset = format.closest( 'fieldset' );
+		const example = fieldset.querySelector( '.example' );
+
+		// Debounce the event callback while users are typing.
+		clearTimeout( format.dataset.timer );
+		format.dataset.timer = setTimeout( function () {
+			// If custom date is not empty.
+			if ( format.value ) {
+				// Find the spinner element within the fieldset
+				const spinner = fieldset.querySelector( '.spinner' );
+				if ( spinner ) {
+					spinner.classList.add( 'is-active' );
+				}
+
+				// Use fetch instead of $.post
+				fetch( progressPlanner.ajaxUrl, {
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/x-www-form-urlencoded',
+					},
+					body: new URLSearchParams( {
+						action: 'date_format',
+						date: format.value,
+					} ),
+				} )
+					.then( function ( response ) {
+						return response.text();
+					} )
+					.then( function ( data ) {
+						example.textContent = data;
+					} )
+					.catch( function ( error ) {
+						console.error( 'Error:', error );
+					} )
+					.finally( function () {
+						if ( spinner ) {
+							spinner.classList.remove( 'is-active' );
+						}
+					} );
+			}
+		}, 500 );
+	} );
+} );

classes/suggested-tasks/class-tasks-manager.php

@@ -35,6 +35,7 @@
 use Progress_Planner\Suggested_Tasks\Providers\Unpublished_Content;
 use Progress_Planner\Suggested_Tasks\Providers\Collaborator;
 use Progress_Planner\Suggested_Tasks\Providers\Select_Timezone;
+use Progress_Planner\Suggested_Tasks\Providers\Set_Date_Format;
 
 /**
  * Tasks_Manager class.
@@ -80,6 +81,7 @@ public function __construct() {
 			new Unpublished_Content(),
 			new Collaborator(),
 			new Select_Timezone(),
+			new Set_Date_Format(),
 		];
 
 		// Add the plugin integration.

classes/suggested-tasks/providers/class-select-timezone.php

@@ -8,7 +8,7 @@
 namespace Progress_Planner\Suggested_Tasks\Providers;
 
 /**
- * Add task to select the site locale.
+ * Add task to select the site timezone.
  */
 class Select_Timezone extends Tasks_Interactive {