Skip to content

Commit

Permalink
Fix form issues on goal forms
Browse files Browse the repository at this point in the history 
Pagetree's auto-generated <form> tag has a few problems preventing
me from using it with the goal forms:

* After submitting an invalid form, Pagetree's Submit button disappears,
preventing the user from being able to submit the form again.
* The "change my answers" form isn't compatible with formsets. See
ccnmtl/django-pagetree#58

My solution is to again have the pageblock render its own <form>. This
necessitates an unfortunate hack: hiding pagetree's Submit button with
JavaScript. This is one of the reasons I think needs_submit should be
broken out into two different configurable params: Something like
`handles_post_data` and `renders_form`. Related to issue here:
ccnmtl/django-pagetree#44
  • Loading branch information
@nikolas
nikolas committed Mar 12, 2015
1 parent 4331ada commit a059800
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 107 deletions.
2 changes: 2 additions & 0 deletions media/js/src/views/goal-checkin-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ define([
return;
}

$('.pagetree-form-submit-area input').hide();

// Make an array containing a jQuery object for each form
// in the formset.
this.$forms = this.$el.find('.checkin-group');
Expand Down
2 changes: 2 additions & 0 deletions media/js/src/views/goal-setting-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ define([
return;
}

$('.pagetree-form-submit-area input').hide();

// Make an array containing a jQuery object for each form
// in the formset.
this.$forms = this.$el.find('.goal-form');
Expand Down
6 changes: 5 additions & 1 deletion worth2/goals/admin.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
from django.contrib import admin
from ordered_model.admin import OrderedModelAdmin

from worth2.goals.models import GoalCheckInOption, GoalOption
from worth2.goals.models import (
GoalCheckInOption, GoalOption, GoalSettingResponse, GoalCheckInResponse
)


class GoalCheckInOptionAdmin(OrderedModelAdmin):
Expand All @@ -16,3 +18,5 @@ class GoalOptionAdmin(OrderedModelAdmin):

admin.site.register(GoalCheckInOption, GoalCheckInOptionAdmin)
admin.site.register(GoalOption, GoalOptionAdmin)
admin.site.register(GoalSettingResponse)
admin.site.register(GoalCheckInResponse)
7 changes: 7 additions & 0 deletions worth2/goals/models.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,9 @@ class GoalSettingResponse(models.Model):
class Meta:
unique_together = (('goal_setting_block', 'user', 'form_id'),)

def __unicode__(self):
return unicode('%s from %s' % (self.option, self.user))


class GoalCheckInOption(OrderedModel):
"""Editable options for the goal check-in form."""
Expand Down Expand Up @@ -181,6 +184,10 @@ class GoalCheckInResponse(models.Model):
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)

def __unicode__(self):
return unicode('%s from %s' % (self.get_i_will_do_this_display(),
self.goal_setting_response.user))


class GoalCheckInPageBlock(BasePageBlock):
display_name = 'Goal Check In Block'
Expand Down
123 changes: 66 additions & 57 deletions worth2/templates/goals/goal_check_in_block.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,70 +8,79 @@ <h1>My Goals</h1>
<h2>Goal Check In</h2>

<p>Here's what you committed to do during the last session.</p>

<div class="container">
<div class="row">

<div class="col-sm-8">
<div class="form-horizontal">

{% csrf_token %}
{{ checkin_formset.management_form }}
{% comment %}
This is kind of non-standard but necessary because we need to
iterate over the goal setting responses and the goal checkin
formset at the same time. I've done this by zipping them
together and putting them in the view's context.
{% endcomment %}
{% for t in goal_checkin_context %}

<div class="checkin-group">

<div class="form-group non-interactive">
<label class="control-label col-sm-2">
My {{ t.0.goal_setting_block.get_goal_type_display }} Goal
</label>
<div class="col-sm-10">
<p class="form-control-static">
{{ t.0.option }}
</p>
</div>
</div>
<div class="row">

<div class="col-sm-8">
<form class="form-horizontal" method="post">
{% csrf_token %}
{{ checkin_formset.management_form }}

{% if messages %}
{% for message in messages %}
<div class="alert alert-success">{{ message }}</div>
{% endfor %}
{% endif %}

{% comment %}
This is kind of non-standard but necessary because we need to
iterate over the goal setting responses and the goal checkin
formset at the same time. I've done this by zipping them
together and putting them in the view's context.
{% endcomment %}
{% for t in goal_checkin_context %}

<div class="checkin-group">

<div class="form-group non-interactive">
<label class="control-label col-sm-2">
My {{ t.0.goal_setting_block.get_goal_type_display }} Goal
</label>
<div class="col-sm-10">
<p class="form-control-static">
{{ t.0.option }}
</p>
</div>
</div>

<div class="clearfix"></div>
<hr />

<div class="form-group non-interactive">
<label class="control-label col-sm-2">
I will do this.
</label>
<div class="col-sm-10">
<p class="form-control-static">
{{ t.0.text }}
</p>
</div>
</div>

<div class="clearfix"></div>
<hr />

<div class="form-group non-interactive">
<label class="control-label col-sm-2">
I will do this.
</label>
<div class="col-sm-10">
<p class="form-control-static">
{{ t.0.text }}
</p>
</div>
<div class="clearfix"></div>
<hr />

{{ t.1|bootstrap_horizontal }}

</div>
{% endfor %}
<div class="clearfix"></div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>

</form><!-- end .form-horizontal -->
</div>

<div class="clearfix"></div>
<hr />
<div class="col-sm-4 avatar-block">
<img src="{% avatar_url user %}">
</div>

{{ t.1|bootstrap_horizontal }}

</div>
{% endfor %}
<div class="clearfix"></div>
<hr />

</div><!-- end .form-horizontal -->
</div>

<div class="col-sm-4 avatar-block">
<img src="{% avatar_url user %}">
</div>

</div>
</div>

<div class="clearfix"></div>

</div>
105 changes: 56 additions & 49 deletions worth2/templates/goals/goal_setting_block.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,59 +8,66 @@ <h1>My Goals</h1>
<h2>Setting {{block.get_goal_type_display}} Goals</h2>

<div class="container">
<div class="row">

<div class="col-sm-10">
<div class="form-horizontal">
{% csrf_token %}
{{ setting_formset.management_form }}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success">{{ message }}</div>
{% endfor %}
{% endif %}
{% for form in setting_formset %}
{% if forloop.first %}
<span class="goal-form">
{{ form.option|bootstrap_horizontal }}
<div class="goal-other-container">
{{ form.other_text|bootstrap_horizontal }}
</div>
{{ form.text|bootstrap_horizontal }}
</span>
<div class="clearfix"></div>
{% else %}
{# Manually render the extra goal forms so we can give them #}
{# the 'Extra' label instead of 'Main'. #}
<hr>
<span class="goal-form">
<div class="form-group">
<label class="control-label col-sm-2 col-lg-2">
Extra {{block.goal_type}} goal
</label>
<div class="col-sm-10 col-lg-10">
{{ form.option }}
<div class="row">

<div class="col-sm-10">
<form class="form-horizontal" method="post">
{% csrf_token %}
{{ setting_formset.management_form }}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success">{{ message }}</div>
{% endfor %}
{% endif %}
{% for form in setting_formset %}
{% if forloop.first %}
<span class="goal-form">
{{ form.option|bootstrap_horizontal }}
<div class="goal-other-container">
{{ form.other_text|bootstrap_horizontal }}
</div>
{{ form.text|bootstrap_horizontal }}
</span>
<div class="clearfix"></div>
{% else %}
{# Manually render the extra goal forms so we can give them #}
{# the 'Extra' label instead of 'Main'. #}
<hr>
<span class="goal-form">
<div class="form-group">
<label class="control-label col-sm-2 col-lg-2">
Extra {{block.goal_type}} goal
</label>
<div class="col-sm-10 col-lg-10">
{{ form.option }}
</div>
</div>
<div class="clearfix"></div>
<div class="goal-other-container">
{{ form.other_text|bootstrap_horizontal }}
</div>
{{ form.text|bootstrap_horizontal }}
</span>
<div class="clearfix"></div>
{% endif %}
{% endfor %}
<div class="clearfix"></div>
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="goal-other-container">
{{ form.other_text|bootstrap_horizontal }}
</div>
{{ form.text|bootstrap_horizontal }}
</span>
<div class="clearfix"></div>
{% endif %}
{% endfor %}
</div><!-- end .form-horizontal -->
</div>
</form><!-- end .form-horizontal -->
</div>

<div class="col-sm-2 avatar-block">
<img src="{% avatar_url user %}">
</div>

<div class="col-sm-2 avatar-block">
<img src="{% avatar_url user %}">
</div>

</div>
</div>

<div class="clearfix"></div>

</div>

0 comments on commit a059800

Please sign in to comment.