Skip to content

Commit d5b8356

Browse files
nsemetsnsemets
authored
fix(dialog): added dialog wrapper and replaced all places (#502)
1 parent be7d925 commit d5b8356

File tree

58 files changed

+446
-815
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+446
-815
lines changed

‎src/app/app.component.ts‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import { createDispatchMap, select } from '@ngxs/store';
22

3-
import { TranslateService } from '@ngx-translate/core';
4-
5-
import { DialogService } from 'primeng/dynamicdialog';
6-
73
import { filter } from 'rxjs';
84

95
import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit } from '@angular/core';
@@ -14,6 +10,7 @@ import { ENVIRONMENT } from '@core/provider/environment.provider';
1410
import { GetCurrentUser } from '@core/store/user';
1511
import { GetEmails, UserEmailsSelectors } from '@core/store/user-emails';
1612
import { ConfirmEmailComponent } from '@shared/components';
13+
import { CustomDialogService } from '@shared/services';
1714

1815
import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
1916

@@ -25,14 +22,12 @@ import { GoogleTagManagerService } from 'angular-google-tag-manager';
2522
templateUrl: './app.component.html',
2623
styleUrl: './app.component.scss',
2724
changeDetection: ChangeDetectionStrategy.OnPush,
28-
providers: [DialogService],
2925
})
3026
export class AppComponent implements OnInit {
3127
private readonly googleTagManagerService = inject(GoogleTagManagerService);
3228
private readonly destroyRef = inject(DestroyRef);
33-
private readonly dialogService = inject(DialogService);
29+
private readonly customDialogService = inject(CustomDialogService);
3430
private readonly router = inject(Router);
35-
private readonly translateService = inject(TranslateService);
3631
private readonly environment = inject(ENVIRONMENT);
3732

3833
private readonly actions = createDispatchMap({ getCurrentUser: GetCurrentUser, getEmails: GetEmails });
@@ -67,12 +62,9 @@ export class AppComponent implements OnInit {
6762
}
6863

6964
private showEmailDialog() {
70-
this.dialogService.open(ConfirmEmailComponent, {
65+
this.customDialogService.open(ConfirmEmailComponent, {
66+
header: 'home.confirmEmail.title',
7167
width: '448px',
72-
focusOnShow: false,
73-
header: this.translateService.instant('home.confirmEmail.title'),
74-
modal: true,
75-
closable: false,
7668
data: this.unverifiedEmails(),
7769
});
7870
}

‎src/app/app.config.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { TranslateModule } from '@ngx-translate/core';
55

66
import { ConfirmationService, MessageService } from 'primeng/api';
77
import { providePrimeNG } from 'primeng/config';
8+
import { DialogService } from 'primeng/dynamicdialog';
89

910
import { provideHttpClient, withInterceptors } from '@angular/common/http';
1011
import { ApplicationConfig, ErrorHandler, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
@@ -26,12 +27,13 @@ export const appConfig: ApplicationConfig = {
2627
providers: [
2728
APPLICATION_INITIALIZATION_PROVIDER,
2829
ConfirmationService,
30+
DialogService,
31+
MessageService,
2932
{
3033
provide: ErrorHandler,
3134
useFactory: () => Sentry.createErrorHandler({ showDialog: false }),
3235
},
3336
importProvidersFrom(TranslateModule.forRoot(provideTranslation())),
34-
MessageService,
3537
provideAnimations(),
3638
providePrimeNG({
3739
theme: {

‎src/app/features/admin-institutions/components/admin-table/admin-table.component.html‎

Lines changed: 53 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -110,60 +110,63 @@
110110
@for (col of columns; track col.field) {
111111
<td class="max-w-20rem hover-group">
112112
@let currentColumnField = rowData[col.field];
113-
@if (col.isLink && isLink(currentColumnField)) {
114-
<a [href]="currentColumnField.url" [target]="col.linkTarget ?? '_self'" class="font-bold">
115-
@if (col.dateFormat) {
116-
{{ getCellValue(currentColumnField) | date: col.dateFormat }}
113+
114+
<div class="flex align-items-center gap-1">
115+
@if (col.isLink && isLink(currentColumnField)) {
116+
<a [href]="currentColumnField.url" [target]="col.linkTarget ?? '_self'" class="font-bold">
117+
@if (col.dateFormat) {
118+
{{ getCellValue(currentColumnField) | date: col.dateFormat }}
119+
} @else {
120+
{{ getCellValue(currentColumnField) }}
121+
}
122+
</a>
123+
} @else if (col.isLink && col.isArray && isLinkArray(currentColumnField)) {
124+
<div class="flex gap-1 align-items-center flex-wrap">
125+
@for (link of currentColumnField; track $index) {
126+
<div class="flex align-items-center gap-1">
127+
<a [href]="link.url" [target]="col.linkTarget ?? '_self'" class="font-bold">
128+
{{ link.text }}<span>{{ $last ? '' : ',' }}</span>
129+
</a>
130+
@if (col.showIcon) {
131+
<p-button
132+
[pTooltip]="col.iconTooltip | translate"
133+
class="icon-button"
134+
[icon]="col.iconClass"
135+
variant="text"
136+
severity="info"
137+
[ariaLabel]="'common.accessibility.tooltipBtn' | translate"
138+
(onClick)="onIconClick(rowData, col, $index)"
139+
/>
140+
}
141+
</div>
142+
}
143+
</div>
144+
} @else {
145+
@if (col.dateFormat && currentColumnField) {
146+
<p>
147+
{{ getCellValue(currentColumnField) | date: col.dateFormat }}
148+
</p>
149+
} @else if (!col.dateFormat && currentColumnField) {
150+
<p class="overflow-hidden text-overflow-ellipsis">
151+
{{ getCellValue(currentColumnField) }}
152+
</p>
117153
} @else {
118-
{{ getCellValue(currentColumnField) }}
154+
<p class="overflow-hidden text-overflow-ellipsis">{{ currentColumnField ?? '-' }}</p>
119155
}
120-
</a>
121-
} @else if (col.isLink && col.isArray && isLinkArray(currentColumnField)) {
122-
<div class="flex gap-1 align-items-center flex-wrap">
123-
@for (link of currentColumnField; track $index) {
124-
<div>
125-
<a [href]="link.url" [target]="col.linkTarget ?? '_self'" class="font-bold">
126-
{{ link.text }}<span>{{ $last ? '' : ',' }}</span>
127-
</a>
128-
@if (col.showIcon) {
129-
<p-button
130-
[pTooltip]="col.iconTooltip | translate"
131-
class="icon-button"
132-
[icon]="col.iconClass"
133-
variant="text"
134-
severity="info"
135-
[ariaLabel]="'common.accessibility.tooltipBtn' | translate"
136-
(onClick)="onIconClick(rowData, col, $index)"
137-
/>
138-
}
139-
</div>
140-
}
141-
</div>
142-
} @else {
143-
@if (col.dateFormat && currentColumnField) {
144-
<p>
145-
{{ getCellValue(currentColumnField) | date: col.dateFormat }}
146-
</p>
147-
} @else if (!col.dateFormat && currentColumnField) {
148-
<p class="overflow-hidden text-overflow-ellipsis text-center">
149-
{{ getCellValue(currentColumnField) }}
150-
</p>
151-
} @else {
152-
<p class="overflow-hidden text-overflow-ellipsis text-center">{{ currentColumnField ?? '-' }}</p>
153156
}
154-
}
155157

156-
@if (col.showIcon && !col.isArray) {
157-
<p-button
158-
[pTooltip]="col.iconTooltip | translate"
159-
class="icon-button"
160-
[icon]="col.iconClass"
161-
variant="text"
162-
severity="info"
163-
[ariaLabel]="'common.accessibility.tooltipBtn' | translate"
164-
(onClick)="onIconClick(rowData, col, $index)"
165-
/>
166-
}
158+
@if (col.showIcon && !col.isArray) {
159+
<p-button
160+
[pTooltip]="col.iconTooltip | translate"
161+
class="icon-button"
162+
[icon]="col.iconClass"
163+
variant="text"
164+
severity="info"
165+
[ariaLabel]="'common.accessibility.tooltipBtn' | translate"
166+
(onClick)="onIconClick(rowData, col, $index)"
167+
/>
168+
}
169+
</div>
167170
</td>
168171
}
169172
</tr>

‎src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { createDispatchMap, select } from '@ngxs/store';
22

3-
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
3+
import { TranslatePipe } from '@ngx-translate/core';
44

55
import { Button } from 'primeng/button';
6-
import { DialogService } from 'primeng/dynamicdialog';
76

87
import { filter } from 'rxjs';
98

@@ -22,7 +21,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
2221
import { UserSelectors } from '@core/store/user';
2322
import { ResourceType, SortOrder } from '@osf/shared/enums';
2423
import { PaginationLinksModel, ResourceModel, SearchFilters } from '@osf/shared/models';
25-
import { ToastService } from '@osf/shared/services';
24+
import { CustomDialogService, ToastService } from '@osf/shared/services';
2625
import {
2726
FetchResources,
2827
FetchResourcesByLink,
@@ -49,13 +48,11 @@ import { InstitutionsAdminSelectors, RequestProjectAccess, SendUserMessage } fro
4948
templateUrl: './institutions-projects.component.html',
5049
styleUrl: './institutions-projects.component.scss',
5150
changeDetection: ChangeDetectionStrategy.OnPush,
52-
providers: [DialogService],
5351
})
5452
export class InstitutionsProjectsComponent implements OnInit, OnDestroy {
55-
private dialogService = inject(DialogService);
53+
private customDialogService = inject(CustomDialogService);
5654
private destroyRef = inject(DestroyRef);
5755
private toastService = inject(ToastService);
58-
private translate = inject(TranslateService);
5956

6057
private actions = createDispatchMap({
6158
sendUserMessage: SendUserMessage,
@@ -137,14 +134,10 @@ export class InstitutionsProjectsComponent implements OnInit, OnDestroy {
137134
return;
138135
}
139136

140-
this.dialogService
137+
this.customDialogService
141138
.open(ContactDialogComponent, {
139+
header: 'adminInstitutions.institutionUsers.sendEmail',
142140
width: '448px',
143-
focusOnShow: false,
144-
header: this.translate.instant('adminInstitutions.institutionUsers.sendEmail'),
145-
closeOnEscape: true,
146-
modal: true,
147-
closable: true,
148141
data: this.currentUser()?.fullName,
149142
})
150143
.onClose.pipe(

‎src/app/features/admin-institutions/pages/institutions-users/institutions-users.component.ts‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { createDispatchMap, select } from '@ngxs/store';
33
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
44

55
import { CheckboxModule } from 'primeng/checkbox';
6-
import { DialogService } from 'primeng/dynamicdialog';
76
import { PaginatorState } from 'primeng/paginator';
87

98
import { filter } from 'rxjs';
@@ -18,7 +17,7 @@ import { SelectComponent } from '@osf/shared/components';
1817
import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
1918
import { Primitive } from '@osf/shared/helpers';
2019
import { SearchFilters } from '@osf/shared/models';
21-
import { ToastService } from '@osf/shared/services';
20+
import { CustomDialogService, ToastService } from '@osf/shared/services';
2221
import { SortOrder } from '@shared/enums';
2322

2423
import { AdminTableComponent } from '../../components';
@@ -36,11 +35,10 @@ import { FetchInstitutionUsers, InstitutionsAdminSelectors, SendUserMessage } fr
3635
templateUrl: './institutions-users.component.html',
3736
styleUrl: './institutions-users.component.scss',
3837
changeDetection: ChangeDetectionStrategy.OnPush,
39-
providers: [DialogService],
4038
})
4139
export class InstitutionsUsersComponent {
42-
private readonly translate = inject(TranslateService);
43-
private readonly dialogService = inject(DialogService);
40+
private readonly translateService = inject(TranslateService);
41+
private readonly customDialogService = inject(CustomDialogService);
4442
private readonly destroyRef = inject(DestroyRef);
4543
private readonly toastService = inject(ToastService);
4644
private readonly environment = inject(ENVIRONMENT);
@@ -76,7 +74,7 @@ export class InstitutionsUsersComponent {
7674

7775
amountText = computed(() => {
7876
const count = this.totalCount();
79-
return count + ' ' + this.translate.instant('adminInstitutions.summary.totalUsers').toLowerCase();
77+
return count + ' ' + this.translateService.instant('adminInstitutions.summary.totalUsers').toLowerCase();
8078
});
8179

8280
constructor() {
@@ -109,14 +107,10 @@ export class InstitutionsUsersComponent {
109107
onIconClick(event: TableIconClickEvent): void {
110108
switch (event.action) {
111109
case 'sendMessage': {
112-
this.dialogService
110+
this.customDialogService
113111
.open(SendEmailDialogComponent, {
112+
header: 'adminInstitutions.institutionUsers.sendEmail',
114113
width: '448px',
115-
focusOnShow: false,
116-
header: this.translate.instant('adminInstitutions.institutionUsers.sendEmail'),
117-
closeOnEscape: true,
118-
modal: true,
119-
closable: true,
120114
data: this.currentUser()?.fullName,
121115
})
122116
.onClose.pipe(

‎src/app/features/analytics/components/view-duplicates/view-duplicates.component.ts‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { createDispatchMap, select } from '@ngxs/store';
22

3-
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
3+
import { TranslatePipe } from '@ngx-translate/core';
44

55
import { Button } from 'primeng/button';
6-
import { DialogService } from 'primeng/dynamicdialog';
76
import { Menu } from 'primeng/menu';
87
import { PaginatorState } from 'primeng/paginator';
98

@@ -42,6 +41,7 @@ import { ResourceType, UserPermissions } from '@osf/shared/enums';
4241
import { IS_SMALL } from '@osf/shared/helpers';
4342
import { ToolbarResource } from '@osf/shared/models';
4443
import { Duplicate } from '@osf/shared/models/duplicates';
44+
import { CustomDialogService } from '@osf/shared/services';
4545
import { ClearDuplicates, DuplicatesSelectors, GetAllDuplicates } from '@osf/shared/stores';
4646

4747
@Component({
@@ -62,11 +62,9 @@ import { ClearDuplicates, DuplicatesSelectors, GetAllDuplicates } from '@osf/sha
6262
templateUrl: './view-duplicates.component.html',
6363
styleUrl: './view-duplicates.component.scss',
6464
changeDetection: ChangeDetectionStrategy.OnPush,
65-
providers: [DialogService],
6665
})
6766
export class ViewDuplicatesComponent {
68-
private dialogService = inject(DialogService);
69-
private translateService = inject(TranslateService);
67+
private customDialogService = inject(CustomDialogService);
7068
private route = inject(ActivatedRoute);
7169
private router = inject(Router);
7270
private destroyRef = inject(DestroyRef);
@@ -180,21 +178,17 @@ export class ViewDuplicatesComponent {
180178
const dialogWidth = !this.isSmall() ? '95vw' : '450px';
181179

182180
if (toolbarResource) {
183-
this.dialogService
181+
this.customDialogService
184182
.open(ForkDialogComponent, {
183+
header: 'project.overview.dialog.fork.headerProject',
185184
width: dialogWidth,
186-
focusOnShow: false,
187-
header: this.translateService.instant('project.overview.dialog.fork.headerProject'),
188-
closeOnEscape: true,
189-
modal: true,
190-
closable: true,
191185
data: {
192186
resource: toolbarResource,
193187
resourceType: this.resourceType(),
194188
},
195189
})
196190
.onClose.subscribe((result) => {
197-
if (result.success) {
191+
if (result?.success) {
198192
const resource = this.currentResource();
199193
if (resource) {
200194
this.actions.getDuplicates(resource.id, resource.type, parseInt(this.currentPage()), this.pageSize);
@@ -222,14 +216,10 @@ export class ViewDuplicatesComponent {
222216
private handleDeleteFork(id: string): void {
223217
const dialogWidth = !this.isSmall() ? '95vw' : '650px';
224218

225-
this.dialogService
219+
this.customDialogService
226220
.open(DeleteComponentDialogComponent, {
221+
header: 'project.overview.dialog.deleteComponent.header',
227222
width: dialogWidth,
228-
focusOnShow: false,
229-
header: this.translateService.instant('project.overview.dialog.deleteComponent.header'),
230-
closeOnEscape: true,
231-
modal: true,
232-
closable: true,
233223
data: {
234224
componentId: id,
235225
resourceType: this.resourceType(),
@@ -239,7 +229,7 @@ export class ViewDuplicatesComponent {
239229
},
240230
})
241231
.onClose.subscribe((result) => {
242-
if (result && result.success) {
232+
if (result?.success) {
243233
const resource = this.currentResource();
244234
if (resource) {
245235
this.actions.getDuplicates(resource.id, resource.type, parseInt(this.currentPage()), this.pageSize);

0 commit comments

Comments
 (0)