Add edit dialog to task detail page

Amolith created 1 month ago

Change summary

src/cmd/webui/task/mod.rs   |  1 
src/cmd/webui/task/views.rs |  2 +
templates/task.html         | 50 +++++++++++++++++++++++++++++++++++++++
3 files changed, 53 insertions(+)

Detailed changes

src/cmd/webui/task/mod.rs

@@ -72,6 +72,7 @@ pub(in crate::cmd::webui) async fn task_handler(
             short_id: task.id.short(),
             title: task.title.clone(),
             description: render_markdown(&task.description),
+            description_raw: task.description.clone(),
             task_type: task.task_type.clone(),
             status: task.status.as_str().to_string(),
             priority: task.priority.as_str().to_string(),

src/cmd/webui/task/views.rs

@@ -8,6 +8,8 @@ pub(in crate::cmd::webui) struct TaskView {
     pub(in crate::cmd::webui) short_id: String,
     pub(in crate::cmd::webui) title: String,
     pub(in crate::cmd::webui) description: String,
+    /// Raw markdown source for the edit form textarea.
+    pub(in crate::cmd::webui) description_raw: String,
     pub(in crate::cmd::webui) task_type: String,
     pub(in crate::cmd::webui) status: String,
     pub(in crate::cmd::webui) priority: String,

templates/task.html

@@ -32,6 +32,7 @@
   </footer>
 
   <div class="hstack gap-2 mt-4">
+    <button commandfor="dlg-edit-task" command="show-modal" class="outline small">Edit</button>
     <ot-dropdown>
       <button popovertarget="status-menu" class="outline small">
         Change status
@@ -180,4 +181,53 @@
   </div>
 </article>
 {% endif %}
+
+<!-- Edit task dialog -->
+<dialog id="dlg-edit-task" closedby="any">
+  <form method="post" action="/projects/{{ project_name }}/tasks/{{ task.full_id }}">
+    <header>
+      <h3>Edit {{ task.short_id }}</h3>
+    </header>
+    <div class="vstack">
+      <label data-field>
+        Title
+        <input type="text" name="title" value="{{ task.title }}" required>
+      </label>
+      <label data-field>
+        Description
+        <textarea name="description" rows="6">{{ task.description_raw }}</textarea>
+      </label>
+      <div class="hstack gap-2">
+        <div data-field>
+          <label for="edit-type">Type</label>
+          <select id="edit-type" name="task_type">
+            <option value="task"{% if task.task_type == "task" %} selected{% endif %}>Task</option>
+            <option value="bug"{% if task.task_type == "bug" %} selected{% endif %}>Bug</option>
+            <option value="feature"{% if task.task_type == "feature" %} selected{% endif %}>Feature</option>
+          </select>
+        </div>
+        <div data-field>
+          <label for="edit-priority">Priority</label>
+          <select id="edit-priority" name="priority">
+            <option value="high"{% if task.priority == "high" %} selected{% endif %}>High</option>
+            <option value="medium"{% if task.priority == "medium" %} selected{% endif %}>Medium</option>
+            <option value="low"{% if task.priority == "low" %} selected{% endif %}>Low</option>
+          </select>
+        </div>
+        <div data-field>
+          <label for="edit-effort">Effort</label>
+          <select id="edit-effort" name="effort">
+            <option value="low"{% if task.effort == "low" %} selected{% endif %}>Low</option>
+            <option value="medium"{% if task.effort == "medium" %} selected{% endif %}>Medium</option>
+            <option value="high"{% if task.effort == "high" %} selected{% endif %}>High</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <footer>
+      <button type="button" commandfor="dlg-edit-task" command="close" class="outline">Cancel</button>
+      <button type="submit">Save</button>
+    </footer>
+  </form>
+</dialog>
 {% endblock %}