iqvoc 4.4.0 → 4.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 623d42ba4d2c0e1074415d733d13e055920a5b86
-  data.tar.gz: 6d023b4d743db296457cc3d32a66dcda7432ccc1
+  metadata.gz: 99bea7894088f98e903840ee975f4ce1106657a5
+  data.tar.gz: 10c07f875139b1efc2abff513f12fd4e20385a1c
 SHA512:
-  metadata.gz: 2a30ce65e733197799371f56014f3b030142b8c01579cf908641b4d78f31c7cffb7777d64eaa86e7dc73ba6ce0aa3ec23b5f90e8b07e51eb72fa7f9d3aa4111b
-  data.tar.gz: fa250e9bc5deb981412982ea03d28e9582e095b6f58a31400dd4fc191ca50952a48b655da8eeaedf876cb56bb3a5ae24e392a84a513ae925e00ae83204699a2d
+  metadata.gz: 99cf4160a2ca89da8ed57c4654e7f64fadc02ced0d12b80abd89a6468ce7d51ac843c517b6426fd07448100e15abce4d050fd8db7cf7b05aa7861c7b6042166f
+  data.tar.gz: 0110104c182fcc86ba50df85efb666267ff2bcbaf0fcc4faf8e049926909572a3c60f6f48cba2aa3cb4d5d3234fdbc99842deaae3e1a59f6c551103c1d41c2a3

data/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [4.5.0]
+
+4.5.0 brings drag'n'drop concept editing capabilities and a new hierarchical
+concept draft view. Browse your thesaurus an see where new concepts version
+exists.
+
+  * Add hierarchical draft view with new concept versions
+  * Drag'n'Drop support for moving and copying concepts inside hierarchies
+  * Minor bugfixes
+
 ## [4.4.0]
 
   * [Asynchronous](https://github.com/innoq/iqvoc#background-jobs) SKOS exporter

data/app/assets/javascripts/framework.js

@@ -2,8 +2,7 @@
 //= require rails
 //= require jquery-ui.custom
 //= require jquery-ui.datepicker-de
-//= require jquery.treeview
-//= require jquery.treeview.async
+//= require tree.jquery.js
 //= require storage
 //= require bootstrap/transition
 //= require bootstrap/collapse

data/app/assets/javascripts/iqvoc/iqvoc.js

@@ -182,20 +182,7 @@ jQuery(document).ready(function($) {
   $("select.search_type").change();
 
   // hierarchical tree view
-  $("ul.hybrid-treeview").each(function() {
-    var url = $(this).attr("data-url"),
-      container = this;
-    $(this).treeview({
-      collapsed: true,
-      toggle: function() {
-        var el = $(this);
-        if(el.hasClass("hasChildren")) {
-          var childList = el.removeClass("hasChildren").find("ul");
-          $.fn.treeviewLoad({ url: url }, this.id, childList, container);
-        }
-      }
-    });
-  });
+  IQVOC.treeview("ul.hybrid-treeview");
 
   // unobtrusive tabs
   $(".tab-panels").addClass("tab-content"); // the latter is for Bootstrap Tabs
@@ -212,5 +199,5 @@ jQuery(document).ready(function($) {
   IQVOC.labelResolver();
   $(document.body).on("concept-label", function(ev, container) {
     IQVOC.labelResolver(container);
-  })
+  });
 });

data/app/assets/javascripts/iqvoc/manifest.js

@@ -8,3 +8,4 @@
 //= require iqvoc/federated_concept_mapper
 //= require iqvoc/concept_mapping_manager
 //= require iqvoc/label_resolver
+//= require iqvoc/treeview

data/app/assets/javascripts/iqvoc/treeview.js

@@ -0,0 +1,218 @@
+/*jslint vars: true, browser: true, white: true */
+/*global jQuery, IQVOC */
+
+IQVOC.treeview = (function($) {
+
+"use strict";
+
+function Treeview(container) {
+  this.container = container.jquery ? container : $(container);
+
+  $(container).each(function() {
+    var url = $(this).data('url');
+    var container = this;
+
+    var dragabbleSupport = $(container).data('dragabble');
+    var polyhierarchySupport = $(container).data('polyhierarchy-support');
+    var saveLabel = $(container).data('save-label');
+    var copyLabel = $(container).data('copy-label');
+    var undoLabel = $(container).data('undo-label');
+
+    // build tree data from html markup
+    var data = $(this).children('li').map(function() {
+      var item = $(this);
+
+      return {
+        label: item.children('a').html(),
+        load_on_demand: item.data('has-children'),
+        id: item.attr('id'),
+        url: item.children('a').attr('href'),
+        update_url: item.data('update-url'),
+        published: item.data('published')
+      };
+    });
+
+    $(this).tree({
+      dragAndDrop: dragabbleSupport ? true : false,
+      autoEscape: false,
+      selectable: false,
+      closedIcon: $('<i class="fa fa-plus-square-o"></i>'),
+      openedIcon: $('<i class="fa fa-minus-square-o"></i>'),
+      data: data,
+      dataUrl: function(node) {
+        // build ajax url (add root param)
+        // FIXME: uggly url concatenation
+        if (url.indexOf('published') < 0) {
+          return node ? url + '?root=' + node.id : url;
+        }
+        else {
+          return node ? url + '&root=' + node.id : url;
+        }
+      },
+      onCreateLi: function(node, $li) {
+        // TODO: add additionalText if present
+        var link = $('<a href="' + node.url +'">' + node.name + '</a>');
+        $li.find('.jqtree-title').replaceWith(link);
+
+        // mark published/unpublished items
+        if (typeof node.published !== 'undefined' && !node.published) {
+          // modify draft link
+          if (link.attr('href').indexOf('published') < 0) {
+            link.attr('href', link.attr('href')+'?published=0'); // FIXME: implicit knowledge
+          }
+          link.addClass('unpublished');
+        } else {
+          link.addClass('published');
+        }
+
+        if (dragabbleSupport) {
+          // mark locked items
+          if (typeof node.locked !== 'undefined' && node.locked) {
+            link.after(' <i class="fa fa-lock"/>');
+          } else {
+            link.after(' <i class="fa fa-arrows"/>');
+          }
+        }
+
+        if(node.moved) {
+          $li.data('node-id', node.id);
+          $li.data('old-parent-node-id', node.old_parent_id);
+          $li.data('new-parent-node-id', node.target_node_id);
+          $li.data('old-previous-sibling-id', node.old_previous_sibling_id);
+          $li.data('update-url', node.update_url);
+
+          var saveButton = $('<button type="button" class="btn btn-primary btn-xs node-btn" data-tree-action="move"><i class="fa fa-save"></i> ' + saveLabel + '</button>');
+          var copyButton = $('<button type="button" class="btn btn-primary btn-xs node-btn" data-tree-action="copy"><i class="fa fa-copy"></i> ' + copyLabel + '</button>');
+          var undoButton = $('<button type="button" class="btn btn-primary btn-xs reset-node-btn"><i class="fa fa-undo"></i> ' + undoLabel + '</button>');
+          link.after(saveButton, undoButton);
+
+          if(polyhierarchySupport) {
+            saveButton.after(copyButton);
+          }
+        }
+      },
+      onIsMoveHandle: function($element) {
+        // dom element which acts as move handle
+        return ($element.is('.fa-arrows'));
+      },
+      onCanMoveTo: function(moved_node, target_node, position){
+        // prevent node movement inside parent node
+        if (moved_node.parent === target_node.parent && position === 'after'){
+          return false;
+        }
+        // prevent locked node movement
+        else if (moved_node.locked === true || target_node.locked === true) {
+          return false;
+        }
+        // only drop node inside nodes, no ordering
+        else if (position === 'after') {
+          return false;
+        } else {
+          return true;
+        }
+      }
+    });
+  });
+
+  // mark moved nodes
+  $('ul.hybrid-treeview').on('tree.move', function(event) {
+    var moved_node = event.move_info.moved_node;
+
+    $(this).tree('updateNode', moved_node, {
+      moved: true,
+      target_node_id: event.move_info.target_node.id
+    });
+
+    if (moved_node.getPreviousSibling() !== null) {
+      $(this).tree('updateNode', moved_node, {old_previous_sibling_id: moved_node.getPreviousSibling().id});
+    }
+    if (typeof moved_node.parent.id !== 'undefined') {
+      $(this).tree('updateNode', moved_node, {old_parent_id: moved_node.parent.id});
+    }
+  });
+
+  // save/copy moved node
+  $('ul.hybrid-treeview').on('click', 'button.node-btn', function(event) {
+    var $tree = $('ul.hybrid-treeview');
+    var treeAction = $(this).data('tree-action');
+    var updateUrl = $(this).closest('li').data('update-url');
+
+    var movedNodeId = $(this).closest('li').data('node-id');
+    var oldParentNodeId = $(this).closest('li').data('old-parent-node-id');
+    var oldPreviousSiblingId = $(this).closest('li').data('old-previous-sibling-id');
+    var newParentNodeId = $(this).closest('li').data('new-parent-node-id');
+
+    $.ajax({
+      url : updateUrl,
+      type : 'PATCH',
+      data : {
+        tree_action: treeAction,
+        moved_node_id: movedNodeId,
+        old_parent_node_id: oldParentNodeId,
+        new_parent_node_id: newParentNodeId
+      },
+      statusCode: {
+        200: function() {
+          [movedNodeId, newParentNodeId, oldParentNodeId].forEach(function(nodeId){
+            setToDraft(nodeId, $tree);
+          });
+
+          // add node to old parent, necessary to see both node directly after movement,
+          // this is not necessary if you refresh the page
+          if (treeAction === 'copy') {
+            var node = $tree.tree('getNodeById', movedNodeId);
+            if (typeof oldPreviousSiblingId !== 'undefined') {
+              var old_previous_sibling = $tree.tree('getNodeById', oldPreviousSiblingId);
+              $tree.tree('addNodeAfter', node, old_previous_sibling);
+            } else if (typeof oldParentNodeId !== 'undefined') {
+              var old_parent_node = $tree.tree('getNodeById', oldParentNodeId);
+              $tree.tree('appendNode', node, old_parent_node);
+            }
+          }
+        }
+      }
+    });
+  });
+
+  // reset moved node
+  $('ul.hybrid-treeview').on('click', 'button.reset-node-btn', function(event) {
+    var $tree = $('ul.hybrid-treeview');
+    var nodeId = $(this).closest('li').data('node-id');
+    var oldPreviousSiblingId = $(this).closest('li').data('old-previous-sibling-id');
+    var oldParentNodeId = $(this).closest('li').data('old-parent-node-id');
+
+    moveToOldPosition(nodeId, oldPreviousSiblingId, oldParentNodeId, $tree);
+  });
+
+  function setToDraft(nodeId, $tree) {
+    if (typeof nodeId !== 'undefined') {
+      var moved_node = $tree.tree('getNodeById', nodeId);
+      $tree.tree('updateNode', moved_node, {
+        moved: false,
+        published: false
+      });
+    }
+  }
+
+  function moveToOldPosition(nodeId, oldPreviousSiblingId, oldParentNodeId, $tree) {
+
+    var node = $tree.tree('getNodeById', nodeId);
+
+    if (typeof oldPreviousSiblingId !== 'undefined') {
+      var old_previous_sibling = $tree.tree('getNodeById', oldPreviousSiblingId);
+      $tree.tree('moveNode', node, old_previous_sibling, 'after');
+    }
+    else if (typeof oldParentNodeId !== 'undefined') {
+      var oldParentNode = $tree.tree('getNodeById', oldParentNodeId);
+      $tree.tree('moveNode', node, oldParentNode, 'inside');
+    }
+    $tree.tree('updateNode', node, {moved: false});
+  }
+
+}
+
+return function(selector) {
+  return new Treeview(selector);
+};
+
+}(jQuery));

data/app/assets/stylesheets/framework.css.scss

@@ -1,4 +1,3 @@
-@import 'jquery.treeview';
 @import 'jquery-ui-1.10.3.custom';
 
 @import 'bootstrap';

data/app/assets/stylesheets/iqvoc/components/_components.css.scss

@@ -1,8 +1,3 @@
-.navbar {
-  .quicksearch {
-  }
-}
-
 .onebox {
   padding-top: 80px;
   margin-top: 2em;
@@ -74,7 +69,7 @@ tr.highlightable {
   margin: 0;
   li {
     a {
-      color: #BFBFBF;
+      color: #bfbfbf;
       font-weight: bold;
     }
     border-radius: 4px;
@@ -245,3 +240,7 @@ tr.highlightable {
     color: $muted-color;
   }
 }
+
+a.unpublished {
+  color: #bfbfbf;
+}

data/app/assets/stylesheets/iqvoc/components/_treeview.css.scss.erb

@@ -0,0 +1,119 @@
+ul.hybrid-treeview { padding: 0;}
+
+ul.jqtree-tree {
+  margin-left: 0;
+
+  li {
+    background: url(asset_path('treeview-default-line.gif')) no-repeat;
+    background-position: 2px -1px;
+    line-height: 1.8em;
+    padding-left: 18px;
+
+    &.jqtree-closed > ul.jqtree_common {
+      display: none;
+    }
+
+    &.jqtree_common {
+      clear: both;
+      list-style-type: none;
+    }
+
+    &.jqtree-folder {
+      background-position: 2px -190px;
+
+      &.jqtree-closed { margin-bottom: 1px;}
+      &:last-of-type { background: 0;}
+    }
+
+    &.jqtree-ghost {
+      margin-right: 10px;
+      position: relative;
+      z-index: 10;
+
+      span {
+        display: block;
+
+        &.jqtree-circle {
+          -moz-border-radius: 100px;
+          -webkit-border-radius: 100px;
+          border-radius: 100px;
+          border: solid 2px #000;
+          height: 8px;
+          left: -6px;
+          position: absolute;
+          top: -4px;
+          width: 8px;
+        }
+
+        &.jqtree-line {
+          background-color: #000;
+          height: 2px;
+          left: 2px;
+          padding: 0;
+          position: absolute;
+          top: -1px;
+          width: 100%;
+        }
+      }
+    }
+
+    &:last-of-type { background-position: 2px -1766px;}
+
+    .jqtree-element { position: relative;}
+  }
+
+  ul.jqtree_common {
+    display: block;
+    margin-right: 0;
+  }
+
+  .jqtree-toggler {
+    background-color: #fff;
+    border-bottom: 0;
+    color: #333;
+    cursor: pointer;
+    margin-left: -14px;
+    margin-right: .5em;
+    text-decoration: none;
+  }
+
+  span {
+    &.jqtree-border {
+      border: solid 2px #000;
+      box-sizing: content-box;
+      display: block;
+      left: -2px;
+      margin: 0;
+      position: absolute;
+      top: 0;
+    }
+  }
+
+  .fa-arrows { cursor: move;}
+
+  .jqtree-loading > div.jqtree-element.jqtree_common:after {
+    content: url(asset_path('ajax-loader.gif'));
+    margin-left: 8px;
+  }
+
+}
+
+ul.jqtree-tree,
+ul.jqtree-tree ul.jqtree_common {
+  list-style: none outside;
+  margin-bottom: 0;
+  padding: 0;
+}
+
+span.jqtree-dragging {
+  background: #000;
+  color: #fff;
+  cursor: pointer;
+  opacity: .6;
+  padding: 2px 8px;
+}
+
+.node-btn,
+.reset-node-btn {
+  margin: 0 3px;
+}

data/app/assets/stylesheets/iqvoc/manifest.css.scss

@@ -1,6 +1,7 @@
 @import 'iqvoc/settings';
 @import 'iqvoc/hacks/bootstrap_extensions';
 @import 'iqvoc/hacks/jquery-ui_extensions';
+@import 'iqvoc/components/treeview';
 @import 'iqvoc/components/components';
 @import 'iqvoc/components/panels';
 @import 'iqvoc/components/sidebars';

data/app/concerns/versioning.rb

@@ -28,53 +28,66 @@ module Versioning
 
   module ClassMethods
     def by_origin(origin)
-       where(origin: origin)
-     end
-
-     def published
-       where(arel_table[:published_at].not_eq(nil))
-     end
-
-     def unpublished
-       where(published_at: nil)
-     end
-
-     # The following method returns all objects which should be selectable by the editor
-     def editor_selectable
-       where(
-         arel_table[:published_at].not_eq(nil).or( # == published (is there a way to OR combine two scopes? `published OR where(...)`)
-           arel_table[:published_at].eq(nil).and(arel_table[:published_version_id].eq(nil)) # this are all unpublished with no published version
-         )
-       )
-     end
-
-     def in_edit_mode
-       where(arel_table[:locked_by].not_eq(nil))
-     end
-
-     def unpublished_or_follow_up
-       where(
-         arel_table[:published_at].eq(nil).or(
-           arel_table[:follow_up].not_eq(nil)
-         )
-       )
-     end
-
-     def unsynced
-       where(rdf_updated_at: nil)
-     end
-
-     def include_to_deep_cloning(*association_names)
-       (@@include_to_deep_cloning ||= {})[self] ||= []
-       association_names.each do |association_name|
-         @@include_to_deep_cloning[self] << association_name
-       end
-     end
-
-     def includes_to_deep_cloning
-       (@@include_to_deep_cloning ||= {})[self] ||= []
-       (@@include_to_deep_cloning.keys & self.ancestors).map{ |c| @@include_to_deep_cloning[c] }.flatten.compact
-     end
+      where(origin: origin)
+    end
+
+    def published
+      where(arel_table[:published_at].not_eq(nil))
+    end
+
+    def unpublished
+      where(published_at: nil)
+    end
+
+    def locked
+      where(arel_table[:locked_by].not_eq(nil))
+    end
+
+    def published_with_newer_versions
+      # published objects without objects which have a new one in editing
+      published_objects = arel_table[:published_at].not_eq(nil).and(arel_table[:origin].not_in(unpublished.map(&:origin)))
+      # only unpublished objects
+      unpublished_objects = arel_table[:published_at].eq(nil)
+
+      where(published_objects.or(unpublished_objects))
+    end
+
+    # The following method returns all objects which should be selectable by the editor
+    def editor_selectable
+      where(
+        arel_table[:published_at].not_eq(nil).or( # == published (is there a way to OR combine two scopes? `published OR where(...)`)
+          arel_table[:published_at].eq(nil).and(arel_table[:published_version_id].eq(nil)) # this are all unpublished with no published version
+        )
+      )
+    end
+
+    def in_edit_mode
+      where(arel_table[:locked_by].not_eq(nil))
+    end
+
+    def unpublished_or_follow_up
+      where(
+        arel_table[:published_at].eq(nil).or(
+          arel_table[:follow_up].not_eq(nil)
+        )
+      )
+    end
+
+    def unsynced
+      where(rdf_updated_at: nil)
+    end
+
+    def include_to_deep_cloning(*association_names)
+      (@@include_to_deep_cloning ||= {})[self] ||= []
+      association_names.each do |association_name|
+        @@include_to_deep_cloning[self] << association_name
+      end
+    end
+
+    def includes_to_deep_cloning
+      (@@include_to_deep_cloning ||= {})[self] ||= []
+      (@@include_to_deep_cloning.keys & self.ancestors).map{|c| @@include_to_deep_cloning[c]}.flatten.compact
+    end
   end
 
   def branch(user)

data/app/controllers/concepts/hierarchical_controller.rb

@@ -16,10 +16,14 @@
 
 class Concepts::HierarchicalController < ConceptsController
   def index
-    authorize! :read, Iqvoc::Concept.base_class
+    if params[:published] == '0'
+      authorize! :update, Iqvoc::Concept.base_class
+    else
+      authorize! :read, Iqvoc::Concept.base_class
+    end
 
     scope = Iqvoc::Concept.base_class
-    scope = params[:published] == '0' ? scope.editor_selectable : scope.published
+    scope = params[:published] == '0' ? scope.published_with_newer_versions : scope.published
 
     # only select unexpired concepts
     scope = scope.not_expired
@@ -55,12 +59,16 @@ class Concepts::HierarchicalController < ConceptsController
       format.html
       format.json do # Treeview data
         concepts = @concepts.select { |c| can? :read, c }.map do |c|
+          url = (c.published?) ? concept_path(id: c, format: :html) : concept_path(id: c, format: :html, published: 0)
           {
             id: c.id,
-            url: concept_path(id: c, format: :html),
-            text: CGI.escapeHTML(c.pref_label.to_s),
-            hasChildren: (params[:broader] ? c.broader_relations.any? : c.narrower_relations.any?),
-            additionalText: (" (#{c.additional_info})" if c.additional_info.present?)
+            label: CGI.escapeHTML(c.pref_label.to_s),
+            additionalText: (" (#{c.additional_info})" if c.additional_info.present?),
+            load_on_demand: (params[:broader] ? c.broader_relations.any? : c.narrower_relations.any?),
+            url: url,
+            update_url: move_concept_url(c),
+            published: (c.published?) ? true : false,
+            locked: (can?(:branch, c) || can?(:update, c) ? false : true)
           }
         end
         render json: concepts