Update grid-widget display for new ui

This commit is contained in:
Clemente Raposo 2024-12-05 00:48:51 +00:00 committed by Jack Anderson
parent c2bf11785e
commit e827164d0d

View file

@ -35,89 +35,91 @@
<ng-container *ngFor="let item of vm.layout">
<div
class="d-flex {{getJustify(item.justify)}} {{getAlign(item.align)}} {{getRowClass()}} {{getLayoutRowClass(item)}}">
<div class="d-flex {{getJustify(item.justify)}} {{getAlign(item.align)}} {{getRowClass()}} {{getLayoutRowClass(item)}}">
<div class="{{getColClass()}} {{getClass(col)}}" *ngFor="let col of item.cols">
<ng-container *ngFor="let col of item.cols">
<div 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>
<!-- 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 && (vm.statistics[col.statistic]) as statistics">
<!-- VALUE -->
<ng-container *ngIf="col.statistic && (vm.statistics[col.statistic]) as statistics">
<div *ngIf="statistics.field" class="widget-entry-value">
<div *ngIf="statistics.field" class="widget-entry-value">
<scrm-field [type]="statistics.field.type"
[field]="statistics.field"
mode="list">
</scrm-field>
<scrm-field [type]="statistics.field.type"
[field]="statistics.field"
mode="list">
</scrm-field>
</div>
<div *ngIf="statistics.loading && loading" class="widget-entry-loading">
</div>
<div *ngIf="statistics.loading && loading" class="widget-entry-loading">
<scrm-inline-loading-spinner></scrm-inline-loading-spinner>
<scrm-inline-loading-spinner></scrm-inline-loading-spinner>
</div>
</ng-container>
</div>
</ng-container>
<!-- LABEL -->
<ng-container *ngIf="col.labelKey">
<!-- LABEL -->
<ng-container *ngIf="col.labelKey">
<div class="widget-entry-label text-truncate">
<div class="widget-entry-label text-truncate">
<scrm-label [labelKey]="col.labelKey" [module]="getContextModule()"></scrm-label>
<scrm-label [labelKey]="col.labelKey" [module]="getContextModule()"></scrm-label>
</div>
</div>
</ng-container>
<!-- DESCRIPTION TEXT -->
<ng-container *ngIf="col.descriptionKey">
<div class="text-truncate widget-entry-label">
<label>{{vm.description}}</label>
</div>
</ng-container>
<!-- DYNAMIC LABEL -->
<ng-container *ngIf="col.dynamicLabel">
<div *ngIf="!loading" class="widget-entry-dynamic-label">
<scrm-dynamic-label [context]="getMessageContext()"
[fields]="getMessageFields(vm.statistics)"
[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="col.statistic && !loading && (!vm.statistics[col.statistic].field || (vm.statistics[col.statistic].field && isEmptyFieldValue(vm.statistics[col.statistic].field.value)))">
<div class="widget-entry-value {{getSizeClass(col.size)}}">
-
</div>
</ng-container>
</ng-container>
<!-- DESCRIPTION TEXT -->
<ng-container *ngIf="col.descriptionKey">
</div>
</ng-container>
<div class="text-truncate widget-entry-label">
<label>{{vm.description}}</label>
</div>
</ng-container>
<!-- DYNAMIC LABEL -->
<ng-container *ngIf="col.dynamicLabel">
<div *ngIf="!loading" class="widget-entry-dynamic-label">
<scrm-dynamic-label [context]="getMessageContext()"
[fields]="getMessageFields(vm.statistics)"
[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="col.statistic && !loading && (!vm.statistics[col.statistic].field || (vm.statistics[col.statistic].field && isEmptyFieldValue(vm.statistics[col.statistic].field.value)))">
<div class="widget-entry-value {{getSizeClass(col.size)}}">
-
</div>
</ng-container>
</ng-container>
</div>
</div>
</ng-container>