mirror of
https://github.com/SuiteCRM/SuiteCRM-Core.git
synced 2025-08-29 08:17:18 +08:00
Fix grid widget values showing on loading
This commit is contained in:
Clemente Raposo
parent
530cf7bdd7
commit
002bfc890d
3 changed files with 89 additions and 88 deletions
|
|
@ -68,6 +68,7 @@ export interface StatisticWidgetLayoutCol {
|
|||
iconClass?: string;
|
||||
icon?: string;
|
||||
labelKey?: string;
|
||||
hideIfLoading?: boolean;
|
||||
descriptionKey?: string;
|
||||
dynamicLabel?: string;
|
||||
statistic?: string;
|
||||
|
|
|
|||
|
|
@ -38,93 +38,93 @@
|
|||
<div *ngIf="!item?.activeOnFields || (item?.activeOnFields && item?.active)" class="d-flex {{getJustify(item.justify)}} {{getAlign(item.align)}} {{getRowClass()}} {{getLayoutRowClass(item)}}">
|
||||
|
||||
<ng-container *ngFor="let col of item.cols">
|
||||
<div *ngIf="!col?.activeOnFields || (col?.activeOnFields && col?.active)" class="{{getColClass()}} {{getClass(col)}}">
|
||||
<ng-container *ngIf="!(col.hideIfLoading && loading())">
|
||||
<div *ngIf="!col?.activeOnFields || (col?.activeOnFields && col?.active)" class="{{getColClass()}} {{getClass(col)}}">
|
||||
<ng-container *ngIf="col.display !== 'hidden'">
|
||||
|
||||
<ng-container *ngIf="col.display !== 'hidden'">
|
||||
|
||||
<!-- ICON -->
|
||||
<ng-container *ngIf="col.icon">
|
||||
<div class="widget-entry-icon">
|
||||
<scrm-image [image]="col.icon" [klass]="col.iconClass"></scrm-image>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- VALUE -->
|
||||
<ng-container *ngIf="col.statistic && (statisticsMap()[col.statistic]) as statistics">
|
||||
|
||||
<div *ngIf="statistics.field" class="widget-entry-value {{col?.valueClass ?? ''}}">
|
||||
|
||||
<scrm-field [type]="statistics.field.type"
|
||||
[field]="statistics.field"
|
||||
mode="list">
|
||||
</scrm-field>
|
||||
|
||||
</div>
|
||||
<div *ngIf="initializing() || (statistics.loading && loading)" class="widget-entry-loading">
|
||||
|
||||
<div class="pb-2 widget-entry-value">
|
||||
<div class=" rounded box-loading skeleton-field-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- LABEL -->
|
||||
<ng-container *ngIf="col.labelKey">
|
||||
|
||||
<div class="widget-entry-label text-truncate {{col?.labelClass ?? ''}}">
|
||||
|
||||
<scrm-label [labelKey]="col.labelKey" [module]="getContextModule()"></scrm-label>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- DESCRIPTION TEXT -->
|
||||
<ng-container *ngIf="col.descriptionKey">
|
||||
|
||||
<div class="text-truncate widget-entry-label">
|
||||
|
||||
<label>{{description()}}</label>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- DYNAMIC LABEL -->
|
||||
<ng-container *ngIf="col.dynamicLabel">
|
||||
|
||||
<div *ngIf="!loading" class="widget-entry-dynamic-label text-truncate {{col?.dynamicLabelClass ?? ''}}">
|
||||
|
||||
<scrm-dynamic-label [context]="getMessageContext()"
|
||||
[fields]="getMessageFields(statisticsMap())"
|
||||
[labelKey]="col.dynamicLabel">
|
||||
</scrm-dynamic-label>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="loading" class="widget-entry-loading">
|
||||
<scrm-inline-loading-spinner></scrm-inline-loading-spinner>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- MISCONFIGURATION -->
|
||||
<ng-container *ngIf="!initializing()">
|
||||
<ng-container
|
||||
*ngIf="col.statistic && !loading && (!statisticsMap()[col.statistic].field || (statisticsMap()[col.statistic].field && isEmptyFieldValue(statisticsMap()[col.statistic].field.value)))">
|
||||
<div class="widget-entry-value {{getSizeClass(col.size)}}">
|
||||
-
|
||||
<!-- ICON -->
|
||||
<ng-container *ngIf="col.icon">
|
||||
<div class="widget-entry-icon">
|
||||
<scrm-image [image]="col.icon" [klass]="col.iconClass"></scrm-image>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- VALUE -->
|
||||
<ng-container *ngIf="col.statistic && (statisticsMap()[col.statistic]) as statistics">
|
||||
|
||||
<div *ngIf="!loading() && statistics.field" class="widget-entry-value {{col?.valueClass ?? ''}}">
|
||||
|
||||
<scrm-field [type]="statistics.field.type"
|
||||
[field]="statistics.field"
|
||||
mode="list">
|
||||
</scrm-field>
|
||||
|
||||
</div>
|
||||
<div *ngIf="initializing() || (statistics.loading && loading())" class="widget-entry-loading">
|
||||
|
||||
<div class="pb-2 widget-entry-value">
|
||||
<div class=" rounded box-loading skeleton-field-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- LABEL -->
|
||||
<ng-container *ngIf="col.labelKey">
|
||||
|
||||
<div class="widget-entry-label text-truncate {{col?.labelClass ?? ''}}">
|
||||
|
||||
<scrm-label [labelKey]="col.labelKey" [module]="getContextModule()"></scrm-label>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- DESCRIPTION TEXT -->
|
||||
<ng-container *ngIf="col.descriptionKey">
|
||||
|
||||
<div class="text-truncate widget-entry-label">
|
||||
|
||||
<label>{{description()}}</label>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- DYNAMIC LABEL -->
|
||||
<ng-container *ngIf="col.dynamicLabel">
|
||||
|
||||
<div *ngIf="!loading()" class="widget-entry-dynamic-label text-truncate {{col?.dynamicLabelClass ?? ''}}">
|
||||
|
||||
<scrm-dynamic-label [context]="getMessageContext()"
|
||||
[fields]="getMessageFields(statisticsMap())"
|
||||
[labelKey]="col.dynamicLabel">
|
||||
</scrm-dynamic-label>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="loading()" class="widget-entry-loading">
|
||||
<scrm-inline-loading-spinner></scrm-inline-loading-spinner>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- MISCONFIGURATION -->
|
||||
<ng-container *ngIf="!initializing()">
|
||||
<ng-container
|
||||
*ngIf="col.statistic && !loading() && (!statisticsMap()[col.statistic].field || (statisticsMap()[col.statistic].field && isEmptyFieldValue(statisticsMap()[col.statistic].field.value)))">
|
||||
<div class="widget-entry-value {{getSizeClass(col.size)}}">
|
||||
-
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ export interface StatisticsQueryArgs {
|
|||
export class GridWidgetComponent implements OnInit, OnDestroy {
|
||||
@Input() config: GridWidgetConfig;
|
||||
vm$: Observable<GridWidgetState>;
|
||||
loading = true;
|
||||
loading:WritableSignal<boolean> = signal(true);
|
||||
messageLabelKey: string;
|
||||
initializing: WritableSignal<boolean> = signal(true);
|
||||
layout: WritableSignal<StatisticWidgetLayoutRow[]> = signal([]);
|
||||
|
|
@ -402,7 +402,7 @@ export class GridWidgetComponent implements OnInit, OnDestroy {
|
|||
map((loadings) => {
|
||||
|
||||
if (!loadings || loadings.length < 1) {
|
||||
this.loading = false;
|
||||
this.loading.set(false);
|
||||
return false;
|
||||
}
|
||||
let loading = true;
|
||||
|
|
@ -410,7 +410,7 @@ export class GridWidgetComponent implements OnInit, OnDestroy {
|
|||
loadings.forEach(value => {
|
||||
loading = loading && value;
|
||||
});
|
||||
this.loading = loading;
|
||||
this.loading.set(loading);
|
||||
|
||||
return loading;
|
||||
}));
|
||||
|
|
@ -421,9 +421,9 @@ export class GridWidgetComponent implements OnInit, OnDestroy {
|
|||
|
||||
if (this.gridWidgetInput.widgetConfig.reload$) {
|
||||
this.subs.push(this.gridWidgetInput.widgetConfig.reload$.subscribe(() => {
|
||||
if (this.loading === false) {
|
||||
if (this.loading() === false) {
|
||||
|
||||
this.loading = true;
|
||||
this.loading.set(true);
|
||||
Object.keys(this.statistics).forEach(statisticKey => {
|
||||
const statistic = this.statistics[statisticKey];
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
