refactor: style planning

web/src/models/availabillity.rs

@@ -27,7 +27,7 @@ pub enum AvailabillityAssignmentState {
     // availabillity is assigned to this event as Führungsassistent
     AssignedFührungsassistent(i32),
     // availabillity is assigned to this event as Wachhabender
-    AssignedWachahabender(i32),
+    AssignedWachhabender(i32),
 }
 
 impl Display for AvailabillityAssignmentState {
@@ -37,7 +37,7 @@ impl Display for AvailabillityAssignmentState {
             AvailabillityAssignmentState::Conflicting => write!(f, "bereits anders zugewiesen"),
             AvailabillityAssignmentState::AssignedPosten(_) => write!(f, "zugewiesen als Posten"),
             AvailabillityAssignmentState::AssignedFührungsassistent(_) => write!(f, "zugewiesen als Führungsassistent"),
-            AvailabillityAssignmentState::AssignedWachahabender(_) => write!(f, "zugewiesen als Wachhabender"),
+            AvailabillityAssignmentState::AssignedWachhabender(_) => write!(f, "zugewiesen als Wachhabender"),
         }
     }
 }

web/src/utils/event_planning_template.rs

@@ -35,7 +35,7 @@ pub async fn generate_availabillity_assignment_list(
                     )
                 }
                 Function::Wachhabender => {
-                    AvailabillityAssignmentState::AssignedWachahabender(assignment.availabillity_id)
+                    AvailabillityAssignmentState::AssignedWachhabender(assignment.availabillity_id)
                 }
             };
 

web/static/style.scss

@@ -17,6 +17,7 @@ $primary: $crimson,
 @forward "bulma/sass/components/pagination";
 @forward "bulma/sass/components/navbar";
 @forward "bulma/sass/components/message";
+@forward "bulma/sass/components/dropdown";
 
 @forward "bulma/sass/elements/button";
 @forward "bulma/sass/elements/box";
@@ -74,3 +75,9 @@ $primary: $crimson,
 section.htmx-request {
   visibility: hidden;
 }
+
+a.dropdown-item[disabled] {
+    color: hsl(221, 14%, 48%); // $grey;
+    cursor: default;
+    pointer-events: none;
+}

web/static/utils.js

@@ -11,6 +11,30 @@ document.addEventListener("htmx:afterSwap", () => {
 	document.querySelectorAll("button[hx-trigger='confirmed']").forEach((value) => value.addEventListener("click", fireConfirmModal));
 });
 
+// dropdown activation / deactivation
+const toggleDropdown = (event) => {
+	const classList = event.target.closest('.dropdown').classList
+	if (!classList.contains('is-active')) {
+		Array.from(document.querySelectorAll('.dropdown')).forEach((d) => d.classList.remove('is-active'));
+	}
+	classList.toggle('is-active');
+};
+
+const closeDropdownsIfClickedOutside = (event) => {
+	const dropdowns = Array.from(document.querySelectorAll('.dropdown'));
+	if (dropdowns.every((v) => !v.contains(event.target))) {
+		dropdowns.forEach((d) => d.classList.remove('is-active'))
+	}
+}
+
+document.querySelectorAll(".dropdown-trigger .button").forEach((value) => value.addEventListener("click", toggleDropdown));
+document.addEventListener("click", closeDropdownsIfClickedOutside);
+
+document.addEventListener("htmx:afterSwap", () => {
+	document.querySelectorAll(".dropdown-trigger .button").forEach((value) => value.addEventListener("click", toggleDropdown));
+	document.addEventListener("click", closeDropdownsIfClickedOutside);
+});
+
 // light / dark mode interpretation for first load and switch behaviour respecting localStorage and CSS prefers-color-scheme
 const getCurrentTheme = () => {
 	let current = localStorage.getItem("theme");

web/templates/events/plan_personal_table.html

@@ -14,8 +14,7 @@
       <th>Funktion</th>
       <th>Zeitraum</th>
       <th>Kommentar</th>
-      <th>Status</th>
+      <th>Planung</th>
-      <th>Planen als</th>
       <th></th>
     </tr>
   </thead>
@@ -39,32 +38,63 @@
         {{ availabillity.comment.as_deref().unwrap_or("") }}
       </td>
       <td>
-        {{ status }}
+        <div class="dropdown">
-      </td>
+          <div class="dropdown-trigger">
-      <td>
+            <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
-        <div class="buttons has-addons">
+              {% match status %}
-          <button hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=1"
+              {% when AvailabillityAssignmentState::AssignedPosten(_) %}
-            hx-target="closest table" hx-swap="outerHTML" class="button is-small" {% if !further_posten_required ||
+              <span>als Posten geplant</span>
-            status !=AvailabillityAssignmentState::Unassigned|ref %}disabled{% endif %}>Posten</button>
+              <svg class="icon">
-          {% if u.function == Function::Wachhabender || u.function == Function::Fuehrungsassistent %}
+                <use href="/static/feather-sprite.svg#edit-2" />
-          <button hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=5"
+              </svg>
-            hx-target="closest table" hx-swap="outerHTML" class="button is-small" {% if
+              {% when AvailabillityAssignmentState::AssignedFührungsassistent(_) %}
-            !further_fuehrungsassistent_required || status !=AvailabillityAssignmentState::Unassigned|ref
+              <span>als Führungsassistent geplant</span>
-            %}disabled{% endif %}>Führungsassistent</button>
+              <svg class="icon">
-          {% endif %}
+                <use href="/static/feather-sprite.svg#edit-2" />
-          {% if u.function == Function::Wachhabender %}
+              </svg>
-          <button hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=10"
+              {% when AvailabillityAssignmentState::AssignedWachhabender(_) %}
-            hx-target="closest table" hx-swap="outerHTML" class="button is-small" {% if !further_wachhabender_required
+              <span>als Wachhabender geplant</span>
-            || status !=AvailabillityAssignmentState::Unassigned|ref %}disabled{% endif %}>Wachhabender</button>
+              <svg class="icon">
-          {% endif %}
+                <use href="/static/feather-sprite.svg#edit" />
+              </svg>
+              {% when _ %}
+              <span>Planen</span>
+              <svg class="icon">
+                <use href="/static/feather-sprite.svg#chevron-down" />
+              </svg>
+              {% endmatch %}
+            </button>
+          </div>
+          <div class="dropdown-menu" id="dropdown-menu" role="menu">
+            <div class="dropdown-content" hx-target="closest table" hx-swap="outerHTML">
+              <a class="dropdown-item"
+                hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=1" {% if
+                !further_posten_required || status !=AvailabillityAssignmentState::Unassigned|ref %}disabled{% endif %}>
+                als Posten planen</a>
+              {% if u.function == Function::Wachhabender || u.function == Function::Fuehrungsassistent %}
+              <a class="dropdown-item"
+                hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=5" {% if
+                !further_fuehrungsassistent_required || status !=AvailabillityAssignmentState::Unassigned|ref
+                %}disabled{% endif %}>als Führungsassistent planen</a>
+              {% endif %}
+              {% if u.function == Function::Wachhabender %}
+              <a class="dropdown-item"
+                hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=10" {% if
+                !further_wachhabender_required || status !=AvailabillityAssignmentState::Unassigned|ref %}disabled{%
+                endif %}>als Wachhabender planen</a>
+              {% endif %}
+              {% if status != AvailabillityAssignmentState::Unassigned|ref && status !=
+              AvailabillityAssignmentState::Conflicting|ref %}
+              <hr class="dropdown-divider" />
+              <a class="dropdown-item"
+                hx-delete="/assignments/delete?event={{ event.id }}&availabillity={{ availabillity.id }}"
+                class="button is-small">entplanen</a>
+              {% endif %}
+            </div>
+          </div>
         </div>
       </td>
       <td>
-        {% if status != AvailabillityAssignmentState::Unassigned|ref && status !=
-        AvailabillityAssignmentState::Conflicting|ref %}
-        <button hx-delete="/assignments/delete?event={{ event.id }}&availabillity={{ availabillity.id }}"
-          hx-target="closest table" hx-swap="outerHTML" class="button is-small">Entplanen</button>
-        {% endif %}
       </td>
     </tr>
     {% endfor %}