From bc5c791ccb4f255e07be140a2df1c8ea1b8b75ba Mon Sep 17 00:00:00 2001 From: Stone Filipczak Date: Wed, 2 Oct 2024 16:21:53 -0400 Subject: [PATCH 01/42] vanilla js character count --- app/javascript/evaluation_form.js | 5 +++++ app/views/evaluation_forms/_form.html.erb | 8 ++++++-- app/views/layouts/application.html.erb | 2 ++ 3 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 app/javascript/evaluation_form.js diff --git a/app/javascript/evaluation_form.js b/app/javascript/evaluation_form.js new file mode 100644 index 00000000..b8a635f4 --- /dev/null +++ b/app/javascript/evaluation_form.js @@ -0,0 +1,5 @@ +document.addEventListener("DOMContentLoaded", function () { + document.getElementById("evaluation_form_instructions").addEventListener("input", (e ) => { + document.getElementById("character_counter").innerHTML = 3000 - e.target.value.length + }) +}) \ No newline at end of file diff --git a/app/views/evaluation_forms/_form.html.erb b/app/views/evaluation_forms/_form.html.erb index 424827ba..84a5abaa 100644 --- a/app/views/evaluation_forms/_form.html.erb +++ b/app/views/evaluation_forms/_form.html.erb @@ -1,3 +1,6 @@ +<% content_for :head do %> + <%= javascript_include_tag('evaluation_form') %> +<% end %> <%= form_with(model: evaluation_form) do |form| %> <% if evaluation_form.errors.any? %>
@@ -35,8 +38,9 @@
<%= form.label :instructions, style: "display: block" %> - <%= form.text_field :instructions %> + <%= form.text_area :instructions, style: "height: 150px;" %>
+ 3000 Characters Allowed

  • Evaluation Criteria

    @@ -72,4 +76,4 @@
    <%= form.submit %>
    -<% end %> +<% end %> \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f1bea82c..63f02e12 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -19,6 +19,8 @@ <%= javascript_include_tag 'session_timeout' %> <% end %> + + <%= content_for :head %> From b9dd226aae2a1eec4cdace25748d3a73aa0d8739 Mon Sep 17 00:00:00 2001 From: Stone Filipczak Date: Thu, 3 Oct 2024 09:30:00 -0400 Subject: [PATCH 02/42] use uswds component for character count --- app/views/evaluation_forms/_form.html.erb | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/views/evaluation_forms/_form.html.erb b/app/views/evaluation_forms/_form.html.erb index 84a5abaa..2280492a 100644 --- a/app/views/evaluation_forms/_form.html.erb +++ b/app/views/evaluation_forms/_form.html.erb @@ -36,11 +36,14 @@ <%= form.text_field :challenge_id %>
    • -
    - <%= form.label :instructions, style: "display: block" %> - <%= form.text_area :instructions, style: "height: 150px;" %> +
    +
    + <%= form.label :instructions, class: "usa-label" %> + <%= form.text_area :instructions, class: "usa-textarea usa-character-count__field", maxlength: 3000, rows: "7" %> +
    + You can enter up to 3000 characters
    - 3000 Characters Allowed +

  • Evaluation Criteria

    From bd1848f1c447d4aa8b863fa5fa7627670df7bfd8 Mon Sep 17 00:00:00 2001 From: Stone Filipczak Date: Thu, 3 Oct 2024 15:01:17 -0400 Subject: [PATCH 03/42] install stimulus, remove previous --- app/javascript/application.js | 1 + app/javascript/controllers/application.js | 9 +++++++++ .../controllers/evaluation_form_controller.js | 8 ++++++++ app/javascript/controllers/hello_controller.js | 7 +++++++ app/javascript/controllers/index.js | 11 +++++++++++ app/javascript/evaluation_form.js | 5 ----- app/views/evaluation_forms/_form.html.erb | 5 +---- app/views/layouts/application.html.erb | 4 +--- package.json | 1 + yarn.lock | 5 +++++ 10 files changed, 44 insertions(+), 12 deletions(-) create mode 100644 app/javascript/controllers/application.js create mode 100644 app/javascript/controllers/evaluation_form_controller.js create mode 100644 app/javascript/controllers/hello_controller.js create mode 100644 app/javascript/controllers/index.js delete mode 100644 app/javascript/evaluation_form.js diff --git a/app/javascript/application.js b/app/javascript/application.js index e69de29b..25c2e08d 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -0,0 +1 @@ +import "./controllers" diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js new file mode 100644 index 00000000..1213e85c --- /dev/null +++ b/app/javascript/controllers/application.js @@ -0,0 +1,9 @@ +import { Application } from "@hotwired/stimulus" + +const application = Application.start() + +// Configure Stimulus development experience +application.debug = false +window.Stimulus = application + +export { application } diff --git a/app/javascript/controllers/evaluation_form_controller.js b/app/javascript/controllers/evaluation_form_controller.js new file mode 100644 index 00000000..117a0237 --- /dev/null +++ b/app/javascript/controllers/evaluation_form_controller.js @@ -0,0 +1,8 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="evaluation-form" +export default class extends Controller { + connect() { + console.log("hello") + } +} diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js new file mode 100644 index 00000000..3ceaa3b7 --- /dev/null +++ b/app/javascript/controllers/hello_controller.js @@ -0,0 +1,7 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + connect() { + console.log("Hello World!") + } +} diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js new file mode 100644 index 00000000..99dab5be --- /dev/null +++ b/app/javascript/controllers/index.js @@ -0,0 +1,11 @@ +// This file is auto-generated by ./bin/rails stimulus:manifest:update +// Run that command whenever you add a new controller or create them with +// ./bin/rails generate stimulus controllerName + +import { application } from "./application" + +import EvaluationFormController from "./evaluation_form_controller" +application.register("evaluation-form", EvaluationFormController) + +import HelloController from "./hello_controller" +application.register("hello", HelloController) diff --git a/app/javascript/evaluation_form.js b/app/javascript/evaluation_form.js deleted file mode 100644 index b8a635f4..00000000 --- a/app/javascript/evaluation_form.js +++ /dev/null @@ -1,5 +0,0 @@ -document.addEventListener("DOMContentLoaded", function () { - document.getElementById("evaluation_form_instructions").addEventListener("input", (e ) => { - document.getElementById("character_counter").innerHTML = 3000 - e.target.value.length - }) -}) \ No newline at end of file diff --git a/app/views/evaluation_forms/_form.html.erb b/app/views/evaluation_forms/_form.html.erb index 2280492a..0934e770 100644 --- a/app/views/evaluation_forms/_form.html.erb +++ b/app/views/evaluation_forms/_form.html.erb @@ -1,7 +1,4 @@ -<% content_for :head do %> - <%= javascript_include_tag('evaluation_form') %> -<% end %> -<%= form_with(model: evaluation_form) do |form| %> +<%= form_with(model: evaluation_form, data: { controller: "evaluation-form" }) do |form| %> <% if evaluation_form.errors.any? %>

    <%= pluralize(evaluation_form.errors.count, "error") %> prohibited this evaluation form from being saved:

    diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 63f02e12..c7908dc6 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -8,7 +8,7 @@ <%= stylesheet_link_tag "styles" %> <%= stylesheet_link_tag "application" %> - <%= javascript_include_tag 'application' %> + <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> <% if logged_in? %>