Skip to content

Commit

Permalink
Merge pull request #36 from asoftwareworld/feature/4.0.2
Browse files Browse the repository at this point in the history 
Feature/4.0.2
  • Loading branch information
@asoftwareworld
asoftwareworld authored Aug 17, 2022
2 parents bf31736 + a102a02 commit a2aeadd
Show file tree
Hide file tree
Showing 19 changed files with 196 additions and 109 deletions.
66 changes: 41 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,39 +116,52 @@ If you are not using the Angular CLI, you can include a theme via a `<link>` ele
In your template, use the component selector:
```
<asw-form-builder [uploadData]="jsonData1"
[isShowPreviewButton]="isShowPreviewButton"
[isShowJsonDataButton]="isShowJsonDataButton"
[isShowPublishButton]="isShowPublishButton"
(publishClick)="saveJsonData($event)"
(previewClick)="previewTemplate($event)"></asw-form-builder>
[isShowPreviewButton]="isShowPreviewButton"
[isShowJsonDataButton]="isShowJsonDataButton"
[isShowPublishButton]="isShowPublishButton"
(publishClick)="saveJsonData($event)"
(previewClick)="previewTemplate($event)"
(buttonClick)="buttonClick($event)"
(aswModelChange)="onSelectionChange($event)"></asw-form-builder>
```
Preview Template, use the component selector in your HTML page:
```
<asw-preview-template [formContainer]="jsonData"></asw-preview-template>
<asw-preview-template [formContainer]="jsonData"
(buttonClick)="buttonClick($event)"
(aswModelChange)="onSelectionChange($event)">
</asw-preview-template>
```

Define in your component to get published event :

```
export class AppComponent {
title = 'ASW Form Builder Demo';
jsonData: any[] = [];
jsonData1: any[] = [];
isShowPreviewButton = false;
isShowJsonDataButton = true;
isShowPublishButton = false;
// Publish Template
saveJsonData(data: any){
//....
console.log(data);
// do something
}
//Preview Template
previewTemplate(data: any){
this.jsonData = data;
}
title = 'ASW Form Builder Demo';
jsonData: any[] = [];
jsonData1: any[] = [];
isShowPreviewButton = false;
isShowJsonDataButton = true;
isShowPublishButton = false;
// Publish Template
saveJsonData(data: any){
//....
console.log(data);
// do something
}
//Preview Template
previewTemplate(data: any){
this.jsonData = data;
}
buttonClick(data: any): void {
console.log(data);
}
onSelectionChange(control: any): void {
console.log(control);
}
}
```
## Theme
Expand All @@ -161,7 +174,7 @@ and Bootstrap [more information](https://getbootstrap.com/docs/4.0/getting-start
| Header | Headings are defined with the `<h1> to <h6>` tags. Used as a title of the post, template and resume, etc. |
| Image Upload | Upload image with crop, zoom in, zoom out, reset, rotate, swap etc. features. |
| Autocomplete | The autocomplete is a normal text input enhanced by a panel of suggested relevant options as the user types. |
| Textbox | Enable native inputs to be used within a form field. The styles such as the underline, floating label. |
| Text field | Enable native inputs to be used within a form field. The styles such as the underline, floating label. |
| Text area | Enable native inputs to be used within a form field. The styles such as the underline, floating label. |
| Datepicker | The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. |
| Select | Allows the user to select only one option using dropdown. |
Expand All @@ -174,6 +187,9 @@ and Bootstrap [more information](https://getbootstrap.com/docs/4.0/getting-start
| Slide toggle | Is an on/off control that can be toggled via clicking and draggable switch. |
| Grid | Configure bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. |
| GPS | Add google map key in [index.html](https://github.com/asoftwareworld/ASW-Form-Builder/blob/master/src/index.html) file to use GPS feature.|
| QR Code | ASW QR Code library for generating QR Code for Angular projects. [Readme](https://github.com/asoftwareworld/asw-qr-code/blob/main/README.md) file to use feature.|
| Signature | This control allow for digital signature and display the result. (Uses canvas & fabric.js).|
| Image Drawing | This control allow to draw on Image and display the result. (Uses canvas & fabric.js).|


## Browser Support
Expand Down
32 changes: 14 additions & 18 deletions src/components/form-builder/default-controls.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const CONTROLS = [
controlType: 'autocomplete',
tooltip: 'Select one',
label: 'Autocomplete',
column: 'col-md-12',
column: 'col-md-6',
style: 'outline',
isRequired: false,
options: [
Expand All @@ -54,7 +54,7 @@ export const CONTROLS = [
value: '',
label: 'Text Field',
style: 'outline',
column: 'col-md-12',
column: 'col-md-6',
isRequired: false,
maxlength: 50,
minlength: 0
Expand All @@ -68,7 +68,7 @@ export const CONTROLS = [
value: '',
label: 'Text Area',
style: 'outline',
column: 'col-md-12',
column: 'col-md-6',
isRequired: false,
maxlength: 50,
minlength: 0
Expand All @@ -82,7 +82,7 @@ export const CONTROLS = [
value: '',
label: 'Number',
style: 'outline',
column: 'col-md-12',
column: 'col-md-6',
isRequired: false,
maxlength: 50,
minlength: 0
Expand All @@ -96,12 +96,8 @@ export const CONTROLS = [
label: 'Calculation',
placeholder: 'Field 1 + Field 2 = ',
style: 'outline',
column: 'col-md-12',
operators: [
{ label: '', value: '' },
{ label: '', value: '' },
{ label: '', value: '' },
]
column: 'col-md-6',
operations: []
},
{
id: '1',
Expand All @@ -112,7 +108,7 @@ export const CONTROLS = [
tooltip: 'Choose a date',
label: 'Date Picker',
style: 'outline',
column: 'col-md-12',
column: 'col-md-6',
isRequired: false,
isWeekendsDisable: false
},
Expand All @@ -124,7 +120,7 @@ export const CONTROLS = [
tooltip: 'Select option',
label: 'Select',
style: 'outline',
column: 'col-md-12',
column: 'col-md-6',
value: '',
isRequired: false,
options: [
Expand All @@ -140,7 +136,7 @@ export const CONTROLS = [
controlType: 'multi-select',
tooltip: 'Select options',
label: 'Multi Select',
column: 'col-md-12',
column: 'col-md-6',
value: '',
style: 'outline',
isRequired: false,
Expand All @@ -158,7 +154,7 @@ export const CONTROLS = [
tooltip: 'radio',
label: 'Radio',
value: 'option-1',
column: 'col-md-12',
column: 'col-md-6',
isRequired: false,
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
Expand All @@ -173,7 +169,7 @@ export const CONTROLS = [
controlType: 'checkbox',
tooltip: 'checkbox',
label: 'Checkbox',
column: 'col-md-12',
column: 'col-md-6',
isRequired: false,
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
Expand All @@ -189,7 +185,7 @@ export const CONTROLS = [
tooltip: 'Click button',
label: 'Submit',
type: 'button',
column: 'col-md-12',
column: 'col-md-3',
color: 'primary',
style: 'mat-raised-button'
},
Expand All @@ -216,7 +212,7 @@ export const CONTROLS = [
label: 'Slide me!',
value: false,
color: 'primary',
column: 'col-md-12',
column: 'col-md-3',
isRequired: false
},
{
Expand All @@ -229,7 +225,7 @@ export const CONTROLS = [
latitude: '',
longitude: '',
style: 'outline',
column: 'col-md-12',
column: 'col-md-6',
value: '',
isRequired: false
},
Expand Down
1 change: 1 addition & 0 deletions src/components/form-builder/form-builder.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ <h2 class="asw-card-header text-center alert-info asw-alert-info">Drag and Drop
<asw-number [control]="control"
[controlIndex]="i"
[isPreviewTemplate]="true"
[formControls]="formContainer"
(numberUpdateEvent)="updatedControl($event)"
(numberDeleteEvent)="deleteControl($event)"
(aswModelChange)="onSelectionChange($event)"
Expand Down
3 changes: 0 additions & 3 deletions src/components/form-control/autocomplete/autocomplete-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,6 @@ <h4 mat-dialog-title>Edit autocomplete property</h4>
{{validation.message}}
</mat-error>
</mat-error>
<mat-error>
{{optionKeyMessage}}
</mat-error>
</mat-form-field>
</div>
<div class="col-md-5">
Expand Down
1 change: 0 additions & 1 deletion src/components/form-control/autocomplete/autocomplete-dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { AutoCompleteControl } from './autocomplete-control';
export class AswAutocompleteDialog implements OnInit {
constants: any = Constants;
aswEditAutocompleteForm: FormGroup;
optionKeyMessage!: string;
status!: boolean;
constructor(
private formBuilder: FormBuilder,
Expand Down
9 changes: 9 additions & 0 deletions src/components/form-control/calculation/calculation-control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,13 @@ export interface CalculationControl extends StyleControl {
value: string;
column?: string;
placeholder: string;
operations: Operation[];
}

export interface Operation {
id: string;
label: string;
value: number;
operationValue: string;
control: any;
}
67 changes: 34 additions & 33 deletions src/components/form-control/calculation/calculation-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,55 +75,56 @@ <h4 mat-dialog-title>Edit Property</h4>
</mat-form-field>
</div>
</div>
<ng-container formArrayName="operators">
<ng-container formArrayName="operations">
<div class="row"
*ngFor="let operator of operators.controls; let index = index; let last=last;"
*ngFor="let op of operations.controls; let index = index; let last=last;"
[formGroupName]="index">
<div class="col-md-4">
<div class="col-md-4" *ngIf="index!=0">
<mat-form-field appearance="outline" class="asw-mat-form-field">
<mat-label>Operator {{index+1}}</mat-label>
<mat-select formControlName="value" matTooltip="Select column size">
<mat-option *ngFor="let control of data.numberControls" [value]="control.value">
{{control.label}}
<mat-label>Operation {{index+1}}</mat-label>
<mat-select formControlName="operationValue" matTooltip="Select column size">
<mat-option *ngFor="let operation of constants.operations" [value]="operation.value">
{{operation.label}}
</mat-option>
</mat-select>
<mat-error class="asw-mat-error" *ngFor="let validation of constants.accountValidationMessages.operationValue">
<mat-error class="asw-mat-error" *ngIf="operations.controls[index].get('operationValue')?.hasError(validation.type) && (operations.controls[index].get('operationValue')?.dirty || operations.controls[index].get('operationValue')?.touched)">
{{validation.message}}
</mat-error>
</mat-error>
</mat-form-field>
</div>
<!-- <div class="col-md-5">
<div class="col-md-4">
<mat-form-field appearance="outline" class="asw-mat-form-field">
<mat-label>Option value {{index+1}}</mat-label>
<input matInput type="text"
placeholder="Option value"
formControlName="value"
matTooltip="Option value"
minlength="1"
maxlength="999"
required>
<mat-error class="asw-mat-error" *ngFor="let validation of constants.accountValidationMessages.value">
<mat-error class="asw-mat-error" *ngIf="options.controls[index].get('value')?.hasError(validation.type) && (options.controls[index].get('value')?.dirty || options.controls[index].get('value')?.touched)">
{{validation.message}}
</mat-error>
<mat-label>Operator {{index+1}}</mat-label>
<mat-select formControlName="control" matTooltip="Select column size">
<mat-option *ngFor="let control of data.numberControls" [value]="control">
{{control.label}}
</mat-option>
</mat-select>
<mat-error class="asw-mat-error" *ngFor="let validation of constants.accountValidationMessages.control">
<mat-error class="asw-mat-error" *ngIf="operations.controls[index].get('control')?.hasError(validation.type) && (operations.controls[index].get('control')?.dirty || operations.controls[index].get('control')?.touched)">
{{validation.message}}
</mat-error>
</mat-error>
</mat-form-field>
</div>
<div class="col-md-2">
<button mat-raised-button *ngIf="last"
<button mat-icon-button *ngIf="last"
type="button"
matTooltip="Add option"
[matTooltipPosition]="'above'"
(click)="addNewOption()"
class="asw-btn btn btn-sm btn-just-icon btn-outline-success mr-2 mt-3 me-2">
<i class="material-icons asw-material-icon">add_circle_outline</i>
matTooltip="Add"
[matTooltipPosition]="'below'"
(click)="addNewOperation()">
<mat-icon>add</mat-icon>
</button>
<button mat-raised-button *ngIf="index != 0"
<button mat-icon-button *ngIf="index != 0"
type="button"
matTooltip="Remove option"
[matTooltipPosition]="'above'"
(click)="removeOption(index)"
class="asw-btn btn btn-sm btn-just-icon btn-outline-danger mb-1 mt-3">
<i class="material-icons asw-material-icon">remove_circle_outline</i>
matTooltip="Delete"
[matTooltipPosition]="'below'"
(click)="removeOperation(index)">
<mat-icon>delete</mat-icon>
</button>
</div> -->
</div>
</div>
</ng-container>
</div>
Expand Down
Loading

0 comments on commit a2aeadd

Please sign in to comment.