From ee3b6d89889ebcfb4855177c0413be6ce15dad56 Mon Sep 17 00:00:00 2001
From: Christopher Charbonneau Wells <chris@chrxs.net>
Date: Tue, 15 Aug 2017 14:07:06 -0400
Subject: [PATCH] Update django-angular dependency and improve example form
 (WIP).

---
 Pipfile.lock                  |  2 +-
 babyblotter/urls.py           |  2 +-
 core/forms.py                 | 16 +++++++++++--
 core/templates/baby-form.html | 44 ++++++++++++++++++++++++++++-------
 core/templates/base.html      | 40 +++++++++++++++++++++++++++++++
 core/views.py                 | 14 +++++++++++
 6 files changed, 106 insertions(+), 12 deletions(-)
 create mode 100644 core/templates/base.html

diff --git a/Pipfile.lock b/Pipfile.lock
index 19515d7b..2863213f 100644
--- a/Pipfile.lock
+++ b/Pipfile.lock
@@ -16,7 +16,7 @@
             "version": "==1.11.4"
         },
         "django-angular": {
-            "version": "==1.0.2"
+            "version": "==1.1"
         },
         "django-filter": {
             "version": "==1.0.4"
diff --git a/babyblotter/urls.py b/babyblotter/urls.py
index a6a30dbf..a7249395 100644
--- a/babyblotter/urls.py
+++ b/babyblotter/urls.py
@@ -7,7 +7,7 @@ from django.contrib import admin
 from core import views
 
 urlpatterns = [
-    url(r'^baby/new/$', views.BabyFormView.as_view(), name='baby_new'),
+    url(r'^baby/add/$', views.BabyFormView.as_view(), name='baby_add'),
 
     url(r'^admin/', admin.site.urls),
     url(r'', include('api.urls')),
diff --git a/core/forms.py b/core/forms.py
index c4ea0dc6..07520fc7 100644
--- a/core/forms.py
+++ b/core/forms.py
@@ -1,12 +1,16 @@
 # -*- coding: utf-8 -*-
 from __future__ import unicode_literals
 
-from django.forms import fields, widgets
+from django.core.exceptions import ValidationError
+from django.forms import widgets
+from djng.forms import fields, NgModelFormMixin, NgFormValidationMixin
 from djng.styling.bootstrap3.forms import Bootstrap3Form
 
 
-class BabyForm(Bootstrap3Form):
+class BabyForm(NgModelFormMixin, NgFormValidationMixin, Bootstrap3Form):
     use_required_attribute = False
+    scope_prefix = 'subscribe_data'
+    form_name = 'baby_new'
 
     first_name = fields.CharField(
         label='First name',
@@ -22,3 +26,11 @@ class BabyForm(Bootstrap3Form):
         label='Date of birth',
         widget=widgets.DateInput(attrs={'validate-date': '^(\d{4})-(\d{1,2})-(\d{1,2})$'}),
         help_text='Allowed date format: yyyy-mm-dd')
+
+    def clean(self):
+        if self.cleaned_data.get(
+                'first_name') == 'John' and self.cleaned_data.get(
+                'last_name') == 'Doe':
+            raise ValidationError(
+                'The full name "John Doe" is rejected by the server.')
+        return super(BabyForm, self).clean()
diff --git a/core/templates/baby-form.html b/core/templates/baby-form.html
index b71ead50..fae8235f 100644
--- a/core/templates/baby-form.html
+++ b/core/templates/baby-form.html
@@ -1,9 +1,37 @@
-<script type="text/javascript">
-    angular.module('djangular-demo', ['djng.forms']);
-</script>
+{% extends "base.html" %}
 
-<form method="post" action="babyblotter" validate>
-    {% csrf_token %}
-    {{ form.as_div }}
-    <button type="submit" class="btn btn-primary">Subscribe</button>
-</form>
+{% block title %}Add Baby Form{% endblock %}
+
+{% block head %}
+    <script type="text/javascript">
+        angular.module('baby-add', ['djng.forms']).config(function($httpProvider) {
+            $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+            $httpProvider.defaults.headers.common['X-CSRFToken'] = '{{ csrf_token }}';
+        });
+        angular.module('baby-add').controller('BabyNewForm', ['$scope', '$http', '$window', 'djangoForm',
+                                            function($scope, $http, $window, djangoForm) {
+        $scope.submit = function() {
+            if ($scope.subscribe_data) {
+                $http.post(".", $scope.subscribe_data).then(function(response) {
+                    if (!djangoForm.setErrors($scope.my_form, response.data.errors)) {
+                        // on successful post, redirect onto success page
+                        $window.location.href = response.data.success_url;
+                    }
+                }, function() {
+                    console.error('An error occurred during submission');
+                });
+            }
+            return false;
+        };
+    }]);
+    </script>
+{% endblock %}
+
+{% block content %}
+    <form name="{{ form.form_name }}" method="post" action="." novalidate ng-controller="BabyNewForm">
+        {% csrf_token %}
+        {{ form.as_div }}
+        <button type="submit" ng-disabled="{{ form.form_name }}.$invalid" class="btn btn-primary">Submit via Post</button>
+        <button type="button" ng-disabled="{{ form.form_name }}.$invalid" ng-click="submit()" class="btn btn-primary">Submit via Ajax</button>
+    </form>
+{% endblock %}
\ No newline at end of file
diff --git a/core/templates/base.html b/core/templates/base.html
new file mode 100644
index 00000000..51247a12
--- /dev/null
+++ b/core/templates/base.html
@@ -0,0 +1,40 @@
+{% load static djng_tags %}
+
+<!doctype html>
+<html lang="en">
+<head>
+	<title>{% block form_title %}Baby Blotter{% endblock %}</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
+    <link href="{% static 'djng/css/styles.css' %}" rel="stylesheet" />
+    <link href="{% static 'djng/css/bootstrap3.css' %}" rel="stylesheet" />
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
+</head>
+
+<body>
+	<header class="navbar navbar-static-top navbar-inverse">
+		<div class="container">
+			<div class="row">
+				<div class="col-xs-12">
+					<h1 class="navbar-brand">Baby Blotter<small style="margin-left: 3em;">Tracking literal shit.</small></h1>
+				</div>
+			</div>
+		</div>
+	</header>
+
+	<div class="container">
+		<div class="row">
+			<nav class="col-md-3" style="margin-top: 65px;" role="navigation">
+				<ul class="nav nav-pills nav-stacked">
+					<li>
+						<a href="{% url 'baby_add' %}">Add Baby</a>
+					</li>
+				</ul>
+			</nav>
+			<main class="col-md-9">
+			{% block content %}{% endblock %}
+			</main>
+		</div>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/core/views.py b/core/views.py
index 30999460..3e404503 100644
--- a/core/views.py
+++ b/core/views.py
@@ -1,8 +1,12 @@
 # -*- coding: utf-8 -*-
 from __future__ import unicode_literals
 
+import json
+
+from django.http import HttpResponse
 from django.core.urlresolvers import reverse_lazy
 from django.views.generic.edit import FormView
+from django.utils.encoding import force_text
 
 from core.forms import BabyForm
 
@@ -11,3 +15,13 @@ class BabyFormView(FormView):
     template_name = 'baby-form.html'
     form_class = BabyForm
     success_url = reverse_lazy('form_data_valid')
+
+    def post(self, request, **kwargs):
+        if request.is_ajax():
+            return self.ajax(request)
+        return super(BabyFormView, self).post(request, **kwargs)
+
+    def ajax(self, request):
+        form = self.form_class(data=json.loads(request.body))
+        response_data = {'errors': form.errors, 'success_url': force_text(self.success_url)}
+        return HttpResponse(json.dumps(response_data), content_type="application/json")