valitydev/dashboard
14
0
Fork 0
mirror of https://github.com/valitydev/dashboard.git synced 2024-11-06 02:25:23 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

TD-576: Fix select search input (#120)

Browse Source
This commit is contained in:
Rinat Arsaev 2023-04-24 15:27:12 +04:00 committed by GitHub
parent 7c0d7dea09
commit dbde4152bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
44 changed files with 118 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -50,4 +50,5 @@ Thumbs.db
# Env and configs
.env*
src/*Config*.json
src/*Config*.json
!src/_*Config*.json

31
README.md
View File

@ -15,34 +15,11 @@
1. Add environment and configurations:
- `src/appConfig.json`:
- `src/.env`
- `src/appConfig.json`
- `src/authConfig.json`
```json
{
"apiEndpoint": "https://api.xample.com",
"urlShortenerEndpoint": "https://shrt.example.com",
"checkoutEndpoint": "https://checkout.example.com",
"docsEndpoints": {
"payments": "https://example.com/docs"
},
"theme": {
"name": "main"
},
"sentryDsn": "https://public@sentry.example.com/1",
"keycloakEndpoint": "https://auth.example.com"
}
```
- `src/authConfig.json`:
```json
{
"realm": "external",
"auth-server-url": "https://auth.example.com/auth/",
"ssl-required": "external",
"resource": "koffing",
"public-client": true
}
```
You can copy from examples like this one: [`_appConfig.json`](./src/_appConfig.json)
2. Install packages
```sh

2
_.env
View File

@ -1 +1 @@
PROXY_TARGET="https://sample.vality.dev"
PROXY_TARGET="https://vality.dev"

38
package-lock.json generated
View File

@ -42,6 +42,7 @@
"angular-file": "^3.0.1",
"angular2-text-mask": "^9.0.0",
"apexcharts": "^3.19.2",
"coerce-property": "^15.0.1",
"css-element-queries": "1.2.3",
"dinero.js": "2.0.0-alpha.8",
"humanize-duration": "^3.19.0",
@ -52,7 +53,7 @@
"lodash-es": "4.17.21",
"moment": "2.29.4",
"ng-apexcharts": "1.7.1",
"ngx-mat-select-search": "4.2.1",
"ngx-mat-select-search": "6.0.0",
"rxjs": "7.5.6",
"short-uuid": "4.2.0",
"tslib": "2.4.0",
@ -7546,6 +7547,19 @@
"node": ">=0.10.0"
}
},
"node_modules/coerce-property": {
"version": "15.0.1",
"resolved": "https://registry.npmjs.org/coerce-property/-/coerce-property-15.0.1.tgz",
"integrity": "sha512-BFuCajc/anzod6ExgyfEm2jaAE0OhSHEIBsmFj0bB7rQIrhgBiLPxpo3XWi7AyE5VVlFsLpkgIEGrDIWzJWc1Q==",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/cdk": ">=15.0.0",
"@angular/common": ">=15.0.0",
"@angular/core": ">=15.0.0"
}
},
"node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -13323,14 +13337,14 @@
}
},
"node_modules/ngx-mat-select-search": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-4.2.1.tgz",
"integrity": "sha512-bKHpOSIXyqwZw35OB6yi87tcRRV/69mu49PN0M2ZzVbiWBPg/IN58aJnCHUDxDG6CdK0vbGJ/2eCPniZ1nf9KA==",
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-6.0.0.tgz",
"integrity": "sha512-arrWZg2N/Pv3hCE2EV0qj3rqEUKImntmhW8qvo/aYxeN9iWPsseOpokcfMeC9I/SrLrqQFdfyPgHOgB9DqF2Hw==",
"dependencies": {
"tslib": "^2.4.0"
},
"peerDependencies": {
"@angular/material": "^12.0.0 || ^13.0.0 || ^14.0.0"
"@angular/material": "^15.0.0"
}
},
"node_modules/nice-napi": {
@ -23545,6 +23559,14 @@
"integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
"dev": true
},
"coerce-property": {
"version": "15.0.1",
"resolved": "https://registry.npmjs.org/coerce-property/-/coerce-property-15.0.1.tgz",
"integrity": "sha512-BFuCajc/anzod6ExgyfEm2jaAE0OhSHEIBsmFj0bB7rQIrhgBiLPxpo3XWi7AyE5VVlFsLpkgIEGrDIWzJWc1Q==",
"requires": {
"tslib": "^2.3.0"
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -27639,9 +27661,9 @@
}
},
"ngx-mat-select-search": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-4.2.1.tgz",
"integrity": "sha512-bKHpOSIXyqwZw35OB6yi87tcRRV/69mu49PN0M2ZzVbiWBPg/IN58aJnCHUDxDG6CdK0vbGJ/2eCPniZ1nf9KA==",
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-6.0.0.tgz",
"integrity": "sha512-arrWZg2N/Pv3hCE2EV0qj3rqEUKImntmhW8qvo/aYxeN9iWPsseOpokcfMeC9I/SrLrqQFdfyPgHOgB9DqF2Hw==",
"requires": {
"tslib": "^2.4.0"
}

5
package.json
View File

@ -60,6 +60,7 @@
"angular-file": "^3.0.1",
"angular2-text-mask": "^9.0.0",
"apexcharts": "^3.19.2",
"coerce-property": "^15.0.1",
"css-element-queries": "1.2.3",
"dinero.js": "2.0.0-alpha.8",
"humanize-duration": "^3.19.0",
@ -70,7 +71,7 @@
"lodash-es": "4.17.21",
"moment": "2.29.4",
"ng-apexcharts": "1.7.1",
"ngx-mat-select-search": "4.2.1",
"ngx-mat-select-search": "6.0.0",
"rxjs": "7.5.6",
"short-uuid": "4.2.0",
"tslib": "2.4.0",
@ -127,4 +128,4 @@
"ts-node": "10.9.1",
"typescript": "4.9.5"
}
}
}

14
src/_appConfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"keycloakEndpoint": "https://auth.vality.dev",
"theme": {
"name": "eastern"
},
"sentryDsn": null,
"docsEndpoints": {
"payments": "https://valitydev.github.io/swag-payments"
},
"apiEndpoint": "http://localhost:8000/__api",
"urlShortenerEndpoint": "https://shrt.vality.dev",
"checkoutEndpoint": "https://checkout.vality.dev",
"currencies": ["RUB", "USD", "EUR"]
}

7
src/_authConfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"realm": "external",
"auth-server-url": "https://auth.vality.dev/auth/",
"ssl-required": "external",
"resource": "dashboard",
"public-client": true
}

1
src/app/config/config.ts
View File

@ -12,5 +12,6 @@ export interface Config {
};
sentryDsn?: string;
keycloakEndpoint: string;
currencies: string[];
}
export const BASE_CONFIG = getBaseClass<Config>();

3
src/app/dadata/dadata.component.ts
View File

@ -9,13 +9,14 @@ import {
FmsUnitQuery,
PartyContent,
} from '@vality/swag-questionary-aggr-proxy';
import { coerceBoolean } from 'coerce-property';
import isEmpty from 'lodash-es/isEmpty';
import { interval, Observable } from 'rxjs';
import { debounce, filter, map, switchMap, take } from 'rxjs/operators';
import { ContentByRequestType, DaDataService, ParamsByRequestType, Suggestion } from '@dsh/api/questionary-aggr-proxy';
import { progress, shareReplayUntilDestroyed, takeError } from '@dsh/operators';
import { coerceBoolean, provideValueAccessor } from '@dsh/utils';
import { provideValueAccessor } from '@dsh/utils';
import { Type } from './type';

3
src/app/home/actionbar/components/menu-item/menu-item.component.ts
View File

@ -1,6 +1,5 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
import { coerceBoolean } from '@dsh/utils';
import { coerceBoolean } from 'coerce-property';
@Component({
selector: 'dsh-menu-item',

2
src/app/home/actionbar/components/user-dropdown/user-dropdown.component.ts
View File

@ -1,8 +1,8 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { coerceBoolean } from 'coerce-property';
import { map } from 'rxjs/operators';
import { ContextOrganizationService } from '@dsh/app/shared/services';
import { coerceBoolean } from '@dsh/utils';
import { ROTATE } from './utils/rotate-animation';
import { KeycloakService } from '../../../../auth';

2
src/app/icons/icons.json
View File

@ -1 +1 @@
["apple_pay", "google_pay", "logo", "mastercard", "mir", "samsung_pay", "visa", "yandex_pay"]
["apple_pay", "google_pay", "logo", "mastercard", "mir", "samsung_pay", "visa", "yandex_pay", "x"]

2
src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.ts
View File

@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Outp
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { MemberRole, ResourceScopeId, RoleId } from '@vality/swag-organizations';
import { coerceBoolean } from 'coerce-property';
import isNil from 'lodash-es/isNil';
import { BehaviorSubject, combineLatest, EMPTY, Observable, of } from 'rxjs';
import { first, map, switchMap, tap } from 'rxjs/operators';
@ -11,7 +12,6 @@ import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { ShopsDataService } from '@dsh/app/shared';
import { sortRoleIds } from '@dsh/app/shared/components/organization-roles/utils/sort-role-ids';
import { PartialReadonly } from '@dsh/type-utils';
import { coerceBoolean } from '@dsh/utils';
import { SelectRoleDialogComponent } from './components/select-role-dialog/select-role-dialog.component';
import { SelectRoleDialogResult } from './components/select-role-dialog/types/select-role-dialog-result';

2
src/app/sections/payment-section/analytics/stat-item/stat-item.component.ts
View File

@ -1,7 +1,7 @@
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { coerceBoolean } from 'coerce-property';
import { SpinnerType } from '@dsh/components/indicators';
import { coerceBoolean } from '@dsh/utils';
import { StatData } from '../utils';

3
src/app/shared/components/dialog/base-dialog/base-dialog.component.ts
View File

@ -1,6 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { coerceBoolean } from '@dsh/utils';
import { coerceBoolean } from 'coerce-property';
// TODO: add unit test for template with new ng-content
@Component({

3
src/app/shared/components/inputs/category-autocomplete-field/category-autocomplete-field.component.ts
View File

@ -1,13 +1,14 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
import { Category } from '@vality/swag-payments';
import { coerceBoolean } from 'coerce-property';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { CategoriesService } from '@dsh/api/payments';
import { Option } from '@dsh/components/form-controls/select-search-field';
import { shareReplayRefCount } from '@dsh/operators';
import { provideValueAccessor, coerceBoolean } from '@dsh/utils';
import { provideValueAccessor } from '@dsh/utils';
@Component({
selector: 'dsh-category-autocomplete-field',

3
src/app/shared/components/inputs/country-autocomplete-field/countries-autocomplete-field.component.ts
View File

@ -1,9 +1,10 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
import { coerceBoolean } from 'coerce-property';
import { map } from 'rxjs/operators';
import { CountriesService } from '@dsh/api/payments';
import { provideValueAccessor, coerceBoolean } from '@dsh/utils';
import { provideValueAccessor } from '@dsh/utils';
import { CountryId } from './types';
import { countriesToOptions } from './utils';

27
src/app/shared/components/inputs/currency-autocomplete-field/currency-autocomplete-field.component.ts
View File

@ -1,8 +1,11 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
import { coerceBoolean } from 'coerce-property';
import { Option } from '@dsh/components/form-controls/radio-group-field';
import { provideValueAccessor, coerceBoolean } from '@dsh/utils';
import { provideValueAccessor } from '@dsh/utils';
import { ConfigService } from '../../../../config';
@Component({
selector: 'dsh-currency-autocomplete-field',
@ -14,23 +17,11 @@ export class CurrencyAutocompleteFieldComponent extends WrappedFormControlSuperc
@Input() label: string;
@Input() @coerceBoolean required = false;
options: Option<string>[] = [
'RUB',
'USD',
'EUR',
'UAH',
'KZT',
'BYN',
'JPY',
'INR',
'AZN',
'BRL',
'BDT',
'TRY',
'PHP',
'KRW',
'PKR',
]
options: Option<string>[] = this.configService.currencies
.sort()
.map((currency) => ({ label: currency, value: currency }));
constructor(private configService: ConfigService) {
super();
}
}

2
src/app/shared/components/inputs/max-length-input/max-length-input.component.ts
View File

@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, forwardRef, Input, OnChanges } from
import { ControlValueAccessor, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { FormControl, ValidatorFn } from '@ngneat/reactive-forms';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { coerceBoolean } from 'coerce-property';
import isNil from 'lodash-es/isNil';
import isObject from 'lodash-es/isObject';
import { skip } from 'rxjs/operators';
@ -9,7 +10,6 @@ import { skip } from 'rxjs/operators';
import { ComponentInputError } from '@dsh/app/shared/services/error/models/component-input-error';
import { ErrorMatcher } from '@dsh/app/shared/utils';
import { ComponentChanges } from '@dsh/type-utils';
import { coerceBoolean } from '@dsh/utils';
@UntilDestroy()
@Component({
selector: 'dsh-max-length-input',

3
src/app/shared/components/inputs/payment-institution-field/payment-institution-field.component.ts
View File

@ -1,12 +1,13 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
import { PaymentInstitution } from '@vality/swag-payments';
import { coerceBoolean } from 'coerce-property';
import { Observable } from 'rxjs';
import { map, share } from 'rxjs/operators';
import { PaymentInstitutionsService } from '@dsh/api/payments';
import { Option } from '@dsh/components/form-controls/select-search-field';
import { provideValueAccessor, coerceBoolean } from '@dsh/utils';
import { provideValueAccessor } from '@dsh/utils';
@Component({
selector: 'dsh-payment-institution-field',

3
src/app/shared/components/inputs/shop-field/shop-field.component.ts
View File

@ -1,6 +1,7 @@
import { ChangeDetectionStrategy, Component, Inject, Input, Optional } from '@angular/core';
import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
import { Shop } from '@vality/swag-payments';
import { coerceBoolean } from 'coerce-property';
import { defer, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@ -9,7 +10,7 @@ import { ShopsDataService } from '@dsh/app/shared';
import { shopToOption } from '@dsh/app/shared/components/inputs/shop-field/utils/shops-to-options';
import { Option } from '@dsh/components/form-controls/select-search-field';
import { shareReplayRefCount } from '@dsh/operators';
import { coerceBoolean, provideValueAccessor } from '@dsh/utils';
import { provideValueAccessor } from '@dsh/utils';
import { SHOPS } from './shops-token';

3
src/app/shared/components/inputs/wallet-autocomplete-field/wallet-autocomplete-field.component.ts
View File

@ -1,9 +1,10 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
import { coerceBoolean } from 'coerce-property';
import { map } from 'rxjs/operators';
import { WalletsService } from '@dsh/api/wallet';
import { coerceBoolean, provideValueAccessor } from '@dsh/utils';
import { provideValueAccessor } from '@dsh/utils';
import { WalletId } from './types';
import { walletsToOptions } from './utils';

2
src/app/shared/components/organization-roles/organization-roles.component.ts
View File

@ -1,8 +1,8 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { MemberRole } from '@vality/swag-organizations';
import { coerceBoolean } from 'coerce-property';
import { OrganizationsDictionaryService } from '@dsh/api/organizations';
import { coerceBoolean } from '@dsh/utils';
import { RoleGroup } from './types/role-group';
import { groupRoles } from './utils/group-roles';

2
src/app/shared/components/radio-buttons/expandable-radio-group/expandable-radio-group.component.ts
View File

@ -11,10 +11,10 @@ import {
TemplateRef,
} from '@angular/core';
import { FormControl } from '@ngneat/reactive-forms';
import { coerceBoolean } from 'coerce-property';
import { isNumber } from '@dsh/app/shared/utils';
import { Dict } from '@dsh/type-utils';
import { coerceBoolean } from '@dsh/utils';
import { ExpandableRadioGroupItemDirective } from './directives/expandable-radio-group-item/expandable-radio-group-item.directive';
import { ExpandableRadioChoice, isExpandableRadioObjectChoice } from './types/expandable-radio-choice';

5
src/assets/icons/x.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 348 B

3
src/components/buttons/button/button.component.ts
View File

@ -10,8 +10,7 @@ import {
ViewEncapsulation,
} from '@angular/core';
import { mixinDisabled } from '@angular/material/core';
import { coerceBoolean } from '@dsh/utils';
import { coerceBoolean } from 'coerce-property';
import { ColorManager } from './color-manager';
import { FocusManager } from './focus-manager';

3
src/components/filter/components/filter-button/filter-button.component.ts
View File

@ -1,6 +1,5 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { coerceBoolean } from '@dsh/utils';
import { coerceBoolean } from 'coerce-property';
@Component({
selector: 'dsh-filter-button',

3
src/components/filter/components/filter-content/filter-content.component.ts
View File

@ -1,6 +1,5 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { coerceBoolean } from '@dsh/utils';
import { coerceBoolean } from 'coerce-property';
@Component({
selector: 'dsh-filter-content',

3
src/components/filter/filter.component.ts
View File

@ -2,10 +2,9 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { coerceBoolean } from 'coerce-property';
import { map, pluck } from 'rxjs/operators';
import { coerceBoolean } from '@dsh/utils';
import { FilterDialogComponent } from './components/filter-dialog/filter-dialog.component';
@UntilDestroy()

3
src/components/form-controls/multi-select-field/multi-select-field.component.ts
View File

@ -1,10 +1,11 @@
import { Component, Input, OnChanges } from '@angular/core';
import { UntilDestroy } from '@ngneat/until-destroy';
import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
import { coerceBoolean } from 'coerce-property';
import isNil from 'lodash-es/isNil';
import { ComponentChanges } from '@dsh/type-utils';
import { provideValueAccessor, coerceBoolean } from '@dsh/utils';
import { provideValueAccessor } from '@dsh/utils';
export interface Option<T> {
value: T;

4
src/components/form-controls/select-search-field/select-search-field.component.html
View File

@ -1,12 +1,14 @@
<mat-form-field *transloco="let t; scope: 'core-components'; read: 'coreComponents.selectSearchField'">
<mat-label>{{ label }}</mat-label>
<mat-hint *ngIf="hint">{{ hint }}</mat-hint>
<mat-select [formControl]="control" [required]="required">
<mat-select [formControl]="control">
<mat-option>
<ngx-mat-select-search
[formControl]="selectSearchControl"
[placeholderLabel]="t('searchPlaceholder')"
[noEntriesFoundLabel]="t('noEntriesFoundLabel')"
closeSvgIcon="x"
[required]="required"
>
</ngx-mat-select-search>
</mat-option>

3
src/components/form-controls/select-search-field/select-search-field.component.ts
View File

@ -1,11 +1,12 @@
import { OnChanges, ChangeDetectionStrategy, Input, Component } from '@angular/core';
import { FormControl } from '@ngneat/reactive-forms';
import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
import { coerceBoolean } from 'coerce-property';
import { BehaviorSubject, combineLatest, defer, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { ComponentChanges } from '@dsh/type-utils';
import { getFormValueChanges, provideValueAccessor, coerceBoolean } from '@dsh/utils';
import { getFormValueChanges, provideValueAccessor } from '@dsh/utils';
import { Option } from './types';
import { filterOptions } from './utils';

3
src/components/indicators/selection/selection.component.ts
View File

@ -1,6 +1,5 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { coerceBoolean } from '@dsh/utils';
import { coerceBoolean } from 'coerce-property';
@Component({
selector: 'dsh-selection',

2
src/components/indicators/status/status.component.ts
View File

@ -1,7 +1,7 @@
import { Component, HostBinding, Input } from '@angular/core';
import { coerceBoolean } from 'coerce-property';
import { StatusColor } from '../../../app/theme-manager';
import { coerceBoolean } from '../../../utils';
@Component({
selector: 'dsh-status',

5
src/components/layout/accordion/accordion-item/accordion-item.component.ts
View File

@ -1,7 +1,6 @@
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output } from '@angular/core';
import { coerce } from '@dsh/utils';
import { coerce } from 'coerce-property';
import { EXPAND_ANIMATION } from './expand-animation';
import { LazyPanelContentDirective } from './lazy-panel-content.directive';
@ -18,7 +17,7 @@ export class AccordionItemComponent {
@Output() expandedChange = new EventEmitter<boolean>();
@Input()
@coerce(coerceBooleanProperty, (v: boolean, self: AccordionItemComponent) => self.expandedChange.emit(v))
@coerce<AccordionItemComponent>(coerceBooleanProperty, (v: boolean, self) => self.expandedChange.emit(v))
expanded = false;
@ContentChild(AccordionItemContentComponent)

5
src/components/layout/accordion/accordion.component.ts
View File

@ -9,11 +9,12 @@ import {
QueryList,
ViewContainerRef,
} from '@angular/core';
import { coerce } from 'coerce-property';
import { combineLatest, merge, of } from 'rxjs';
import { delay, distinctUntilChanged, filter, map, startWith, switchMap, take } from 'rxjs/operators';
import { AccordionItemComponent } from './accordion-item';
import { coerce, smoothChangeTo } from '../../../utils';
import { smoothChangeTo } from '../../../utils';
const INIT_DELAY_MS = 350;
const SCROLL_TO_Y_OFFSET_PX = 80;
@ -26,7 +27,7 @@ const SCROLL_TIME_MS = 500;
})
export class AccordionComponent implements AfterViewInit {
@Input()
@coerce((v) => v, (v: number, self: AccordionComponent) => self.expandedChange.emit(v))
@coerce<AccordionComponent>((v) => v, (v: number, self) => self.expandedChange.emit(v))
expanded: number;
@Output() expandedChange = new EventEmitter<number>();

3
src/components/layout/dropdown/dropdown.component.ts
View File

@ -9,11 +9,10 @@ import {
TemplateRef,
ViewChild,
} from '@angular/core';
import { coerceBoolean } from 'coerce-property';
import { BehaviorSubject, Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { coerceBoolean } from '@dsh/utils';
import { OPEN_CLOSE_ANIMATION, State } from './open-close-animation';
/**

3
src/components/navigation/state-nav/state-nav-item/state-nav-item.component.ts
View File

@ -1,8 +1,7 @@
import { Component, ElementRef, Input, Renderer2 } from '@angular/core';
import { coerceBoolean } from 'coerce-property';
import { Subject } from 'rxjs';
import { coerceBoolean } from '../../../../utils';
export enum Color {
Success = 'success',
Warn = 'warn',

2
src/components/navigation/state-nav/state-nav.component.ts
View File

@ -8,10 +8,10 @@ import {
QueryList,
ViewEncapsulation,
} from '@angular/core';
import { coerceBoolean } from 'coerce-property';
import { Subscription } from 'rxjs';
import { StateNavItemComponent } from './state-nav-item';
import { coerceBoolean } from '../../../utils';
@Component({
selector: 'dsh-state-nav',

29
src/utils/coerce/coerce-by-type.ts
View File

@ -1,29 +0,0 @@
import {
coerceArray as coerceArrayProperty,
coerceBooleanProperty,
coerceCssPixelValue,
coerceElement as coerceElementProperty,
coerceNumberProperty,
} from '@angular/cdk/coercion';
import { coerce } from './coerce';
export function coerceBoolean(target, key) {
return coerce(coerceBooleanProperty)(target, key);
}
export function coerceNumber(target, key) {
return coerce(coerceNumberProperty)(target, key);
}
export function coerceArray(target, key) {
return coerce(coerceArrayProperty)(target, key);
}
export function coercePixel(target, key) {
return coerce(coerceCssPixelValue)(target, key);
}
export function coerceElement(target, key) {
return coerce(coerceElementProperty)(target, key);
}

41
src/utils/coerce/coerce.spec.ts
View File

@ -1,41 +0,0 @@
import { coerce } from './coerce';
describe('coerce', () => {
class Simple {
@coerce(function (v) {
return this.withDef + v;
})
testThisBefore = 1;
@coerce((v) => v + 1)
withDef = 0;
@coerce((v) => v + 1)
withoutDef;
@coerce(function (v) {
return this.withDef + v;
})
testThisAfter = 1;
}
it("without default init shouldn't call", () => {
const simple = new Simple();
expect(simple.withoutDef).toBeUndefined();
});
it('with default init should call', () => {
const simple = new Simple();
expect(simple.withDef).toBe(1);
});
it('init order should affects usage this (before)', () => {
const simple = new Simple();
expect(simple.testThisBefore).toBeNaN();
});
it('init order should affects usage this (after)', () => {
const simple = new Simple();
expect(simple.testThisAfter).toBe(2);
});
});

22
src/utils/coerce/coerce.ts
View File

@ -1,22 +0,0 @@
export function coerce<I = any, O = any, T = any>(
fn: (value: I, self: T) => O,
afterFn?: (newValue: O, self: T, oldValue: I) => void
): PropertyDecorator {
return function (target: T, key) {
const _key = Symbol(key.toString());
target[_key] = target[key];
Object.defineProperty(target, key, {
get() {
return this[_key];
},
set: afterFn
? function (v) {
this[_key] = fn.call(this, v);
afterFn.call(this, this[_key], this, v);
}
: function (v) {
this[_key] = fn.call(this, v, this);
},
});
};
}

2
src/utils/coerce/index.ts
View File

@ -1,2 +0,0 @@
export * from './coerce';
export * from './coerce-by-type';

1
src/utils/index.ts
View File

@ -1,4 +1,3 @@
export * from './coerce';
export * from './get-base-class';
export * from './download';
export * from './smooth-change-to';