Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue 1500 conference validation #1512

Merged
merged 6 commits into from
Sep 16, 2024
Merged

Conversation

gkovats
Copy link
Collaborator

@gkovats gkovats commented Sep 11, 2024

For issue #1500 :
The current form has 1 variable to track valid state for the whole form based on formatted_date, so tracking a second field meant tracking state per field. Also just built a $fields object to get all the field selectors up front. Didn't know how far this would go.

  • conference_url field state now tracked separately, and validated on page load, so meetings with currently bad Zoom urls will either throw an error / highlight the field and disable publish, or automatically correct the url format.
  • moved one formatted_address field error state to this new method, "In person meetings must have a specific address"
  • kept language for error messages in PHP so they can use gettext translation.

Testing:

  • load main branch, and add a poorly formatted zoom url, then switch to this branch and load the meeting. The Zoom url should get validated immediately - if bad, will error and block publishing. If close, will get corrected and message will say "Url was cleaned up.."
  • Updated pointers for Open / Closed checks, so make sure you can't click both types
  • Test the validation on Formatted address:
    • When online meeting, a full address should show the message "Full addresses will trigger meeting is closed message"
    • When in person meeting, an approximate address should throw an error "must have a full address for in person meetings" and block publishing

@@ -98,6 +98,17 @@
}
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

used <small> tags to follow input fields for immediate error messaging.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 thanks for using the same color of red we use in other places - maybe eventually we can use css vars for it

</small>
<small class="warning_message" data-message="2">
<?php _e('Warning: Unable to process this address for exact location.', '12-step-meeting-list') ?>
</small>
Copy link
Collaborator Author

@gkovats gkovats Sep 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this error state to capture when we get an error from the geocoding call. I figured it was worth displaying, but you may know reasons why this isn't useful - maybe frequent errors?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no this is great - we can now cross this requirement off our refactor geocoding ticket

"scripts": {
"start": "npx mix watch",
"build": "npx mix --production"
},
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just added npm start as a shortcut for mix watch. I'm lazy.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sounds good - we can make make this standard in other places too

@@ -60,26 +60,86 @@ jQuery(function ($) {
//make sure geocoding is finished (basic form validation)
var form_valid = true;

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, this is where I went nuts. Made an object to track all the fields, then a small jQuery function to track / attach "state" to each field, and an upper formstate check, so formatted_address and conference_url (and other fields) could have issues independently.

pendingFields.push($fields[field][0])
}
});
form_valid = !pendingFields.length;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

later, we could use pendingFields as an array of DOM elements for hyperlinks, to anchor link users to in some top message. "The following fields need attention: ...."

});
$('input#conference_phone').change(function () {
$('input#formatted_address').change();

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zoom error and cleanup logic

@gkovats gkovats requested a review from joshreisner September 11, 2024 00:38
including demo url in case format failure isn't clear
@kiyote33 kiyote33 self-requested a review September 11, 2024 12:51
Copy link
Collaborator

@kiyote33 kiyote33 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job George. Like the radio button effect on the open/close. Nice touch. Everything worked as described in your prep notes. One little thing with the Full Address warning. Shouldn't that be an error instead of warning? You can't really proceed until you fix. Other than that, I think it's good to go.

@joshreisner
Copy link
Contributor

i'm really looking forward to reviewing this after NAATW, thanks @gkovats !

@gkovats
Copy link
Collaborator Author

gkovats commented Sep 12, 2024

Just a heads up, if you're ever waiting on me to merge a PR, let me know - I won't unless asked. Not my codebase, still new.

@gkovats
Copy link
Collaborator Author

gkovats commented Sep 12, 2024

@kiyote33 Thanks, I missed that - it was previously an error, but I didn't treat it as such. Just updated in the latest commit.
image

Copy link
Contributor

@joshreisner joshreisner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

works great, and thanks for rebuilding the strings

the only problem i had while testing was my old js and css assets were cached, which meant that i saw the error messages on the screen as black text flush left on the page

i am 99% sure that when this gets released our TSML_VERSION bump will bust the cache but it's just something to keep an eye on when this goes out

@@ -98,6 +98,17 @@
}
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 thanks for using the same color of red we use in other places - maybe eventually we can use css vars for it

</small>
<small class="warning_message" data-message="2">
<?php _e('Warning: Unable to process this address for exact location.', '12-step-meeting-list') ?>
</small>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no this is great - we can now cross this requirement off our refactor geocoding ticket

"scripts": {
"start": "npx mix watch",
"build": "npx mix --production"
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sounds good - we can make make this standard in other places too

@joshreisner joshreisner merged commit 7497aa8 into main Sep 16, 2024
@joshreisner joshreisner deleted the issue-1500-conference-validation branch September 16, 2024 14:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants