tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Common component for field form.

pull/362/head
Sebastian Stehle 7 years ago
parent
bae480a3bd
commit
d048aae560
4 changed files with 63 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.html
  2. 2
      src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.scss
  3. 60
      src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.ts
  4. 6
      src/Squidex/app/features/schemas/pages/schema/forms/field-form.component.ts

56
src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.html
View File

@ -1,56 +0,0 @@
<div [formGroup]="editForm">
<div class="form-group row">
<label class="col-3 col-form-label" for="{{field.fieldId}}_fieldName">Name</label>
<div class="col-6">
<input type="text" class="form-control" id="{{field.fieldId}}_fieldName" readonly [ngModel]="field.name" [ngModelOptions]="{standalone: true}" />
<sqx-form-hint>
The name of the field in the API response.
</sqx-form-hint>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label" for="{{field.fieldId}}_fieldLabel">Label</label>
<div class="col-6">
<sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>
<input type="text" class="form-control" id="{{field.fieldId}}_fieldLabel" maxlength="100" formControlName="label" />
<sqx-form-hint>
Define the display name for the field for documentation and user interfaces.
</sqx-form-hint>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label" for="{{field.fieldId}}_fieldHints">Hints</label>
<div class="col-6">
<sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>
<input type="text" class="form-control" id="{{field.fieldId}}_fieldHints" maxlength="100" formControlName="hints" />
<sqx-form-hint>
Define some hints for the user and editor for the field for documentation and user interfaces.
</sqx-form-hint>
</div>
</div>
<div class="form-group row" *ngIf="field.properties.isContentField">
<div class="col-6 offset-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldListfield" formControlName="isListField" />
<label class="form-check-label" for="{{field.fieldId}}_fieldListfield">
List Field
</label>
</div>
<sqx-form-hint>
List fields are shown as a column in the content list.<br />When no list field is defined, the first field is used.
</sqx-form-hint>
</div>
</div>
</div>

2
src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.scss
View File

@ -1,2 +0,0 @@
@import '_vars';
@import '_mixins';

60
src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.ts
View File

@ -12,8 +12,64 @@ import { FieldDto } from '@app/shared';
@Component({
selector: 'sqx-field-form-common',
styleUrls: ['field-form-common.component.scss'],
templateUrl: 'field-form-common.component.html'
template: `
<div [formGroup]="editForm">
<div class="form-group row">
<label class="col-3 col-form-label" for="{{field.fieldId}}_fieldName">Name</label>
<div class="col-6">
<input type="text" class="form-control" id="{{field.fieldId}}_fieldName" readonly [ngModel]="field.name" [ngModelOptions]="{standalone: true}" />
<sqx-form-hint>
The name of the field in the API response.
</sqx-form-hint>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label" for="{{field.fieldId}}_fieldLabel">Label</label>
<div class="col-6">
<sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>
<input type="text" class="form-control" id="{{field.fieldId}}_fieldLabel" maxlength="100" formControlName="label" />
<sqx-form-hint>
Define the display name for the field for documentation and user interfaces.
</sqx-form-hint>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label" for="{{field.fieldId}}_fieldHints">Hints</label>
<div class="col-6">
<sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>
<input type="text" class="form-control" id="{{field.fieldId}}_fieldHints" maxlength="100" formControlName="hints" />
<sqx-form-hint>
Define some hints for the user and editor for the field for documentation and user interfaces.
</sqx-form-hint>
</div>
</div>
<div class="form-group row" *ngIf="field.properties.isContentField">
<div class="col-6 offset-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldListfield" formControlName="isListField" />
<label class="form-check-label" for="{{field.fieldId}}_fieldListfield">
List Field
</label>
</div>
<sqx-form-hint>
List fields are shown as a column in the content list.<br />When no list field is defined, the first field is used.
</sqx-form-hint>
</div>
</div>
</div>
`
})
export class FieldFormCommonComponent implements OnInit {
@Input()

6
src/Squidex/app/features/schemas/pages/schema/forms/field-form.component.ts
View File

@ -8,7 +8,11 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FieldDto, ImmutableArray, PatternDto } from '@app/shared';
import {
FieldDto,
ImmutableArray,
PatternDto
} from '@app/shared';
@Component({
selector: 'sqx-field-form',

Write Preview
Loading…
Cancel
Save