yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add umb-search-filter component (#8179)

Browse Source
This commit is contained in:
Jan Skovgaard
2020-07-23 17:13:26 +02:00
committed by GitHub
parent b3e5c510a5
commit ad29e628d8
6 changed files with 142 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js Normal file
View File

@@ -0,0 +1,84 @@
/**
@ngdoc directive
@name umbraco.directives.directive:umbSearchFilter
@restrict E
@scope
@description
<b>Added in Umbraco version 8.7.0</b> Use this directive to render an umbraco search filter.
<h3>Markup example</h3>
<pre>
<div ng-controller="My.Controller as vm">
<umb-search-filter
name="checkboxlist"
value="{{key}}"
model="true"
text="{{text}}">
</umb-search-filter>
</div>
</pre>
@param {boolean} model Set to <code>true</code> or <code>false</code> to set the checkbox to checked or unchecked.
@param {string} inputId Set the <code>id</code> of the checkbox.
@param {string} text Set the text for the checkbox label.
@param {string} labelKey Set a dictinary/localization string for the checkbox label
@param {callback} onChange Callback when the value of the checkbox change by interaction.
@param {boolean} autoFocus Add autofocus to the input field
@param {boolean} preventSubmitOnEnter Set the enter prevent directive or not
**/
(function () {
'use strict';
function UmbSearchFilterController($timeout, localizationService) {
var vm = this;
vm.$onInit = onInit;
vm.change = change;
function onInit() {
vm.inputId = vm.inputId || "umb-check_" + String.CreateGuid();
// If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [
if (vm.labelKey) {
localizationService.localize(vm.labelKey).then(function (data) {
if(data.indexOf('[') === -1){
vm.text = data;
}
});
}
}
function change() {
if (vm.onChange) {
$timeout(function () {
vm.onChange({ model: vm.model, value: vm.value });
}, 0);
}
}
}
var component = {
templateUrl: 'views/components/forms/umb-search-filter.html',
controller: UmbSearchFilterController,
controllerAs: 'vm',
transclude: true,
bindings: {
model: "=",
inputId: "@",
text: "@",
labelKey: "@?",
onChange: "&?",
autoFocus: "<?",
preventSubmitOnEnter: "<?"
}
};
angular.module('umbraco.directives').component('umbSearchFilter', component);
})();

3
src/Umbraco.Web.UI.Client/src/less/forms.less
View File

@@ -113,6 +113,9 @@ label.control-label, .control-label {
}
}
.form-search .umb-search-field {
width: 100%;
}
// GENERAL STYLES
// --------------

23
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
View File

@@ -15,20 +15,15 @@
<umb-box>
<umb-box-content>
<div class="umb-control-group -no-border">
<div class="form-search">
<i class="icon-search"></i>
<input type="text"
style="width: 100%"
ng-change="vm.searchTermChanged()"
ng-model="vm.searchTerm"
class="umb-search-field search-query search-input input-block-level"
localize="placeholder"
placeholder="@placeholders_search"
umb-auto-focus
no-dirty-check />
</div>
</div>
<umb-search-filter
input-id="datatype-search"
model="vm.searchTerm"
label-key="placeholders_search"
text="Type to search"
on-change="vm.searchTermChanged()"
auto-focus="true"
>
</umb-search-filter>
<umb-load-indicator ng-if="vm.loading === true"></umb-load-indicator>

23
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html
View File

@@ -17,20 +17,15 @@
<umb-box-content>
<!-- FILTER -->
<div class="umb-control-group -no-border">
<div class="form-search">
<i class="icon-search"></i>
<input type="text"
style="width: 100%"
ng-change="vm.filterItems()"
ng-model="vm.searchTerm"
class="umb-search-field search-query search-input input-block-level"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
</div>
</div>
<umb-search-filter
input-id="macroparameter-search"
model="vm.searchTerm"
label-key="placeholders_filter"
text="Type to filter..."
on-change="vm.filterItems()"
auto-focus="true"
>
</umb-search-filter>
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>

28
src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html Normal file
View File

@@ -0,0 +1,28 @@
<div class="umb-control-group -no-border">
<div class="form-search form-search-filter">
<label for="{{vm.inputId}}" class="sr-only">{{vm.text}}</label>
<i class="icon-search" aria-hidden="true"></i>
<input
ng-if="vm.preventSubmitOnEnter"
id="{{vm.inputId}}"
type="text"
ng-change="vm.change()"
ng-model="vm.model"
class="umb-search-field search-query search-input input-block-level"
placeholder="{{vm.text}}"
umb-auto-focus="{{vm.autoFocus === true}}"
prevent-enter-submit
no-dirty-check />
<input
ng-if="!vm.preventSubmitOnEnter"
id="{{vm.inputId}}"
type="text"
ng-change="vm.change()"
ng-model="vm.model"
class="umb-search-field search-query search-input input-block-level"
placeholder="{{vm.text}}"
umb-auto-focus="{{vm.autoFocus === true}}"
no-dirty-check />
</div>
</div>

25
src/Umbraco.Web.UI.Client/src/views/dashboard/content/redirecturls.html
View File

@@ -32,22 +32,15 @@
<ng-form class="form-search -no-margin-bottom pull-right" novalidate>
<div class="inner-addon left-addon">
<label for="redirect-search" class="form-search__label-icon">
<i class="icon icon-search" aria-hidden="true"></i>
<span class="sr-only">
<localize key="visuallyHiddenTexts_redirectDashboardSearchLabel">Search the redirect dashboard</localize>
</span>
</label>
<input
class="form-control search-input"
type="text"
localize="placeholder"
placeholder="@general_typeToSearch"
ng-model="vm.dashboard.searchTerm"
ng-change="vm.filter()"
id="redirect-search"
prevent-enter-submit
no-dirty-check>
<umb-search-filter
input-id="redirect-search"
model="vm.dashboard.searchTerm"
label-key="general_typeToSearch"
text="Type to search"
on-change="vm.filter()"
prevent-submit-on-enter="true"
>
</umb-search-filter>
</div>
</ng-form>