Draft model and autosave on Project edit form

funnel/forms/project.py

@@ -7,7 +7,7 @@
 from baseframe import __
 import baseframe.forms as forms
 from baseframe.forms.sqlalchemy import AvailableName, QuerySelectField
-from ..models import RSVP_STATUS
+from ..models import RSVP_STATUS, Project
 
 __all__ = [
     'EventForm', 'ProjectForm', 'ProjectTransitionForm', 'RsvpForm',
@@ -76,6 +76,8 @@ def set_queries(self):
         self.admin_team.query = profile_teams
         self.review_team.query = profile_teams
         self.checkin_team.query = profile_teams
+        self.parent_project.query = Project.query.filter(
+            Project.profile == self.edit_obj.profile, Project.id != self.edit_obj.id, Project.parent_project == None)  # NOQA
 
     def validate_bg_color(self, field):
         if not valid_color_re.match(field.data):

funnel/models/__init__.py

@@ -3,19 +3,20 @@
 
 from coaster.sqlalchemy import (TimestampMixin, UuidMixin, BaseMixin, BaseNameMixin,
     BaseScopedNameMixin, BaseScopedIdNameMixin, BaseIdNameMixin, MarkdownColumn,
-    JsonDict, CoordinatesMixin, make_timestamp_columns)
+    JsonDict, NoIdMixin, CoordinatesMixin, make_timestamp_columns)
 from coaster.db import db
 
-from .user import *
-from .profile import *
 from .commentvote import *
+from .contact_exchange import *
+from .draft import *
+from .event import *
+from .feedback import *
+from .profile import *
 from .project import *
-from .section import *
-from .usergroup import *
 from .proposal import *
-from .feedback import *
+from .rsvp import *
+from .section import *
 from .session import *
+from .user import *
+from .usergroup import *
 from .venue import *
-from .rsvp import *
-from .event import *
-from .contact_exchange import *

funnel/models/draft.py

@@ -0,0 +1,16 @@
+# -*- coding: utf-8 -*-
+
+from sqlalchemy_utils import UUIDType
+from . import db, JsonDict, NoIdMixin
+
+__all__ = ['Draft']
+
+
+class Draft(NoIdMixin, db.Model):
+    """Store for autosaved, unvalidated drafts on behalf of other models"""
+    __tablename__ = 'draft'
+
+    table = db.Column(db.UnicodeText, primary_key=True)
+    table_row_id = db.Column(UUIDType(binary=False), primary_key=True)
+    body = db.Column(JsonDict, nullable=False, server_default='{}')
+    revision = db.Column(UUIDType(binary=False))

funnel/templates/formlayout.html.jinja2

@@ -9,6 +9,17 @@
   {%- endassets -%}
 {% endblock %}
 
+{% block contentwrapper %}
+<div class="grid">
+  <div class="grid__col-xs-12">
+    {%- if autosave %}
+      <div><p class="mui--text-subhead mui--text-light mui--pull-right" id="autosave-msg"></p></div>
+    {% endif %}
+    {% block content %}{% endblock %}
+  </div>
+</div>
+{% endblock %}
+
 {% block pagescripts %}
   {% assets "js_codemirrormarkdown" -%}
     <script type="text/javascript" src="{{ ASSET_URL }}"></script>
@@ -17,3 +28,89 @@
     <script type="text/javascript" src="{{ ASSET_URL }}"></script>
   {%- endassets -%}
 {% endblock %}
+
+{% block layoutscripts %}
+  {%- if autosave %}
+    <script type="text/javascript">
+      $(function() {
+        var typingTimer;
+        var typingWaitInterval = 1000; // wait till user stops typing for one second to send form data
+        var waitingForResponse = false;
+        var lastSavedData = '';
+
+        $('input[name="form.revision"]').val() ? $('#autosave-msg').text('These changes have not been published yet.') : '';
+
+        $('#{{ ref_id }}').on('change', function(e) {
+          autosaveForm();
+        });
+
+        $('#{{ ref_id }}').on('keyup', function(e) {
+          if(typingTimer) clearTimeout(typingTimer);
+          typingTimer = setTimeout(autosaveForm, typingWaitInterval);
+        });
+
+        function autosaveForm() {
+          var actionUrl = $('#{{ ref_id }}').attr('action');
+          var sep = (actionUrl.indexOf('?') === -1) ? '?' : '&';
+          if(!waitingForResponse && haveDirtyFields()) {
+            $.ajax({
+              type: 'POST',
+              url: actionUrl + sep + 'form.autosave=true',
+              data: $("#{{ ref_id }}").serialize(),
+              dataType: 'json',
+              timeout: 15000,
+              beforeSend: function() {
+                $('#autosave-msg').text('Autosaving...');
+                lastSavedData = $("#{{ ref_id }}").find('[type!="hidden"]').serialize();
+                waitingForResponse = true;
+              },
+              success: function (remoteData) {
+                // Todo: Update window.history.pushState for new form
+                $('#autosave-msg').text('Changes saved but not published');
+                if(remoteData.revision) {
+                  $('input[name="form.revision"]').val(remoteData.revision);
+                }
+                waitingForResponse = false;
+                autosaveForm();
+              },
+              error: function (response) {
+                var errorMsg = '';
+                waitingForResponse = false;
+                if (response.readyState === 4) {
+                  if (response.status === 500) {
+                    errorMsg ='Internal Server Error. Please reload and try again.';
+                  } else if(response.status === 400) {
+                    // There is a version mismatch, notify user to reload the page.
+                    waitingForResponse = true;
+                    errorMsg = 'This page has been edited elsewhere. Please reload the page to avoid losing those changes.';
+                  }
+                } else {
+                  errorMsg = 'Unable to connect. Please reload and try again.';
+                }
+                $('#autosave-msg').text(errorMsg);
+                window.toastr.error(errorMsg);
+              },
+            });
+          }
+
+          function haveDirtyFields() {
+            var latestFormData = $('#{{ ref_id }}').find('[type!="hidden"]').serialize();
+            if (latestFormData !== lastSavedData) {
+              return true;
+            }
+          }
+
+          $(window).bind('beforeunload', function() {
+            if(haveDirtyFields()){
+              return 'You have unsaved changes on this page. Do you want to leave this page?';
+            }
+          });
+        }
+      });
+    </script>
+   {%- endif %}
+  {% block footerscripts %}{% endblock %}
+{% endblock %}
+
+
+

funnel/views/mixins.py

@@ -1,7 +1,10 @@
+from uuid import uuid4
 from flask import abort, g, redirect, request
+from baseframe import _, forms
 from coaster.utils import require_one_of
-from ..models import (Project, Profile, ProjectRedirect, Proposal, ProposalRedirect, Session,
-    UserGroup, Venue, VenueRoom, Section)
+from werkzeug.datastructures import MultiDict
+from ..models import (Draft, Project, Profile, ProjectRedirect, Proposal, ProposalRedirect, Session,
+    UserGroup, Venue, VenueRoom, Section, db)
 
 
 class ProjectViewMixin(object):
@@ -130,3 +133,75 @@ def loader(self, profile, project, section):
             ).first_or_404()
         g.profile = section.project.profile
         return section
+
+
+class DraftModelViewMixin(object):
+    def get_draft(self, current_obj=None):
+        """
+        Returns the draft object for `current_obj`. Defaults to `self.obj`.
+        `current_obj` is needed in case of multi-model views.
+        """
+        obj = current_obj or self.obj
+        return Draft.query.get((self.model.__tablename__, obj.uuid))
+
+    def delete_draft(self, current_obj=None):
+        """
+        Deletes draft for `current_obj`, or `self.obj` if `current_obj` is `None`.
+        """
+        draft = self.get_draft(current_obj)
+        if draft is not None:
+            db.session.delete(draft)
+            db.session.commit()
+
+    def autosave_get(self, current_obj=None):
+        """
+        Returns a tuple of the current draft revision and the formdata needed to initialize forms
+        """
+        draft = self.get_draft(current_obj)
+        initial_formdata = MultiDict(draft.body['form']) if draft is not None else None
+        return draft.revision, initial_formdata
+
+    def autosave_post(self, current_obj=None):
+        """
+        Handles autosave POST requests
+        """
+        if 'form.revision' not in request.form:
+            # as form.autosave is true, the form should have `form.revision` field even if it's empty
+            return {'error': _("Form must contain a revision ID.")}, 400
+        if forms.Form().validate_on_submit():
+            incoming_data = MultiDict(request.form.items(multi=True))
+            client_revision = incoming_data.pop('form.revision')
+            incoming_data.pop('csrf_token')
+
+            # find the last draft
+            draft = self.get_draft(current_obj)
+
+            if draft is not None:
+                if client_revision is None or (client_revision is not None and str(draft.revision) != client_revision):
+                    # draft exists, but the form did not send a revision ID,
+                    # OR revision ID sent by client does not match the last revision ID
+                    return {'error': _("There has been changes to this draft since you last edited it. Please reload.")}, 400
+                elif client_revision is not None and str(draft.revision) == client_revision:
+                    # revision ID sent my client matches, save updated draft data and update revision ID
+                    existing = MultiDict(draft.body['form'])
+                    for key in incoming_data.keys():
+                        if existing[key] != incoming_data[key]:
+                            existing[key] = incoming_data[key]
+                    draft.body = {'form': existing}
+                    draft.revision = uuid4()
+            elif draft is None and client_revision:
+                # The form contains a revision ID but no draft exists.
+                # Somebody is making autosave requests with an invalid draft ID.
+                return {'error': _("Invalid revision ID or the existing changes have been submitted already. Please reload.")}, 400
+            else:
+                # no draft exists, create one
+                obj = current_obj or self.obj
+                draft = Draft(
+                    table=Project.__tablename__, table_row_id=obj.uuid,
+                    body={'form': incoming_data}, revision=uuid4()
+                    )
+            db.session.add(draft)
+            db.session.commit()
+            return {'revision': draft.revision}
+        else:
+            return {'error': _("Invalid CSRF token")}, 401

funnel/views/project.py

@@ -1,22 +1,25 @@
 # -*- coding: utf-8 -*-
 
 import unicodecsv
+from uuid import uuid4
 from cStringIO import StringIO
 from flask import g, flash, redirect, Response, request, abort, current_app
+from werkzeug.datastructures import MultiDict
 from baseframe import _, forms
 from baseframe.forms import render_form
 from coaster.auth import current_auth
+from coaster.utils import getbool
 from coaster.views import jsonp, route, render_with, requires_permission, UrlForView, ModelView
 
 from .. import app, funnelapp, lastuser
-from ..models import db, Project, Section, Proposal, Rsvp, RSVP_STATUS
+from ..models import db, Project, Section, Proposal, Rsvp, Draft, RSVP_STATUS
 from ..forms import ProjectForm, SubprojectForm, RsvpForm, ProjectTransitionForm, ProjectBoxofficeForm
 from ..jobs import tag_locations, import_tickets
 from .proposal import proposal_headers, proposal_data, proposal_data_flat
 from .schedule import schedule_data
 from .venue import venue_data, room_data
 from .section import section_data
-from .mixins import ProjectViewMixin, ProfileViewMixin
+from .mixins import ProjectViewMixin, ProfileViewMixin, DraftModelViewMixin
 from .decorators import legacy_redirect
 
 
@@ -75,7 +78,7 @@ class FunnelProfileProjectView(ProfileProjectView):
 
 
 @route('/<profile>/<project>/')
-class ProjectView(ProjectViewMixin, UrlForView, ModelView):
+class ProjectView(ProjectViewMixin, DraftModelViewMixin, UrlForView, ModelView):
     __decorators__ = [legacy_redirect]
 
     @route('')
@@ -129,23 +132,45 @@ def csv(self):
             headers=[('Content-Disposition', 'attachment;filename="{project}.csv"'.format(project=self.obj.name))])
 
     @route('edit', methods=['GET', 'POST'])
+    @render_with(json=True)
     @lastuser.requires_login
     @requires_permission('edit_project')
     def edit(self):
-        if self.obj.parent_project:
-            form = SubprojectForm(obj=self.obj, model=Project)
-        else:
-            form = ProjectForm(obj=self.obj, parent=self.obj.profile, model=Project)
-        form.parent_project.query = Project.query.filter(Project.profile == self.obj.profile, Project.id != self.obj.id, Project.parent_project == None)  # NOQA
-        if request.method == 'GET' and not self.obj.timezone:
-            form.timezone.data = current_app.config.get('TIMEZONE')
-        if form.validate_on_submit():
-            form.populate_obj(self.obj)
-            db.session.commit()
-            flash(_("Your changes have been saved"), 'info')
-            tag_locations.queue(self.obj.id)
-            return redirect(self.obj.url_for(), code=303)
-        return render_form(form=form, title=_("Edit project"), submit=_("Save changes"))
+        if request.method == 'GET':
+            # find draft if it exists
+            draft_revision, initial_formdata = self.autosave_get()
+
+            # initialize forms with draft initial formdata.
+            # if no draft exists, initial_formdata is None. wtforms ignore formdata if it's None.
+            if self.obj.parent_project:
+                form = SubprojectForm(obj=self.obj, model=Project, formdata=initial_formdata)
+            else:
+                form = ProjectForm(obj=self.obj, parent=self.obj.profile, model=Project, formdata=initial_formdata)
+
+            if not self.obj.timezone:
+                form.timezone.data = current_app.config.get('TIMEZONE')
+
+            return render_form(form=form, title=_("Edit project"), submit=_("Save changes"), autosave=True, draft_revision=draft_revision)
+        elif request.method == 'POST':
+            if getbool(request.args.get('form.autosave')):
+                return self.autosave_post()
+            else:
+                if self.obj.parent_project:
+                    form = SubprojectForm(obj=self.obj, model=Project)
+                else:
+                    form = ProjectForm(obj=self.obj, parent=self.obj.profile, model=Project)
+                if form.validate_on_submit():
+                    form.populate_obj(self.obj)
+                    db.session.commit()
+                    flash(_("Your changes have been saved"), 'info')
+                    tag_locations.queue(self.obj.id)
+
+                    # find and delete draft if it exists
+                    self.delete_draft()
+
+                    return redirect(self.obj.url_for(), code=303)
+                else:
+                    return render_form(form=form, title=_("Edit project"), submit=_("Save changes"), autosave=True)
 
     @route('boxoffice_data', methods=['GET', 'POST'])
     @lastuser.requires_login

migrations/versions/94ce3a9b7a3a_draft_model.py

@@ -0,0 +1,32 @@
+"""draft model
+
+Revision ID: 94ce3a9b7a3a
+Revises: c3069d33419a
+Create Date: 2019-02-06 20:48:34.700795
+
+"""
+
+revision = '94ce3a9b7a3a'
+down_revision = 'a9cb0e1c52ed'
+
+from alembic import op
+import sqlalchemy as sa
+
+from sqlalchemy_utils.types.uuid import UUIDType
+from coaster.sqlalchemy.columns import JsonDict
+
+
+def upgrade():
+    op.create_table('draft',
+        sa.Column('created_at', sa.DateTime(), nullable=False),
+        sa.Column('updated_at', sa.DateTime(), nullable=False),
+        sa.Column('table', sa.UnicodeText(), nullable=False),
+        sa.Column('table_row_id', UUIDType(binary=False), nullable=False),
+        sa.Column('body', JsonDict(), server_default='{}', nullable=False),
+        sa.Column('revision', UUIDType(binary=False), nullable=True),
+        sa.PrimaryKeyConstraint('table', 'table_row_id')
+    )
+
+
+def downgrade():
+    op.drop_table('draft')