refactor schema-browser directive to component style

This commit is contained in:
Alexander Shepelin 2017-02-18 23:10:15 +03:00
parent f9da6ddcdd
commit b2e747caef
3 changed files with 33 additions and 28 deletions

View File

@ -83,7 +83,10 @@
<!-- editor -->
<div class="container">
<div class="row bg-white p-b-5" ng-if="sourceMode" resizable r-directions="['bottom']" r-height="300" style="min-height:100px;">
<schema-browser schema="schema" class="col-md-3 hidden-sm hidden-xs schema-container" ng-show="hasSchema"></schema-browser>
<schema-browser class="col-md-3 hidden-sm hidden-xs schema-container"
schema="schema"
ng-show="hasSchema">
</schema-browser>
<div ng-class="editorSize" style="height:100%;">
<div class="p-5">

View File

@ -1,13 +1,16 @@
<div class="schema-container">
<div class="p-t-5 p-b-5">
<input type="text" placeholder="Search schema..." class="form-control" ng-model="schemaFilter">
<input type="text" placeholder="Search schema..." class="form-control" ng-model="$ctrl.schemaFilter">
</div>
<div class="schema-browser" vs-repeat vs-size="getSize(table)">
<div ng-repeat="table in schema | filter:schemaFilter track by table.name">
<div class="table-name" ng-click="showTable(table)">
<i class="fa fa-table"></i> <strong><span title="{{table.name}}">{{table.name}}</span>
<span ng-if="table.size !== undefined"> ({{table.size}})</span></strong>
<div class="schema-browser" vs-repeat vs-size="$ctrl.getSize(table)">
<div ng-repeat="table in $ctrl.schema | filter:$ctrl.schemaFilter track by table.name">
<div class="table-name" ng-click="$ctrl.showTable(table)">
<i class="fa fa-table"></i>
<strong>
<span title="{{table.name}}">{{table.name}}</span>
<span ng-if="table.size !== undefined"> ({{table.size}})</span>
</strong>
</div>
<div uib-collapse="table.collapsed">
<div ng-repeat="column in table.columns track by column" style="padding-left:16px;">{{column}}</div>

View File

@ -1,31 +1,30 @@
import template from './schema-browser.html';
function schemaBrowser() {
return {
restrict: 'E',
scope: {
schema: '=',
},
template,
link($scope) {
$scope.showTable = (table) => {
table.collapsed = !table.collapsed;
$scope.$broadcast('vsRepeatTrigger');
};
function SchemaBrowserCtrl($scope) {
this.showTable = (table) => {
table.collapsed = !table.collapsed;
$scope.$broadcast('vsRepeatTrigger');
};
$scope.getSize = (table) => {
let size = 18;
this.getSize = (table) => {
let size = 18;
if (!table.collapsed) {
size += 18 * table.columns.length;
}
if (!table.collapsed) {
size += 18 * table.columns.length;
}
return size;
};
},
return size;
};
}
const SchemaBrowser = {
bindings: {
schema: '<',
},
controller: SchemaBrowserCtrl,
template,
};
export default function (ngModule) {
ngModule.directive('schemaBrowser', schemaBrowser);
ngModule.component('schemaBrowser', SchemaBrowser);
}