From 9473636b5bd04db2d600940145998db349348440 Mon Sep 17 00:00:00 2001
From: Joan Sanchez <joan@verdnatura.es>
Date: Wed, 2 Oct 2019 09:54:52 +0200
Subject: [PATCH] treeview refactor

---
 db/changes/10091-iberflora/00-department.sql  | 10 +++
 front/core/components/index.js                |  1 -
 .../treeview/{child.html => childs.html}      | 61 +++++++++--------
 .../treeview/{child.js => childs.js}          | 21 +++---
 front/core/components/treeview/content.js     | 23 +++++++
 front/core/components/treeview/index.html     | 10 +--
 front/core/components/treeview/index.js       | 18 ++---
 front/core/components/treeview/style.scss     | 68 +++++++++----------
 modules/agency/front/location/index.html      |  6 ++
 modules/worker/front/department/index.html    | 10 +--
 10 files changed, 133 insertions(+), 95 deletions(-)
 rename front/core/components/treeview/{child.html => childs.html} (58%)
 rename front/core/components/treeview/{child.js => childs.js} (77%)
 create mode 100644 front/core/components/treeview/content.js

diff --git a/db/changes/10091-iberflora/00-department.sql b/db/changes/10091-iberflora/00-department.sql
index f1d1776e9..5c2889985 100644
--- a/db/changes/10091-iberflora/00-department.sql
+++ b/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;
diff --git a/front/core/components/index.js b/front/core/components/index.js
index e8adb008e..50d0b5e94 100644
--- a/front/core/components/index.js
+++ b/front/core/components/index.js
@@ -43,4 +43,3 @@ import './input-file';
 import './radio';
 import './th';
 import './treeview';
-import './treeview/child';
diff --git a/front/core/components/treeview/child.html b/front/core/components/treeview/childs.html
similarity index 58%
rename from front/core/components/treeview/child.html
rename to front/core/components/treeview/childs.html
index 2cf930f3d..cd0c59ec0 100644
--- a/front/core/components/treeview/child.html
+++ b/front/core/components/treeview/childs.html
@@ -1,11 +1,11 @@
+
 <ul ng-if="::$ctrl.items">
-    <li
-        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}">
+    <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
@@ -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,21 +47,23 @@
             droppable="::$ctrl.droppable"
             icons="::$ctrl.icons"
             parent-scope="::$ctrl.parentScope"
-            acl-role="$ctrl.aclRole">
-        </vn-treeview-child> -->
-    </li> 
-    <!-- <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>
+            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>
-    </li> -->
-</ul>
\ No newline at end of file
+    </div>
+</li>
\ No newline at end of file
diff --git a/front/core/components/treeview/child.js b/front/core/components/treeview/childs.js
similarity index 77%
rename from front/core/components/treeview/child.js
rename to front/core/components/treeview/childs.js
index b1d377a83..46bb776b8 100644
--- a/front/core/components/treeview/child.js
+++ b/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'
diff --git a/front/core/components/treeview/content.js b/front/core/components/treeview/content.js
new file mode 100644
index 000000000..3bad1b6d4
--- /dev/null
+++ b/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: '<'
+    }
+});
diff --git a/front/core/components/treeview/index.html b/front/core/components/treeview/index.html
index a200c913a..b33c90fcf 100644
--- a/front/core/components/treeview/index.html
+++ b/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>
diff --git a/front/core/components/treeview/index.js b/front/core/components/treeview/index.js
index 7c19b006b..2273288ac 100644
--- a/front/core/components/treeview/index.js
+++ b/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
 });
diff --git a/front/core/components/treeview/style.scss b/front/core/components/treeview/style.scss
index 6370d0274..a3081d5e6 100644
--- a/front/core/components/treeview/style.scss
+++ b/front/core/components/treeview/style.scss
@@ -1,47 +1,45 @@
 @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 {
-                @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;
     }
 }
diff --git a/modules/agency/front/location/index.html b/modules/agency/front/location/index.html
index b3025a8e0..3d00df006 100644
--- a/modules/agency/front/location/index.html
+++ b/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>
\ No newline at end of file
diff --git a/modules/worker/front/department/index.html b/modules/worker/front/department/index.html
index dfdb9bcfc..1eada1003 100644
--- a/modules/worker/front/department/index.html
+++ b/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>
+                icons="$ctrl.icons">
+                {{item.name}}
             </vn-treeview>
         </vn-card>
         <vn-button-bar>