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
+    <li ng-repeat="item in $ctrl.items" >
-        ng-repeat="item in $ctrl.items" 
-        on-drop="$ctrl.onDrop(item, dragged, dropped)"
-        vn-draggable="{{::$ctrl.draggable}}"
-        vn-droppable="{{::$ctrl.droppable}}"
-        ng-class="{expanded: item.active}">
         <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
@@ -14,8 +14,12 @@
                 icon="keyboard_arrow_down"
                 translate-attr="{title: 'Toggle'}">
             </vn-icon>
-            <section class="tplItem"></section>
+            <vn-treeview-content
-<!--             <vn-check
+                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,21 +47,23 @@
             droppable="::$ctrl.droppable"
             icons="::$ctrl.icons"
             parent-scope="::$ctrl.parentScope"
-            acl-role="$ctrl.aclRole">
+            acl-role="$ctrl.aclRole"
-        </vn-treeview-child> -->
+            transclude-func="$ctrl.transcludeFunc">
-    </li> 
+        </vn-treeview-childs>
-    <!-- <li
+    </li>
-        ng-if="$ctrl.isInsertable && $ctrl.editable" 
+</ul>
-        ng-click="$ctrl.onCreate($ctrl.parent)" 
+<!--
-        vn-acl="{{$ctrl.aclRole}}" 
+<li
-        vn-acl-action="remove">
+    ng-if="$ctrl.isInsertable && $ctrl.editable" 
-        <div class="node">
+    ng-click="$ctrl.onCreate($ctrl.parent)" 
-            <vn-icon-button
+    vn-acl="{{$ctrl.aclRole}}" 
-                icon="add_circle">
+    vn-acl-action="remove">
-            </vn-icon-button>
+    <div class="node">
-            <div class="description" translate>
+        <vn-icon-button
-                Create new one
+            icon="add_circle">
-            </div>
+        </vn-icon-button>
+        <div class="description" translate>
+            Create new one
         </div>
-    </li> -->
+    </div>
-</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 => {
+    $onInit() {
-            this.element.querySelector('.tplItem').appendChild(tClone[0]);
+        this.transcludeFunc((tClone, $scope) => {
-        }, null, 'tplItem');
+            $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', {
+ngModule.component('vnTreeviewChilds', {
-    template: require('./child.html'),
+    template: require('./childs.html'),
     controller: Controller,
     bindings: {
         items: '<',
@@ -55,10 +58,8 @@ ngModule.component('vnTreeviewChild', {
         draggable: '<?',
         droppable: '<?',
         aclRole: '<?',
-        parentScope: '<'
+        parentScope: '<',
-    },
+        transcludeFunc: '<'
-    transclude: {
-        tplItem: '?tplItem'
     },
     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" 
+    items="$ctrl.items"
-    parent="$ctrl.data"
     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-droppable="{{$ctrl.droppable}}"
-</vn-treeview-child>
+    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 = [];
+        this.items = [];
-
-        $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');
     }
 
     $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: {
+    transclude: true
-        tplItem: '?tplItem'
-    }
 });

front/core/components/treeview/style.scss

@@ -1,47 +1,45 @@
 @import "effects";
 
-vn-treeview {
+vn-treeview-childs {
-    vn-treeview-child {
+    display: block;
-        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 {
-                @extend %clickable;
-                display: flex;
-                padding: 5px;
-                align-items: center;
-        
-                & > vn-check:not(.indeterminate) {
-                    color: $color-main;
-    
-                    & > .check {
-                        border-color: $color-main;
-                    }
-                }
-                & > vn-check.checked {
-                    color: $color-main;
-                }
-            }
-            ul {
-                padding-left: 2.2em;
-            }
         }
     }
     vn-icon-button {
-        padding: 0
+        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;
+
+            & > .check {
+                border-color: $color-main;
+            }
+        }
+        & > vn-check.checked {
+            color: $color-main;
+        }
+    }
+    ul {
+        padding-left: 2.2em;
     }
 }

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"> 
+                icons="$ctrl.icons">
-                <tpl-item>
+                {{item.name}}
-                    test
-                </tpl-item>
             </vn-treeview>
         </vn-card>
         <vn-button-bar>