Assets: tree view update - adding items to empty children element

assets/datagrid.css

@@ -18,10 +18,6 @@
   background-color: #fff;
   padding: 1em;
   box-sizing: border-box;
-  /* .datagrid-tree-items {
-		border: 1px solid pink;
-		min-height: 10px;
-	} */
 }
 
 .datagrid .exports .btn {
@@ -209,6 +205,11 @@
 
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right {
   order: 2;
+  z-index: 2;
+}
+
+.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .btn {
+  margin-top: -3px;
 }
 
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-columns {
@@ -247,11 +248,20 @@
 }
 
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-children:not(.datagrid-tree) {
-  padding-left: 28px;
+  margin-left: 28px;
 }
 
-.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-children:not(.datagrid-tree):empty {
-  min-height: 7px;
+.datagrid .datagrid-tree .datagrid-tree-item:not(.has-children) > .datagrid-tree-item-children {
+  box-sizing: border-box;
+  position: relative;
+  width: calc(100% - 28px);
+  min-height: 17px;
+  margin-top: -17px;
+  z-index: 1;
+}
+
+.datagrid .datagrid-tree .datagrid-tree-item.has-children > .datagrid-tree-item-children {
+  display: none;
 }
 
 .datagrid .btn {

assets/datagrid.js

@@ -152,10 +152,16 @@ datagridSortableTree = function() {
       }
       parent = row.parent().closest('.datagrid-tree-item');
       if (parent.length) {
+        parent.find('.datagrid-tree-item-children').css({
+          display: 'block'
+        });
+        parent.addClass('has-children');
         parent_id = parent.data('id');
       }
       url = $(this).data('sortable-url');
-      datagridSortableTree;
+      if (!url) {
+        return;
+      }
       return $.nette.ajax({
         type: 'GET',
         url: url,
@@ -166,7 +172,9 @@ datagridSortableTree = function() {
           parent_id: parent_id
         },
         error: function(jqXHR, textStatus, errorThrown) {
-          return alert(jqXHR.statusText);
+          if (errorThrown !== 'abort') {
+            return alert(jqXHR.statusText);
+          }
         }
       });
     },
@@ -204,7 +212,6 @@ $.nette.ext('datagrid.happy', {
       checked_rows = document.querySelectorAll(class_selector + ' ' + 'input[data-check]:checked');
       if (checked_rows.length === 1 && checked_rows[0].getAttribute('name') === 'toggle-all') {
         input = document.querySelector(class_selector + ' input[name=toggle-all]');
-        console.log(class_selector + ' input[name=toggle-all]');
         if (input) {
           input.checked = false;
           event = new Event('change', {
@@ -345,8 +352,9 @@ $.nette.ext('datagrid.tree', {
       }
       children_block.addClass('loaded');
       children_block.slideToggle('fast');
-      return $.nette.load();
+      $.nette.load();
     }
+    return datagridSortableTree();
   }
 });
 

assets/datagrid.min.css

@@ -37,15 +37,17 @@
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-left>.chevron:hover{-webkit-box-shadow:0 0 3px 0 #b4b4b4;-moz-box-shadow:0 0 3px 0 #b4b4b4;box-shadow:0 0 3px 0 #b4b4b4}
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-left>.chevron.toggle-rotate{transform:rotate(90deg)}
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-left>.chevron .fa{font-size:10px;transform:translate(1px,0)}
-.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right{order:2}
+.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right{order:2;z-index:2}
+.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .btn{margin-top:-3px}
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-columns{white-space:nowrap;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center}
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-columns .datagrid-tree-item-right-columns-column{padding:0 7px;margin-right:4px}
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-columns .datagrid-tree-item-right-columns-column:last-child{margin-right:0}
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-actions{margin-left:7px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center}
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-actions .datagrid-tree-item-right-actions-action{margin-right:4px}
 .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-actions .datagrid-tree-item-right-actions-action:last-child{margin-right:0}
-.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-children:not(.datagrid-tree){padding-left:28px}
-.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-children:not(.datagrid-tree):empty{min-height:7px}
+.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-children:not(.datagrid-tree){margin-left:28px}
+.datagrid .datagrid-tree .datagrid-tree-item:not(.has-children)>.datagrid-tree-item-children{box-sizing:border-box;position:relative;width:calc(100% - 28px);min-height:17px;margin-top:-17px;z-index:1}
+.datagrid .datagrid-tree .datagrid-tree-item.has-children>.datagrid-tree-item-children{display:none}
 .datagrid .btn{transition:all .1s ease-in-out;white-space:nowrap}
 .datagrid select{padding:0;text-transform:none}
 .datagrid .row-grid-bottom{font-size:0;padding:8px;background-color:#f9f9f9;border:1px solid #ddd;border-top:0}