Bootstrapping list_detail / Add Task view
This commit is contained in:
Scot Hacker
parent
c470864c86
commit
3be7ea7745
7 changed files with 92 additions and 105 deletions
|
|
@ -24,19 +24,17 @@ class AddItemForm(ModelForm):
|
|||
must find other members of the groups the current list belongs to."""
|
||||
|
||||
def __init__(self, task_list, *args, **kwargs):
|
||||
super(AddItemForm, self).__init__(*args, **kwargs)
|
||||
# debug:
|
||||
# print(dir(self.fields['list']))
|
||||
# print(self.fields['list'].initial)
|
||||
super().__init__(*args, **kwargs)
|
||||
self.fields['assigned_to'].queryset = get_user_model().objects.filter(groups__in=[task_list.group])
|
||||
self.fields['assigned_to'].label_from_instance = \
|
||||
lambda obj: "%s (%s)" % (obj.get_full_name(), obj.username)
|
||||
self.fields['assigned_to'].label_from_instance = lambda obj: "%s (%s)" % (obj.get_full_name(), obj.username)
|
||||
self.fields['assigned_to'].widget.attrs = {
|
||||
'id': 'id_assigned_to', 'class': "custom-select mb-3", 'name': 'assigned_to'}
|
||||
|
||||
due_date = forms.DateField(
|
||||
widget=forms.DateInput(attrs={'type': 'date'}), required=False)
|
||||
widget=forms.DateInput(attrs={'type': 'date'}), required=False)
|
||||
|
||||
title = forms.CharField(
|
||||
widget=forms.widgets.TextInput(attrs={'size': 35}))
|
||||
widget=forms.widgets.TextInput())
|
||||
|
||||
note = forms.CharField(
|
||||
widget=forms.Textarea(), required=False)
|
||||
|
|
|
|||
|
|
@ -1,57 +1,4 @@
|
|||
/*Distributed*/
|
||||
|
||||
ul.messages li {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.overdue {
|
||||
color: #9A2441;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Lighter font for completed items */
|
||||
#completed li {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #3A3A3A;
|
||||
font-family: Verdana;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
input#id_priority {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
|
||||
.todo-break {
|
||||
margin-top: 30px;
|
||||
border-top: 1px dotted gray;
|
||||
}
|
||||
|
||||
table.nocolor, table.nocolor tr, table.nocolor td {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.minor {
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.task_note, .task_comments {
|
||||
width: 70%;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1,34 @@
|
|||
{% extends "todo/base.html" %}
|
||||
|
||||
{% block page_heading %}{% endblock %}
|
||||
{% block title %}Add Todo List{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h2>Add a list:</h2>
|
||||
<h2>Add a list:</h2>
|
||||
|
||||
<form action="" method="post">
|
||||
{% csrf_token %}
|
||||
<table>{{ form }}</table>
|
||||
<p><input type="submit" value="Submit" class="todo-button"></p>
|
||||
</form>
|
||||
<form action="" method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
{% endblock %}
|
||||
<div class="form-group">
|
||||
<label for="id_name">List Name</label>
|
||||
<input type="text" class="form-control" id="id_name" name="name" aria-describedby="inputNameHelp" placeholder="">
|
||||
<small id="inputNameHelp" class="form-text text-muted">The full display name for this list.</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="id_slug">Slug</label>
|
||||
<input type="text" class="form-control" id="id_slug" name="slug" aria-describedby="inputSlugHelp" placeholder="">
|
||||
<small id="inputSlugHelp" class="form-text text-muted">
|
||||
To be used in URL for this list e.g. 'ux-tasks'. All lowercase, no spaces.</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="id_group">Group</label>
|
||||
<select id="id_group" name ="group" class="custom-select size="3" mb-3">
|
||||
{% for g in form.group %}
|
||||
{{ g }}
|
||||
<option value="{{ g.id }}">{{ g.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
|
@ -4,5 +4,4 @@
|
|||
{% block extrahead %}
|
||||
<!-- CSS and JavaScript for django-todo -->
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'todo/css/styles.css' %}" />
|
||||
<script src="{% static 'todo/js/jquery.tablednd_0_5.js' %}" type="text/javascript"></script>
|
||||
{% endblock extrahead %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends "todo/base.html" %}
|
||||
{% load staticfiles %}
|
||||
|
||||
{% block title %}Todo List: {{ task_list.name }}{% endblock %}
|
||||
|
||||
|
|
@ -7,31 +8,48 @@
|
|||
{% if list_slug != "mine" %}
|
||||
<form action="" name="add_task" method="post">
|
||||
{% csrf_token %}
|
||||
<h2 id="slideToggle" >→ Click to add task ←</h2>
|
||||
<div id="AddTask">
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td><label for="id_title">Task:</label> {{ form.title }}</td>
|
||||
<td><label for="id_due_date">Due date:</label> {{ form.due_date }}</td>
|
||||
<td><label for="id_assigned">Assign to:</label> {{ form.assigned_to }}</td>
|
||||
<td><label for="id_notify">Notify*:</label> <input type="checkbox" checked="checked" name="notify" value="1" id="notify"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="id_note">Note:</label>
|
||||
{{ form.note }}
|
||||
<p class="minor">*Email notifications will only be sent if task is assigned to someone besides yourself.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<input type="hidden" name="priority" value="999" id="id_priority">
|
||||
<input type="hidden" name="created_by" value="{{ request.user.id }}" id="id_created_by">
|
||||
<input type="hidden" name="task_list" value="{{ task_list.id }}" id="id_task_list">
|
||||
<input type="hidden" name="created_date" value="{{ created_date }}" id="id_created_date">
|
||||
<p><input type="submit" name="add_task" value="Add task" class="todo-button"></p>
|
||||
<button class="btn btn-primary" id="AddTaskButton" type="button"
|
||||
data-toggle="collapse" data-target="#AddTask">Add Task</button>
|
||||
|
||||
<div id="AddTask" class="collapse mt-3">
|
||||
<div class="form-group">
|
||||
<label for="id_title" name="title">Task</label>
|
||||
<input type="text" class="form-control" id="id_title" name="title" required placeholder="Task title" value="{{ form.title.text }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="id_note">Description</label>
|
||||
<textarea class="form-control" id="id_note" name="note"
|
||||
rows="5" aria-describedby="inputNoteHelp">{{ form.note.text }}</textarea>
|
||||
<small id="inputNoteHelp" class="form-text text-muted">Describe the task or bug. Provide steps to reproduce the issue.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="id_due_date">Due Date</label>
|
||||
<input type="date" class="form-control" id="id_due_date" name="due_date" value="{{ form.due_date.text }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="id_assigned_to">Assigned To</label>
|
||||
{# See todo.forms.AddItemForm #}
|
||||
{{form.assigned_to}}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="id_notify">Notify</label>
|
||||
<input type="checkbox" checked="checked" class="form-control" id="id_notify" name="notify" aria-describedby="inputNotifyHelp" value="{{ form.notify.text }}">
|
||||
<small id="inputNotifyHelp" class="form-text text-muted">Email notifications will only be sent if task is assigned to someone other than yourself.</small>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="priority" value="999" id="id_priority">
|
||||
<input type="hidden" name="created_by" value="{{ request.user.id }}" id="id_created_by">
|
||||
<input type="hidden" name="task_list" value="{{ task_list.id }}" id="id_task_list">
|
||||
<input type="hidden" name="created_date" value="{{ created_date }}" id="id_created_date">
|
||||
<p><input type="submit" name="add_task" value="Submit" class="btn btn-primary"></p>
|
||||
</div>
|
||||
</form>
|
||||
<hr />
|
||||
{% endif %}
|
||||
|
||||
{% if items %}
|
||||
|
|
@ -40,7 +58,6 @@
|
|||
{% else %}
|
||||
<h1>{{ view_completed|yesno:"Completed tasks, Tasks" }} in "{{ task_list.name }}"</h1>
|
||||
<p>This list belongs to group {{ task_list.group }}</p>
|
||||
<h3>Tasks :: Drag rows to set priorities</h3>
|
||||
{% endif %}
|
||||
|
||||
<form action="" name="show_tasks" method="post">
|
||||
|
|
@ -91,6 +108,9 @@
|
|||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
<p>
|
||||
<small><i>Drag rows to set priorities</i></small>
|
||||
</p>
|
||||
<p><input type="submit" name="process_tasks" value="Continue..." class="todo-button"></p>
|
||||
</form>
|
||||
{% else %}
|
||||
|
|
@ -112,6 +132,8 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="{% static 'todo/js/jquery.tablednd_0_5.js' %}" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function order_tasks(data) {
|
||||
// The JQuery plugin tableDnD provides a serialize() function which provides the re-ordered
|
||||
|
|
@ -131,13 +153,14 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Initially hide the Add Task form
|
||||
$('#AddTask').hide();
|
||||
|
||||
// toggle slide to show the Add Task form when link clicked
|
||||
$('#slideToggle').click(function(){
|
||||
$(this).siblings('#AddTask').slideToggle();
|
||||
});
|
||||
});
|
||||
|
||||
// When adding a task, change the text of the Add Task button
|
||||
function handleClick()
|
||||
{
|
||||
console.log(this.innerHTML);
|
||||
this.innerHTML = (this.innerHTML == 'Add Task' ? 'Cancel' : 'Add Task');
|
||||
}
|
||||
document.getElementById('AddTaskButton').onclick=handleClick;
|
||||
</script>
|
||||
{% endblock extra_js %}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,10 @@ app_name = 'todo'
|
|||
|
||||
urlpatterns = [
|
||||
|
||||
path('', views.list_lists, name="lists"),
|
||||
path(
|
||||
'',
|
||||
views.list_lists,
|
||||
name="lists"),
|
||||
|
||||
# View reorder_tasks is only called by JQuery for drag/drop task ordering.
|
||||
path(
|
||||
|
|
|
|||
|
|
@ -122,8 +122,6 @@ def list_detail(request, list_id=None, list_slug=None, view_completed=False):
|
|||
toggle_done(request, request.POST.getlist('toggle_done_tasks'))
|
||||
toggle_deleted(request, request.POST.getlist('toggle_deleted_tasks'))
|
||||
|
||||
|
||||
|
||||
# ######################
|
||||
# Add New Task Form
|
||||
# ######################
|
||||
|
|
@ -240,6 +238,7 @@ def reorder_tasks(request) -> HttpResponse:
|
|||
def add_list(request) -> HttpResponse:
|
||||
"""Allow users to add a new todo list to the group they're in.
|
||||
"""
|
||||
|
||||
if request.POST:
|
||||
form = AddTaskListForm(request.user, request.POST)
|
||||
if form.is_valid():
|
||||
|
|
|
|||
Loading…
Reference in a new issue