"YANGMAN_SELECT_OPTIONS": "Select options",
"YANGMAN_SELECT_ALL": "Select All",
"YANGMAN_DESELECT_ALL": "Deselect All",
- "YANGMAN_IS_AUGMENT": "Augment's Group",
+ "YANGMAN_IS_AUGMENT": "Augments",
"YANGMAN_LOADING_MODULES": "Loading application modules...",
"YANGMAN_EXECUTING_REQUEST": "Request is beeing executed...",
"YANGMAN_CM_FONT_SIZE_HINT": "Use \"Alt +\" key and \"Alt -\" key in editor to enlarge or reduce json font size",
angular.module('app.yangman').controller('ModulesListCtrl', ModulesListCtrl);
ModulesListCtrl.$inject = ['$scope', '$rootScope', '$mdToast', 'YangUtilsService', 'PluginsHandlerService',
- '$filter'];
+ '$filter', '$timeout'];
- function ModulesListCtrl($scope, $rootScope, $mdToast, YangUtilsService, PluginsHandlerService, $filter) {
+ function ModulesListCtrl($scope, $rootScope, $mdToast, YangUtilsService, PluginsHandlerService, $filter, $timeout) {
var modulesList = this;
modulesList.treeApis = [];
modulesList.showLoadingBox = true;
modulesList.moduleListTitle = '';
+ modulesList.search = '';
// methods
+ modulesList.clearFilter = clearFilter;
+ modulesList.customSearch = customSearch;
+ modulesList.checkSelectedModule = checkSelectedModule;
modulesList.setDataStore = setDataStore;
modulesList.setModule = setModule;
init();
+ /**
+ * Check if module and one of it datastore is selected
+ * @param module
+ * @returns {boolean|*|Function|o}
+ */
+ function checkSelectedModule(module){
+ var haveSelectedDS = [];
+
+ if ( $scope.selectedDatastore && (module === $scope.selectedModule)) {
+ haveSelectedDS = $scope.selectedModule.children.filter(function(item){
+ return item === $scope.selectedDatastore;
+ });
+ }
+
+ return haveSelectedDS.length;
+ }
+
+ /**
+ * Custom search function for searching by api label
+ * @param api
+ */
+ function customSearch(api){
+ return api.label.toLowerCase().indexOf(modulesList.search.toLowerCase()) > -1;
+ }
+
+ /**
+ * Clear current ctrl search value
+ */
+ function clearFilter(){
+ modulesList.search = '';
+ }
+
/**
* Load apis and modules
*/
function setModule(module, e){
if ( $(e.target).hasClass('top-element') ) {
module.expanded = !module.expanded;
- $scope.setModule(module);
+ //$scope.setModule(module);
}
}
* @param text
*/
function showToastInfoBox(text){
- $mdToast.show(
- $mdToast.simple()
- .textContent($filter('translate')(text))
- .position('bottom left')
- .hideDelay(3000)
- );
+ $timeout(function(){
+ $mdToast.show(
+ $mdToast.simple()
+ .textContent($filter('translate')(text))
+ .position('bottom left')
+ .parent(angular.element('.yangmanModule__left-panel'))
+ .hideDelay(3000)
+ );
+ }, 500);
}
}
vm.requestList = RequestsService.createEmptyHistoryList('yangman_requestsList');
vm.search = '';
+ // methods
vm.clearFilter = clearFilter;
vm.clearHistoryList = clearHistoryList;
vm.clearCollectionList = clearCollectionList;
<div class="info-box__padding">
<!-- key -->
<span ng-show="node.isKey()">
- {{'Key of ' + node.parent.label + ' list'}}
+ {{'Key for "' + node.parent.label + '"'}}
<md-menu-divider ng-show="dividerCheck(true)"></md-menu-divider>
</span>
<!-- augment -->
<span ng-show="node.augmentationId">
- {{ 'YANGMAN_IS_AUGMENT' | translate }} "{{ node.augmentationId }}"
+ {{ 'YANGMAN_IS_AUGMENT' | translate }} <i>{{node.type}}</i> "{{ node.augmentationId }}"
<md-menu-divider ng-show="dividerCheck()"></md-menu-divider>
</span>
<!-- description -->
<md-tabs class="yangmanModule__mhc-tabs inline-tabs" md-no-pagination md-dynamic-height md-stretch-tabs="always">
<!-- Modules tab -->
<md-tab label="{{'YANGMAN_MODULES' | translate}}" md-on-select="main.switchedTab(0)">
- <div ng-include src="globalViewPath + 'leftpanel/modules-tab.tpl.html'" class="scrollableY"></div>
+ <div ng-include src="globalViewPath + 'leftpanel/modules-tab.tpl.html'" class="h100"></div>
</md-tab>
<!-- History tab -->
<md-tab label="{{'YANGMAN_HISTORY' | translate}}" md-on-select="main.switchedTab(1)">
<md-list class="yangmanModule__requests-list__collections-list"
ng-cloak
- ng-init="reqList.init(reqList.collectionList)"
- ng-controller="RequestsListCtrl as reqList">
-
- <md-content class="searchBox" layout="row">
- <!-- search icon, form, clear button -->
- <md-icon class="material-icons">search</md-icon>
- <input class="ng-pristine ng-valid ng-touched"
- type="text"
- flex
- placeholder="{{'YANGMAN_SEARCH' | translate}}"
- ng-model="reqList.search"
- aria-invalid="false" />
- <md-button aria-label="{{'YANGMAN_CLEAR_SEARCH'| translate}}"
- ng-click="reqList.clearFilter()"
- ng-if="reqList.search">
- <md-icon class="material-icons clickable" >
- close
- </md-icon>
- <md-tooltip md-direction="bottom">{{'YANGMAN_CLEAR_SEARCH'| translate}}</md-tooltip>
- </md-button>
- <!-- /search icon, form, clear button -->
+ ng-controller="RequestsListCtrl as reqList"
+ ng-init="reqList.init(reqList.collectionList)">
+
+ <md-content class="searchBox yangmanModule__left-panel__search" layout="row">
+
+ <!-- searching -->
+ <md-input-container layout="row" md-no-float class="modules-list-search" flex>
+ <!-- search icon, form, clear button -->
+ <md-icon class="material-icons">search</md-icon>
+ <input class="ng-pristine ng-valid ng-touched"
+ type="text"
+ flex
+ placeholder="{{'YANGMAN_SEARCH' | translate}}"
+ ng-model="reqList.search"
+ aria-invalid="false" />
+ <md-button aria-label="{{'YANGMAN_CLEAR_SEARCH'| translate}}" flex="none"
+ ng-click="reqList.clearFilter()"
+ ng-if="reqList.search">
+ <md-icon class="material-icons clickable">
+ close
+ </md-icon>
+ <md-tooltip md-direction="bottom">{{'YANGMAN_CLEAR_SEARCH'| translate}}</md-tooltip>
+ </md-button>
+ <!-- /search icon, form, clear button -->
+ </md-input-container>
<!-- sorting -->
<md-button ng-click="reqList.toggleCollectionsSort()"
ng-init="reqList.init(reqList.requestList)"
ng-controller="RequestsListCtrl as reqList">
- <md-content class="searchBox" layout="row">
+ <md-content class="searchBox yangmanModule__left-panel__search" layout="row">
- <!-- search icon, form, clear button -->
- <md-icon class="material-icons">search</md-icon>
- <input class="ng-pristine ng-valid ng-touched"
- type="text"
- flex
- placeholder="{{'YANGMAN_SEARCH' | translate}}"
- ng-model="reqList.search"
- aria-invalid="false" />
- <md-button aria-label="{{'YANGMAN_CLEAR_SEARCH'| translate}}"
- ng-click="reqList.clearFilter()"
- ng-if="reqList.search">
- <md-icon class="material-icons clickable">
- close
- </md-icon>
- <md-tooltip md-direction="bottom">{{'YANGMAN_CLEAR_SEARCH'| translate}}</md-tooltip>
- </md-button>
- <!-- /search icon, form, clear button -->
+ <!-- searching -->
+ <md-input-container layout="row" md-no-float class="modules-list-search" flex>
+ <!-- search icon, form, clear button -->
+ <md-icon class="material-icons">search</md-icon>
+ <input class="ng-pristine ng-valid ng-touched"
+ type="text"
+ flex
+ placeholder="{{'YANGMAN_SEARCH' | translate}}"
+ ng-model="reqList.search"
+ aria-invalid="false" />
+ <md-button aria-label="{{'YANGMAN_CLEAR_SEARCH'| translate}}" flex="none"
+ ng-click="reqList.clearFilter()"
+ ng-if="reqList.search">
+ <md-icon class="material-icons clickable">
+ close
+ </md-icon>
+ <md-tooltip md-direction="bottom">{{'YANGMAN_CLEAR_SEARCH'| translate}}</md-tooltip>
+ </md-button>
+ <!-- /search icon, form, clear button -->
+ </md-input-container>
<!-- save -->
<md-button ng-click="reqList.showDgSaveReq($event, main.currentPath)"
</md-content>
+ <md-divider></md-divider>
+
<!-- list of items grouped by date -->
<md-content class="scrollableY">
<md-list-item ng-repeat="group in reqList.mainList.dateGroups | orderBy: 'name': true"
-<md-list ng-controller="ModulesListCtrl as modulesList" ng-cloak class="yangmanModule__modules-list">
- <!-- Loading box -->
- <div class="yangmanModule__left-panel__loading-container" ng-show="modulesList.showLoadingBox">
- <md-progress-linear md-mode="query"></md-progress-linear>
- <div class="bottom-block">
- <span>{{ 'YANGMAN_LOADING_MODULES' | translate }}</span>
- </div>
- </div>
+<section ng-controller="ModulesListCtrl as modulesList" class="h100">
+ <!-- searching -->
+ <section class="yangmanModule__left-panel__search" ng-hide="modulesList.showLoadingBox">
+ <md-input-container layout="row" md-no-float class="modules-list-search">
+ <md-icon class="material-icons">search</md-icon>
+ <input class="ng-pristine ng-valid ng-touched"
+ type="text"
+ flex
+ placeholder="{{'YANGMAN_SEARCH' | translate}}"
+ ng-model="modulesList.search"
+ aria-invalid="false" />
+
+ <!-- search clear button -->
+ <md-button aria-label="{{'YANGMAN_CLEAR_SEARCH'| translate}}" flex="none"
+ ng-click="modulesList.clearFilter()"
+ ng-if="modulesList.search">
+ <md-icon class="material-icons clickable">
+ close
+ </md-icon>
+ <md-tooltip md-direction="bottom">{{'YANGMAN_CLEAR_SEARCH'| translate}}</md-tooltip>
+ </md-button>
+ </md-input-container>
- <!-- Mount point title -->
- <section ng-show="modulesList.moduleListTitle.length">
- <h4>{{ modulesList.moduleListTitle }}</h4>
- <!-- Line -->
- <md-divider></md-divider>
</section>
- <!-- Modules list -->
- <md-list-item ng-repeat="module in modulesList.treeApis"
- class="yangmanModule__modules-list__item"
- ng-class="{'expanded' : module.expanded}"
- ng-hide="modulesList.showLoadingBox"
- ng-click="modulesList.setModule(module, $event)">
- <!-- Item content -->
- <div layout="column" flex>
- <!-- Module title -->
- <div layout="row" layout-align="center center" class="pointer title">
- <md-icon md-font-set="material-icons" class="top-icon top-element">
- {{module.expanded ? 'keyboard_arrow_down':'keyboard_arrow_right'}}
- </md-icon>
- <p flex class="top-element"> {{module.label}} </p>
- </div>
+ <!-- divider -->
+ <md-divider ng-hide="modulesList.showLoadingBox"></md-divider>
+
+ <!-- modules list -->
+ <md-list ng-cloak class="yangmanModule__modules-list scrollableY">
- <!-- Datastore && rpc -->
- <md-list flex class="yangmanModule__datastore-list" ng-show="module.expanded">
- <md-list-item ng-repeat="item in module.children">
- <div flex
- layout="row"
- layout-align="center center"
- class="pointer"
- ng-click="modulesList.setDataStore(item, module)">
- <md-icon md-font-set="material-icons">keyboard_arrow_right</md-icon>
- <p flex> {{item.label}} </p>
- </div>
- </md-list-item>
- </md-list>
+ <!-- Loading box -->
+ <div class="yangmanModule__left-panel__loading-container" ng-show="modulesList.showLoadingBox">
+ <md-progress-linear md-mode="query"></md-progress-linear>
+ <div class="bottom-block">
+ <span>{{ 'YANGMAN_LOADING_MODULES' | translate }}</span>
+ </div>
</div>
- <!-- Line -->
- <md-divider></md-divider>
- </md-list-item>
-</md-list>
+
+ <!-- Mount point title -->
+ <section ng-show="modulesList.moduleListTitle.length">
+ <h4>{{ modulesList.moduleListTitle }}</h4>
+ <!-- Line -->
+ <md-divider></md-divider>
+ </section>
+
+ <!-- Modules list -->
+ <md-list-item ng-repeat="module in modulesList.treeApis | filter: modulesList.customSearch"
+ class="yangmanModule__modules-list__item"
+ ng-class="{'expanded' : module.expanded, 'selected' : modulesList.checkSelectedModule(module)}"
+ ng-hide="modulesList.showLoadingBox"
+ ng-click="modulesList.setModule(module, $event)">
+ <!-- Item content -->
+ <div layout="column" flex>
+ <!-- Module title -->
+ <div layout="row" layout-align="center center" class="pointer title">
+ <md-icon md-font-set="material-icons" class="top-icon top-element">
+ {{module.expanded ? 'keyboard_arrow_down':'keyboard_arrow_right'}}
+ </md-icon>
+ <p flex class="top-element"> {{module.label}} </p>
+ </div>
+
+ <!-- Datastore && rpc -->
+ <md-list flex class="yangmanModule__datastore-list" ng-show="module.expanded">
+ <md-list-item ng-repeat="item in module.children">
+ <div flex
+ layout="row"
+ layout-align="center center"
+ class="pointer"
+ ng-click="modulesList.setDataStore(item, module)">
+ <md-icon md-font-set="material-icons">keyboard_arrow_right</md-icon>
+ <p flex> {{item.label}} </p>
+ </div>
+ </md-list-item>
+ </md-list>
+ </div>
+ <!-- Line -->
+ <md-divider></md-divider>
+ </md-list-item>
+ </md-list>
+</section>
margin: 8px 0;
}
- /*.md-input{
- color: @inputColor;
- background: transparent;
- }*/
-
.historyTab{
- height: calc(~'100% - 90px');
+ height: calc(~'100% - 62px');
}
.collectionsTab{
- height: calc(~'100% - 65px');
+ height: calc(~'100% - 62px');
}
&__left-panel{
overflow-x: hidden;
background: @leftPanelBackColor;
- //background: @listBackColor;
position: relative;
+ &__search{
+ padding: 10px 13px;
+ background: @listBackColor;
+ min-height: 62px;
+
+ .md-errors-spacer{
+ display: none;
+ }
+
+ md-icon{
+ color: @dashedBorderColor;
+ }
+
+ .md-has-icon.modules-list-search{
+ padding: 2px 25px;
+ margin: 0;
+
+ .md-input{
+ width: auto;
+ order: 0;
+ }
+
+ button{
+ margin: 0;
+ padding: 0;
+ min-width: 0;
+ min-height: 0;
+ line-height: normal;
+
+ &:hover, &:focus, &:active, &:visited{
+ background: transparent;
+ }
+
+ .md-ripple-container{
+ display: none;
+ }
+ }
+ }
+ }
+
md-tabs,
md-tab-content > div,
md-content,
}
}
- /*md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon){
- margin-right: 16px;
- }*/
-
- /*md-list-item > md-icon:first-child:not(.md-avatar-icon){
- margin: 0 16px;
- }*/
-
&__detail-list-tabs-container{
> md-tabs-wrapper{
display: none;
cursor: pointer;
}
- input{
- background: none;
- border: none;
- color: @fontColor;
- outline: none;
- }
-
#importParameters{
display: none;
}
&__modules-list{
padding: 0;
background: @listBackColor;
+ height: calc(~"100% - 62px")!important;
h4{
margin: 0;
background: @listActiveColor;
}
+ &.selected{
+ .title{
+ background-color: @colorActive!important;
+ color: #fff!important;
+ }
+ }
+
md-icon{
margin: 12px 16px;
}
}
}
}
-
- /*md-list-item{
-
- }*/
}
// datastore list
Code Review / dlux.git / commitdiff