treeview refactor

2019-10-02 09:54:52 +02:00 · 2019-10-02 09:54:52 +02:00 · 9473636b5b
parent 183d770483
commit 9473636b5b
10 changed files with 133 additions and 95 deletions
--- 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;
--- 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';
--- a/front/core/components/treeview/childs.html
+++ b/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>
--- a/front/core/components/treeview/childs.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'
--- a/front/core/components/treeview/content.js
+++ 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: '<'
+    }
+});
--- 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>
--- 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
 });
--- a/front/core/components/treeview/style.scss
+++ b/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;

@ -39,9 +42,4 @@ vn-treeview {
    ul {
        padding-left: 2.2em;
    }
-        }
-    }
-    vn-icon-button {
-        padding: 0
-    }
 }
--- 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>
--- 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>
+                {{item.name}}
            </vn-treeview>
        </vn-card>
        <vn-button-bar>