Igor Kulikov
6 years ago
16 changed files with 416 additions and 74 deletions
@ -0,0 +1,19 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2020 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="tb-filter-text" [ngClass]="{disabled: disabled, required: requiredClass}" |
|||
[innerHTML]="filterText"></div> |
|||
@ -0,0 +1,79 @@ |
|||
/** |
|||
* Copyright © 2016-2020 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
:host { |
|||
.tb-filter-text { |
|||
overflow-y: auto; |
|||
&.disabled { |
|||
opacity: 0.7; |
|||
} |
|||
&.required { |
|||
color: #f44336; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.tb-filter-text { |
|||
line-height: 1.8em; |
|||
span { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
line-height: 1.4em; |
|||
} |
|||
.tb-filter-predicate { |
|||
padding-right: 4px; |
|||
padding-left: 4px; |
|||
} |
|||
.tb-filter-entity-key, .tb-filter-value, .tb-filter-dynamic-source { |
|||
font-weight: bold; |
|||
border: 1px groove rgba(0, 0, 0, .25); |
|||
border-radius: 4px; |
|||
padding-left: 4px; |
|||
padding-right: 4px; |
|||
} |
|||
.tb-filter-entity-key, .tb-filter-value { |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
max-width: 150px; |
|||
} |
|||
.tb-filter-dynamic-source { |
|||
} |
|||
.tb-filter-entity-key { |
|||
color: #305680; |
|||
} |
|||
.tb-filter-value { |
|||
color: #ff5722; |
|||
} |
|||
.tb-filter-simple-operation { |
|||
font-size: 0.9em; |
|||
} |
|||
.tb-filter-complex-operation { |
|||
text-transform: uppercase; |
|||
font-weight: bold; |
|||
} |
|||
.tb-filter-dynamic-value { |
|||
.tb-filter-dynamic-source, .tb-filter-value { |
|||
color: #0c959c; |
|||
} |
|||
} |
|||
.tb-filter-bracket { |
|||
.tb-left-bracket, .tb-right-bracket { |
|||
font-size: 1.2em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,101 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, forwardRef, Input, OnInit } from '@angular/core'; |
|||
import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
import { MatDialog } from '@angular/material/dialog'; |
|||
import { KeyFilter, keyFiltersToText } from '@shared/models/query/query.models'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { DatePipe } from '@angular/common'; |
|||
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-filter-text', |
|||
templateUrl: './filter-text.component.html', |
|||
styleUrls: ['./filter-text.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => FilterTextComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class FilterTextComponent implements ControlValueAccessor, OnInit { |
|||
|
|||
private requiredValue: boolean; |
|||
get required(): boolean { |
|||
return this.requiredValue; |
|||
} |
|||
@Input() |
|||
set required(value: boolean) { |
|||
this.requiredValue = coerceBooleanProperty(value); |
|||
} |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
noFilterText = this.translate.instant('filter.no-filter-text'); |
|||
|
|||
@Input() |
|||
addFilterPrompt = this.translate.instant('filter.add-filter-prompt'); |
|||
|
|||
requiredClass = false; |
|||
|
|||
private filterText: string; |
|||
|
|||
private propagateChange = (v: any) => { }; |
|||
|
|||
constructor(private dialog: MatDialog, |
|||
private fb: FormBuilder, |
|||
private translate: TranslateService, |
|||
private datePipe: DatePipe) { |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
ngOnInit() { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
} |
|||
|
|||
writeValue(value: Array<KeyFilter>): void { |
|||
this.updateFilterText(value); |
|||
} |
|||
|
|||
private updateFilterText(value: Array<KeyFilter>) { |
|||
this.requiredClass = false; |
|||
if (value && value.length) { |
|||
this.filterText = keyFiltersToText(this.translate, this.datePipe, value); |
|||
} else { |
|||
if (this.required && !this.disabled) { |
|||
this.filterText = this.addFilterPrompt; |
|||
this.requiredClass = true; |
|||
} else { |
|||
this.filterText = this.noFilterText; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue