Skip to content

Commit

Permalink
implements to answer a forum question with angular
Browse files Browse the repository at this point in the history
  • Loading branch information
@brunosmartin
brunosmartin committed Sep 24, 2013
1 parent ef32cd5 commit 6469610
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 22 deletions.
18 changes: 17 additions & 1 deletion forum/serializers.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,22 @@ class Meta:

class AnswerSerializer(serializers.ModelSerializer):

votes = serializers.SerializerMethodField('count_votes')
username = serializers.SerializerMethodField('get_username')
timestamp = serializers.DateTimeField(read_only=True)

class Meta:
model = Answer
fields = ('question', 'text',)
fields = ('question', 'text', 'votes', 'timestamp', 'username')

def count_votes(self, obj):
if obj:
return obj.votes.count()
else:
return 0

def get_username(self, obj):
if obj:
return obj.user.username
else:
return u''
52 changes: 52 additions & 0 deletions forum/static/js/question.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
(function (angular) {
"use strict";

var app = angular.module('answer', ['ngRoute', 'ngResource', "ngCookies"]);

// Uses the csrftoken from the cookie
app.run(function ($http, $cookies) {
$http.defaults.headers.common['X-CSRFToken'] = $cookies['csrftoken'];
});
// Avoid jumping to top after click in anchor '#'
app.value('$anchorScroll', angular.noop);

app.config(['$routeProvider', function ($routeProvider) {
console.log('ngRoute!!!');
$routeProvider
.when('/forum/question/answer/create', {
templateUrl: 'answer_create.html',
controller: 'AnswerCtrl'});
}]);

app.controller('AnswerCtrl', ['$scope', 'Answer',
function ($scope, Answer) {
var questionId = 1;
var answer_text = 'Angular Angular Angular AngularAngular AngularAngularAngularAngularAngularAngular Angular Angular Angular Angular Angular';
$scope.new_answer = Answer.create({question: questionId, text: answer_text});
}]);

app.factory('Answer', function($resource){
return $resource('/api/answer/', {}, {
create: {method: 'POST'}
});
});

})(angular);

$(document).ready(function() {
$('.comment-form').hide();
$('.add-comment-link').click(function(e) {
e.preventDefault();
$(this).parent().parent().height(170);
$(this).parent().parent().find('form').slideDown();
$(this).hide();
});

$('.cancel-comment').click(function(e) {
e.preventDefault();
$(this).parent().parent().slideUp();
$(this).parent().parent().parent().find('.add-comment-link').slideDown().show();
$(this).parent().parent().parent().height(30);
});
$('nav.course-sections > a > span').tooltip();
});
66 changes: 45 additions & 21 deletions forum/templates/question.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
{% load i18n %}
{% load staticfiles %}
{% block content %}

<script type="text/javascript" src="{% static 'js/question.js' %}
" charset="utf-8"></script>

<!-- CONTAINER -->
<div id="course-forum">
<!-- HEADER -->
Expand Down Expand Up @@ -33,28 +37,13 @@ <h1 class="top"><i class="icon-double-angle-right"></i> {{ question.course.name
<!-- END HEADER -->

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.comment-form').hide();
$('.add-comment-link').click(function(e) {
e.preventDefault();
$(this).parent().parent().height(170);
$(this).parent().parent().find('form').slideDown();
$(this).hide();
})

$('.cancel-comment').click(function(e) {
e.preventDefault();
$(this).parent().parent().slideUp()
$(this).parent().parent().parent().find('.add-comment-link').slideDown().show();
$(this).parent().parent().parent().height(30);
})
})

</script>

<!-- MAIN CONTENT -->
<section id="main-content" class="container">
<div class="row">
<div class="col-sm-9 col-lg-9">
<div class="col-sm-9 col-lg-9" ng-app="answer">
<!-- QUESTION -->
<article class="question">
<header>
Expand Down Expand Up @@ -148,7 +137,7 @@ <h1>{{ question.answers.count }} Respostas:</h1>
</div>

<div class="answer-body col-sm-10 col-lg-10">
<p>{{ answer.text }}</a>
<p>{{ answer.text }}</p>
</div><!-- .answer-body -->
</div>
<div class="row">
Expand All @@ -166,14 +155,50 @@ <h1>{{ question.answers.count }} Respostas:</h1>
</article>
{% endfor %}
<!-- END ANSWER -->
<!-- NEW ANSWER -->
{% verbatim angularjs %}
<script type="text/ng-template" id="answer_create.html">
<div class="row">
<div class="col-sm-2 col-lg-2">
<div class="row">
<div class="rating col-sm-12 col-lg-12">
<div class="arrow-up"></div>
<div class="votes">{{ new_answer.votes }}</div>
<div class="arrow-down"></div>
</div><!-- .rating -->
</div>
<div class="author clearfix">
resposta feita em <strong>{{ new_answer.timestamp|date:"dd/mm/yy" }}</strong> por <a href="profile.html">{{ new_answer.username }}</a>
</div>
</div>

<div class="answer-body col-sm-10 col-lg-10">
<p>{{ new_answer.text }}</p>
</div><!-- .answer-body -->
</div>
<div class="row">
<div class="add-comment col-sm-10 col-lg-10 col-offset-2">
<p><a href="" class="add-comment-link" ng-click="comment_form = true" ng-show="!comment_form">Comentar resposta</a></p>
<form class="comment-form ng-hide" ng-show="comment_form">
<textarea rows="5"></textarea>
<div class="textright">
<button class="cancel-comment btn btn-danger">Cancelar</button>
<button class="btn btn-success">Comentar</button>
</div>
</form>
</div>
</div>
</script>
{% endverbatim angularjs %}
<article class="answer" ng-view></article>
</section>
<!-- END NEW ANSWER -->
<!-- END ANSWERS -->
<!-- YOUR ANSWER -->
<section class="your-answer">
<header>
<h1>Sua Resposta</h1>
</header>
<form>
<div class="text-editor">
<i class="icon-bold"></i>
<i class="icon-italic"></i>
Expand All @@ -187,9 +212,8 @@ <h1>Sua Resposta</h1>
</div>
<textarea rows="15"></textarea>
<div class="submit textright">
<button class="btn btn-success">Enviar</button>
<a href="#/forum/question/answer/create" class="btn btn-success">Enviar</a>
</div>
</form>
</section>
<!-- END YOUR ANSWER -->
</div>
Expand Down
8 changes: 8 additions & 0 deletions forum/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,15 @@ class QuestionViewSet(viewsets.ModelViewSet):
model = Question
serializer_class = QuestionSerializer

def pre_save(self, obj):
obj.user = self.request.user
return super(QuestionViewSet, self).pre_save(obj)


class AnswerViewSet(viewsets.ModelViewSet):
model = Answer
serializer_class = AnswerSerializer

def pre_save(self, obj):
obj.user = self.request.user
return super(AnswerViewSet, self).pre_save(obj)

0 comments on commit 6469610

Please sign in to comment.