Of
Dynamic Form Orenda
Code scaffolding
HTML
<of #vcForm [schemaModel]="schemaModel">
<of-field id="templateRef" [controlItemTpl]="control">
<ng-template #control>
<form [formGroup]="schemaModel.form">
<nz-input-group nzCompact>
<nz-select formControlName="templateOpt" style="width: 50%">
<nz-option [nzLabel]="'Option 1'"
[nzValue]="'1'"></nz-option>
<nz-option [nzLabel]="'Option 2'"
[nzValue]="'2'"></nz-option>
</nz-select>
<of-item-wrap [schemaModel]="schemaModel" dataField="templateInput"
style="width: 50%">
<input formControlName="templateInput"
nz-input
placeholder="templateInput"
/>
</of-item-wrap>
</nz-input-group>
</form>
</ng-template>
</of-field>
</of>
TS
formDisable$ = new BehaviorSubject(false);
ngaySinhMin$ = new BehaviorSubject<Date>(new Date(1991, 2, 27));
danTocOption$ = new BehaviorSubject<IOfSelectOptionDto[]>([{
displayText: 'Kinh',
value: '1'
}, {
displayText: 'Mông',
value: '2'
}]);
schemaModel = new OfSchemaModel({
fields: [
new OfTextModel({
label: 'Mã',
dataField: 'ma',
required: true,
validations: [
{
name: 'email'
}
],
disabled: true
}),
new OfTextModel({
label: 'Họ tên',
dataField: 'tenDayDu',
required: true,
disabledAsync: this.formDisable$
}),
new OfSelectModel({
label: 'Giới tính',
dataField: 'gioiTinhId',
value: 1,
options: [
{ displayText: 'Nam', value: '1' },
{ displayText: 'Nữ', value: '2' }
]
}),
new OfSelectAsyncModel({
label: 'Dân tộc async',
dataField: 'danToc',
value: 1,
optionsAsync: this.danTocOption$
}),
new OfSelectApiModel({
label: 'Tỉnh',
dataField: 'tinhId',
functionService: this.selectSp.getoptions({
type: SelectOptionType.Tinh
} as any),
keyCache: 'tinh'
}),
new OfSelectCascadeModel({
label: 'Huyện',
dataField: 'huyenId',
cascadeField: 'tinhId',
functionService: (cascade) => {
return this.selectSp.getoptions({
type: SelectOptionType.Huyen,
cascader: cascade
} as any);
},
renderOptionFunc: (opt) => {
if (opt) {
return opt.value + ' - ' + opt.displayText;
}
return '';
},
renderSelectedFunc: (opt) => {
if (opt) {
return `<b>${opt.value}</b>` + ' - ' + opt.displayText;
}
return '';
}
}),
new OfSelectCascadeModel({
label: 'Xã',
dataField: 'xaId',
cascadeField: 'huyenId',
functionService: (cascade) => {
return this.selectSp.getoptions({
type: SelectOptionType.Xa,
cascader: cascade
} as any);
},
keyCache: 'xa'
}),
new OfSelectSearchServerModel({
label: 'Quận huyện search',
dataField: 'huyenSearchServerId',
functionService: (dto) => {
return this.searchSp.getoptions({
...dto,
type: SelectSearchServerType.Huyen
});
}
}),
new OfSelectSearchServerModel({
label: 'Quận huyện search showPagination',
dataField: 'huyenSearchServerId',
functionService: (dto) => {
return this.searchSp.getoptions({
...dto,
type: SelectSearchServerType.Huyen
});
},
showPagination: true
}),
new OfSelectAdvancedSearchModel({
label: 'Quận huyện search advanced',
dataField: 'huyenSelectAdvancedSearchId',
functionService: (dto) => {
return this.searchSp.getoptions({
...dto,
type: SelectSearchServerType.Huyen
} as any);
},
showPagination: true,
componentAdvanced: HomeComponent
}),
new OfSelectAdvancedSearchModel({
label: 'Quận huyện search advanced modal',
dataField: 'huyenSelectAdvancedSearchModalId',
functionService: (dto) => {
return this.searchSp.getoptions({
...dto,
type: SelectSearchServerType.Huyen
} as any);
},
showPagination: true,
componentAdvanced: SearchModalComponent,
nzModalConfig: {
nzFooter: null,
nzStyle: { top: '20px' }
},
showComponentType: 'modal'
}),
new OfCheckBoxModel({
label: '',
dataField: 'checkBox',
checkBoxLabel: 'Check box',
disabledAsync: this.formDisable$
}),
new OfDateModel({
label: 'Ngày sinh',
dataField: 'ngaySinh',
required: true,
notGreaterThanCurrent: true,
minDateAsync: this.ngaySinhMin$,
disabledAsync: this.formDisable$
}),
new OfCurrencyModel({
label: 'Đơn giá',
dataField: 'donGia',
disabledAsync: this.formDisable$
}),
new OfContentHtmlModel({
label: ' ',
dataField: 'benhNhanId',
content: '<h3>content string html</h3>',
disabledAsync: this.formDisable$
}),
new OfTextAreaModel({
label: 'Ghi chú',
dataField: 'ghiChu',
rows: 2,
disabledAsync: this.formDisable$
}),
new OfNumberModel({
label: 'Số thứ tự',
dataField: 'soThuTu',
min: 10,
max: 100,
step: 2,
disabledAsync: this.formDisable$
}),
new OfNumberModel({
label: 'Điện thoại',
dataField: 'dienThoai',
onlyKeyNumber: true,
disabledAsync: this.formDisable$
}),
new OfPwdModel({
label: 'Mật khẩu',
dataField: 'matKhau',
disabledAsync: this.formDisable$,
validations: [
{
name: 'password'
}
]
}),
new OfRadioModel({
label: 'Loại',
dataField: 'loai',
items: [{
label: 'Loại 1',
value: 1
}, {
label: 'Loại 2',
value: 2
}, {
label: 'Loại 3',
value: 3
}]
}),
new OfSwitchModel({
label: 'Switch',
dataField: 'switch',
yesText: 'Có'
}),
new OfTemplateRefModel({
label: 'templateRef',
dataField: 'templateRef',
controls: [
new OfExtendControlModel({
dataField: 'templateOpt',
value: '1'
}),
new OfExtendControlModel({
dataField: 'templateInput',
required: true
})
]
})
]
});
Table
Html
<o-table #vcTable [setting]="otSetting" [items]="pageConfig.items" [loading]="pageConfig.loading$ | async">
<o-column type="checkbox"></o-column>
<o-column name="value" headerText="Id" cellAlign="center" [width]="50" [allowSorting]="true"></o-column>
<o-column name="displayText" headerText="Tên" [width]="100"></o-column>
<o-column headerText="Tên">
<ng-template #template let-data="data">
<div>
<span>{{data.value}} - {{data.displayText}}</span>
</div>
</ng-template>
</o-column>
<o-column name="value" headerText="Tiền vnd" type="vnd" [width]="100"></o-column>
<o-column name="displayText" headerText="Tên 1" *ngIf="showCol"></o-column>
<o-column name="displayText" headerText="Tên 2"></o-column>
<o-column name="displayText" headerText="Tên 3"></o-column>
<o-column name="displayText" headerText="Tên 4" fix="right"></o-column>
<ng-template #expand let-data="data">
{{data|json}}
</ng-template>
</o-table>
<op #vcPage [config]="pageConfig"></op>
TS
@ViewChild('vcPage') vcPage!: OpComponent;
pageConfig = new OpConfigModel<any>({
type: 'ord-custom',
sourceType: 'func',
dataSourceFunc: (dto) => {
dto.type = 27;
return this.selectSp.getoptions(dto).pipe(map(result => {
return {
items: result,
totalCount: result.length
};
}));
}
});
otSetting: OTableSettingModel;
showCol = false;
constructor(private selectSp: SelectoptionServiceProxy) {
}
ngOnInit(): void {
this.otSetting = new OTableSettingModel({
bordered: true,
scrollY: '60vh',
expandable: true
});
}
search() {
this.vcPage.search({});
}
Tree Table
HTML
<button nz-button
(click)="expand = !expand; vcTreeTable.expandAll(expand)"> Expand
</button>
<o-table-tree #vcTreeTable
[setting]="setting"
[items]="items"
(expandChange)="expandChange($event)"
(nodeCheckedChange)="nodeChecked = $event"
>
<!-- <o-tree-column type="checkbox"></o-tree-column>-->
<!-- <o-tree-column headerText="Tên"-->
<!-- name="ten"-->
<!-- [isContainIconExpand]="true"-->
<!-- [width]="300"-->
<!-- [hasTreeIndex]="true"></o-tree-column>-->
<!-- <o-tree-column headerText="Tên đầy đủ">-->
<!-- <ng-template #template-->
<!-- let-data="data">-->
<!-- {{data?.tenDayDu}}-->
<!-- </ng-template>-->
<!-- </o-tree-column>-->
</o-table-tree>
TS
setting = new OTreeTableSettingModel({
primaryKey: 'id',
parentKey: 'parentId',
// expandAllAfterLoad: true,
loadAsync: true,
scrollY: '60vh',
singleChecked: false,
columns: [{
type: 'checkbox',
width: 60
},
{
headerText: 'Tên',
name: 'ten',
isContainIconExpand: true,
hasTreeIndex: true,
width: 300
},
{
headerText: 'Tên đầy đủ',
renderHtml: (record) => {
return record?.tenDayDu;
}
}
]
});
expandChange(node: IOTreeTableNode) {
const children = this.allItems.filter(s => s.parentId === node.id);
this.vcTreeTable.setChildrenForNode(node, children);
}