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

FRONTEND-447: Responsive dialog (#461)

Browse Source
This commit is contained in:
Rinat Arsaev 2021-05-18 12:48:42 +03:00 committed by GitHub
parent 9d7cd451e1
commit 9bee70de84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
65 changed files with 94 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -7,7 +7,7 @@
"build": "ng build --prod --extraWebpackConfig webpack.extra.js --progress=false",
"test": "ng test",
"test-ci": "ng run dashboard:test-ci",
"lint": "eslint \"src/**/*.{ts,js,html}\" --max-warnings 2361",
"lint": "eslint \"src/**/*.{ts,js,html}\" --max-warnings 2352",
"lint-errors": "npm run lint -- --quiet",
"lint-fix": "npm run lint -- --fix",
"e2e": "ng e2e",

8
src/app/feedback/feedback.component.ts
View File

@ -1,8 +1,6 @@
import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { FeedbackDialogComponent } from './components/feedback-dialog/feedback-dialog.component';
@Component({
@ -12,9 +10,9 @@ import { FeedbackDialogComponent } from './components/feedback-dialog/feedback-d
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FeedbackComponent {
constructor(private dialog: MatDialog, @Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig) {}
constructor(private dialog: MatDialog) {}
openFeedbackDialog() {
return this.dialog.open(FeedbackDialogComponent, this.dialogConfig.medium);
return this.dialog.open(FeedbackDialogComponent);
}
}

1
src/app/sections/claim/revoke-claim.service.ts
View File

@ -48,7 +48,6 @@ export class RevokeClaimService {
private openRevokeClaimDialog(claimId: number, revision: number) {
return this.dialog
.open(RevokeClaimDialogComponent, {
disableClose: true,
width: '500px',
data: { claimId, revision },
})

2
src/app/sections/invoice-details/payment-link/payment-link.component.ts
View File

@ -19,8 +19,6 @@ export class PaymentLinkComponent {
create() {
this.dialog.open(CreatePaymentLinkDialogComponent, {
width: '720px',
maxHeight: '90vh',
disableClose: true,
data: { invoice: this.invoice },
});
}

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

@ -80,8 +80,8 @@ export class ChangeRolesTableComponent implements OnInit {
const removeDialogsClass = addDialogsClass(this.dialog.openDialogs, 'dsh-hidden');
this.dialog
.open<SelectRoleDialogComponent, SelectRoleDialogData, SelectRoleDialogResult>(SelectRoleDialogComponent, {
data: { availableRoles: this.availableRoles },
...this.dialogConfig.large,
data: { availableRoles: this.availableRoles },
})
.afterClosed()
.pipe(

5
src/app/sections/organization-details/invitations/invitations.component.ts
View File

@ -47,7 +47,10 @@ export class InvitationsComponent {
this.dialog
.open<CreateInvitationDialogComponent, CreateInvitationDialogData, BaseDialogResponseStatus>(
CreateInvitationDialogComponent,
{ ...this.dialogConfig.large, data: { orgId } }
{
...this.dialogConfig.large,
data: { orgId },
}
)
.afterClosed()
),

2
src/app/sections/organization-details/members/components/member/member.component.ts
View File

@ -65,11 +65,11 @@ export class MemberComponent implements OnChanges {
editRoles() {
return this.dialog
.open<EditRolesDialogComponent, EditRolesDialogData>(EditRolesDialogComponent, {
...this.dialogConfig.large,
data: {
orgId: this.organization.id,
userId: this.member.id,
},
...this.dialogConfig.large,
})
.afterClosed()
.pipe(untilDestroyed(this))

9
src/app/sections/organizations/components/organization/organization.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, OnChanges, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import isNil from 'lodash-es/isNil';
@ -6,7 +6,6 @@ import { filter, pluck, switchMap } from 'rxjs/operators';
import { OrganizationsService } from '@dsh/api';
import { Organization } from '@dsh/api-codegen/organizations';
import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { BaseDialogResponseStatus } from '@dsh/app/shared/components/dialog/base-dialog';
import { ErrorService, NotificationService } from '@dsh/app/shared/services';
import { FetchOrganizationsService } from '@dsh/app/shared/services/fetch-organizations';
@ -41,7 +40,6 @@ export class OrganizationComponent implements OnChanges {
private dialog: MatDialog,
private notificationService: NotificationService,
private errorService: ErrorService,
@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig,
private fetchOrganizationsService: FetchOrganizationsService
) {}
@ -75,10 +73,7 @@ export class OrganizationComponent implements OnChanges {
return this.dialog
.open<RenameOrganizationDialogComponent, RenameOrganizationDialogData, BaseDialogResponseStatus>(
RenameOrganizationDialogComponent,
{
...this.dialogConfig.medium,
data: { organization: this.organization },
}
{ data: { organization: this.organization } }
)
.afterClosed()
.pipe(

10
src/app/sections/organizations/organizations.component.spec.ts
View File

@ -6,7 +6,6 @@ import { TranslocoTestingModule } from '@ngneat/transloco';
import { of } from 'rxjs';
import { anything, instance, mock, verify, when } from 'ts-mockito';
import { DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { BaseDialogResponseStatus } from '@dsh/app/shared/components/dialog/base-dialog';
import { FetchOrganizationsService } from '@dsh/app/shared/services/fetch-organizations';
import { EmptySearchResultModule } from '@dsh/components/empty-search-result';
@ -42,7 +41,6 @@ describe('OrganizationsComponent', () => {
declarations: [HostComponent, OrganizationsComponent],
providers: [
{ provide: FetchOrganizationsService, useValue: instance(mockFetchOrganizationsService) },
{ provide: DIALOG_CONFIG, useValue: {} },
{ provide: MatDialog, useValue: instance(mockDialog) },
],
}).compileComponents();
@ -69,20 +67,20 @@ describe('OrganizationsComponent', () => {
});
it('success', () => {
when(mockDialog.open(anything(), anything())).thenReturn({
when(mockDialog.open(anything())).thenReturn({
afterClosed: () => of(BaseDialogResponseStatus.Success),
} as MatDialogRef<any>);
component.createOrganization();
verify(mockDialog.open(anything(), anything())).once();
verify(mockDialog.open(anything())).once();
verify(mockFetchOrganizationsService.refresh()).once();
});
it('cancelled', () => {
when(mockDialog.open(anything(), anything())).thenReturn({
when(mockDialog.open(anything())).thenReturn({
afterClosed: () => of(BaseDialogResponseStatus.Cancelled),
} as MatDialogRef<any>);
component.createOrganization();
verify(mockDialog.open(anything(), anything())).once();
verify(mockDialog.open(anything())).once();
verify(mockFetchOrganizationsService.refresh()).never();
});
});

14
src/app/sections/organizations/organizations.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { filter } from 'rxjs/operators';
@ -7,7 +7,6 @@ import { BaseDialogResponseStatus } from '@dsh/app/shared/components/dialog/base
import { FetchOrganizationsService } from '@dsh/app/shared/services/fetch-organizations';
import { ignoreBeforeCompletion } from '@dsh/utils';
import { DialogConfig, DIALOG_CONFIG } from '../tokens';
import { CreateOrganizationDialogComponent } from './components/create-organization-dialog/create-organization-dialog.component';
@UntilDestroy()
@ -23,11 +22,7 @@ export class OrganizationsComponent implements OnInit {
isLoading$ = this.fetchOrganizationsService.doSearchAction$;
lastUpdated$ = this.fetchOrganizationsService.lastUpdated$;
constructor(
private fetchOrganizationsService: FetchOrganizationsService,
private dialog: MatDialog,
@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig
) {}
constructor(private fetchOrganizationsService: FetchOrganizationsService, private dialog: MatDialog) {}
ngOnInit() {
this.fetchOrganizationsService.search();
@ -36,10 +31,7 @@ export class OrganizationsComponent implements OnInit {
@ignoreBeforeCompletion
createOrganization() {
return this.dialog
.open<CreateOrganizationDialogComponent, void, BaseDialogResponseStatus>(
CreateOrganizationDialogComponent,
this.dialogConfig.medium
)
.open<CreateOrganizationDialogComponent, void, BaseDialogResponseStatus>(CreateOrganizationDialogComponent)
.afterClosed()
.pipe(
filter((r) => r === BaseDialogResponseStatus.Success),

2
src/app/sections/payment-details/hold-details/hold-details.component.ts
View File

@ -51,7 +51,6 @@ export class HoldDetailsComponent {
.open(CancelHoldComponent, {
data,
width: '450px',
disableClose: true,
})
.afterClosed()
.subscribe((isChanged) => isChanged && this.holdAction.emit(true));
@ -68,7 +67,6 @@ export class HoldDetailsComponent {
.open(ConfirmHoldComponent, {
data,
width: '450px',
disableClose: true,
})
.afterClosed()
.subscribe((isChanged) => isChanged && this.holdAction.emit(true));

1
src/app/sections/payment-details/refunds/refunds.service.ts
View File

@ -28,7 +28,6 @@ export class RefundsService extends PartialFetcher<RefundSearchResult, RefundsSe
maxRefundAmount,
} as CreateRefundData,
width: '450px',
disableClose: true,
})
.afterClosed()
.subscribe((success) => {

6
src/app/sections/payment-section/integrations/shops/shop-creation/shop-creation.service.spec.ts
View File

@ -54,9 +54,6 @@ describe('CreateShopService', () => {
mockMatDialog.open(
CreateShopDialogComponent,
deepEqual({
width: '552px',
disableClose: true,
autoFocus: false,
data: {
realm: PaymentInstitutionRealm.Test,
},
@ -77,9 +74,6 @@ describe('CreateShopService', () => {
mockMatDialog.open(
CreateShopDialogComponent,
deepEqual({
width: '552px',
disableClose: true,
autoFocus: false,
data: {
realm: PaymentInstitutionRealm.Test,
},

7
src/app/sections/payment-section/integrations/shops/shop-creation/shop-creation.service.ts
View File

@ -14,12 +14,7 @@ export class ShopCreationService {
createShop(config: CreateShopDialogConfig): void {
this.dialog
.open<CreateShopDialogComponent, CreateShopDialogConfig>(CreateShopDialogComponent, {
width: '552px',
disableClose: true,
autoFocus: false,
data: config,
})
.open<CreateShopDialogComponent, CreateShopDialogConfig>(CreateShopDialogComponent, { data: config })
.afterClosed()
.pipe(
take(1),

6
src/app/sections/payment-section/integrations/webhooks/create-webhook/create-webhook.service.ts
View File

@ -22,11 +22,7 @@ export class CreateWebhookService {
takeUntil(this.destroy$),
switchMap(() =>
this.dialog
.open(CreateWebhookDialogComponent, {
width: '552px',
disableClose: true,
autoFocus: false,
})
.open(CreateWebhookDialogComponent)
.afterClosed()
.pipe(filter((r) => r === 'created'))
)

4
src/app/sections/payment-section/operations/invoices/create-invoice/create-invoice.service.spec.ts
View File

@ -79,8 +79,6 @@ describe('CreateInvoiceService', () => {
CreateInvoiceDialogComponent,
deepEqual({
width: '720px',
maxHeight: '90vh',
disableClose: true,
data: [],
})
)
@ -103,8 +101,6 @@ describe('CreateInvoiceService', () => {
CreateInvoiceDialogComponent,
deepEqual({
width: '720px',
maxHeight: '90vh',
disableClose: true,
data: [],
})
)

2
src/app/sections/payment-section/operations/invoices/create-invoice/create-invoice.service.ts
View File

@ -30,8 +30,6 @@ export class CreateInvoiceService {
this.dialog
.open<CreateInvoiceDialogComponent, Shop[]>(CreateInvoiceDialogComponent, {
width: '720px',
maxHeight: '90vh',
disableClose: true,
data: shops,
})
.afterClosed()

4
src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/cancel-invoice/cancel-invoice.service.spec.ts
View File

@ -75,8 +75,6 @@ describe('CancelInvoiceService', () => {
CancelInvoiceDialogComponent,
deepEqual({
width: '720px',
maxHeight: '90vh',
disableClose: true,
})
)
).thenReturn(instance(mockDialogRef));
@ -99,8 +97,6 @@ describe('CancelInvoiceService', () => {
CancelInvoiceDialogComponent,
deepEqual({
width: '720px',
maxHeight: '90vh',
disableClose: true,
})
)
).once();

2
src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/cancel-invoice/cancel-invoice.service.ts
View File

@ -23,8 +23,6 @@ export class CancelInvoiceService {
this.dialog
.open(CancelInvoiceDialogComponent, {
width: '720px',
maxHeight: '90vh',
disableClose: true,
})
.afterClosed()
.pipe(

4
src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/create-payment-link/create-payment-link.service.spec.ts
View File

@ -41,8 +41,6 @@ describe('CreatePaymentLinkService', () => {
CreatePaymentLinkDialogComponent,
deepEqual({
width: '720px',
maxHeight: '90vh',
disableClose: true,
})
)
).thenReturn(instance(mockDialogRef));
@ -63,8 +61,6 @@ describe('CreatePaymentLinkService', () => {
CreatePaymentLinkDialogComponent,
deepEqual({
width: '720px',
maxHeight: '90vh',
disableClose: true,
data: config,
})
)

2
src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/create-payment-link/create-payment-link.service.ts
View File

@ -13,8 +13,6 @@ export class CreatePaymentLinkService {
CreatePaymentLinkDialogComponent,
{
width: '720px',
maxHeight: '90vh',
disableClose: true,
data: config,
}
);

4
src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/fulfill-invoice/fulfill-invoice.service.spec.ts
View File

@ -75,8 +75,6 @@ describe('FulfillInvoiceService', () => {
FulfillInvoiceDialogComponent,
deepEqual({
width: '720px',
maxHeight: '90vh',
disableClose: true,
})
)
).thenReturn(instance(mockDialogRef));
@ -99,8 +97,6 @@ describe('FulfillInvoiceService', () => {
FulfillInvoiceDialogComponent,
deepEqual({
width: '720px',
maxHeight: '90vh',
disableClose: true,
})
)
).once();

2
src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/fulfill-invoice/fulfill-invoice.service.ts
View File

@ -23,8 +23,6 @@ export class FulfillInvoiceService {
this.dialog
.open(FulfillInvoiceDialogComponent, {
width: '720px',
maxHeight: '90vh',
disableClose: true,
})
.afterClosed()
.pipe(

12
src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/additional-filters.service.ts
View File

@ -1,24 +1,18 @@
import { Inject, Injectable } from '@angular/core';
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { take } from 'rxjs/operators';
import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { DialogFiltersComponent } from './components/dialog-filters/dialog-filters.component';
import { AdditionalFilters } from './types/additional-filters';
@Injectable()
export class AdditionalFiltersService {
constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
constructor(private dialog: MatDialog) {}
openFiltersDialog(data: AdditionalFilters): Observable<AdditionalFilters> {
return this.dialog
.open<DialogFiltersComponent, AdditionalFilters>(DialogFiltersComponent, {
panelClass: 'fill-bleed-dialog',
...this.dialogConfig.medium,
data,
})
.open<DialogFiltersComponent, AdditionalFilters>(DialogFiltersComponent, { data })
.afterClosed()
.pipe(take(1));
}

8
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/cancel-hold/cancel-hold.service.spec.ts
View File

@ -2,8 +2,6 @@ import { TestBed } from '@angular/core/testing';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { deepEqual, instance, mock, verify, when } from 'ts-mockito';
import { DEFAULT_DIALOG_CONFIG, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { CancelHoldService } from './cancel-hold.service';
import { CancelHoldDialogComponent } from './components/cancel-hold-dialog/cancel-hold-dialog.component';
import { CancelHoldDialogData } from './types/cancel-hold-dialog-data';
@ -22,10 +20,6 @@ describe('CancelHoldService', () => {
TestBed.configureTestingModule({
providers: [
CancelHoldService,
{
provide: DIALOG_CONFIG,
useValue: DEFAULT_DIALOG_CONFIG,
},
{
provide: MatDialog,
useFactory: () => instance(mockMatDialog),
@ -50,7 +44,6 @@ describe('CancelHoldService', () => {
mockMatDialog.open(
CancelHoldDialogComponent,
deepEqual({
...DEFAULT_DIALOG_CONFIG.medium,
data,
})
)
@ -62,7 +55,6 @@ describe('CancelHoldService', () => {
mockMatDialog.open(
CancelHoldDialogComponent,
deepEqual({
...DEFAULT_DIALOG_CONFIG.medium,
data,
})
)

6
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/cancel-hold/cancel-hold.service.ts
View File

@ -1,8 +1,7 @@
import { Inject, Injectable } from '@angular/core';
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { BaseDialogResponseStatus } from '@dsh/app/shared/components/dialog/base-dialog';
import { CancelHoldDialogComponent } from './components/cancel-hold-dialog/cancel-hold-dialog.component';
@ -10,12 +9,11 @@ import { CancelHoldDialogData } from './types/cancel-hold-dialog-data';
@Injectable()
export class CancelHoldService {
constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
constructor(private dialog: MatDialog) {}
openDialog(data: CancelHoldDialogData): Observable<BaseDialogResponseStatus> {
return this.dialog
.open<CancelHoldDialogComponent, CancelHoldDialogData>(CancelHoldDialogComponent, {
...this.dialogConfig.medium,
data,
})
.afterClosed();

8
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/create-hold/create-hold.service.spec.ts
View File

@ -2,8 +2,6 @@ import { TestBed } from '@angular/core/testing';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { deepEqual, instance, mock, verify, when } from 'ts-mockito';
import { DEFAULT_DIALOG_CONFIG, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { CancelHoldDialogComponent } from '../cancel-hold/components/cancel-hold-dialog/cancel-hold-dialog.component';
import { CreateHoldDialogComponent } from './components/create-hold-dialog/create-hold-dialog.component';
import { CreateHoldService } from './create-hold.service';
@ -23,10 +21,6 @@ describe('CreateHoldService', () => {
TestBed.configureTestingModule({
providers: [
CreateHoldService,
{
provide: DIALOG_CONFIG,
useValue: DEFAULT_DIALOG_CONFIG,
},
{
provide: MatDialog,
useFactory: () => instance(mockMatDialog),
@ -53,7 +47,6 @@ describe('CreateHoldService', () => {
mockMatDialog.open(
CreateHoldDialogComponent,
deepEqual({
...DEFAULT_DIALOG_CONFIG.medium,
data,
})
)
@ -65,7 +58,6 @@ describe('CreateHoldService', () => {
mockMatDialog.open(
CancelHoldDialogComponent,
deepEqual({
...DEFAULT_DIALOG_CONFIG.medium,
data,
})
)

10
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/create-hold/create-hold.service.ts
View File

@ -1,8 +1,7 @@
import { Inject, Injectable } from '@angular/core';
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { BaseDialogResponseStatus } from '@dsh/app/shared/components/dialog/base-dialog';
import { CreateHoldDialogComponent } from './components/create-hold-dialog/create-hold-dialog.component';
@ -10,14 +9,11 @@ import { CreateHoldDialogData } from './types/create-hold-dialog-data';
@Injectable()
export class CreateHoldService {
constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
constructor(private dialog: MatDialog) {}
openDialog(data: CreateHoldDialogData): Observable<BaseDialogResponseStatus> {
return this.dialog
.open<CreateHoldDialogComponent, CreateHoldDialogData>(CreateHoldDialogComponent, {
...this.dialogConfig.medium,
data,
})
.open<CreateHoldDialogComponent, CreateHoldDialogData>(CreateHoldDialogComponent, { data })
.afterClosed();
}
}

11
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/create-refund/create-refund.service.spec.ts
View File

@ -4,8 +4,6 @@ import { cold } from 'jasmine-marbles';
import { of } from 'rxjs';
import { deepEqual, instance, mock, when } from 'ts-mockito';
import { DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { CreateRefundDialogComponent } from './components/create-refund-dialog/create-refund-dialog.component';
import { CreateRefundService } from './create-refund.service';
import { CreateRefundDialogResponse } from './types/create-refund-dialog-response';
@ -25,14 +23,6 @@ describe('CreateRefundService', () => {
TestBed.configureTestingModule({
providers: [
CreateRefundService,
{
provide: DIALOG_CONFIG,
useValue: {
medium: {
width: '360px',
},
},
},
{
provide: MatDialog,
useFactory: () => instance(mockMatDialog),
@ -60,7 +50,6 @@ describe('CreateRefundService', () => {
mockMatDialog.open(
CreateRefundDialogComponent,
deepEqual({
width: '360px',
data,
})
)

11
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/create-refund/create-refund.service.ts
View File

@ -1,23 +1,18 @@
import { Inject, Injectable } from '@angular/core';
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { CreateRefundDialogComponent } from './components/create-refund-dialog/create-refund-dialog.component';
import { CreateRefundDialogData } from './types/create-refund-dialog-data';
import { CreateRefundDialogResponse } from './types/create-refund-dialog-response';
@Injectable()
export class CreateRefundService {
constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
constructor(private dialog: MatDialog) {}
createRefund(data: CreateRefundDialogData): Observable<CreateRefundDialogResponse> {
return this.dialog
.open<CreateRefundDialogComponent, CreateRefundDialogData>(CreateRefundDialogComponent, {
...this.dialogConfig.medium,
data,
})
.open<CreateRefundDialogComponent, CreateRefundDialogData>(CreateRefundDialogComponent, { data })
.afterClosed();
}
}

2
src/app/sections/payment-section/payouts/create-payout-report/create-payout-report.service.ts
View File

@ -25,8 +25,6 @@ export class CreatePayoutReportService {
switchMap((payout) =>
this.dialog
.open(CreatePayoutReportDialogComponent, {
width: '552px',
disableClose: true,
data: {
payout,
},

2
src/app/sections/payment-section/payouts/create-payout/create-payout.service.ts
View File

@ -27,8 +27,6 @@ export class CreatePayoutService {
switchMap(() =>
this.dialog
.open(CreatePayoutDialogComponent, {
width: '552px',
disableClose: true,
data: {
realm,
},

2
src/app/sections/payment-section/reports/create-report/create-report.service.ts
View File

@ -27,8 +27,6 @@ export class CreateReportService {
switchMap(() =>
this.dialog
.open(CreateReportDialogComponent, {
width: '552px',
disableClose: true,
data: {
realm,
},

2
src/app/sections/sections.module.ts
View File

@ -1,4 +1,5 @@
import { NgModule } from '@angular/core';
import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
import { DEBOUNCE_FETCHER_ACTION_TIME, DEFAULT_FETCHER_DEBOUNCE_ACTION_TIME } from '@rbkmoney/partial-fetcher';
import { ShopModule } from '@dsh/api/shop';
@ -22,6 +23,7 @@ import {
exports: [SectionsComponent],
providers: [
{ provide: SEARCH_LIMIT, useValue: DEFAULT_SEARCH_LIMIT },
{ provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: DEFAULT_DIALOG_CONFIG.medium },
{ provide: DIALOG_CONFIG, useValue: DEFAULT_DIALOG_CONFIG },
{ provide: DEBOUNCE_FETCHER_ACTION_TIME, useValue: DEFAULT_FETCHER_DEBOUNCE_ACTION_TIME },
{ provide: CHARTS_THEME, useValue: DEFAULT_CHARTS_THEME },

2
src/app/sections/tokens.ts
View File

@ -9,9 +9,11 @@ export const DEFAULT_SEARCH_LIMIT = 10;
export type DialogConfig = { small: MatDialogConfig; medium: MatDialogConfig; large: MatDialogConfig };
export const DIALOG_CONFIG = new InjectionToken<DialogConfig>('dialogConfig');
const BASE_CONFIG: MatDialogConfig = {
...new MatDialogConfig(),
maxHeight: '90vh',
disableClose: true,
autoFocus: false,
panelClass: 'dsh-dialog-pane',
};
export const DEFAULT_DIALOG_CONFIG: DialogConfig = {
small: { ...BASE_CONFIG, width: '360px' },

12
src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/additional-filters.service.ts
View File

@ -1,24 +1,18 @@
import { Inject, Injectable } from '@angular/core';
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { take } from 'rxjs/operators';
import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
import { DialogFiltersComponent } from './components/dialog-filters/dialog-filters.component';
import { AdditionalFilters } from './types/additional-filters';
@Injectable()
export class AdditionalFiltersService {
constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
constructor(private dialog: MatDialog) {}
openFiltersDialog(data: AdditionalFilters): Observable<AdditionalFilters> {
return this.dialog
.open<DialogFiltersComponent, AdditionalFilters>(DialogFiltersComponent, {
panelClass: 'fill-bleed-dialog',
...this.dialogConfig.medium,
data,
})
.open<DialogFiltersComponent, AdditionalFilters>(DialogFiltersComponent, { data })
.afterClosed()
.pipe(take(1));
}

3
src/app/sections/wallet-section/integrations/webhooks/create-webhook/create-webhook.service.ts
View File

@ -26,9 +26,6 @@ export class CreateWebhookService {
switchMap((identities) =>
this.dialog
.open(CreateWebhookDialogComponent, {
width: '552px',
disableClose: true,
autoFocus: false,
data: identities,
})
.afterClosed()

14
src/app/shared/components/dialog/base-dialog/base-dialog.component.scss
View File

@ -1,3 +1,9 @@
@import '~@angular/material/theming';
$base-padding: 24px;
$max-height-mobile: 100vh;
$max-height-desktop: 90vh;
:host {
display: flex;
flex-direction: column;
@ -5,6 +11,12 @@
}
.base-dialog {
max-height: calc(#{$max-height-desktop} - #{$base-padding * 2}) !important;
@media screen and ($mat-small) {
max-height: calc(#{$max-height-mobile} - #{$base-padding * 2}) !important;
}
mat-divider {
// to remove visually padding
margin-left: -24px;
@ -30,8 +42,6 @@
// to make right visual padding
margin: 0 -24px;
padding: 20px 24px;
// to make scroll only in content block
max-height: 65vh;
overflow: auto;
}

5
src/styles/app/_style.scss
View File

@ -1,5 +0,0 @@
@import 'styles/body';
@mixin app-style() {
@include app-body();
}

20
src/styles/core.scss
View File

@ -1,21 +1,21 @@
@import '~@angular/material/theming';
@import 'app/typography';
@import 'app/style';
@import 'dsh/typography';
@import 'dsh/style';
@import 'material/typography';
@import 'material/style';
@import 'mat/typography';
@import 'mat/style';
@mixin dsh-typography($config) {
@mixin typography($config) {
@include mat-core($config);
@include mat-typography($config);
@include app-typography($config);
@include dsh-typography($config);
}
@mixin dsh-core() {
@include dsh-typography(dsh-typography-config());
@mixin core() {
@include typography(dsh-typography-config());
@include mat-style();
@include app-style();
@include dsh-style();
}
@include dsh-core();
@include core();

7
src/styles/dsh/_style.scss Normal file
View File

@ -0,0 +1,7 @@
@import 'styles/dsh-body';
@import 'styles/dsh-dialog-pane';
@mixin dsh-style() {
@include dsh-body();
@include dsh-dialog-pane();
}

2
src/styles/app/_theme.scss → src/styles/dsh/_theme.scss
View File

@ -47,7 +47,7 @@
@import '../../app/sections/payment-section/balances/balances-theme';
@import '../../app/feedback/feedback-theme';
@mixin app-theme($theme) {
@mixin dsh-theme($theme) {
@include dsh-home-theme($theme);
@include dsh-actionbar-theme($theme);
@include dsh-dropdown-theme($theme);

4
src/styles/app/_typography.scss → src/styles/dsh/_typography.scss
View File

@ -1,4 +1,4 @@
@import 'styles/base';
@import 'styles/dsh-base-typography';
@import '../../components/form-controls/range-datepicker/range-datepicker-theme';
@import '../../components/buttons/button/button-theme';
@ -30,7 +30,7 @@
@import '../../app/sections/payment-details/payment-details-theme';
@import '../../app/sections/payment-section/balances/balances-theme';
@mixin app-typography($config) {
@mixin dsh-typography($config) {
@include dsh-base-typography($config);
@include dsh-button-typography($config);
@include dsh-state-nav-typography($config);

0
src/styles/app/styles/_base.scss → src/styles/dsh/styles/_dsh-base-typography.scss
View File

2
src/styles/app/styles/_body.scss → src/styles/dsh/styles/_dsh-body.scss
View File

@ -1,4 +1,4 @@
@mixin app-body() {
@mixin dsh-body() {
body {
margin: 0;
transition: background 200ms ease-in-out;

16
src/styles/dsh/styles/_dsh-dialog-pane.scss Normal file
View File

@ -0,0 +1,16 @@
@import '~@angular/material/theming';
@mixin dsh-dialog-pane() {
.dsh-dialog-pane {
@media screen and ($mat-small) {
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
.mat-dialog-container {
border-radius: 0 !important;
}
}
}
}

2
src/styles/material/_style.scss → src/styles/mat/_style.scss
View File

@ -4,7 +4,6 @@
@import 'styles/mat-snack-bar';
@import 'styles/mat-form-field';
@import 'styles/mat-checkbox';
@import 'styles/mat-dialog-container';
@import 'styles/mat-drawer-container';
@mixin mat-style() {
@ -14,6 +13,5 @@
@include mat-snack-bar-override();
@include mat-form-field-infix-override();
@include mat-checkbox-override();
@include mat-dialog-container-override();
@include mat-drawer-container-override();
}

0
src/styles/material/_theme.scss → src/styles/mat/_theme.scss
View File

0
src/styles/material/_typography.scss → src/styles/mat/_typography.scss
View File

0
src/styles/material/styles/_mat-autocomplete-panel.scss → src/styles/mat/styles/_mat-autocomplete-panel.scss
View File

0
src/styles/material/styles/_mat-checkbox.scss → src/styles/mat/styles/_mat-checkbox.scss
View File

0
src/styles/material/styles/_mat-datepicker.scss → src/styles/mat/styles/_mat-datepicker.scss
View File

0
src/styles/material/styles/_mat-dialog.scss → src/styles/mat/styles/_mat-dialog.scss
View File

0
src/styles/material/styles/_mat-divider.scss → src/styles/mat/styles/_mat-divider.scss
View File

0
src/styles/material/styles/_mat-drawer-container.scss → src/styles/mat/styles/_mat-drawer-container.scss
View File

0
src/styles/material/styles/_mat-form-field.scss → src/styles/mat/styles/_mat-form-field.scss
View File

0
src/styles/material/styles/_mat-menu.scss → src/styles/mat/styles/_mat-menu.scss
View File

0
src/styles/material/styles/_mat-radio-button.scss → src/styles/mat/styles/_mat-radio-button.scss
View File

0
src/styles/material/styles/_mat-select-panel.scss → src/styles/mat/styles/_mat-select-panel.scss
View File

0
src/styles/material/styles/_mat-snack-bar.scss → src/styles/mat/styles/_mat-snack-bar.scss
View File

0
src/styles/material/styles/_mat-theme-loaded-marker.scss → src/styles/mat/styles/_mat-theme-loaded-marker.scss
View File

6
src/styles/material/styles/_mat-dialog-container.scss
View File

@ -1,6 +0,0 @@
@mixin mat-dialog-container-override() {
.fill-bleed-dialog .mat-dialog-container {
display: flex;
flex-direction: column;
}
}

8
src/styles/themes/_theme.scss
View File

@ -2,10 +2,10 @@
@import '../utils/map-get-strict';
@import '../app/theme';
@import '../material/theme';
@import '../dsh/theme';
@import '../mat/theme';
@mixin dsh-theme($config, $background, $foreground) {
@mixin theme($config, $background, $foreground) {
$basic-theme: ();
@if map-get($config, is-dark) == true {
@ -51,6 +51,6 @@
body.#{map-get($theme, name)} {
@include angular-material-theme($theme);
@include mat-theme($theme);
@include app-theme($theme);
@include dsh-theme($theme);
}
}

2
src/styles/themes/main.scss
View File

@ -32,4 +32,4 @@ $config: (
warn-base: mat-color(mat-palette($dsh-warn), 300)
);
@include dsh-theme($config, $background, $foreground);
@include theme($config, $background, $foreground);

2
src/styles/themes/persian-green.scss
View File

@ -32,4 +32,4 @@ $config: (
warn-base: mat-color(mat-palette($dsh-warn), 300)
);
@include dsh-theme($config, $background, $foreground);
@include theme($config, $background, $foreground);