From 51c817a102942b1e12c09a2a6888388dfb376078 Mon Sep 17 00:00:00 2001
From: Jon Wood <jon@blankpad.net>
Date: Sat, 18 May 2024 13:13:26 +0000
Subject: [PATCH] Allow role admins to edit their shift requirements

---
 apps/volunteer/choose_roles.py      | 13 ++++++
 css/volunteer_schedule.scss         | 62 ++++++++++++++++++++++-------
 js/main.js                          | 28 +++++++++++++
 templates/volunteer/role_admin.html | 23 ++++++++++-
 4 files changed, 110 insertions(+), 16 deletions(-)

diff --git a/apps/volunteer/choose_roles.py b/apps/volunteer/choose_roles.py
index b042d52ae..140934c17 100644
--- a/apps/volunteer/choose_roles.py
+++ b/apps/volunteer/choose_roles.py
@@ -235,6 +235,19 @@ def set_state(role_id: int, shift_id: int, user_id: int):
     return redirect(url_for(".role_admin", role_id=role_id))
 
 
+@volunteer.route("role/<int:role_id>/<int:shift_id>", methods=["POST"])
+@role_admin_required
+def update_shift(role_id: int, shift_id: int):
+    shift = Shift.query.get_or_404(shift_id)
+    shift.min_needed = int(request.form["min_needed"])
+    shift.max_needed = int(request.form["max_needed"])
+    db.session.add(shift)
+    db.session.commit()
+
+    flash("Shift requirements updated.")
+    return redirect(url_for(".role_admin", role_id=role_id, _anchor=f"shift-{shift.id}"))
+
+
 @volunteer.route("role/<int:role_id>/volunteers")
 @role_admin_required
 def role_volunteers(role_id):
diff --git a/css/volunteer_schedule.scss b/css/volunteer_schedule.scss
index ede4868e2..2f4170a6d 100644
--- a/css/volunteer_schedule.scss
+++ b/css/volunteer_schedule.scss
@@ -28,6 +28,42 @@ table.shifts-table tbody td.mobile-only {
   display: none;
 }
 
+.role-admin-shift {
+  .volunteer {
+    p {
+      margin-bottom: 0;
+    }
+
+    margin-bottom: 15px;
+  }
+
+  .volunteer:last-child {
+    margin-bottom: 0;
+  }
+
+  .overtime {
+    font-weight: bold;
+    color: $brand-2024-pink;
+  }
+
+  ul.shift-status {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      display: inline-block;
+    }
+
+    li::after {
+      content: " | ";
+    }
+
+    li:last-child::after {
+      content: none;
+    }
+  }
+}
+
 // Overrides for mobile.
 @media (max-width: 768px) {
   .nav-tabs.has-nav-select {
@@ -113,23 +149,19 @@ table.shifts-table tbody td.mobile-only {
       }
     }
   }
-}
-
-.role-admin-shift {
-  .volunteer {
-    p {
-      margin-bottom: 0;
-    }
 
-    margin-bottom: 15px;
-  }
+  .role-admin-shift {
+    ul.shift-status {
+      list-style: none;
+      padding-left: 0;
 
-  .volunteer:last-child {
-    margin-bottom: 0;
-  }
+      li {
+        display: inline-block;
+      }
 
-  .overtime {
-    font-weight: bold;
-    color: $brand-2024-pink;
+      li::after {
+        content: " ";
+      }
+    }
   }
 }
diff --git a/js/main.js b/js/main.js
index bcc68d483..c4a8464eb 100644
--- a/js/main.js
+++ b/js/main.js
@@ -135,4 +135,32 @@ $(() => {
       event.target.form.submit();
     })
   });
+
+  document.querySelectorAll('.shift-status').forEach((el) => {
+    el.classList.remove("hidden");
+  });
+
+  document.querySelectorAll('.shift-editor').forEach((el) => {
+    el.classList.add("hidden");
+  });
+
+  document.querySelectorAll('.shift-status-edit').forEach((el) => {
+    el.addEventListener('click', (event) => {
+      event.preventDefault();
+
+      let id = event.target.getAttribute('data-shift-id');
+      document.getElementById(`shift-editor-${id}`).classList.remove('hidden');
+      document.getElementById(`shift-status-${id}`).classList.add('hidden');
+    });
+  });
+
+  document.querySelectorAll('.shift-editor-cancel').forEach((el) => {
+    el.addEventListener('click', (event) => {
+      event.preventDefault();
+
+      let id = event.target.getAttribute('data-shift-id');
+      document.getElementById(`shift-editor-${id}`).classList.add('hidden');
+      document.getElementById(`shift-status-${id}`).classList.remove('hidden');
+    });
+  });
 });
diff --git a/templates/volunteer/role_admin.html b/templates/volunteer/role_admin.html
index 1adc18f9c..6f37fdbfa 100644
--- a/templates/volunteer/role_admin.html
+++ b/templates/volunteer/role_admin.html
@@ -51,7 +51,28 @@ <h3>Volunteers Due</h3>
   <h3>Upcoming Shifts</h3>
   {% for shift in shifts %}
     <div class="role-admin-shift well content-well">
-      <h4>{{ shift.start.strftime("%a %H:%M") }} - {{ shift.end.strftime("%H:%M") }} - {{ shift.venue.name }}</h4>
+      <h4 id="shift-{{ shift.id }}">{{ shift.start.strftime("%a %H:%M") }} - {{ shift.end.strftime("%H:%M") }} - {{ shift.venue.name }}</h4>
+      <form method="post" class="shift-editor" id="shift-editor-{{ shift.id }}" action="/volunteer/role/{{ shift.role_id }}/{{ shift.id }}">
+        <div class="form-group">
+          <label class="control-label" for="min_needed">Minimum Volunteers</label>
+          <input name="min_needed" type="number" class="form-control" value="{{ shift.min_needed }}">
+        </div>
+        <div class="form-group">
+          <label class="control-label" for="max_needed">Maximum Volunteers</label>
+          <input name="max_needed" type="number" class="form-control" value="{{ shift.max_needed }}">
+        </div>
+        <div class="form-group">
+          <button type="button" class="btn btn-danger shift-editor-cancel" data-shift-id="{{ shift.id }}">Cancel</button>
+          <button type="submit" class="btn btn-primary">Update</button>
+        </div>
+      </form>
+      <div class="clearfix"></div>
+      <ul class="shift-status" id="shift-status-{{ shift.id }}">
+        <li><strong>Minimum:</strong> {{ shift.min_needed }}</li>
+        <li><strong>Maximum:</strong> {{ shift.max_needed }}</li>
+        <li><strong>Current:</strong> {{ shift.entries | count }}</li>
+        <li><a href="#shift-status-{{ shift.id }}" class="shift-status-edit" data-shift-id="{{ shift.id }}">Edit</a></li>
+      </ul>
       {% for se in shift.entries|sort(attribute="user_id") %}
         <div class="volunteer">
           <p>