Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Reset search field

Browse Source
This commit is contained in:
Adina Țeudan 2021-03-19 00:19:42 +02:00
parent 3fc3032e03
commit c4ef411c91
11 changed files with 52 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/app.module.ts
View File

@ -118,6 +118,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
import { ForceRedactionDialogComponent } from './dialogs/force-redaction-dialog/force-redaction-dialog.component';
import { AuditScreenComponent } from './screens/admin/audit-screen/audit-screen.component';
import { PaginationComponent } from './components/pagination/pagination.component';
import { SearchInputComponent } from './components/search-input/search-input.component';
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@ -390,7 +391,8 @@ const matImports = [
ComboChartComponent,
ComboSeriesVerticalComponent,
AuditScreenComponent,
PaginationComponent
PaginationComponent,
SearchInputComponent
],
imports: [
BrowserModule,

7
apps/red-ui/src/app/components/search-input/search-input.component.html Normal file
View File

@ -0,0 +1,7 @@
<form [formGroup]="form">
<div class="red-input-group" [style.width]="width + 'px'" [style.max-width]="width + 'px'">
<input [placeholder]="placeholder | translate" class="with-icon mt-0" formControlName="query" name="query" type="text" />
<mat-icon *ngIf="!hasContent" class="icon-right" svgIcon="red:search"></mat-icon>
<mat-icon *ngIf="hasContent" class="icon-right pointer" svgIcon="red:close" (click)="clearContent()"></mat-icon>
</div>
</form>

3
apps/red-ui/src/app/components/search-input/search-input.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
display: block;
}

25
apps/red-ui/src/app/components/search-input/search-input.component.ts Normal file
View File

@ -0,0 +1,25 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'redaction-search-input',
templateUrl: './search-input.component.html',
styleUrls: ['./search-input.component.scss']
})
export class SearchInputComponent implements OnInit {
@Input() form: FormGroup;
@Input() placeholder: string;
@Input() width = 250;
constructor() {}
ngOnInit(): void {}
public get hasContent() {
return !!this.form.get('query').value.length;
}
public clearContent() {
this.form.patchValue({ query: '' });
}
}

19
apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
View File

@ -26,18 +26,13 @@
<pre *ngIf="selectedUserList.length === 0" class="info" [innerHTML]="'assign-' + data.type + '-owner.dialog.no-members' | translate"></pre>
<form [formGroup]="searchForm">
<div class="red-input-group search-container">
<input
[placeholder]="'assign-' + data.type + '-owner.dialog.search' | translate"
formControlName="query"
name="query"
type="text"
class="with-icon mt-0"
/>
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>
<redaction-search-input
[width]="560"
[form]="searchForm"
[placeholder]="'assign-' + data.type + '-owner.dialog.search' | translate"
class="search-container"
></redaction-search-input>
<div class="members-list">
<div *ngFor="let userId of multiUsersSelectOptions" [class.selected]="isMemberSelected(userId)" (click)="toggleSelected(userId)">
<redaction-initials-avatar [userId]="userId" [withName]="true" size="large"></redaction-initials-avatar>

6
apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss
View File

@ -5,13 +5,7 @@
}
.search-container {
width: 560px;
margin-top: 16px;
input {
width: 100%;
max-width: 100%;
}
}
.members-list {

14
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
View File

@ -43,19 +43,7 @@
</span>
<div class="dictionary-actions-container">
<form [formGroup]="searchForm">
<div class="red-input-group w-250">
<input
[placeholder]="'dictionary-listing.search' | translate"
formControlName="query"
name="query"
type="text"
class="with-icon mt-0"
/>
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>
<redaction-search-input [form]="searchForm" [placeholder]="'dictionary-listing.search'"></redaction-search-input>
<div class="actions">
<redaction-icon-button
*ngIf="permissionsService.isAdmin()"

13
apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.html
View File

@ -3,18 +3,7 @@
<redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
<div class="actions">
<form [formGroup]="searchForm">
<div class="red-input-group w-250">
<input
[placeholder]="'project-templates-listing.search' | translate"
formControlName="query"
name="query"
type="text"
class="with-icon mt-0"
/>
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>
<redaction-search-input [form]="searchForm" [placeholder]="'project-templates-listing.search'"></redaction-search-input>
<redaction-icon-button
*ngIf="permissionsService.isAdmin()"

7
apps/red-ui/src/app/screens/admin/user-listing-screen/user-listing-screen.component.html
View File

@ -2,12 +2,7 @@
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input [placeholder]="'dictionary-listing.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>
<redaction-search-input [form]="searchForm" [placeholder]="'user-listing.search'"></redaction-search-input>
<div class="actions">
<redaction-circle-button

7
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -32,12 +32,7 @@
[filters]="ruleSetFilters"
[icon]="'red:template'"
></redaction-filter>
<form [formGroup]="searchForm">
<div class="red-input-group w-250">
<input [placeholder]="'project-listing.search' | translate" class="with-icon mt-0" formControlName="query" name="query" type="text" />
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>
<redaction-search-input [form]="searchForm" [placeholder]="'project-listing.search'"></redaction-search-input>
<div class="reset-filters" *ngIf="hasActiveFilters" (click)="resetFilters()" translate="reset-filters"></div>
</div>
<redaction-icon-button

9
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -24,12 +24,9 @@
[filters]="needsWorkFilters"
[icon]="'red:needs-work'"
></redaction-filter>
<form [formGroup]="searchForm">
<div class="red-input-group w-250">
<input [placeholder]="'project-overview.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>
<redaction-search-input [form]="searchForm" [placeholder]="'project-overview.search'"></redaction-search-input>
<div class="reset-filters" *ngIf="hasActiveFilters" (click)="resetFilters()" translate="reset-filters"></div>
</div>