treeview refactor

db/changes/10091-iberflora/00-department.sql

@@ -70,4 +70,14 @@ ALTER TABLE `vn2008`.`department`
 CHANGE COLUMN `lft` `lft` INT(11) NULL ,
 CHANGE COLUMN `rgt` `rgt` INT(11) NULL ;
 
+ALTER TABLE `vn2008`.`department` 
+DROP INDEX `rgt_UNIQUE` ,
+DROP INDEX `lft_UNIQUE` ;
+;
+
+ALTER TABLE `vn2008`.`department` 
+ADD INDEX `lft_rgt_depth_idx` (`lft` ASC, `rgt` ASC, `depth` ASC);
+;
+
+
 UPDATE vn.department SET lft = NULL, rgt = NULL;

front/core/components/index.js

@@ -43,4 +43,3 @@ import './input-file';
 import './radio';
 import './th';
 import './treeview';
-import './treeview/child';

front/core/components/treeview/childs.html

@@ -1,11 +1,11 @@
+
 <ul ng-if="::$ctrl.items">
-    <li
-        ng-repeat="item in $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}">
-        <div
+            ng-class="{expanded: item.active}"
             ng-click="$ctrl.toggle($event, item)"
             class="node clickable">
             <vn-icon
@@ -14,8 +14,12 @@
                 icon="keyboard_arrow_down"
                 translate-attr="{title: 'Toggle'}">
             </vn-icon>
-            <section class="tplItem"></section>
-<!--             <vn-check
+            <vn-treeview-content
+                item="item"
+                transclude-func="$ctrl.transcludeFunc">
+            </vn-treeview-content>
+<!--
+            <vn-check
                 vn-acl="{{$ctrl.aclRole}}"
                 ng-if="$ctrl.selectable"
                 field="item.selected"
@@ -30,9 +34,10 @@
                 ng-click="$ctrl.onIconClick(icon, item, $ctrl.parent, $parent.$index)"
                 vn-acl="{{$ctrl.aclRole}}"
                 vn-acl-action="remove">
-            </vn-icon-button> -->
+            </vn-icon-button>
+-->
         </div>
-  <!--       <vn-treeview-child
+        <vn-treeview-childs
             items="item.childs"
             parent="item"
             selectable="$ctrl.selectable"
@@ -42,10 +47,13 @@
             droppable="::$ctrl.droppable"
             icons="::$ctrl.icons"
             parent-scope="::$ctrl.parentScope"
-            acl-role="$ctrl.aclRole">
-        </vn-treeview-child> -->
+            acl-role="$ctrl.aclRole"
+            transclude-func="$ctrl.transcludeFunc">
+        </vn-treeview-childs>
     </li>
-    <!-- <li
+</ul>
+<!--
+<li
     ng-if="$ctrl.isInsertable && $ctrl.editable" 
     ng-click="$ctrl.onCreate($ctrl.parent)" 
     vn-acl="{{$ctrl.aclRole}}" 
@@ -58,5 +66,4 @@
             Create new one
         </div>
     </div>
-    </li> -->
-</ul>
+</li>

front/core/components/treeview/childs.js

@@ -4,12 +4,15 @@ import Component from '../../lib/component';
 class Controller extends Component {
     constructor($element, $scope, $transclude) {
         super($element, $scope);
-        this.$scope = $scope;
         this.$transclude = $transclude;
+    }
 
-        $transclude($scope.$parent, tClone => {
-            this.element.querySelector('.tplItem').appendChild(tClone[0]);
-        }, null, 'tplItem');
+    $onInit() {
+        this.transcludeFunc((tClone, $scope) => {
+            $scope.item = this.item;
+            let content = this.element.querySelector('.content');
+            angular.element(content).append(tClone);
+        });
     }
 
     toggle(event, item) {
@@ -42,8 +45,8 @@ class Controller extends Component {
 
 Controller.$inject = ['$element', '$scope', '$transclude'];
 
-ngModule.component('vnTreeviewChild', {
-    template: require('./child.html'),
+ngModule.component('vnTreeviewChilds', {
+    template: require('./childs.html'),
     controller: Controller,
     bindings: {
         items: '<',
@@ -55,10 +58,8 @@ ngModule.component('vnTreeviewChild', {
         draggable: '<?',
         droppable: '<?',
         aclRole: '<?',
-        parentScope: '<'
-    },
-    transclude: {
-        tplItem: '?tplItem'
+        parentScope: '<',
+        transcludeFunc: '<'
     },
     require: {
         treeview: '^vnTreeview'

front/core/components/treeview/content.js

@@ -0,0 +1,23 @@
+import ngModule from '../../module';
+
+class Controller {
+    constructor($element) {
+        this.$element = $element;
+    }
+
+    $onInit() {
+        this.transcludeFunc((tClone, $scope) => {
+            $scope.item = this.item;
+            this.$element.append(tClone);
+        });
+    }
+}
+Controller.$inject = ['$element'];
+
+ngModule.component('vnTreeviewContent', {
+    controller: Controller,
+    bindings: {
+        item: '<',
+        transcludeFunc: '<'
+    }
+});

front/core/components/treeview/index.html

@@ -1,7 +1,6 @@
-<vn-treeview-child
+<vn-treeview-childs
     acl-role="$ctrl.aclRole"
-    items="$ctrl.data" 
-    parent="$ctrl.data"
+    items="$ctrl.items"
     selectable="$ctrl.selectable"
     editable="$ctrl.editable"
     disabled="$ctrl.disabled"
@@ -9,5 +8,6 @@
     parent-scope="$ctrl.$scope.$parent"
     draggable="$ctrl.draggable"
     droppable="$ctrl.droppable"
-    vn-droppable="{{$ctrl.droppable}}">
-</vn-treeview-child>
+    vn-droppable="{{$ctrl.droppable}}"
+    transclude-func="$ctrl.$transclude">
+</vn-treeview-childs>

front/core/components/treeview/index.js

@@ -2,6 +2,9 @@ import ngModule from '../../module';
 import Component from '../../lib/component';
 import './style.scss';
 
+import './childs';
+import './content';
+
 /**
  * Treeview
  *
@@ -12,14 +15,7 @@ export default class Treeview extends Component {
         super($element, $scope);
         this.$scope = $scope;
         this.$transclude = $transclude;
-        this.data = [];
-
-        $transclude($scope.$parent, tClone => {
-            this.element.querySelector('vn-treeview-child').appendChild(tClone[0]);
-            // Object.assign(scope, option);
-            // li.appendChild(clone[0]);
-            // this.scopes[i] = scope;
-        }, null, 'tplItem');
+        this.items = [];
     }
 
     $onInit() {
@@ -28,7 +24,7 @@ export default class Treeview extends Component {
 
     refresh() {
         this.model.refresh().then(() => {
-            this.data = this.model.data;
+            this.items = this.model.data;
         });
     }
 
@@ -99,7 +95,5 @@ ngModule.component('vnTreeview', {
         droppable: '<?',
         aclRole: '@?'
     },
-    transclude: {
-        tplItem: '?tplItem'
-    }
+    transclude: true
 });

front/core/components/treeview/style.scss

@@ -1,30 +1,33 @@
 @import "effects";
 
-vn-treeview {
-    vn-treeview-child {
-        display: block
-    }
+vn-treeview-childs {
+    display: block;
+
     ul {
         padding: 0;
         margin: 0;
 
-        li {
+        & > li {
             list-style: none;
-
-            & > div > .arrow {
-                min-width: 24px;
-                margin-right: 10px;
-                transition: transform 200ms;
         }
-            &.expanded > div > .arrow {
-                transform: rotate(180deg);
     }
-            & > .node {
+    vn-icon-button {
+        padding: 0;
+    }
+    & > ul > li > .node {
         @extend %clickable;
         display: flex;
         padding: 5px;
         align-items: center;
 
+        & > .arrow {
+            min-width: 24px;
+            margin-right: 10px;
+            transition: transform 200ms;
+        }
+        &.expanded > .arrow {
+            transform: rotate(180deg);
+        }
         & > vn-check:not(.indeterminate) {
             color: $color-main;
 
@@ -40,8 +43,3 @@ vn-treeview {
         padding-left: 2.2em;
     }
 }
-    }
-    vn-icon-button {
-        padding: 0
-    }
-}

modules/agency/front/location/index.html

@@ -18,6 +18,12 @@
             acl-role="deliveryBoss"
             on-selection="$ctrl.onSelection(item, value)" 
             selectable="true">
+            <vn-check
+                field="item.selected"
+                on-change="$ctrl.onSelection(item, value)" 
+                triple-state="true"
+                label="{{::item.name}}"> 
+            </vn-check>
         </vn-treeview>
     </vn-card>
 </div>

modules/worker/front/department/index.html

@@ -6,14 +6,14 @@
 <div class="content-block" compact>
     <form name="form" compact>
         <vn-card margin-medium-v pad-medium>
-            <vn-treeview vn-id="treeview" model="model"
+            <vn-treeview
+                vn-id="treeview"
+                model="model"
                 on-selection="$ctrl.onSelection(item, value)"
                 on-create="$ctrl.onCreate(parent)"
                 on-drop="$ctrl.onDrop(item, dragged, dropped)"
                 icons="$ctrl.icons">
-                <tpl-item>
-                    test
-                </tpl-item>
+                {{item.name}}
             </vn-treeview>
         </vn-card>
         <vn-button-bar>