Merge pull request #1562 from emfcamp/shift-adjustment-ui

Allow role admins to edit their shift requirements

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):

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: " ";
+      }
+    }
   }
 }

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');
+    });
+  });
 });

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>