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,17 @@
+# -*- coding: utf-8 -*-
+
+from sqlalchemy_utils import UUIDType
+from . import db, JsonDict, NoIdMixin, TimestampMixin
+
+__all__ = ['Draft']
+
+
+class Draft(NoIdMixin, TimestampMixin, db.Model):
+    """Store for autosaved, unvalidated drafts on behalf of other models"""
+    __tablename__ = 'draft'
+    __uuid_primary_key__ = True
+
+    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 = '';
+
+        $('#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) {
+                  $('#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/project.py

@@ -1,15 +1,18 @@
 # -*- 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
@@ -129,23 +132,81 @@ 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 = Draft.query.filter_by(table=Project.__tablename__, table_row_id=self.obj.uuid).first()
+            initial_formdata = MultiDict(draft.body['form']) if draft is not None else None
+
+            # 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')
+
+            # if draft exists, add latest revision ID to the form
+            last_revision_id = draft.revision if draft is not None else None
+
+            return render_form(form=form, title=_("Edit project"), submit=_("Save changes"), autosave=True, last_revision_id=last_revision_id)
+        elif request.method == 'POST':
+            if getbool(request.args.get('form.autosave')):
+                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 valid revision ID.")}, 400
+
+                client_revision = request.form['form.revision']
+
+                # find the last draft
+                draft = Draft.query.get((Project.__tablename__, self.obj.uuid))
+
+                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'])
+                        incoming = MultiDict(request.form.items(multi=True))
+                        for key in incoming.keys():
+                            if existing[key] != incoming[key]:
+                                existing[key] = incoming[key]
+                        draft.body = {'form': existing}
+                        draft.revision = uuid4()
+                else:
+                    # no draft exists, create one
+                    draft = Draft(
+                        table=Project.__tablename__, table_row_id=self.obj.uuid,
+                        body={'form': request.form.items(multi=True)}, revision=uuid4()
+                        )
+                db.session.add(draft)
+                db.session.commit()
+                return {'revision': draft.revision}
+            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 drafts
+                    tdraft = Draft.query.get((Project.__tablename__, self.obj.uuid))
+                    db.session.delete(tdraft)
+                    db.session.commit()
+                    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 = 'c3069d33419a'
+
+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')