From da96f2ea7d0f1c99d93d2b11f456af73d63e2e67 Mon Sep 17 00:00:00 2001 From: Arun Jadhav Date: Tue, 24 Sep 2024 13:02:13 +0530 Subject: [PATCH] Feat:New changes --- .../veriable-form.component.html | 77 ++++++++++--------- .../veriable-form.component.sass | 71 +++++++++++++++++ .../veriable-form/veriable-form.component.ts | 66 ++++++++-------- 3 files changed, 146 insertions(+), 68 deletions(-) diff --git a/src/app/pages/veriable-form/veriable-form.component.html b/src/app/pages/veriable-form/veriable-form.component.html index 0fc5143..0f28556 100644 --- a/src/app/pages/veriable-form/veriable-form.component.html +++ b/src/app/pages/veriable-form/veriable-form.component.html @@ -1,46 +1,49 @@
-
-
-
-
- -
-
-
- -
- -
- -
-

Variable Calculation: {{ calculateVariable(i) }}

+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
- -
- -
-
- - -
+ + + +
-
-
- -
-
+
+ + + - -
+ +
+
\ No newline at end of file diff --git a/src/app/pages/veriable-form/veriable-form.component.sass b/src/app/pages/veriable-form/veriable-form.component.sass index e69de29..9559e06 100644 --- a/src/app/pages/veriable-form/veriable-form.component.sass +++ b/src/app/pages/veriable-form/veriable-form.component.sass @@ -0,0 +1,71 @@ +// General form styles +form + max-width: 100% + margin: 20px auto + padding: 20px + border: 1px solid #ddd + border-radius: 5px + background-color: #f9f9f9 + + .form-row + display: flex + flex-direction: column + margin-bottom: 20px + padding: 10px + border: 1px solid #ccc + border-radius: 5px + background-color: #fff + + .form-column + display: flex + align-items: center + margin-bottom: 10px + + > * + margin-right: 10px + + select, input + padding: 8px + border-radius: 3px + border: 1px solid #ccc + width: 150px + + .row-buttons + margin-top: 10px + + .column-buttons + margin-left: auto // Push button to the right + + // Button styles + button + padding: 10px 15px + border: none + background-color: #007bff + color: white + border-radius: 5px + cursor: pointer + margin-right: 10px + + &:hover + background-color: #0056b3 + + &[type="submit"] + margin-top: 20px + background-color: #28a745 + + &:hover + background-color: #218838 + +// Media queries for responsiveness +@media (max-width: 768px) + .form-row + flex-direction: column + + .form-column + flex-direction: column + align-items: flex-start + + > * + margin-bottom: 10px + width: 100% + diff --git a/src/app/pages/veriable-form/veriable-form.component.ts b/src/app/pages/veriable-form/veriable-form.component.ts index 88e3ccc..486a447 100644 --- a/src/app/pages/veriable-form/veriable-form.component.ts +++ b/src/app/pages/veriable-form/veriable-form.component.ts @@ -7,57 +7,61 @@ import { FormArray, FormBuilder, FormGroup } from '@angular/forms'; styleUrls: ['./veriable-form.component.sass'] }) export class VeriableFormComponent implements OnInit { - formGroup: FormGroup; - variableList = ['Variable1', 'Variable2', 'Variable3']; // Example variable list + form: FormGroup; + + // Sample variable list for dropdown + variableList = ['Variable 1', 'Variable 2', 'Variable 3']; constructor(private fb: FormBuilder) { - this.formGroup = this.fb.group({ - items: this.fb.array([this.createItem()]) + this.form = this.fb.group({ + rows: this.fb.array([]) // Form array for multiple rows }); } ngOnInit(): void { - + // Initialize with one row + this.addRow(); } - get items() { - return this.formGroup.get('items') as FormArray; + get rows(): FormArray { + return this.form.get('rows') as FormArray; } - createItem(): FormGroup { - return this.fb.group({ - type: [''], - variable: [''], - text: [''] - }); + getColumns(row: any): FormArray { + return row.get('columns') as FormArray; } - addRow() { - this.items.push(this.createItem()); + isText(row: any, colIndex: number): boolean { + const columns = this.getColumns(row); + return columns.at(colIndex).get('type')?.value === 'text'; } - removeRow(index: number) { - this.items.removeAt(index); + isVariable(row: any, colIndex: number): boolean { + const columns = this.getColumns(row); + return columns.at(colIndex).get('type')?.value === 'variable'; } - onTypeChange(index: number) { - const type = this.items?.at(index)?.get('type')?.value; - if (type === 'variable') { - this.items?.at(index)?.get('text')?.setValue(''); - } else { - this.items?.at(index)?.get('variable')?.setValue(''); - } + createColumn(): FormGroup { + return this.fb.group({ + type: [''], // Type can be 'text' or 'variable' + textValue: [''], // For text input + variableValue: [''] // For variable select + }); } - calculateVariable(index: number): string { - const selectedVariable = this.items?.at(index)?.get('variable')?.value; - return `Calculated value for ${selectedVariable}`; + addColumn(rowIndex: number): void { + const row = this.rows.at(rowIndex).get('columns') as FormArray; + row.push(this.createColumn()); } - onSubmit() { - const formData = this.formGroup.value; - console.log(formData); - + addRow(): void { + const row = this.fb.group({ + columns: this.fb.array([this.createColumn()]) // Initialize with one column + }); + this.rows.push(row); } + onSubmit(): void { + console.log(this.form.value); + } }