Add pending state for chat message
Waits untill the server answers something before enabling chatting again shows some spinner to indicate pending chat requests
This commit is contained in:
parent
7dcdbb4ee1
commit
6b8ccb8c33
@ -34,13 +34,15 @@
|
|||||||
</span>
|
</span>
|
||||||
</mat-hint>
|
</mat-hint>
|
||||||
<mat-label>{{ 'Message' | translate }}</mat-label>
|
<mat-label>{{ 'Message' | translate }}</mat-label>
|
||||||
|
<mat-spinner *ngIf="messagePending" matSuffix diameter="30"></mat-spinner>
|
||||||
<button
|
<button
|
||||||
mat-icon-button
|
mat-icon-button
|
||||||
matSuffix
|
matSuffix
|
||||||
type="submit"
|
type="submit"
|
||||||
color="accent"
|
color="accent"
|
||||||
matTooltip=" {{ 'Send' | translate }}"
|
matTooltip=" {{ 'Send' | translate }}"
|
||||||
[disabled]="!chatinput.value?.trim()?.length || newMessageForm.invalid"
|
*ngIf="!messagePending"
|
||||||
|
[disabled]="!chatinput.value?.trim()?.length || newMessageForm.invalid || messagePending"
|
||||||
>
|
>
|
||||||
<mat-icon>send</mat-icon>
|
<mat-icon>send</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
@ -26,6 +26,7 @@ import { ViewChatGroup } from '../../models/view-chat-group';
|
|||||||
export class ChatTabsComponent extends BaseViewComponentDirective implements OnInit {
|
export class ChatTabsComponent extends BaseViewComponentDirective implements OnInit {
|
||||||
public chatGroupSubject: BehaviorSubject<ViewChatGroup[]>;
|
public chatGroupSubject: BehaviorSubject<ViewChatGroup[]>;
|
||||||
public newMessageForm: FormGroup;
|
public newMessageForm: FormGroup;
|
||||||
|
public messagePending = false;
|
||||||
private messageControl: AbstractControl;
|
private messageControl: AbstractControl;
|
||||||
public chatMessageMaxLength = 512;
|
public chatMessageMaxLength = 512;
|
||||||
private selectedTabIndex = 0;
|
private selectedTabIndex = 0;
|
||||||
@ -91,8 +92,12 @@ export class ChatTabsComponent extends BaseViewComponentDirective implements OnI
|
|||||||
}
|
}
|
||||||
|
|
||||||
public send(): void {
|
public send(): void {
|
||||||
|
if (this.messagePending) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
const message = this.messageControl.value?.trim();
|
const message = this.messageControl.value?.trim();
|
||||||
if (message) {
|
if (message) {
|
||||||
|
this.messagePending = true;
|
||||||
const payload = {
|
const payload = {
|
||||||
text: message,
|
text: message,
|
||||||
chatgroup_id: this.chatGroupFromIndex.id
|
chatgroup_id: this.chatGroupFromIndex.id
|
||||||
@ -102,6 +107,9 @@ export class ChatTabsComponent extends BaseViewComponentDirective implements OnI
|
|||||||
.then(() => {
|
.then(() => {
|
||||||
this.clearTextInput();
|
this.clearTextInput();
|
||||||
})
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.messagePending = false;
|
||||||
|
})
|
||||||
.catch(this.raiseError);
|
.catch(this.raiseError);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user