Skip to content

Commit a2aeadd

Browse files
asoftwareworldasoftwareworld
authored
Merge pull request #36 from asoftwareworld/feature/4.0.2
Feature/4.0.2
2 parents bf31736 + a102a02 commit a2aeadd

19 files changed

+196
-109
lines changed

‎README.md

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -116,39 +116,52 @@ If you are not using the Angular CLI, you can include a theme via a `<link>` ele
116116
In your template, use the component selector:
117117
```
118118
<asw-form-builder [uploadData]="jsonData1"
119-
[isShowPreviewButton]="isShowPreviewButton"
120-
[isShowJsonDataButton]="isShowJsonDataButton"
121-
[isShowPublishButton]="isShowPublishButton"
122-
(publishClick)="saveJsonData($event)"
123-
(previewClick)="previewTemplate($event)"></asw-form-builder>
119+
[isShowPreviewButton]="isShowPreviewButton"
120+
[isShowJsonDataButton]="isShowJsonDataButton"
121+
[isShowPublishButton]="isShowPublishButton"
122+
(publishClick)="saveJsonData($event)"
123+
(previewClick)="previewTemplate($event)"
124+
(buttonClick)="buttonClick($event)"
125+
(aswModelChange)="onSelectionChange($event)"></asw-form-builder>
124126
```
125127
Preview Template, use the component selector in your HTML page:
126128
```
127-
<asw-preview-template [formContainer]="jsonData"></asw-preview-template>
129+
<asw-preview-template [formContainer]="jsonData"
130+
(buttonClick)="buttonClick($event)"
131+
(aswModelChange)="onSelectionChange($event)">
132+
</asw-preview-template>
128133
```
129134

130135
Define in your component to get published event :
131136

132137
```
133138
export class AppComponent {
134-
title = 'ASW Form Builder Demo';
135-
jsonData: any[] = [];
136-
jsonData1: any[] = [];
137-
isShowPreviewButton = false;
138-
isShowJsonDataButton = true;
139-
isShowPublishButton = false;
140-
141-
// Publish Template
142-
saveJsonData(data: any){
143-
//....
144-
console.log(data);
145-
// do something
146-
}
147-
148-
//Preview Template
149-
previewTemplate(data: any){
150-
this.jsonData = data;
151-
}
139+
title = 'ASW Form Builder Demo';
140+
jsonData: any[] = [];
141+
jsonData1: any[] = [];
142+
isShowPreviewButton = false;
143+
isShowJsonDataButton = true;
144+
isShowPublishButton = false;
145+
146+
// Publish Template
147+
saveJsonData(data: any){
148+
//....
149+
console.log(data);
150+
// do something
151+
}
152+
153+
//Preview Template
154+
previewTemplate(data: any){
155+
this.jsonData = data;
156+
}
157+
158+
buttonClick(data: any): void {
159+
console.log(data);
160+
}
161+
162+
onSelectionChange(control: any): void {
163+
console.log(control);
164+
}
152165
}
153166
```
154167
## Theme
@@ -161,7 +174,7 @@ and Bootstrap [more information](https://getbootstrap.com/docs/4.0/getting-start
161174
| Header | Headings are defined with the `<h1> to <h6>` tags. Used as a title of the post, template and resume, etc. |
162175
| Image Upload | Upload image with crop, zoom in, zoom out, reset, rotate, swap etc. features. |
163176
| Autocomplete | The autocomplete is a normal text input enhanced by a panel of suggested relevant options as the user types. |
164-
| Textbox | Enable native inputs to be used within a form field. The styles such as the underline, floating label. |
177+
| Text field | Enable native inputs to be used within a form field. The styles such as the underline, floating label. |
165178
| Text area | Enable native inputs to be used within a form field. The styles such as the underline, floating label. |
166179
| Datepicker | The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. |
167180
| Select | Allows the user to select only one option using dropdown. |
@@ -174,6 +187,9 @@ and Bootstrap [more information](https://getbootstrap.com/docs/4.0/getting-start
174187
| Slide toggle | Is an on/off control that can be toggled via clicking and draggable switch. |
175188
| Grid | Configure bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. |
176189
| 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.|
190+
| 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.|
191+
| Signature | This control allow for digital signature and display the result. (Uses canvas & fabric.js).|
192+
| Image Drawing | This control allow to draw on Image and display the result. (Uses canvas & fabric.js).|
177193

178194

179195
## Browser Support

‎src/components/form-builder/default-controls.ts

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const CONTROLS = [
3636
controlType: 'autocomplete',
3737
tooltip: 'Select one',
3838
label: 'Autocomplete',
39-
column: 'col-md-12',
39+
column: 'col-md-6',
4040
style: 'outline',
4141
isRequired: false,
4242
options: [
@@ -54,7 +54,7 @@ export const CONTROLS = [
5454
value: '',
5555
label: 'Text Field',
5656
style: 'outline',
57-
column: 'col-md-12',
57+
column: 'col-md-6',
5858
isRequired: false,
5959
maxlength: 50,
6060
minlength: 0
@@ -68,7 +68,7 @@ export const CONTROLS = [
6868
value: '',
6969
label: 'Text Area',
7070
style: 'outline',
71-
column: 'col-md-12',
71+
column: 'col-md-6',
7272
isRequired: false,
7373
maxlength: 50,
7474
minlength: 0
@@ -82,7 +82,7 @@ export const CONTROLS = [
8282
value: '',
8383
label: 'Number',
8484
style: 'outline',
85-
column: 'col-md-12',
85+
column: 'col-md-6',
8686
isRequired: false,
8787
maxlength: 50,
8888
minlength: 0
@@ -96,12 +96,8 @@ export const CONTROLS = [
9696
label: 'Calculation',
9797
placeholder: 'Field 1 + Field 2 = ',
9898
style: 'outline',
99-
column: 'col-md-12',
100-
operators: [
101-
{ label: '', value: '' },
102-
{ label: '', value: '' },
103-
{ label: '', value: '' },
104-
]
99+
column: 'col-md-6',
100+
operations: []
105101
},
106102
{
107103
id: '1',
@@ -112,7 +108,7 @@ export const CONTROLS = [
112108
tooltip: 'Choose a date',
113109
label: 'Date Picker',
114110
style: 'outline',
115-
column: 'col-md-12',
111+
column: 'col-md-6',
116112
isRequired: false,
117113
isWeekendsDisable: false
118114
},
@@ -124,7 +120,7 @@ export const CONTROLS = [
124120
tooltip: 'Select option',
125121
label: 'Select',
126122
style: 'outline',
127-
column: 'col-md-12',
123+
column: 'col-md-6',
128124
value: '',
129125
isRequired: false,
130126
options: [
@@ -140,7 +136,7 @@ export const CONTROLS = [
140136
controlType: 'multi-select',
141137
tooltip: 'Select options',
142138
label: 'Multi Select',
143-
column: 'col-md-12',
139+
column: 'col-md-6',
144140
value: '',
145141
style: 'outline',
146142
isRequired: false,
@@ -158,7 +154,7 @@ export const CONTROLS = [
158154
tooltip: 'radio',
159155
label: 'Radio',
160156
value: 'option-1',
161-
column: 'col-md-12',
157+
column: 'col-md-6',
162158
isRequired: false,
163159
options: [
164160
{ key: 'option-1', value: 'Option 1', isChecked: false },
@@ -173,7 +169,7 @@ export const CONTROLS = [
173169
controlType: 'checkbox',
174170
tooltip: 'checkbox',
175171
label: 'Checkbox',
176-
column: 'col-md-12',
172+
column: 'col-md-6',
177173
isRequired: false,
178174
options: [
179175
{ key: 'option-1', value: 'Option 1', isChecked: false },
@@ -189,7 +185,7 @@ export const CONTROLS = [
189185
tooltip: 'Click button',
190186
label: 'Submit',
191187
type: 'button',
192-
column: 'col-md-12',
188+
column: 'col-md-3',
193189
color: 'primary',
194190
style: 'mat-raised-button'
195191
},
@@ -216,7 +212,7 @@ export const CONTROLS = [
216212
label: 'Slide me!',
217213
value: false,
218214
color: 'primary',
219-
column: 'col-md-12',
215+
column: 'col-md-3',
220216
isRequired: false
221217
},
222218
{
@@ -229,7 +225,7 @@ export const CONTROLS = [
229225
latitude: '',
230226
longitude: '',
231227
style: 'outline',
232-
column: 'col-md-12',
228+
column: 'col-md-6',
233229
value: '',
234230
isRequired: false
235231
},

‎src/components/form-builder/form-builder.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ <h2 class="asw-card-header text-center alert-info asw-alert-info">Drag and Drop
108108
<asw-number [control]="control"
109109
[controlIndex]="i"
110110
[isPreviewTemplate]="true"
111+
[formControls]="formContainer"
111112
(numberUpdateEvent)="updatedControl($event)"
112113
(numberDeleteEvent)="deleteControl($event)"
113114
(aswModelChange)="onSelectionChange($event)"

‎src/components/form-control/autocomplete/autocomplete-dialog.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,6 @@ <h4 mat-dialog-title>Edit autocomplete property</h4>
107107
{{validation.message}}
108108
</mat-error>
109109
</mat-error>
110-
<mat-error>
111-
{{optionKeyMessage}}
112-
</mat-error>
113110
</mat-form-field>
114111
</div>
115112
<div class="col-md-5">

‎src/components/form-control/autocomplete/autocomplete-dialog.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { AutoCompleteControl } from './autocomplete-control';
2020
export class AswAutocompleteDialog implements OnInit {
2121
constants: any = Constants;
2222
aswEditAutocompleteForm: FormGroup;
23-
optionKeyMessage!: string;
2423
status!: boolean;
2524
constructor(
2625
private formBuilder: FormBuilder,

‎src/components/form-control/calculation/calculation-control.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,13 @@ export interface CalculationControl extends StyleControl {
1515
value: string;
1616
column?: string;
1717
placeholder: string;
18+
operations: Operation[];
19+
}
20+
21+
export interface Operation {
22+
id: string;
23+
label: string;
24+
value: number;
25+
operationValue: string;
26+
control: any;
1827
}

‎src/components/form-control/calculation/calculation-dialog.html

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -75,55 +75,56 @@ <h4 mat-dialog-title>Edit Property</h4>
7575
</mat-form-field>
7676
</div>
7777
</div>
78-
<ng-container formArrayName="operators">
78+
<ng-container formArrayName="operations">
7979
<div class="row"
80-
*ngFor="let operator of operators.controls; let index = index; let last=last;"
80+
*ngFor="let op of operations.controls; let index = index; let last=last;"
8181
[formGroupName]="index">
82-
<div class="col-md-4">
82+
<div class="col-md-4" *ngIf="index!=0">
8383
<mat-form-field appearance="outline" class="asw-mat-form-field">
84-
<mat-label>Operator {{index+1}}</mat-label>
85-
<mat-select formControlName="value" matTooltip="Select column size">
86-
<mat-option *ngFor="let control of data.numberControls" [value]="control.value">
87-
{{control.label}}
84+
<mat-label>Operation {{index+1}}</mat-label>
85+
<mat-select formControlName="operationValue" matTooltip="Select column size">
86+
<mat-option *ngFor="let operation of constants.operations" [value]="operation.value">
87+
{{operation.label}}
8888
</mat-option>
8989
</mat-select>
90+
<mat-error class="asw-mat-error" *ngFor="let validation of constants.accountValidationMessages.operationValue">
91+
<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)">
92+
{{validation.message}}
93+
</mat-error>
94+
</mat-error>
9095
</mat-form-field>
9196
</div>
92-
<!-- <div class="col-md-5">
97+
<div class="col-md-4">
9398
<mat-form-field appearance="outline" class="asw-mat-form-field">
94-
<mat-label>Option value {{index+1}}</mat-label>
95-
<input matInput type="text"
96-
placeholder="Option value"
97-
formControlName="value"
98-
matTooltip="Option value"
99-
minlength="1"
100-
maxlength="999"
101-
required>
102-
<mat-error class="asw-mat-error" *ngFor="let validation of constants.accountValidationMessages.value">
103-
<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)">
104-
{{validation.message}}
105-
</mat-error>
99+
<mat-label>Operator {{index+1}}</mat-label>
100+
<mat-select formControlName="control" matTooltip="Select column size">
101+
<mat-option *ngFor="let control of data.numberControls" [value]="control">
102+
{{control.label}}
103+
</mat-option>
104+
</mat-select>
105+
<mat-error class="asw-mat-error" *ngFor="let validation of constants.accountValidationMessages.control">
106+
<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)">
107+
{{validation.message}}
106108
</mat-error>
109+
</mat-error>
107110
</mat-form-field>
108111
</div>
109112
<div class="col-md-2">
110-
<button mat-raised-button *ngIf="last"
113+
<button mat-icon-button *ngIf="last"
111114
type="button"
112-
matTooltip="Add option"
113-
[matTooltipPosition]="'above'"
114-
(click)="addNewOption()"
115-
class="asw-btn btn btn-sm btn-just-icon btn-outline-success mr-2 mt-3 me-2">
116-
<i class="material-icons asw-material-icon">add_circle_outline</i>
115+
matTooltip="Add"
116+
[matTooltipPosition]="'below'"
117+
(click)="addNewOperation()">
118+
<mat-icon>add</mat-icon>
117119
</button>
118-
<button mat-raised-button *ngIf="index != 0"
120+
<button mat-icon-button *ngIf="index != 0"
119121
type="button"
120-
matTooltip="Remove option"
121-
[matTooltipPosition]="'above'"
122-
(click)="removeOption(index)"
123-
class="asw-btn btn btn-sm btn-just-icon btn-outline-danger mb-1 mt-3">
124-
<i class="material-icons asw-material-icon">remove_circle_outline</i>
122+
matTooltip="Delete"
123+
[matTooltipPosition]="'below'"
124+
(click)="removeOperation(index)">
125+
<mat-icon>delete</mat-icon>
125126
</button>
126-
</div> -->
127+
</div>
127128
</div>
128129
</ng-container>
129130
</div>

0 commit comments

Comments
 (0)