machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Typeahead loading spinner and regex fixes

Browse Source
This commit is contained in:
softsimon 2022-08-30 11:46:37 +02:00
parent 91355c0936
commit 0dfda66578
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/components/search-form/search-form.component.html
View File

@ -7,7 +7,13 @@
</div> </div>
<div> <div>
<button [disabled]="isSearching" type="submit" class="btn btn-block btn-primary"><fa-icon [icon]="['fas', 'search']" [fixedWidth]="true" i18n-title="search-form.search-title" title="Search"></fa-icon></button> <button [disabled]="isSearching" type="submit" class="btn btn-block btn-primary">
<fa-icon *ngIf="!(isTypeaheading$ | async) else searchLoading" [icon]="['fas', 'search']" [fixedWidth]="true" i18n-title="search-form.search-title" title="Search"></fa-icon>
</button>
</div> </div>
</div> </div>
</form> </form>
<ng-template #searchLoading>
<div class="spinner-border spinner-border-sm text-light" role="status" aria-hidden="true"></div>
</ng-template>

6
frontend/src/app/components/search-form/search-form.component.scss
View File

@ -50,3 +50,9 @@ form {
width: 100px; width: 100px;
} }
} }
.spinner-border {
vertical-align: text-top;
margin-top: 1px;
margin-right: 2px;
}

13
frontend/src/app/components/search-form/search-form.component.ts
View File

@ -3,8 +3,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { AssetsService } from 'src/app/services/assets.service'; import { AssetsService } from 'src/app/services/assets.service';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
import { Observable, of, Subject, merge, zip } from 'rxjs'; import { Observable, of, Subject, zip, BehaviorSubject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap, filter, catchError, map } from 'rxjs/operators'; import { debounceTime, distinctUntilChanged, switchMap, catchError, map } from 'rxjs/operators';
import { ElectrsApiService } from 'src/app/services/electrs-api.service'; import { ElectrsApiService } from 'src/app/services/electrs-api.service';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe'; import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
import { ApiService } from 'src/app/services/api.service'; import { ApiService } from 'src/app/services/api.service';
@ -20,13 +20,14 @@ export class SearchFormComponent implements OnInit {
network = ''; network = '';
assets: object = {}; assets: object = {};
isSearching = false; isSearching = false;
isTypeaheading$ = new BehaviorSubject<boolean>(false);
typeAhead$: Observable<any>; typeAhead$: Observable<any>;
searchForm: FormGroup; searchForm: FormGroup;
regexAddress = /^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100})$/; regexAddress = /^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100})$/;
regexBlockhash = /^[0]{8}[a-fA-F0-9]{56}$/; regexBlockhash = /^[0]{8}[a-fA-F0-9]{56}$/;
regexTransaction = /^([a-fA-F0-9]{64}):?(\d+)?$/; regexTransaction = /^([a-fA-F0-9]{64})(:\d+)?$/;
regexBlockheight = /^[0-9]+$/; regexBlockheight = /^[0-9]{1,9}$/;
focus$ = new Subject<string>(); focus$ = new Subject<string>();
click$ = new Subject<string>(); click$ = new Subject<string>();
@ -68,7 +69,7 @@ export class SearchFormComponent implements OnInit {
} }
return text.trim(); return text.trim();
}), }),
debounceTime(250), debounceTime(200),
distinctUntilChanged(), distinctUntilChanged(),
switchMap((text) => { switchMap((text) => {
if (!text.length) { if (!text.length) {
@ -80,6 +81,7 @@ export class SearchFormComponent implements OnInit {
} }
]); ]);
} }
this.isTypeaheading$.next(true);
if (!this.stateService.env.LIGHTNING) { if (!this.stateService.env.LIGHTNING) {
return zip( return zip(
this.electrsApiService.getAddressesByPrefix$(text).pipe(catchError(() => of([]))), this.electrsApiService.getAddressesByPrefix$(text).pipe(catchError(() => of([]))),
@ -95,6 +97,7 @@ export class SearchFormComponent implements OnInit {
); );
}), }),
map((result: any[]) => { map((result: any[]) => {
this.isTypeaheading$.next(false);
if (this.network === 'bisq') { if (this.network === 'bisq') {
return result[0].map((address: string) => 'B' + address); return result[0].map((address: string) => 'B' + address);
} }