mirror of
https://github.com/SuiteCRM/SuiteCRM-Core.git
synced 2025-09-01 08:00:47 +08:00
Add option to use full column on field-layout
This commit is contained in:
parent
d423c83078
commit
17844d0400
6 changed files with 39 additions and 4 deletions
|
@ -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[];
|
||||
|
|
|
@ -34,6 +34,8 @@ export interface FieldGridColumn {
|
|||
actionSlot?: boolean;
|
||||
specialSlot?: boolean;
|
||||
fieldActions?: FieldActions;
|
||||
headerColumnClass?: string;
|
||||
valueColumnClass?: string;
|
||||
}
|
||||
|
||||
export interface FieldGridRow {
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue