Repository: kylin Updated Branches: refs/heads/2.x-staging f365a8ec1 -> c077eb4e2
KYLIN-1338, UI multiple select checkbox lose focus issue Project: http://git-wip-us.apache.org/repos/asf/kylin/repo Commit: http://git-wip-us.apache.org/repos/asf/kylin/commit/c077eb4e Tree: http://git-wip-us.apache.org/repos/asf/kylin/tree/c077eb4e Diff: http://git-wip-us.apache.org/repos/asf/kylin/diff/c077eb4e Branch: refs/heads/2.x-staging Commit: c077eb4e20bd99f7c2fa3b1343ef9671ec6f7ffd Parents: f365a8e Author: jian <zhongj...@apache.org> Authored: Tue Jan 19 21:40:17 2016 +0800 Committer: jian <zhongj...@apache.org> Committed: Tue Jan 19 21:40:17 2016 +0800 ---------------------------------------------------------------------- webapp/app/index.html | 3 + webapp/app/js/app.js | 2 +- .../cubeDesigner/advanced_settings.html | 91 +++++++++++++------- webapp/app/partials/cubeDesigner/info.html | 4 +- .../modelDesigner/model_dimensions.html | 17 ++-- .../partials/modelDesigner/model_measures.html | 19 ++-- webapp/bower.json | 8 +- webapp/grunt.json | 3 + 8 files changed, 98 insertions(+), 49 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/kylin/blob/c077eb4e/webapp/app/index.html ---------------------------------------------------------------------- diff --git a/webapp/app/index.html b/webapp/app/index.html index f02c0a7..11ca283 100644 --- a/webapp/app/index.html +++ b/webapp/app/index.html @@ -45,6 +45,7 @@ <link rel="stylesheet" type="text/css" href="components/bootstrap-sweetalert/lib/sweet-alert.css"> <link rel="stylesheet" type="text/css" href="components/angular-bootstrap-nav-tree/dist/abn_tree.css"> <link rel="stylesheet" type="text/css" href="components/angular-toggle-switch/angular-toggle-switch.css"> + <link rel="stylesheet" type="text/css" href="components/angular-ui-select/dist/select.css"> <link rel="stylesheet/less" href="less/build.less"> <!-- endref --> @@ -103,6 +104,8 @@ <script src="components/jquery-ui/jquery-ui.min.js"></script> <script src="components/angular-ui-sortable/sortable.js"></script> <script src="components/angular-toggle-switch/angular-toggle-switch.js"></script> +<script src="components/angular-ui-select/dist/select.js"></script> +<script src="components/angular-sanitize/angular-sanitize.js"></script> <script src="js/app.js"></script> <script src="js/config.js"></script> http://git-wip-us.apache.org/repos/asf/kylin/blob/c077eb4e/webapp/app/js/app.js ---------------------------------------------------------------------- diff --git a/webapp/app/js/app.js b/webapp/app/js/app.js index dc9d087..817d24d 100644 --- a/webapp/app/js/app.js +++ b/webapp/app/js/app.js @@ -17,4 +17,4 @@ */ //Kylin Application Module -KylinApp = angular.module('kylin', ['ngRoute', 'ngResource', 'ngGrid', 'ui.bootstrap', 'ui.ace', 'base64', 'angularLocalStorage', 'localytics.directives', 'treeControl', 'nvd3ChartDirectives','ngLoadingRequest','oitozero.ngSweetAlert','ngCookies','angular-underscore', 'ngAnimate', 'ui.sortable','angularBootstrapNavTree','toggle-switch']); +KylinApp = angular.module('kylin', ['ngRoute', 'ngResource', 'ngGrid', 'ui.bootstrap', 'ui.ace', 'base64', 'angularLocalStorage', 'localytics.directives', 'treeControl', 'nvd3ChartDirectives','ngLoadingRequest','oitozero.ngSweetAlert','ngCookies','angular-underscore', 'ngAnimate', 'ui.sortable','angularBootstrapNavTree','toggle-switch','ngSanitize','ui.select']); http://git-wip-us.apache.org/repos/asf/kylin/blob/c077eb4e/webapp/app/partials/cubeDesigner/advanced_settings.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/cubeDesigner/advanced_settings.html b/webapp/app/partials/cubeDesigner/advanced_settings.html index cf9fb17..09b98f9 100755 --- a/webapp/app/partials/cubeDesigner/advanced_settings.html +++ b/webapp/app/partials/cubeDesigner/advanced_settings.html @@ -43,12 +43,18 @@ </td> <td class="col-xs-8"> <!-- Dimensions --> - <select ng-if="state.mode=='edit'" style="width: 100%" - ng-model="aggregation_group.includes" chosen multiple - ng-change="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)" - ng-options="rowkey_column.column as rowkey_column.column for rowkey_column in cubeMetaFrame.rowkey.rowkey_columns"> - <option value=""></option> - </select> + + <ui-select + autofocus="true" + on-select="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)" + on-remove="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)" + ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="aggregation_group.includes"> + <ui-select-match placeholder="Select Column...">{{$item.column}}</ui-select-match> + <ui-select-choices + repeat="rowkey_column.column as rowkey_column in cubeMetaFrame.rowkey.rowkey_columns | filter:$select.search"> + {{rowkey_column.column}} + </ui-select-choices> + </ui-select> <p ng-if="state.mode=='view'"> {{aggregation_group.includes}}</p> @@ -62,12 +68,25 @@ </td> <td class="col-xs-8"> <!-- Dimensions --> - <select ng-if="state.mode=='edit'" style="width: 100%" - ng-model="aggregation_group.select_rule.mandatory_dims" chosen multiple - ng-change="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)" - ng-options="column as column for column in aggregation_group.includes"> - <option value=""></option> - </select> + <!--<select ng-if="state.mode=='edit'" style="width: 100%"--> + <!--ng-model="aggregation_group.select_rule.mandatory_dims" chosen multiple--> + <!--ng-change="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)"--> + <!--ng-options="column as column for column in aggregation_group.includes">--> + <!--<option value=""></option>--> + <!--</select>--> + + <ui-select + autofocus="true" + on-select="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)" + on-remove="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)" + ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="aggregation_group.select_rule.mandatory_dims"> + <ui-select-match placeholder="Select Column...">{{$item}}</ui-select-match> + <ui-select-choices + repeat="column in aggregation_group.includes | filter:$select.search"> + {{column}} + </ui-select-choices> + </ui-select> + <p ng-if="state.mode=='view'" style="word-wrap: break-word; word-break: normal;max-width: 1000px "> {{aggregation_group.select_rule.mandatory_dims}}</p> </td> @@ -85,12 +104,24 @@ <tr class="row" ng-repeat="hierarchyDims in aggregation_group.select_rule.hierarchy_dims track by $index"> <td class="col-xs-10"> <!-- Dimensions --> - <select ng-if="state.mode=='edit'" style="width: 100%" - ng-model="hierarchyDims" chosen multiple - ng-change="refreshAggregationHierarchy(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,hierarchyDims)" - ng-options="column as column for column in aggregation_group.includes"> - <option value=""></option> - </select> + <!--<select ng-if="state.mode=='edit'" style="width: 100%"--> + <!--ng-model="hierarchyDims" chosen multiple--> + <!--ng-change="refreshAggregationHierarchy(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,hierarchyDims)"--> + <!--ng-options="column as column for column in aggregation_group.includes">--> + <!--<option value=""></option>--> + <!--</select>--> + + <ui-select + autofocus="true" + on-select="refreshAggregationHierarchy(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,hierarchyDims)" + on-remove="refreshAggregationHierarchy(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,hierarchyDims)" + ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="hierarchyDims"> + <ui-select-match placeholder="Select Column...">{{$item}}</ui-select-match> + <ui-select-choices + repeat="column in aggregation_group.includes | filter:$select.search"> + {{column}} + </ui-select-choices> + </ui-select> <p ng-if="state.mode=='view'" style="word-wrap: break-word; word-break: normal;max-width: 1000px "> {{hierarchyDims}}</p> @@ -125,12 +156,17 @@ <tr class="row" ng-repeat="jointDims in aggregation_group.select_rule.joint_dims track by $index"> <td class="col-xs-10"> <!-- Dimensions --> - <select ng-if="state.mode=='edit'" style="width: 100%" - ng-model="jointDims" chosen multiple - ng-change="refreshAggregationJoint(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,jointDims)" - ng-options="column as column for column in aggregation_group.includes"> - <option value=""></option> - </select> + <ui-select + autofocus="true" + on-select="refreshAggregationJoint(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,jointDims)" + on-remove="refreshAggregationJoint(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,jointDims)" + ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="jointDims"> + <ui-select-match placeholder="Select Column...">{{$item}}</ui-select-match> + <ui-select-choices + repeat="column in aggregation_group.includes | filter:$select.search"> + {{column}} + </ui-select-choices> + </ui-select> <p ng-if="state.mode=='view'" style="word-wrap: break-word; word-break: normal;max-width: 1000px "> {{jointDims}}</p> </td> @@ -216,13 +252,6 @@ </select> <span ng-if="state.mode=='view'">{{rowkey_column.isDictionary}}</span> - <!--Use Dictionary--> - <!--<select ng-if="state.mode=='edit'" style="width:80px;"--> - <!--chosen ng-model="rowkey_column.encoding"--> - <!--ng-change="dictionaryUpdated(rowkey_column);"--> - <!--ng-options="dt.name as dt.value for dt in cubeConfig.dictionaries">--> - <!--<option value=""></option>--> - <!--</select>--> </td> <td> <!--Column Length --> http://git-wip-us.apache.org/repos/asf/kylin/blob/c077eb4e/webapp/app/partials/cubeDesigner/info.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/cubeDesigner/info.html b/webapp/app/partials/cubeDesigner/info.html index a2b2996..c9fee9b 100644 --- a/webapp/app/partials/cubeDesigner/info.html +++ b/webapp/app/partials/cubeDesigner/info.html @@ -26,7 +26,7 @@ <b>Model Name</b> </label> <div class="col-xs-12 col-sm-6" ng-class="{'has-error':forms.cube_info_form.model_name.$invalid && (forms.cube_info_form.model_name.$dirty||forms.cube_info_form.model_name.$sbumitted)}"> - <select chosen ng-model="cubeMetaFrame.model_name" ng-if="state.mode=='edit'" + <select chosen ng-model="cubeMetaFrame.model_name" ng-if="cubeMode=='addNewCube'" ng-options="model for model in modelsManager.modelNameList" style="width:100%;" name="model_name" @@ -37,6 +37,8 @@ <option value=""> -- Choose Model -- </option> </select> + <input ng-model="cubeMetaFrame.model_name" ng-disabled="true" class="form-control" ng-if="cubeMode=='editExistCube'"/> + <small class="help-block" ng-show="forms.cube_info_form.model_name.$error.required && (forms.cube_info_form.model_name.$dirty||forms.cube_info_form.$sbumitted)">Model name is required.</small> <span ng-if="state.mode=='view'">{{cubeMetaFrame.model_name}}</span> </div> http://git-wip-us.apache.org/repos/asf/kylin/blob/c077eb4e/webapp/app/partials/modelDesigner/model_dimensions.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/modelDesigner/model_dimensions.html b/webapp/app/partials/modelDesigner/model_dimensions.html index c9aa04a..9574d2b 100644 --- a/webapp/app/partials/modelDesigner/model_dimensions.html +++ b/webapp/app/partials/modelDesigner/model_dimensions.html @@ -69,13 +69,16 @@ {{dimension.table}} </td> <td class="col-xs-9"> - <!-- Dimensions --> - <select ng-if="state.mode=='edit'" style="width: 100%" - ng-model="modelsManager.selectedModel.dimensions[$index].columns" chosen multiple - ng-change="" - ng-options="column.name as column.name for column in getColumnsByTable(dimension.table)"> - <option value=""></option> - </select> + <ui-select + ng-if="state.mode=='edit'" style="width: 100%" + autofocus="true" + ng-model="modelsManager.selectedModel.dimensions[$index].columns" multiple> + <ui-select-match placeholder="Select Column...">{{$item.name}}</ui-select-match> + <ui-select-choices + repeat="column.name as column in getColumnsByTable(dimension.table) | filter:$select.search"> + {{column.name}} + </ui-select-choices> + </ui-select> </td> </tr> </table> http://git-wip-us.apache.org/repos/asf/kylin/blob/c077eb4e/webapp/app/partials/modelDesigner/model_measures.html ---------------------------------------------------------------------- diff --git a/webapp/app/partials/modelDesigner/model_measures.html b/webapp/app/partials/modelDesigner/model_measures.html index 039132d..8dc551b 100644 --- a/webapp/app/partials/modelDesigner/model_measures.html +++ b/webapp/app/partials/modelDesigner/model_measures.html @@ -42,12 +42,19 @@ </table> <div ng-if="state.mode=='edit'" class="form-group" style="width: 100%"> <h3 class="box-title">Select your measures</h3> - <select style="width: 100%" - ng-model="modelsManager.selectedModel.metrics" chosen multiple - ng-change="" - ng-options="measure.name as measure.name for measure in getColumnsByTable(modelsManager.selectedModel.fact_table)"> - <option value=""></option> - </select> + + <ui-select + ng-if="state.mode=='edit'" + style="width: 100%" + autofocus="true" + ng-model="modelsManager.selectedModel.metrics" multiple> + <ui-select-match placeholder="Select Column...">{{$item.name}}</ui-select-match> + <ui-select-choices + repeat="measure.name as measure in getColumnsByTable(modelsManager.selectedModel.fact_table) | filter:$select.search"> + {{measure.name}} + </ui-select-choices> + </ui-select> + </div> </div> http://git-wip-us.apache.org/repos/asf/kylin/blob/c077eb4e/webapp/bower.json ---------------------------------------------------------------------- diff --git a/webapp/bower.json b/webapp/bower.json index ab3ad28..41144f9 100755 --- a/webapp/bower.json +++ b/webapp/bower.json @@ -3,7 +3,7 @@ "version": "0.0.1", "dependencies": { "angular-bootstrap": "0.10.0", - "angular": "1.2.15", + "angular": "1.2.29", "angular-resource": "~1.3.12", "angular-route": "1.2.15", "ng-grid": "2.0.11", @@ -30,14 +30,16 @@ "angular-bootstrap-nav-tree": "*", "components-font-awesome": "~4.3.0", "bootstrap-sweetalert": "~0.4.3", - "angular-toggle-switch":"1.3.0" + "angular-toggle-switch":"1.3.0", + "angular-ui-select": "0.13.2", + "angular-sanitize": "1.2.18" }, "devDependencies": { "less.js": "~1.4.0", "angular-mocks-unstable": "~1.1.5" }, "resolutions": { - "angular": "1.2.15", + "angular": "1.2.29", "nvd3": "1.1.15-beta", "d3": "3.4.4", "moment": "2.4.0", http://git-wip-us.apache.org/repos/asf/kylin/blob/c077eb4e/webapp/grunt.json ---------------------------------------------------------------------- diff --git a/webapp/grunt.json b/webapp/grunt.json index ef56991..3219b5e 100755 --- a/webapp/grunt.json +++ b/webapp/grunt.json @@ -41,6 +41,8 @@ "app/components/jquery-ui/jquery-ui.min.js", "app/components/angular-ui-sortable/sortable.js", "app/components/angular-toggle-switch/angular-toggle-switch.js", + "app/components/angular-ui-select/dist/select.js", + "app/components/angular-sanitize/angular-sanitize.js", "tmp/js/scripts.js" ], "dest": "tmp/js/scripts.min.js" @@ -63,6 +65,7 @@ "app/components/bootstrap-sweetalert/lib/sweet-alert.css", "app/components/angular-bootstrap-nav-tree/dist/abn_tree.css", "app/components/angular-toggle-switch/angular-toggle-switch.css", + "app/components/angular-ui-select/dist/select.css", "tmp/css/styles.css" ], "dest": "tmp/css/styles.min.css"
