feat: compare view refactor - selectable versions

.gitignore

@@ -13,3 +13,4 @@ htmlcov/
 .python-version
 !djangocms_versioning/static/djangocms_versioning/js/dist
 docs/_build/
+node_modules/

README.rst

@@ -63,3 +63,14 @@ Run::
 
 This should generate all html files from rst documents under `docs/_build` folder, which can be browsed.
 
+
+Generating the Frontend distribution
+====================================
+
+Re-build static files: (always use a clean clone, make sure that node 6 on is used (use nvm to manage it). Order of commands is important
+
+Run::
+
+    npm install -g gulp
+    npm install
+    gulp build

djangocms_versioning/admin.py

@@ -617,16 +617,15 @@ def compare_versions(self, request, queryset):
             return
 
         # Build the link for the version comparison of the two selected versions
-        url = reverse(
-            "admin:{app}_{model}_compare".format(
-                app=self.model._meta.app_label, model=self.model._meta.model_name
-            ),
-            args=(queryset[0].pk,),
+        url = add_url_parameters(
+            reverse('admin:{app}_{model}_compare'.format(
+                app=self.model._meta.app_label,
+                model=self.model._meta.model_name,
+            )),
+            left=queryset[0].pk,
+            right=queryset[1].pk,
         )
-        url += "?compare_to=%d" % queryset[1].pk
-
         return redirect(url)
-
     compare_versions.short_description = _("Compare versions")
 
     def grouper_form_view(self, request):
@@ -926,72 +925,53 @@ def discard_view(self, request, object_id):
 
         return redirect(version_url)
 
-    def compare_view(self, request, object_id):
+    def compare_view(self, request):
         """Compares two versions
         """
-        # Get version 1 (the version we're comparing against)
-        v1 = self.get_object(request, unquote(object_id))
-        if v1 is None:
-            return self._get_obj_does_not_exist_redirect(
-                request, self.model._meta, object_id
-            )
+        versions = OrderedDict()
+
+        for side in ('left', 'right'):
+            if side in request.GET:
+                object_id = request.GET[side]
+                version = self.get_object(request, unquote(object_id))
+                if version is None:
+                    return self._get_obj_does_not_exist_redirect(
+                        request, self.model._meta, object_id)
+                versions[side] = version
+
+        if not versions:
+            raise Http404
+
+        context = {}
         persist_params = {
             get_cms_setting("CMS_TOOLBAR_URL__DISABLE"): 1,
             get_cms_setting("CMS_TOOLBAR_URL__PERSIST"): 0,
         }
-        v1_preview_url = add_url_parameters(
-            reverse(
-                "admin:cms_placeholder_render_object_preview",
-                args=(v1.content_type_id, v1.object_id),
-            ),
-            **persist_params
-        )
-        # Get the list of versions for the grouper. This is for use
-        # in the dropdown to choose a version.
-        version_list = Version.objects.filter_by_content_grouping_values(
-            v1.content
-        ).order_by("-number")
-        # Add the above to context
-        context = {
-            "version_list": version_list,
-            "v1": v1,
-            "v1_preview_url": v1_preview_url,
-            "v1_description": format_html(
-                'Version #{number} ({date})',
-                obj=v1,
-                number=v1.number,
-                date=localize(localtime(v1.created)),
-            ),
-            "return_url": version_list_url(v1.content),
-        }
 
-        # Now check if version 2 has been specified and add to context
-        # if yes
-        if "compare_to" in request.GET:
-            v2 = self.get_object(request, unquote(request.GET["compare_to"]))
-            if v2 is None:
-                return self._get_obj_does_not_exist_redirect(
-                    request, self.model._meta, request.GET["compare_to"]
-                )
-            else:
-                context.update(
-                    {
-                        "v2": v2,
-                        "v2_preview_url": add_url_parameters(
-                            reverse(
-                                "admin:cms_placeholder_render_object_preview",
-                                args=(v2.content_type_id, v2.object_id),
-                            ),
-                            **persist_params
-                        ),
-                        "v2_description": format_html(
-                            'Version #{number} ({date})',
-                            obj=v2,
-                            number=v2.number,
-                            date=localize(localtime(v2.created)),
-                        ),
-                    }
+        # Get the list of versions for the grouper. This is for use
+        for side, version in versions.items():
+            context[side] = {
+                'obj': version,
+                'url': add_url_parameters(
+                    reverse(
+                        'admin:cms_placeholder_render_object_preview',
+                        args=(version.content_type_id, version.object_id),
+                    ),
+                    **persist_params
+                ),
+                'description': format_html(
+                    '{obj} (#{number}, {date})',
+                    obj=version,
+                    number=version.number,
+                    date=localize(localtime(version.created)),
                 )
+            }
+
+        # Get the list of versions for grouping values. This is for use
+        # in the dropdown to choose a version.
+        version = next(iter(versions.values()))
+        context['versions'] = Version.objects.filter_by_content_grouping_values(
+            version.content)
         return TemplateResponse(
             request, "djangocms_versioning/admin/compare.html", context
         )
@@ -1073,6 +1053,11 @@ def get_urls(self):
                 self.admin_site.admin_view(self.archive_view),
                 name="{}_{}_archive".format(*info),
             ),
+            url(
+               r"^compare/$",
+               self.admin_site.admin_view(self.compare_view),
+               name="{}_{}_compare".format(*info),
+            ),
             url(
                 r"^(.+)/publish/$",
                 self.admin_site.admin_view(self.publish_view),
@@ -1093,11 +1078,6 @@ def get_urls(self):
                 self.admin_site.admin_view(self.revert_view),
                 name="{}_{}_revert".format(*info),
             ),
-            url(
-                r"^(.+)/compare/$",
-                self.admin_site.admin_view(self.compare_view),
-                name="{}_{}_compare".format(*info),
-            ),
             url(
                 r"^(.+)/discard/$",
                 self.admin_site.admin_view(self.discard_view),

djangocms_versioning/static/djangocms_versioning/js/base.js

@@ -39,12 +39,12 @@ const getOrAddFrame = () => {
 const switchVersion = version => {
     const url = window.location.href;
 
-    if (url.match(/compare_to=\d+/)) {
-        window.location.href = window.location.href.replace(/compare_to=\d+/, `compare_to=${version}`);
+    if (url.match(/right=\d+/)) {
+        window.location.href = window.location.href.replace(/right=\d+/, `right=${version}`);
     } else if (url.match(/\?/)) {
-        window.location.href += `&compare_to=${version}`;
+        window.location.href += `&right=${version}`;
     } else {
-        window.location.href += `?compare_to=${version}`;
+        window.location.href += `?right=${version}`;
     }
 };
 
@@ -155,9 +155,9 @@ const breakOutOfAnIframe = () => {
     }, 0);
 };
 
-const showControls = () => $('.cms-versioning-controls .cms-toolbar-item-buttons .cms-btn-group').show();
-
 $(function() {
+    const showControls = () => $('.cms-versioning-controls .cms-toolbar-item-buttons .cms-btn-group').show();
+
     breakOutOfAnIframe();
     initControls();
 

djangocms_versioning/templates/djangocms_versioning/admin/compare.html

@@ -4,16 +4,16 @@
 <head>
     <meta charset="UTF-8">
     <title>{% spaceless %}
-        {% if v1 and v2 %}
-        {% blocktrans with left=v1.description right=v1.description %}
+    {% if left and right %}
+        {% blocktrans with left=left.description right=right.description %}
         Compare {{ left }} to {{ right }}
         {% endblocktrans %}
-    {% elif v1 %}
-        {% blocktrans with left=v1.description %}
+    {% elif left %}
+        {% blocktrans with left=left.description %}
         Compare {{ left }}
         {% endblocktrans %}
     {% elif right %}
-        {% blocktrans with right=v2.description %}
+        {% blocktrans with right=right.description %}
         Compare {{ right }}
         {% endblocktrans %}
     {% endif %}{% endspaceless %}</title>
@@ -22,27 +22,27 @@
 </head>
 <body>
     <div id="cms-top" class="cms cms-reset" data-compare='{
-        {% if v2_preview_url %}
-            "v2_url": "{{ v2_preview_url }}",
+        {% if left %}
+            "v1_url": "{{ left.url }}",
+            "v1_description": "{{ left.description }}"
         {% endif %}
-        {% if v2 %}
-            "v2_description": "{{ v2_description }}",
+        {% if right %}
+            "v2_url": "{{ right.url }}",
+            "v2_description": "{{ right.description }}",
         {% endif %}
-        "v1_url": "{{ v1_preview_url }}",
-        "v1_description": "{{ v1_description }}"
     }'>
         <div class="cms-toolbar">
             <div class="cms-versioning-controls">
                 <a class="cms-btn" href="{{ return_url }}">{% trans "Back" %}</a> &nbsp;
                 <span class="cms-versioning-title">
-                {% blocktrans with left=v1_description %}
+                {% blocktrans with left=left.description %}
                     Comparing {{ left }} with
                 {% endblocktrans %}
                 </span>
                 <select class="js-cms-versioning-version cms-select">
-                    <option disabled {% if not request.GET.compare_to %} selected{% endif %}>{% trans "Pick a version to compare to" %}</option>
-                    {% for version in version_list %}
-                        <option value="{{ version.pk }}" {% if v2 and v2.pk == version.pk %} selected{% endif %}>{% trans  'Version'%} #{{ version.number }}({{ version.created|date }})</option>
+                    <option disabled {% if not request.GET.right %} selected{% endif %}>{% trans "Pick a version to compare to" %}</option>
+                    {% for version in versions %}
+                        <option value="{{ version.pk }}" {% if right and right.obj == version %} selected{% endif %}>{% trans  'Version'%} #{{ version.number }}({{ version.created|date }})</option>
                     {% endfor %}
                 </select>
                 <div class="cms-tooblar-item cms-toolbar-item-buttons">