tom/hermes-web-angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

For modals, response error messages is shown in the footer. For modals, Accept button is always on the right.

Browse Source
This commit is contained in:
Tom 2025-03-20 13:14:09 +00:00
parent 1acda7978e
commit c8bfeed396
16 changed files with 120 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/actions/action-item-edit/action-item-edit.component.html
View File

@ -121,5 +121,11 @@
disabled="{{!formsDirty || !formsValidity || waitForResponse}}"
(click)="save()">Save</button>
</mat-card-actions>
@if (responseError) {
<mat-card-footer>
<small class="error below">{{responseError}}</small>
</mat-card-footer>
}
</mat-card>
</body>

8
src/app/actions/action-item-edit/action-item-edit.component.scss
View File

@ -14,6 +14,14 @@
color: #ba1a1a;
}
.below {
display: block;
justify-self: center;
align-items: center;
align-self: center;
text-align: center;
}
.actions {
display: flex;
flex-direction: row;

11
src/app/actions/action-item-edit/action-item-edit.component.ts
View File

@ -203,6 +203,7 @@ export class ActionItemEditComponent implements OnInit {
isNew: boolean = true;
previousName: string = this.action.name;
responseError: string | undefined;
waitForResponse: boolean = false;
readonly formGroup = new FormGroup({
@ -239,16 +240,17 @@ export class ActionItemEditComponent implements OnInit {
return;
this.waitForResponse = true;
this.responseError = undefined;
this.client.first((d: any) => d.op == 4 && d.d.request.type == 'delete_redeemable_action' && d.d.request.data.name == this.action.name)
.subscribe({
next: (d) => {
if (d.d.error) {
// TODO: update & show response error message.
this.responseError = d.d.error;
} else {
this.dialogRef.close();
}
},
error: () => this.waitForResponse = false,
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
this.client.deleteRedeemableAction(action.name);
@ -260,6 +262,7 @@ export class ActionItemEditComponent implements OnInit {
}
this.waitForResponse = true;
this.responseError = undefined;
const fields = this.actionEntries[this.action.type];
if (fields.some(f => f.control.invalid)) {
@ -285,12 +288,12 @@ export class ActionItemEditComponent implements OnInit {
.subscribe({
next: (d) => {
if (d.d.error) {
// TODO: update & show response error message.
this.responseError = d.d.error;
} else {
this.dialogRef.close(this.action);
}
},
error: () => this.waitForResponse = false,
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
if (isNewAction)

16
src/app/groups/group-item-edit/group-item-edit.component.html
View File

@ -39,15 +39,21 @@
</mat-form-field>
</mat-card-content>
<mat-card-actions align="end">
<button mat-button
[disabled]="waitForResponse || formGroup.invalid"
(click)="add()">
<mat-icon>add</mat-icon>Add
</button>
<button mat-button
[disabled]="waitForResponse"
(click)="cancel()">
<mat-icon>cancel</mat-icon>Cancel
</button>
<button mat-button
[disabled]="waitForResponse || formGroup.invalid"
(click)="add()">
<mat-icon>add</mat-icon>Add
</button>
</mat-card-actions>
@if (responseError) {
<mat-card-footer>
<small class="error below">{{responseError}}</small>
</mat-card-footer>
}
</mat-card>

13
src/app/groups/group-item-edit/group-item-edit.component.scss
View File

@ -6,3 +6,16 @@
.mat-mdc-card-actions {
align-self: center;
}
.error {
display: block;
color: #ba1a1a;
}
.below {
display: block;
justify-self: center;
align-items: center;
align-self: center;
text-align: center;
}

6
src/app/groups/group-item-edit/group-item-edit.component.ts
View File

@ -30,6 +30,7 @@ export class GroupItemEditComponent implements OnInit {
group: Group = { id: '', user_id: '', name: '', priority: 0 };
isSpecial: boolean = false;
responseError: string | undefined;
waitForResponse: boolean = false;
nameForm = new FormControl('', [Validators.required]);
@ -53,16 +54,17 @@ export class GroupItemEditComponent implements OnInit {
return;
this.waitForResponse = true;
this.responseError = undefined;
this._client.first((d: any) => d.op == 4 && d.d.request.type == 'create_group' && d.d.data.name == this.nameForm.value)
.subscribe({
next: (d) => {
if (d.d.error) {
// TODO: update & show response error message.
this.responseError = d.d.error;
} else {
this._dialogRef.close(d.d.data);
}
},
error: () => this.waitForResponse = false,
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
this._client.createGroup(this.nameForm.value!, this.priorityForm.value!);

1
src/app/policies/policy-dropdown/policy-dropdown.component.scss
View File

@ -1,3 +1,4 @@
.error {
display: block;
color: #ba1a1a;
}

17
src/app/policies/policy-item-edit/policy-item-edit.component.html
View File

@ -9,7 +9,8 @@
[group]="data.group_id"
[groupDisabled]="data.groupDisabled"
[errorMessages]="groupErrorMessages" />
<policy-dropdown #policyDropdown [policy]="pathControl.value" />
<policy-dropdown #policyDropdown
[policy]="pathControl.value" />
<mat-form-field>
<mat-label>Usage</mat-label>
<input matInput
@ -52,6 +53,10 @@
</mat-form-field>
</mat-card-content>
<mat-card-actions align="end">
<button mat-button
(click)="dialogRef.close()">
<mat-icon>cancel</mat-icon>Cancel
</button>
@if (isNew) {
<button mat-button
(click)="save()">
@ -63,9 +68,11 @@
<mat-icon>save</mat-icon>Save
</button>
}
<button mat-button
(click)="dialogRef.close()">
<mat-icon>cancel</mat-icon>Cancel
</button>
</mat-card-actions>
@if (responseError) {
<mat-card-footer>
<small class="error below">{{responseError}}</small>
</mat-card-footer>
}
</mat-card>

9
src/app/policies/policy-item-edit/policy-item-edit.component.scss
View File

@ -6,5 +6,14 @@
}
.error {
display: block;
color: #ba1a1a;
}
.below {
display: block;
justify-self: center;
align-items: center;
align-self: center;
text-align: center;
}

10
src/app/policies/policy-item-edit/policy-item-edit.component.ts
View File

@ -49,6 +49,7 @@ export class PolicyItemEditComponent implements OnInit, AfterViewInit {
});
isNew: boolean = false;
responseError: string | undefined;
waitForResponse: boolean = false;
@ViewChild('policyDropdown') policyDropdown: PolicyDropdownComponent | undefined;
@ -81,6 +82,7 @@ export class PolicyItemEditComponent implements OnInit, AfterViewInit {
return;
this.waitForResponse = true;
this.responseError = undefined;
const group_id = (this.groupControl.value as Group)!.id;
const path = this.pathControl.value!;
const usage = this.usageControl.value!;
@ -91,12 +93,12 @@ export class PolicyItemEditComponent implements OnInit, AfterViewInit {
.subscribe({
next: (d) => {
if (d.d.error) {
// TODO: update & show response error message.
this.responseError = d.d.error;
} else {
this.dialogRef.close(d.d.data);
}
},
error: () => this.waitForResponse = false,
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
this.client.createPolicy(group_id, path, usage, span);
@ -105,12 +107,12 @@ export class PolicyItemEditComponent implements OnInit, AfterViewInit {
.subscribe({
next: (d) => {
if (d.d.error) {
// TODO: update & show response error message.
this.responseError = d.d.error;
} else {
this.dialogRef.close(d.d.data);
}
},
error: () => this.waitForResponse = false,
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
this.client.updatePolicy(this.data.policy_id, group_id, path, usage, span);

6
src/app/redemptions/redemption-item-edit/redemption-item-edit.component.ts
View File

@ -95,7 +95,7 @@ export class RedemptionItemEditComponent implements OnInit {
this.dialogRef.close(id);
}
},
error: () => { this.responseError = 'Failed to receive response back from server.'; this.waitForResponse = false; },
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
this.client.deleteRedemption(id);
@ -127,7 +127,7 @@ export class RedemptionItemEditComponent implements OnInit {
this.dialogRef.close(d.d.data);
}
},
error: () => { this.responseError = 'Failed to receive response back from server.'; this.waitForResponse = false; },
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
this.client.createRedemption(this.redemption.redemption_id, this.redemption.action_name, order);
@ -142,7 +142,7 @@ export class RedemptionItemEditComponent implements OnInit {
this.dialogRef.close(d.d.data);
}
},
error: () => { this.responseError = 'Failed to receive response back from server.'; this.waitForResponse = false; },
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
this.client.updateRedemption(this.redemption.id, this.redemption.redemption_id, this.redemption.action_name, order);

4
src/app/tts-filters/filter-item-edit/filter-item-edit.component.html
View File

@ -43,8 +43,8 @@
</mat-select>
</mat-form-field>
</div>
@if (errorMessage) {
<small class="error">{{errorMessage}}</small>
@if (responseError) {
<small class="error">{{responseError}}</small>
}
</form>
</mat-dialog-content>

12
src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts
View File

@ -62,7 +62,7 @@ export class FilterItemEditComponent {
});
waitForResponse: boolean = false;
errorMessage: string | undefined;
responseError: string | undefined;
get optionsSelected() {
@ -75,7 +75,7 @@ export class FilterItemEditComponent {
return;
this.waitForResponse = true;
this.errorMessage = undefined;
this.responseError = undefined;
const search = this.searchControl.value!;
const replace = this.replaceControl.value!;
@ -86,11 +86,11 @@ export class FilterItemEditComponent {
?.subscribe({
next: d => {
if (d.error)
this.errorMessage = d.error;
this.responseError = d.error;
else
this.dialogRef.close(d.d.data);
},
error: () => this.waitForResponse = false,
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
this.client.createTTSFilter(search, replace, flag);
@ -99,11 +99,11 @@ export class FilterItemEditComponent {
?.subscribe({
next: d => {
if (d.error)
this.errorMessage = d.error;
this.responseError = d.error;
else
this.dialogRef.close(d.d.data);
},
error: () => this.waitForResponse = false,
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
this.client.updateTTSFilter(this.data.id, search, replace, flag);

13
src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.html
View File

@ -1,13 +1,14 @@
<mat-card>
<mat-card-header>
<mat-card-title-group>
<mat-card-title>Add Twitch User to Group</mat-card-title>
<mat-card-subtitle>Adding to ...</mat-card-subtitle>
<mat-card-title>Add Twitch User</mat-card-title>
<mat-card-subtitle>to {{data.group.name}}</mat-card-subtitle>
</mat-card-title-group>
</mat-card-header>
<mat-card-content>
<mat-form-field>
<mat-label>Twitch Username</mat-label>
<input matInput
[formControl]="usernameControl" />
</mat-form-field>
@ -17,7 +18,13 @@
<button mat-raised-button
(click)="dialogRef.close()">Cancel</button>
<button mat-raised-button
disabled="{{waitForResponse}}"
disabled="{{usernameControl.invalid || waitForResponse}}"
(click)="submit()">Add</button>
</mat-card-actions>
@if (responseError) {
<mat-card-footer>
<small class="error below">{{responseError}}</small>
</mat-card-footer>
}
</mat-card>

16
src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.scss
View File

@ -0,0 +1,16 @@
.mat-mdc-card-actions {
justify-content: space-between;
}
.error {
display: block;
color: #ba1a1a;
}
.below {
display: block;
justify-self: center;
align-items: center;
align-self: center;
text-align: center;
}

13
src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.ts
View File

@ -27,12 +27,13 @@ import { group } from 'console';
})
export class TwitchUserItemAddComponent implements OnInit {
private readonly client = inject(HermesClientService);
private readonly data = inject<{ username: string, group: Group }>(MAT_DIALOG_DATA);
private readonly http = inject(HttpClient);
readonly data = inject<{ username: string, group: Group }>(MAT_DIALOG_DATA);
readonly usernameControl = new FormControl('', [Validators.required]);
readonly dialogRef = inject(MatDialogRef<ActionItemEditComponent>);
responseError: string | undefined;
waitForResponse = false;
@ -46,6 +47,7 @@ export class TwitchUserItemAddComponent implements OnInit {
}
this.waitForResponse = true;
this.responseError = undefined;
const username = this.usernameControl.value!.toLowerCase();
this.http.get('/api/auth/twitch/users?login=' + username, {
@ -56,10 +58,7 @@ export class TwitchUserItemAddComponent implements OnInit {
.subscribe((response: any) => {
if (!response.user) {
this.waitForResponse = false;
return;
}
if (!response.user) {
this.responseError = 'Twitch username does not exist.';
return;
}
@ -67,12 +66,12 @@ export class TwitchUserItemAddComponent implements OnInit {
.subscribe({
next: (d) => {
if (d.d.error) {
// TODO: update & show response error message.
this.responseError = d.d.error;
} else {
this.dialogRef.close(d.d.data);
}
},
error: () => this.waitForResponse = false,
error: () => this.responseError = 'Something went wrong.',
complete: () => this.waitForResponse = false,
});
this.client.createGroupChatter(this.data.group.id, response.user.id, response.user.login)