Merge branch 'main' of https://github.com/jschnapper/forecasts

Author: jschnapper

app/javascript/packs/application.js

@@ -17,6 +17,30 @@ document.addEventListener("turbolinks:load", () => {
   /*****************************************
    ********* submit_forecasts start ********
    *****************************************/
+   const checkStorageForForecast = () => {
+    let member = document.querySelector("#forecast-form #member-emails")
+    let forecastForm = document.getElementById("forecast-form")
+    if (forecastForm && member) {
+      let inputs = forecastForm.elements
+      let storedValues = JSON.parse(localStorage.getItem(`${member.value};${forecastForm.dataset.date}`))
+      if (storedValues) {
+        for (let i = 0; i < inputs.length; i++) {
+          if (inputs[i].name && 
+            inputs[i].name.toLowerCase() != "authenticity_token" &&
+            inputs[i].name.toLowerCase() != "member_forecast[team_monthly_forecast_id]" &&
+            inputs[i].name.toLowerCase() != "member_forecast[member_id]") {
+            if (storedValues[inputs[i].name]) {
+              inputs[i].value = storedValues[inputs[i].name]
+            }
+          }
+        }
+        return true
+      } else {
+        return false
+      }
+    }
+  }
+
   // Handle changing form content based on selected team
   const userDetailsForm = document.getElementById("forecast-user-details-form")
   const userDetailsFormTeamField = document.querySelector("#forecast-user-details-form #user-details-team-id")
@@ -32,8 +56,8 @@ document.addEventListener("turbolinks:load", () => {
   if (userDetailsForm) {
     userDetailsForm.addEventListener("ajax:success", () => {
       bindMemberChangeHandler()
+      checkStorageForForecast()
       countHours()
-
     })
     userDetailsForm.addEventListener("ajax:error", () => {
       location.reload()
@@ -59,6 +83,24 @@ document.addEventListener("turbolinks:load", () => {
         if (formButton) {
           formButton.disabled = false
         }
+        // if false, clear inputs because member changed
+        if (!checkStorageForForecast()) {
+          let forecastForm = document.getElementById("forecast-form")
+          let inputs = forecastForm.elements
+          for (let i = 0; i < inputs.length; i++) {
+            if (inputs[i].name && 
+              inputs[i].name.toLowerCase() != "authenticity_token" && 
+              inputs[i].name.toLowerCase() != "member_forecast[team_monthly_forecast_id]" &&
+              inputs[i].name.toLowerCase() != "member_forecast[member_id]") {
+                // don't clear holiday
+              if (inputs[i].dataset.holiday) {
+                inputs[i].value = inputs[i].dataset.holiday
+              } else if (inputs[i].name) {
+                inputs[i].value = ""
+              }
+            }
+          }
+        }
       })
     }  
   }
@@ -94,8 +136,62 @@ document.addEventListener("turbolinks:load", () => {
       currentHours.classList.remove("text-green-600", "font-bold")
     }
   }
+  const submitForecastButton = document.querySelector("#forecast-form #forecast-submit")
+
+  // Store the submission locally
+  if (submitForecastButton) {
+    submitForecastButton.addEventListener('click', (e) => {
+      let forecastForm = document.getElementById("forecast-form")
+      if (forecastForm) {
+        let inputs = forecastForm.elements
+        let memberId = document.querySelector("#forecast-form #member-emails").value
+        let submission = {}
+        for (let i = 0; i < inputs.length; i++) {
+          if (inputs[i].name && 
+            inputs[i].name.toLowerCase() != "authenticity_token" && 
+            inputs[i].name.toLowerCase() != "member_forecast[team_monthly_forecast_id]" &&
+            inputs[i].name.toLowerCase() != "member_forecast[member_id]") {
+            submission[inputs[i].name] = inputs[i].value
+          }
+        }
+        try {
+          localStorage.setItem(`${memberId};${forecastForm.dataset.date}`, JSON.stringify(submission));
+        } catch (e) {
+          if ((
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            (storage && storage.length !== 0)) {
+              let keys = []
+              for ( let i = 0; i < localStorage.length; ++i ) {
+                keys.append(localStorage.key(i));
+              }
+              // remove last 4 submissions and store again
+              let sorted = keys.sort()
+              for (let i = 0; sorted[i] && i < 4; i++) {
+                localStorage.removeItem(sorted[i])
+              }
+              localStorage.setItem(`${memberId};${forecastForm.dataset.date}`, JSON.stringify(submission));
+            }
+        }
+      }
+    })
+  }
+
+  // Whenver form present and page reloads, check storage
+  let forecastForm = document.getElementById("forecast-form")
+  if (forecastForm) {
+    checkStorageForForecast()
+    countHours()
+  }
 
-  countHours()
   /***************************************
    ********* submit_forecasts end ********
    ***************************************/

app/views/submit_forecasts/_form.html.erb

@@ -1,6 +1,6 @@
 <div id="member-email" class="text-gray-500 mb-2"><%= @member&.email%></div>
 <div>There are <span class="expected-hours"><b><%= @team_monthly_forecast&.monthly_forecast&.total_hours %></b></span> hours this month.</div>
-<%= form_with model: member_forecast, url: create_forecast_path, method: :post, id: "forecast-form" do |form| %>
+<%= form_with model: member_forecast, url: create_forecast_path, method: :post, id: "forecast-form", data: { date:  @team_monthly_forecast&.date&.strftime("%Y-%m")} do |form| %>
   <% if team_monthly_forecast.present? %>
     <%= hidden_field_tag :team_monthly_forecast_id, team_monthly_forecast.id, id: "team-monthly-forecast-id", name: "member_forecast[team_monthly_forecast_id]", required: true %>
   <% else %>
@@ -39,7 +39,11 @@
                 <%= form.label team_field.field.name, team_field.field.name, class: "text-gray-700 whitespace-nowrap" %>
               </td>
               <td class="align-middle">
-                <%= form.number_field :hours, step: 1, min: 0, name: "member_forecast[hours[#{team_field.field.id}]]", value: @member_forecast&.hours&.fetch(team_field.field.id.to_s, nil),  class: "hour-input block w-full rounded-md border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", value: @team_monthly_forecast.monthly_forecast.holiday_hours, required: true %>
+                <%= form.number_field :hours, step: 1, min: 0, name: "member_forecast[hours[#{team_field.field.id}]]", 
+                  value: @member_forecast&.hours&.fetch(team_field.field.id.to_s, nil) || @team_monthly_forecast.monthly_forecast.holiday_hours, 
+                  class: "hour-input block w-full rounded-md border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", 
+                  data: { holiday: @team_monthly_forecast.monthly_forecast.holiday_hours },
+                  required: true %>
               </td>
             </tr>
             <tr>

app/views/submit_forecasts/form_ajax.js.erb

@@ -6,6 +6,8 @@ document.getElementById("forecast-form-container").innerHTML = "<%= j render "fo
 document.querySelector("#forecast-form-container #member-emails").innerHTML = "<%= j select_tag "member-id", options_from_collection_for_select(@members&.sort_by { |member| member&.email&.downcase } || [], :id, :email, @member&.id), { prompt: "select email", id: "member-emails", required: true } %>"
 <%# Clear email under header %>
 document.querySelector("#member-email").innerText = null
+<%# Add date %>
+document.querySelector("#forecast-form-container #forecast-form").dataset.date = "<%= team_monthly_forecast&.date&.strftime("%Y-%m") %>"
 
 history.pushState(
   { 'team': '<%= team&.slug %>' },