Add option to use full column on field-layout

This commit is contained in:
Clemente Raposo 2024-12-06 12:09:13 +00:00 committed by Jack Anderson
parent d423c83078
commit 17844d0400
6 changed files with 39 additions and 4 deletions

View file

@ -99,7 +99,8 @@ export interface FieldDefinition {
defaultValueModes?: ViewMode[];
modes?: ViewMode[];
relationship?: string;
relationshipMetadata?: RelationshipMetadata
relationshipMetadata?: RelationshipMetadata;
useFullColumn?: string[];
[key: string]: any;
}
@ -203,6 +204,7 @@ export interface Field {
logic?: FieldLogicMap;
displayLogic?: FieldLogicMap;
previousValue?: string;
useFullColumn?: string[];
initDefaultValue?: DefaultValueInitCallback;
}
@ -236,6 +238,7 @@ export class BaseField implements Field {
attributeDependencies: AttributeDependency[] = [];
logic?: FieldLogicMap;
displayLogic?: FieldLogicMap;
useFullColumn?: string[];
protected valueState?: string;
protected valueListState?: string[];

View file

@ -34,6 +34,8 @@ export interface FieldGridColumn {
actionSlot?: boolean;
specialSlot?: boolean;
fieldActions?: FieldActions;
headerColumnClass?: string;
valueColumnClass?: string;
}
export interface FieldGridRow {

View file

@ -35,7 +35,7 @@
<ng-container *ngIf="col.field && col.field.display !== 'none'">
<div class="field-layout-field-group-wrapper form-group row">
<div class="col-sm-3 field-layout-field-label-wrapper col-form-label label-container">
<div class="{{col?.headerColumnClass}} field-layout-field-label-wrapper col-form-label label-container">
<strong>
<ng-container
*ngIf="col.field.definition.required && (['edit', 'create'].includes(config.mode))">
@ -44,7 +44,7 @@
<label [ngClass]="labelClass">{{col.field.label | uppercase}}</label>
</strong>
</div>
<div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper"
<div class="{{col?.valueColumnClass}} d-flex flex-grow-1 field-layout-field-wrapper"
[ngClass]="{ 'align-items-center': (col?.fieldActions && col?.fieldActions?.position === 'inline') }">
<div class="flex-grow-1 text-break field-layout-field-value-wrapper">
<scrm-field [type]="col.field.type"

View file

@ -103,6 +103,32 @@ export class FieldLayoutComponent extends BaseFieldGridComponent {
const field = this.fields[fieldName] || null;
const fieldActions = layoutCol.fieldActions || null;
const adaptor = layoutCol.adaptor ?? null;
const useFullColumn = field?.useFullColumn ?? field?.definition?.useFullColumn ?? [];
let headerColumnClass = 'col-sm-3';
let valueColumnClass = 'col-sm-9';
const headerColSizes = {'xs': '12', 'sm': '3', 'md': '3', 'lg': '3', 'xl': '3'};
const valuesColSizes = {'xs': '12', 'sm': '9', 'md': '9', 'lg': '9', 'xl': '9'};
const useFullColumnsMaps = useFullColumn.reduce((ac,a) => ({...ac,[a]:true}),{});
if (useFullColumn.length) {
headerColumnClass = Object.keys(headerColSizes).map(size => {
if (useFullColumnsMaps[size]) {
return `col-${size}-12`;
}
return `col-${size}-${headerColSizes[size]}`
}).join(' ');
valueColumnClass = Object.keys(valuesColSizes).map(size => {
if (useFullColumnsMaps[size]) {
return `col-${size}-12`;
}
return `col-${size}-${valuesColSizes[size]}`
}).join(' ');
}
if (!field) {
row.cols.push({} as FieldGridColumn);
@ -112,7 +138,9 @@ export class FieldLayoutComponent extends BaseFieldGridComponent {
row.cols.push({
field,
fieldActions,
adaptor
adaptor,
valueColumnClass,
headerColumnClass
} as FieldGridColumn);
if (this.colNumber === 1 && colIndex < layoutRow.cols.length - 1) {

View file

@ -160,6 +160,7 @@ export class AttributeBuilder extends FieldBuilder {
fieldAttribute.valueParent = definition.valueParent;
fieldAttribute.source = 'attribute';
fieldAttribute.parentKey = parentField.name;
fieldAttribute.useFullColumn = definition?.useFullColumn || field?.definition?.useFullColumn || null;
return fieldAttribute;
}

View file

@ -217,6 +217,7 @@ export class FieldBuilder {
field.formControl = new UntypedFormControl(formattedValue);
}
field.useFullColumn = viewField?.useFullColumn || definition?.useFullColumn || null;
field.attributes = {};
field.source = 'field';
field.logic = viewField.logic || definition.logic || null;