Disable search submit until a search string is present

This commit is contained in:
mabashian
2018-07-30 10:22:36 -04:00
parent 681d64c96f
commit ba075ce5dd
4 changed files with 43 additions and 36 deletions

View File

@@ -13,7 +13,7 @@
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn at-ButtonHollow--default at-Input-button" <button class="btn at-ButtonHollow--default at-Input-button"
ng-click="vm.submitSearch()" ng-click="vm.submitSearch()"
ng-disabled="vm.disabled" ng-disabled="vm.disabled || !vm.value || vm.value === ''"
type="button"> type="button">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>

View File

@@ -76,10 +76,15 @@
z-index: 1; z-index: 1;
} }
.SmartSearch-searchButton:hover { .SmartSearch-searchButton:not(.SmartSearch-searchButton--disabled):hover {
background-color: @default-tertiary-bg; background-color: @default-tertiary-bg;
} }
.SmartSearch-searchButton--disabled {
cursor: not-allowed;
opacity: 0.65;
}
.SmartSearch-flexContainer { .SmartSearch-flexContainer {
display: flex; display: flex;
width: 100%; width: 100%;

View File

@@ -174,43 +174,45 @@ function SmartSearchController (
}; };
$scope.addTerms = terms => { $scope.addTerms = terms => {
const { singleSearchParam } = $scope; if (terms && terms !== "") {
const unmodifiedQueryset = _.clone(queryset); const { singleSearchParam } = $scope;
const unmodifiedQueryset = _.clone(queryset);
const searchInputQueryset = qs.getSearchInputQueryset(terms, isFilterableBaseField, isRelatedField, isAnsibleFactField, singleSearchParam); const searchInputQueryset = qs.getSearchInputQueryset(terms, isFilterableBaseField, isRelatedField, isAnsibleFactField, singleSearchParam);
queryset = qs.mergeQueryset(queryset, searchInputQueryset, singleSearchParam); queryset = qs.mergeQueryset(queryset, searchInputQueryset, singleSearchParam);
// Go back to the first page after a new search // Go back to the first page after a new search
delete queryset.page; delete queryset.page;
// https://ui-router.github.io/docs/latest/interfaces/params.paramdeclaration.html#dynamic // https://ui-router.github.io/docs/latest/interfaces/params.paramdeclaration.html#dynamic
// This transition will not reload controllers/resolves/views but will register new // This transition will not reload controllers/resolves/views but will register new
// $stateParams[searchKey] terms. // $stateParams[searchKey] terms.
if (!$scope.querySet) { if (!$scope.querySet) {
transitionSuccessListener(); transitionSuccessListener();
$state.go('.', { [searchKey]: queryset }) $state.go('.', { [searchKey]: queryset })
.then(() => { .then(() => {
// same as above in $scope.remove. For some reason deleting the page // same as above in $scope.remove. For some reason deleting the page
// from the queryset works for all lists except lists in modals. // from the queryset works for all lists except lists in modals.
delete $stateParams[searchKey].page; delete $stateParams[searchKey].page;
listenForTransitionSuccess(); listenForTransitionSuccess();
}); });
}
qs.search(path, queryset)
.then(({ data }) => {
if ($scope.querySet) {
$scope.querySet = queryset;
}
$scope.dataset = data;
$scope.collection = data.results;
$scope.$emit('updateDataset', data);
})
.catch(() => revertSearch(unmodifiedQueryset));
$scope.searchTerm = null;
generateSearchTags();
} }
qs.search(path, queryset)
.then(({ data }) => {
if ($scope.querySet) {
$scope.querySet = queryset;
}
$scope.dataset = data;
$scope.collection = data.results;
$scope.$emit('updateDataset', data);
})
.catch(() => revertSearch(unmodifiedQueryset));
$scope.searchTerm = null;
generateSearchTags();
}; };
// remove tag, merge new queryset, $state.go // remove tag, merge new queryset, $state.go
$scope.removeTerm = index => { $scope.removeTerm = index => {

View File

@@ -7,7 +7,7 @@
<input class="SmartSearch-input" ng-model="searchTerm" placeholder="{{searchPlaceholder}}" <input class="SmartSearch-input" ng-model="searchTerm" placeholder="{{searchPlaceholder}}"
ng-disabled="disableSearch"> ng-disabled="disableSearch">
</form> </form>
<div type="submit" class="SmartSearch-searchButton" ng-disabled="!searchTerm" ng-click="addTerms(searchTerm)"> <div type="submit" class="SmartSearch-searchButton" ng-class="{'SmartSearch-searchButton--disabled': !searchTerm || searchTerm === ''}" ng-click="addTerms(searchTerm)">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</div> </div>
</div> </div>