treeview refactor 2

front/core/components/icon-button/icon-button.js

@@ -3,23 +3,28 @@ import './style.scss';
 
 export default class IconButton {
     constructor($element) {
-        if ($element[0].getAttribute('tabindex') == null)
+        this.element = $element[0];
-            $element[0].tabIndex = 0;
 
-        $element.on('keyup', event => this.onKeyDown(event, $element));
+        if (this.element.getAttribute('tabindex') == null)
-        let button = $element[0].querySelector('button');
+            this.element.tabIndex = 0;
-        $element[0].addEventListener('click', event => {
+
-            if (this.disabled || button.disabled)
+        this.element.addEventListener('keyup', e => this.onKeyup(e));
-                event.stopImmediatePropagation();
+        this.element.addEventListener('click', e => this.onClick(e));
-        });
     }
 
-    onKeyDown(event, $element) {
+    onKeyup(event) {
+        if (event.code == 'Space')
+            this.onClick(event);
+    }
+
+    onClick(event) {
         if (event.defaultPrevented) return;
-        if (event.keyCode == 13) {
+        event.preventDefault();
-            event.preventDefault();
+
-            $element.triggerHandler('click');
+        // FIXME: Don't use Event.stopPropagation()
-        }
+        let button = this.element.querySelector('button');
+        if (this.disabled || button.disabled)
+            event.stopImmediatePropagation();
     }
 }
 

front/core/components/treeview/childs.html

@@ -1,69 +1,42 @@
 
-<ul ng-if="::$ctrl.items">
+<ul ng-if="$ctrl.items">
     <li ng-repeat="item in $ctrl.items" >
         <div
-            on-drop="$ctrl.onDrop(item, dragged, dropped)"
-            vn-draggable="{{::$ctrl.draggable}}"
-            vn-droppable="{{::$ctrl.droppable}}"
             ng-class="{expanded: item.active}"
             ng-click="$ctrl.toggle($event, item)"
             class="node clickable">
             <vn-icon
                 class="arrow"
-                ng-class="{invisible: item.sons == 0}"
+                ng-class="{invisible: !item.sons}"
                 icon="keyboard_arrow_down"
-                translate-attr="{title: 'Toggle'}">
+                translate-attr="::{title: 'Toggle'}">
             </vn-icon>
             <vn-treeview-content
-                item="item"
+                item="::item">
-                transclude-func="$ctrl.transcludeFunc">
             </vn-treeview-content>
 <!--
             <vn-check
                 vn-acl="{{$ctrl.aclRole}}"
                 ng-if="$ctrl.selectable"
                 field="item.selected"
-                disabled="$ctrl.disabled" 
+                disabled="$ctrl.treeview.disabled" 
                 on-change="$ctrl.select(item, value)" 
                 triple-state="true"
                 label="{{::item.name}}"> 
             </vn-check>
-            <vn-icon-button
-                icon="{{icon.icon}}"
-                ng-repeat="icon in $ctrl.icons"
-                ng-click="$ctrl.onIconClick(icon, item, $ctrl.parent, $parent.$index)"
-                vn-acl="{{$ctrl.aclRole}}"
-                vn-acl-action="remove">
-            </vn-icon-button>
 -->
+            <vn-icon-button
+                icon="add_circle"
+                ng-click="$ctrl.treeview.onAdd(item, item.childs)">
+            </vn-icon-button>
+            <vn-icon-button
+                icon="delete"
+                ng-click="$ctrl.treeview.onRemove(item, $ctrl.items, $ctrl.parent)">
+            </vn-icon-button>
         </div>
         <vn-treeview-childs
             items="item.childs"
-            parent="item"
+            parent="::item">
-            selectable="$ctrl.selectable"
-            disabled="$ctrl.disabled"
-            editable="$ctrl.editable"
-            draggable="::$ctrl.draggable"
-            droppable="::$ctrl.droppable"
-            icons="::$ctrl.icons"
-            parent-scope="::$ctrl.parentScope"
-            acl-role="$ctrl.aclRole"
-            transclude-func="$ctrl.transcludeFunc">
         </vn-treeview-childs>
     </li>
 </ul>
-<!--
-<li
-    ng-if="$ctrl.isInsertable && $ctrl.editable" 
-    ng-click="$ctrl.onCreate($ctrl.parent)" 
-    vn-acl="{{$ctrl.aclRole}}" 
-    vn-acl-action="remove">
-    <div class="node">
-        <vn-icon-button
-            icon="add_circle">
-        </vn-icon-button>
-        <div class="description" translate>
-            Create new one
-        </div>
-    </div>
-</li>

front/core/components/treeview/childs.js

@@ -7,14 +7,6 @@ class Controller extends Component {
         this.$transclude = $transclude;
     }
 
-    $onInit() {
-        this.transcludeFunc((tClone, $scope) => {
-            $scope.item = this.item;
-            let content = this.element.querySelector('.content');
-            angular.element(content).append(tClone);
-        });
-    }
-
     toggle(event, item) {
         if (event.defaultPrevented || !item.sons) return;
         event.preventDefault();
@@ -50,16 +42,7 @@ ngModule.component('vnTreeviewChilds', {
     controller: Controller,
     bindings: {
         items: '<',
-        parent: '<',
+        parent: '<?'
-        icons: '<?',
-        disabled: '<?',
-        selectable: '<?',
-        editable: '<?',
-        draggable: '<?',
-        droppable: '<?',
-        aclRole: '<?',
-        parentScope: '<',
-        transcludeFunc: '<'
     },
     require: {
         treeview: '^vnTreeview'

front/core/components/treeview/content.js

@@ -6,7 +6,7 @@ class Controller {
     }
 
     $onInit() {
-        this.transcludeFunc((tClone, $scope) => {
+        this.treeview.$transclude((tClone, $scope) => {
             $scope.item = this.item;
             this.$element.append(tClone);
         });
@@ -17,7 +17,9 @@ Controller.$inject = ['$element'];
 ngModule.component('vnTreeviewContent', {
     controller: Controller,
     bindings: {
-        item: '<',
+        item: '<'
-        transcludeFunc: '<'
+    },
+    require: {
+        treeview: '^vnTreeview'
     }
 });

front/core/components/treeview/index.html

@@ -1,13 +1,11 @@
+<section class="add-item" ng-click="$ctrl.onAdd(null, $ctrl.items)" >
+    <vn-icon-button
+        icon="add_circle">
+    </vn-icon-button>
+    <span class="description" translate>
+        Create new one
+    </span>
+</section>
 <vn-treeview-childs
-    acl-role="$ctrl.aclRole"
+    items="$ctrl.items">
-    items="$ctrl.items"
-    selectable="$ctrl.selectable"
-    editable="$ctrl.editable"
-    disabled="$ctrl.disabled"
-    icons="$ctrl.icons"
-    parent-scope="$ctrl.$scope.$parent"
-    draggable="$ctrl.draggable"
-    droppable="$ctrl.droppable"
-    vn-droppable="{{$ctrl.droppable}}"
-    transclude-func="$ctrl.$transclude">
 </vn-treeview-childs>

front/core/components/treeview/index.js

@@ -13,7 +13,6 @@ import './content';
 export default class Treeview extends Component {
     constructor($element, $scope, $transclude) {
         super($element, $scope);
-        this.$scope = $scope;
         this.$transclude = $transclude;
         this.items = [];
     }
@@ -78,6 +77,42 @@ export default class Treeview extends Component {
     onDrop(item, dragged, dropped) {
         this.emit('drop', {item, dragged, dropped});
     }
+
+    onRemove(item, items, parent) {
+        if (!this.removeFunc) return;
+        let res = this.removeFunc({$item: item});
+
+        function remove() {
+            let index = items.indexOf(item);
+            items.splice(index, 1);
+            if (parent) parent.sons--;
+        }
+
+        if (res instanceof Object && res.then)
+            res.then(remove);
+        else if (res)
+            remove();
+    }
+
+    onAdd(parent, childs) {
+        if (!this.addFunc) return;
+        let res = this.addFunc({$parent: parent});
+
+        function add() {
+            if (!childs) childs = [];
+            childs.push(res);
+            if (parent) {
+                parent.childs = childs;
+                parent.sons++;
+                parent.active = true;
+            }
+        }
+
+        if (res instanceof Object && res.then)
+            res.then(add);
+        else if (res)
+            add();
+    }
 }
 
 Treeview.$inject = ['$element', '$scope', '$transclude'];
@@ -93,7 +128,9 @@ ngModule.component('vnTreeview', {
         editable: '<?',
         draggable: '<?',
         droppable: '<?',
-        aclRole: '@?'
+        aclRole: '@?',
+        removeFunc: '&?',
+        addFunc: '&?'
     },
     transclude: true
 });

front/core/components/treeview/style.scss

@@ -1,5 +1,10 @@
 @import "effects";
 
+vn-treeview {
+    & > .add-item {
+        @extend %clickable;
+    }
+}
 vn-treeview-childs {
     display: block;
 
@@ -9,6 +14,10 @@ vn-treeview-childs {
 
         & > li {
             list-style: none;
+
+            ul {
+                padding-left: 2.2em;
+            }
         }
     }
     vn-icon-button {
@@ -39,7 +48,7 @@ vn-treeview-childs {
             color: $color-main;
         }
     }
-    ul {
+}
-        padding-left: 2.2em;
+vn-treeview-content {
-    }
+    flex-grow: 1;
 }

modules/worker/front/department/index.html

@@ -10,10 +10,9 @@
                 vn-id="treeview"
                 model="model"
                 on-selection="$ctrl.onSelection(item, value)"
-                on-create="$ctrl.onCreate(parent)"
+                remove-func="true"
-                on-drop="$ctrl.onDrop(item, dragged, dropped)"
+                add-func="{name: 'Dept1'}">
-                icons="$ctrl.icons">
+                {{::item.name}}
-                {{item.name}}
             </vn-treeview>
         </vn-card>
         <vn-button-bar>