bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 07:13:32 +00:00
Code Issues Releases Wiki Activity

[SM-645] Use search component in secrets manager (#4991)

Browse Source 
* Move search component into the component library

* Migrate search fields

* Reshuffle imports slightly

* Remove export input module

---------

Co-authored-by: cd-bitwarden <106776772+cd-bitwarden@users.noreply.github.com>
This commit is contained in:
Oscar Hinton
2023-04-19 22:21:57 +02:00
committed by GitHub
parent 192bb5a7b3
commit 68b62e73f1
13 changed files with 85 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/src/app/admin-console/organizations/members/people.component.html
View File

@@ -29,12 +29,11 @@
</bit-toggle>
</bit-toggle-group>
<app-search-input
<bit-search
class="tw-grow"
[(ngModel)]="searchText"
[placeholder]="'searchMembers' | i18n"
>
</app-search-input>
></bit-search>
<button type="button" bitButton buttonType="primary" (click)="invite()">
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>

21
apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.component.html
View File

@@ -1,21 +0,0 @@
<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
<div class="tw-relative tw-flex tw-items-center">
<label
[for]="id"
aria-hidden="true"
class="tw-absolute tw-left-2 tw-z-20 !tw-mb-0 tw-cursor-text"
>
<i class="bwi bwi-search bwi-fw tw-text-muted"></i>
</label>
<input
bitInput
type="search"
[id]="id"
[placeholder]="placeholder ?? ('search' | i18n)"
class="tw-rounded-l tw-pl-9"
[ngModel]="searchText"
(ngModelChange)="onChange($event)"
(blur)="onTouch()"
[disabled]="disabled"
/>
</div>

54
apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.component.ts
View File

@@ -1,54 +0,0 @@
import { Component, Input } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
let nextId = 0;
@Component({
selector: "app-search-input",
templateUrl: "./search-input.component.html",
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: SearchInputComponent,
},
],
})
export class SearchInputComponent implements ControlValueAccessor {
private notifyOnChange: (v: string) => void;
private notifyOnTouch: () => void;
protected id = `search-id-${nextId++}`;
protected searchText: string;
@Input() disabled: boolean;
@Input() placeholder: string;
onChange(searchText: string) {
if (this.notifyOnChange != undefined) {
this.notifyOnChange(searchText);
}
}
onTouch() {
if (this.notifyOnTouch != undefined) {
this.notifyOnTouch();
}
}
registerOnChange(fn: (v: string) => void): void {
this.notifyOnChange = fn;
}
registerOnTouched(fn: () => void): void {
this.notifyOnTouch = fn;
}
writeValue(searchText: string): void {
this.searchText = searchText;
}
setDisabledState(isDisabled: boolean) {
this.disabled = isDisabled;
}
}

36
apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.stories.ts
View File

@@ -1,36 +0,0 @@
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { InputModule } from "@bitwarden/components/src/input/input.module";
import { PreloadedEnglishI18nModule } from "../../../../../tests/preloaded-english-i18n.module";
import { SearchInputComponent } from "./search-input.component";
export default {
title: "Web/Organizations/Search Input",
component: SearchInputComponent,
decorators: [
moduleMetadata({
imports: [
InputModule,
FormsModule,
ReactiveFormsModule,
PreloadedEnglishI18nModule,
JslibModule,
],
providers: [],
}),
],
} as Meta;
const Template: Story<SearchInputComponent> = (args: SearchInputComponent) => ({
props: args,
template: `
<app-search-input [(ngModel)]="searchText" [placeholder]="placeholder" [disabled]="disabled"></app-search-input>
`,
});
export const Default = Template.bind({});
Default.args = {};

9
apps/web/src/app/admin-console/organizations/shared/shared-organization.module.ts
View File

@@ -1,14 +1,15 @@
import { NgModule } from "@angular/core";
import { SearchModule } from "@bitwarden/components";
import { SharedModule } from "../../../shared/shared.module";
import { AccessSelectorModule } from "./components/access-selector/access-selector.module";
import { CollectionDialogModule } from "./components/collection-dialog";
import { SearchInputComponent } from "./components/search-input/search-input.component";
@NgModule({
imports: [SharedModule, CollectionDialogModule, AccessSelectorModule],
declarations: [SearchInputComponent],
exports: [SharedModule, CollectionDialogModule, AccessSelectorModule, SearchInputComponent],
imports: [SharedModule, CollectionDialogModule, AccessSelectorModule, SearchModule],
declarations: [],
exports: [SharedModule, CollectionDialogModule, AccessSelectorModule, SearchModule],
})
export class SharedOrganizationModule {}