Fix action-group-menu inline confirmation toggling

This commit is contained in:
Clemente Raposo 2024-10-18 12:22:42 +01:00 committed by Jack Anderson
parent b8d85ee025
commit 2e56029e71
2 changed files with 11 additions and 10 deletions

View file

@ -27,10 +27,10 @@
-->
<ng-container *ngIf="(vm$ | async) as vm">
<div class="{{klass}} float-right action-group-menu">
<ng-container *ngIf="!inlineConfirmationEnabled && !loading">
<ng-container *ngIf="!inlineConfirmationEnabled() && !loading()">
<scrm-button-group *ngIf="config$" [config$]="config$" [klass]="buttonGroupClass"></scrm-button-group>
</ng-container>
<ng-container *ngIf="inlineConfirmationEnabled && !loading">
<ng-container *ngIf="inlineConfirmationEnabled() && !loading()">
<div class="d-flex align-items-start justify-content-end inline-confirmation">
<div *ngIf="confirmationLabel" class="pl-1 inline-confirmation-label">
<scrm-label [labelKey]="confirmationLabel"></scrm-label>
@ -50,7 +50,7 @@
</div>
</div>
</ng-container>
<ng-container *ngIf="loading">
<ng-container *ngIf="loading()">
<scrm-inline-loading-spinner klass="inline-spinner-md"></scrm-inline-loading-spinner>
</ng-container>
</div>

View file

@ -24,7 +24,7 @@
* the words "Supercharged by SuiteCRM".
*/
import {Component, Input, OnInit} from '@angular/core';
import {Component, Input, OnInit, signal, WritableSignal} from '@angular/core';
import {Action, ActionContext, ActionDataSource} from '../../common/actions/action.model';
import {Button, ButtonInterface} from '../../common/components/button/button.model';
import {ButtonGroupInterface} from '../../common/components/button/button-group.model';
@ -37,6 +37,7 @@ import {
ScreenSizeObserverService
} from '../../services/ui/screen-size-observer/screen-size-observer.service';
import {LanguageStore, LanguageStrings} from '../../store/language/language.store';
import {sign} from "mathjs";
export interface ActionGroupMenuViewModel {
actions: Action[];
@ -61,12 +62,12 @@ export class ActionGroupMenuComponent implements OnInit {
vm$: Observable<ActionGroupMenuViewModel>;
inlineConfirmationEnabled = false;
inlineConfirmationEnabled: WritableSignal<boolean> = signal(false);
confirmationLabel = '';
confirmationDynamicLabel = '';
inlineCancelButton: ButtonInterface = null;
inlineConfirmButton: ButtonInterface = null;
loading = false;
loading: WritableSignal<boolean> = signal(false);
protected buttonGroupDropdownClass = 'dropdown-button-secondary';
@ -216,10 +217,10 @@ export class ActionGroupMenuComponent implements OnInit {
}
protected triggerTemporaryLoading() {
this.loading = true;
this.loading.set(true);
const delay = parseInt(this.systemConfigStore.getUi('inline_confirmation_loading_delay')) ?? 200;
setTimeout(() => {
this.loading = false;
this.loading.set(false);
}, delay);
}
@ -231,7 +232,7 @@ export class ActionGroupMenuComponent implements OnInit {
this.inlineCancelButton = this.buildInlineCancelButton(cancelConfig)
this.inlineConfirmButton = this.buildInlineConfirmButton(confirmConfig, callback)
this.inlineConfirmationEnabled = true;
this.inlineConfirmationEnabled.set(true);
}
protected buildInlineCancelButton(config: ButtonInterface): ButtonInterface {
@ -268,7 +269,7 @@ export class ActionGroupMenuComponent implements OnInit {
}
protected resetInlineConfirmation(): void {
this.inlineConfirmationEnabled = false;
this.inlineConfirmationEnabled.set(false);
this.confirmationDynamicLabel = '';
this.confirmationLabel = '';
this.inlineConfirmButton = null;