Skip to content

Commit 514fc7f

Browse files
ryanslattenryanslatten
authored
Event details page upgrade to Angular 14 (#344)
* initial commit * Add unit tests and docs * Moved action buttons to right * fix breadcrumb * pr comments and fixes * Merge branch 'develop' of https://github.com/ngageoint/mage-server into event-details-upgrade
1 parent 53e7a16 commit 514fc7f

30 files changed

+4728
-1723
lines changed

‎web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/admin-event-form-preview.component.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,21 @@ export class AdminEventFormPreviewComponent implements OnChanges {
1111
@Input() formDefinition: any[];
1212
@Output() onClose = new EventEmitter<void>();
1313

14-
constructor(public dialog: MatDialog) {}
14+
constructor(public dialog: MatDialog) { }
1515

16-
ngOnChanges(changes: SimpleChanges): void {
16+
ngOnChanges(): void {
1717
if (this.formDefinition) {
1818
this.openDialog()
1919
}
2020
}
2121

2222
openDialog(): void {
2323
const dialog = this.dialog.open(AdminEventFormPreviewDialogComponent, {
24-
data: this.formDefinition,
25-
minWidth: 400,
26-
autoFocus: false
24+
data: this.formDefinition,
25+
width: '600px',
26+
maxWidth: '90vw'
2727
})
28-
28+
2929
dialog.afterClosed().subscribe(() => {
3030
this.onClose.emit();
3131
});

‎web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form.module.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
4+
import { MatDialogModule } from '@angular/material/dialog';
5+
import { MatButtonModule } from '@angular/material/button';
6+
7+
import { AdminEventFormPreviewComponent } from './admin-event-form-preview/admin-event-form-preview.component';
8+
import { AdminEventFormPreviewDialogComponent } from './admin-event-form-preview/admin-event-form-preview-dialog.component';
9+
import { ObservationModule } from '../../../observation/observation.module';
10+
11+
@NgModule({
12+
declarations: [
13+
AdminEventFormPreviewComponent,
14+
AdminEventFormPreviewDialogComponent
15+
],
16+
imports: [
17+
CommonModule,
18+
FormsModule,
19+
ReactiveFormsModule,
20+
MatDialogModule,
21+
MatButtonModule,
22+
ObservationModule
23+
],
24+
exports: [
25+
AdminEventFormPreviewComponent,
26+
AdminEventFormPreviewDialogComponent
27+
]
28+
})
29+
export class AdminEventFormModule { }

‎web-app/admin/src/app/admin/admin-event/admin-events.module.ts‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,80 @@
11
import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4+
import { RouterModule } from '@angular/router';
5+
6+
import { MatButtonModule } from '@angular/material/button';
7+
import { MatCardModule } from '@angular/material/card';
8+
import { MatChipsModule } from '@angular/material/chips';
49
import { MatTableModule } from '@angular/material/table';
510
import { MatPaginatorModule } from '@angular/material/paginator';
611
import { MatSortModule } from '@angular/material/sort';
712
import { MatDialogModule } from '@angular/material/dialog';
13+
import { MatDividerModule } from '@angular/material/divider';
14+
import { MatSelectModule } from '@angular/material/select';
15+
import { MatTooltipModule } from '@angular/material/tooltip';
16+
import { DragDropModule } from '@angular/cdk/drag-drop';
817
import { MatFormFieldModule } from '@angular/material/form-field';
918
import { MatInputModule } from '@angular/material/input';
10-
import { MatButtonModule } from '@angular/material/button';
1119
import { MatCheckboxModule } from '@angular/material/checkbox';
1220
import { MatIconModule } from '@angular/material/icon';
1321
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
1422

1523
import { CoreModule } from '../../core/core.module';
1624
import { AdminBreadcrumbModule } from '../admin-breadcrumb/admin-breadcrumb.module';
25+
import { AdminEventFormModule } from './admin-event-form/admin-event-form.module';
26+
27+
import { EventDetailsComponent } from './event-details/event-details.component';
28+
import { DeleteEventComponent } from './delete-event/delete-event.component';
29+
import { CreateFormDialogComponent } from './create-form/create-form.component';
1730
import { EventDashboardComponent } from './dashboard/event-dashboard.component';
18-
import { MatSelectModule } from '@angular/material/select';
1931
import { MatOptionModule } from '@angular/material/core';
2032
import { EventService } from 'src/app/event/event.service';
2133
import { CreateEventDialogComponent } from './create-event/create-event.component';
22-
import { MatTooltipModule } from '@angular/material/tooltip';
2334

2435
@NgModule({
2536
declarations: [
2637
EventDashboardComponent,
27-
CreateEventDialogComponent
38+
CreateEventDialogComponent,
39+
EventDetailsComponent,
40+
DeleteEventComponent,
41+
CreateFormDialogComponent
2842
],
2943
imports: [
3044
CommonModule,
3145
FormsModule,
3246
CoreModule,
3347
ReactiveFormsModule,
48+
RouterModule,
49+
CoreModule,
50+
AdminBreadcrumbModule,
51+
AdminEventFormModule,
52+
MatButtonModule,
53+
MatCardModule,
54+
MatChipsModule,
3455
MatTableModule,
3556
MatPaginatorModule,
3657
MatSortModule,
3758
MatDialogModule,
3859
MatFormFieldModule,
60+
MatDividerModule,
61+
MatIconModule,
3962
MatInputModule,
4063
MatButtonModule,
4164
MatCheckboxModule,
4265
MatIconModule,
4366
MatProgressSpinnerModule,
4467
AdminBreadcrumbModule,
4568
MatSelectModule,
46-
MatOptionModule,
69+
MatOptionModule,
4770
MatTooltipModule,
71+
MatTableModule,
72+
MatPaginatorModule,
73+
DragDropModule
4874
],
4975
exports: [
50-
EventDashboardComponent
76+
EventDashboardComponent,
77+
EventDetailsComponent
5178
],
5279
providers: [
5380
EventService

‎web-app/admin/src/app/admin/admin-event/create-form/create-form.component.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<div class="dialog-modal">
2+
<div class="dialog-header">
3+
<h2 class="dialog-title">Create New Form For "{{ data.event.name }}"</h2>
4+
</div>
5+
6+
<div class="dialog-content">
7+
<div *ngIf="errorMessage" class="error-alert">
8+
<i class="fa fa-exclamation-triangle"></i>
9+
<span>{{ errorMessage }}</span>
10+
</div>
11+
12+
<form [formGroup]="formGroup" class="form-create">
13+
<div class="form-field">
14+
<label class="field-label">Name <span class="required">*</span></label>
15+
<input type="text" class="form-input" formControlName="name" placeholder="Form name"
16+
[class.error]="hasError('name', 'required')">
17+
<div *ngIf="hasError('name', 'required')" class="field-error">
18+
<i class="fa fa-exclamation-circle"></i>
19+
Name is required
20+
</div>
21+
</div>
22+
23+
<div class="form-field">
24+
<label class="field-label">Description</label>
25+
<textarea class="form-input" formControlName="description" rows="3"
26+
placeholder="Brief description of the form."></textarea>
27+
</div>
28+
29+
<div class="form-field">
30+
<label class="field-label">Color <span class="required">*</span></label>
31+
<input type="color" class="form-input color-input" formControlName="color"
32+
[class.error]="hasError('color', 'required') || hasError('color', 'pattern')">
33+
<input type="text" class="form-input color-text-input" formControlName="color" placeholder="#000000"
34+
[class.error]="hasError('color', 'required') || hasError('color', 'pattern')">
35+
<div *ngIf="hasError('color', 'required')" class="field-error">
36+
<i class="fa fa-exclamation-circle"></i>
37+
Color is required
38+
</div>
39+
<div *ngIf="hasError('color', 'pattern')" class="field-error">
40+
<i class="fa fa-exclamation-circle"></i>
41+
Color must be a valid hex color (e.g., #FF5733)
42+
</div>
43+
</div>
44+
45+
<div class="form-field">
46+
<label class="field-label">Form Archive (optional)</label>
47+
<p class="help-text">
48+
If you would like to create this form based on a previously archived MAGE form, please upload it
49+
here.
50+
</p>
51+
<div class="file-input-container">
52+
<input type="file" id="form-file" class="file-input" accept=".zip,application/zip"
53+
(change)="onFileSelected($event)">
54+
<label for="form-file" class="file-label">
55+
<i class="fa fa-upload"></i>
56+
{{ selectedFile ? selectedFile.name : 'Choose file...' }}
57+
</label>
58+
</div>
59+
</div>
60+
</form>
61+
</div>
62+
63+
<div class="dialog-actions">
64+
<button class="action-button" (click)="cancel()">Cancel</button>
65+
<button class="action-button btn-primary" (click)="save()" [disabled]="formGroup.invalid">
66+
<i class="fa fa-plus"></i>
67+
Create Form
68+
</button>
69+
</div>
70+
</div>

0 commit comments

Comments
 (0)