Skip to content

Commit 94909c5

Browse files
ryanslattenryanslatten
committed
update edit form
1 parent 9d8059f commit 94909c5

File tree

2 files changed

+114
-17
lines changed

2 files changed

+114
-17
lines changed

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

Lines changed: 56 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
<h2 class="page-title" *ngIf="form.id">{{ form.name }}</h2>
88
<h2 class="page-title" *ngIf="!form.id">New Form</h2>
99
</div>
10+
<div class="header-actions" *ngIf="form.id">
11+
<button class="action-button" [ngClass]="editingDetails ? 'btn-primary' : ''" (click)="toggleEditDetails()">
12+
<i class="fa" [ngClass]="editingDetails ? 'fa-times' : 'fa-edit'"></i>
13+
{{editingDetails ? 'Cancel' : 'Edit Form'}}
14+
</button>
15+
</div>
1016
</div>
1117
<div class="container-fluid bottom-gap-l">
1218
<div class="row">
@@ -16,44 +22,77 @@ <h2 class="page-title" *ngIf="!form.id">New Form</h2>
1622
<div class="details-card">
1723
<div class="details-form">
1824
<div class="form-field">
19-
<label class="field-label">Name</label>
25+
<label class="field-label">Name:</label>
2026
<div class="field-content">
21-
<input type="text" class="form-input" placeholder="Form name" name="name"
22-
[(ngModel)]="form.name" (ngModelChange)="onFormChange()" required>
27+
<span *ngIf="!editingDetails && form.id" class="field-value">{{form.name}}</span>
28+
<input *ngIf="editingDetails && form.id" type="text" class="form-input"
29+
placeholder="Form name" [(ngModel)]="formEditForm.name">
30+
<input *ngIf="!form.id" type="text" class="form-input" placeholder="Form name"
31+
name="name" [(ngModel)]="form.name" (ngModelChange)="onFormChange()" required>
2332
<span class="field-error" *ngIf="generalFormSubmitted && !form.name">Name is
2433
required</span>
2534
</div>
2635
</div>
2736

2837
<div class="form-field">
29-
<label class="field-label">Description</label>
38+
<label class="field-label">Description:</label>
3039
<div class="field-content">
31-
<textarea class="form-input" rows="3" placeholder="Brief description of the form."
32-
[(ngModel)]="form.description" (ngModelChange)="onFormChange()"
33-
name="description"></textarea>
40+
<span *ngIf="!editingDetails && form.id"
41+
class="field-value">{{form.description}}</span>
42+
<textarea *ngIf="editingDetails && form.id" class="form-input" rows="3"
43+
placeholder="Brief description of the form."
44+
[(ngModel)]="formEditForm.description"></textarea>
45+
<textarea *ngIf="!form.id" class="form-input" rows="3"
46+
placeholder="Brief description of the form." [(ngModel)]="form.description"
47+
(ngModelChange)="onFormChange()" name="description"></textarea>
3448
</div>
3549
</div>
3650

3751
<div class="form-field">
38-
<label class="field-label">Color</label>
52+
<label class="field-label">Color:</label>
3953
<div class="field-content">
40-
<input type="color" class="form-input color-input" [(ngModel)]="form.color"
41-
(ngModelChange)="onFormChange()" name="color" required>
54+
<span *ngIf="!editingDetails && form.id" class="field-value">
55+
<span
56+
style="display: inline-block; width: 20px; height: 20px; border-radius: 3px; vertical-align: middle; margin-right: 8px;"
57+
[style.background-color]="form.color"></span>
58+
{{form.color}}
59+
</span>
60+
<input *ngIf="editingDetails && form.id" type="color" class="form-input color-input"
61+
[(ngModel)]="formEditForm.color">
62+
<input *ngIf="!form.id" type="color" class="form-input color-input"
63+
[(ngModel)]="form.color" (ngModelChange)="onFormChange()" name="color" required>
4264
<span class="field-error" *ngIf="generalFormSubmitted && !form.color">Color is
4365
invalid</span>
4466
</div>
4567
</div>
4668

4769
<div class="form-field">
48-
<label class="field-label checkbox-label">
49-
<input type="checkbox" [(ngModel)]="form.default" (ngModelChange)="onFormChange()"
50-
name="default">
51-
<span>Add To Every New Observation</span>
52-
</label>
53-
<p class="field-hint">This form will be automatically added to all new observations.</p>
70+
<label class="field-label">Default Form:</label>
71+
<div class="field-content">
72+
<span *ngIf="!editingDetails && form.id" class="field-value">{{form.default ? 'Yes -
73+
Added to every new observation' : 'No'}}</span>
74+
<label *ngIf="editingDetails && form.id" class="field-label checkbox-label">
75+
<input type="checkbox" [(ngModel)]="formEditForm.default">
76+
<span>Add To Every New Observation</span>
77+
</label>
78+
<label *ngIf="!form.id" class="field-label checkbox-label">
79+
<input type="checkbox" [(ngModel)]="form.default"
80+
(ngModelChange)="onFormChange()" name="default">
81+
<span>Add To Every New Observation</span>
82+
</label>
83+
</div>
84+
</div>
85+
86+
<div class="form-actions" *ngIf="editingDetails">
87+
<button class="action-button btn-primary" (click)="saveFormDetails()">
88+
<i class="fa fa-save"></i> Save
89+
</button>
90+
<button class="action-button" (click)="cancelEditDetails()">
91+
<i class="fa fa-times"></i> Cancel
92+
</button>
5493
</div>
5594

56-
<div class="form-actions">
95+
<div class="form-actions" *ngIf="!editingDetails && !form.id">
5796
<button class="action-button btn-primary" *ngIf="formDirty && !saving"
5897
(click)="saveForm()" [disabled]="!formValid">
5998
<i class="fa fa-save"></i> Save

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,14 @@ export class FormDetailsComponent implements OnInit {
5454
formDirty = false;
5555
breadcrumbs: AdminBreadcrumb[] = [];
5656

57+
editingDetails = false;
58+
formEditForm = {
59+
name: '',
60+
description: '',
61+
color: '',
62+
default: false
63+
};
64+
5765
showFieldsSection = false;
5866
showMapSection = false;
5967
showFeedSection = false;
@@ -201,6 +209,56 @@ export class FormDetailsComponent implements OnInit {
201209
this.formDirty = true;
202210
}
203211

212+
toggleEditDetails(): void {
213+
if (!this.editingDetails) {
214+
this.formEditForm.name = this.form.name || '';
215+
this.formEditForm.description = this.form.description || '';
216+
this.formEditForm.color = this.form.color || '';
217+
this.formEditForm.default = this.form.default || false;
218+
}
219+
this.editingDetails = !this.editingDetails;
220+
}
221+
222+
saveFormDetails(): void {
223+
if (!this.event?.id || !this.form.id) {
224+
return;
225+
}
226+
227+
const updatedForm = {
228+
...this.form,
229+
name: this.formEditForm.name,
230+
description: this.formEditForm.description,
231+
color: this.formEditForm.color,
232+
default: this.formEditForm.default
233+
};
234+
235+
this.eventsService.updateForm(this.event.id.toString(), this.form.id.toString(), updatedForm).subscribe({
236+
next: (savedForm) => {
237+
Object.assign(this.form, savedForm);
238+
this.editingDetails = false;
239+
this.snackBar.open('Form details updated successfully', 'Close', { duration: 3000 });
240+
},
241+
error: (response) => {
242+
const data = response.error || {};
243+
this.showError({
244+
title: 'Error Updating Form',
245+
message: data.errors
246+
? "If the problem persists please contact your MAGE administrator for help."
247+
: "Please try again later, if the problem persists please contact your MAGE administrator for help.",
248+
errors: data.errors
249+
});
250+
}
251+
});
252+
}
253+
254+
cancelEditDetails(): void {
255+
this.editingDetails = false;
256+
this.formEditForm.name = this.form.name || '';
257+
this.formEditForm.description = this.form.description || '';
258+
this.formEditForm.color = this.form.color || '';
259+
this.formEditForm.default = this.form.default || false;
260+
}
261+
204262
validateForm(): boolean {
205263
this.generalFormSubmitted = true;
206264
this.formValid = !!(this.form.name && this.form.color);

0 commit comments

Comments
 (0)