Scp dynamic form suma

angular.json

@@ -202,6 +202,6 @@
     }
   },
   "cli": {
-    "analytics": false
+    "analytics": "93200aa4-1367-4de5-9e11-8ceb1188617f"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-library",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/dynamic-form/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@elevate/dynamic-form",
-  "version": "0.0.1",
+  "name": "dynamic-form-suma",
+  "version": "0.0.24",
   "peerDependencies": {
     "@angular/common": "^17.3.4",
     "@angular/core": "^17.3.4",

projects/dynamic-form/src/lib/components/add-resource/add-resource.component.css

@@ -1,4 +1,59 @@
 .container{
     width: 50%;
     height: 50%;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .5rem 1rem;
+    background-color:  #0a4f9d;
+    color: white;
+}
+.dialog-container {
+    width: 500px;
+    height: auto;
+}
+.footer {
+    display: flex;
+    justify-content: end;
+    padding: 1rem;
+}
+.cancel-btn {
+    margin-right: 1rem;
+}
+.form-container {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem 2rem;
+}
+.button-container {
+    margin-top: 1rem;
+    margin-left: 2rem;
+    margin-bottom: 2rem;
+}
+
+.error-message{
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    font-size: 0.75rem;
+    padding: 0.125rem 0;
+}
+
+.error-icon{
+    padding-right:  1.125rem;
+    font-size: 1rem;
+    width: 1.25rem;
+    height: auto;
+}
+
+.error-container {
+    display: flex;
+    height: 2.000rem;
+}
+
+.main-container{
+    max-height: 18.75rem;
+    overflow-y: auto;
 }

projects/dynamic-form/src/lib/components/add-resource/add-resource.component.html

@@ -1,34 +1,52 @@
-<div [formGroup]="myGroup" class="flex flex-col w-[500px] h-[500px] border border-gray-300 rounded-lg">
-    <header class="h-12">
-      <div class="flex items-center justify-between px-4 h-full">
-        <h3 class="text-white">{{dialogData.control.header}}</h3>
-        <mat-icon class="cursor-pointer text-white" [mat-dialog-close]="false">close</mat-icon>
+<form [formGroup]="myGroup" class="dialog-container">
+  <header>
+    <div class="header">
+      <h3 class="text-white">{{dialogData.control.header | languageTranslate: language}}</h3>
+      <mat-icon class="cursor-pointer text-white" [mat-dialog-close]="false">close</mat-icon>
+    </div>
+  </header>
+  <main formArrayName="resources" class="flex-grow p-4 main-container">
+    <div *ngFor="let resourceGroup of resources.controls; let i = index" [formGroupName]="i" class="form-container">
+      <div *ngFor="let control of dialogData.control.resource[i]" class="w-[45%]">
+        <mat-form-field floatLabel="always" class="w-full" appearance="outline">
+          <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
+          <input
+            matInput
+            [placeholder]="control?.placeHolder | languageTranslate: language"
+            [type]="control?.type"
+            [formControlName]="control?.name"
+            [maxlength]="control?.validators.maxLength"
+            [required]="control?.validators?.required"
+            [pattern]="control?.validators?.pattern"
+            [value]="control?.value"
+          />
+        </mat-form-field>
+        <mat-error class="error-container" *ngIf="control?.errorMessage" >
+          <div *ngIf="resourceGroup.get(control.name)?.touched && resourceGroup.get(control.name)?.invalid">
+            <div class="error-message" *ngIf="control?.errorMessage[((resourceGroup.get(control.name)?.errors | keyvalue) || [])[0].key ]; else genericErrorMessage ">
+              <mat-icon class="error-icon" matPrefix>error_outline</mat-icon>
+              {{ control?.errorMessage[ ((resourceGroup.get(control.name)?.errors | keyvalue) || [])[0].key ] | languageTranslate: language}}
+            </div>
+            <ng-template #genericErrorMessage>
+              <div class="error-message">
+                <mat-icon class="error-icon" matPrefix>error_outline</mat-icon>
+                Enter {{ control?.label}}
+              </div>
+            </ng-template>
+          </div>
+        </mat-error>
       </div>
-    </header>
-    <main formArrayName="resources" class="flex-grow overflow-auto p-4">
-      <div *ngFor="let resourceGroup of resources.controls; let i = index" [formGroupName]="i" class="flex flex-wrap gap-4 justify-center">
-        <div *ngFor="let control of dialogData.control.resource[i]" class="w-[45%]">
-          <mat-form-field floatLabel="always" class="w-full">
-            <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
-            <input
-              matInput
-              [placeholder]="control?.placeHolder"
-              [type]="control?.type"
-              [formControlName]="control?.name"
-              [required]="control?.validators?.required"
-            />
-          </mat-form-field>
-        </div>
-      </div>
-      <div  (click)="onClickAddResource()">
-          <button [disabled]="myGroup.invalid" mat-raised-button>
-            <mat-icon class="cursor-pointer">add_circle</mat-icon>
-            <p> {{dialogData.control?.addButton}}</p>
-          </button>
-      </div>
-    </main>
-    <footer class="h-12 border-t flex items-center justify-between px-4">
-      <button mat-raised-button [mat-dialog-close]="false">{{dialogData.control.cancelButton}}</button>
-      <button [disabled]="myGroup.invalid" mat-raised-button [mat-dialog-close]="true" cdkFocusInitial (click)="confirmButton()">{{dialogData.control.confirmButton}}</button>
-    </footer>
-  </div>
+    </div>
+    <div  class="button-container">
+        <button (click)="onClickAddResource()" [disabled]="myGroup.invalid" mat-raised-button>
+          <mat-icon class="cursor-pointer">add_circle</mat-icon>
+          <p> {{dialogData.control?.addButton | languageTranslate: language}}</p>
+        </button>
+    </div>
+  </main>
+  <hr>
+  <section class="footer">
+    <button mat-raised-button [mat-dialog-close]="false" class="cancel-btn">{{dialogData.control.cancelButton | languageTranslate: language}}</button>
+    <button [disabled]="myGroup.invalid" color="primary" mat-raised-button [mat-dialog-close]="true" cdkFocusInitial (click)="confirmButton()">{{dialogData.control.confirmButton | languageTranslate: language}}</button>
+  </section>
+</form>

projects/dynamic-form/src/lib/components/add-resource/add-resource.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Inject, Input, Output } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { FormGroup, FormControl, FormArray } from '@angular/forms';
+import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
 
 @Component({
   selector: 'lib-add-resource',
@@ -12,42 +12,78 @@ export class AddResourceComponent {
   myGroup: FormGroup;
   @Output() saveLearningResource = new EventEmitter<any>();
   values:any = []
-
-  constructor(public dialogRef: MatDialogRef<AddResourceComponent>, @Inject(MAT_DIALOG_DATA) public dialogData: any) { 
+  language:any
+
+  constructor(public dialogRef: MatDialogRef<AddResourceComponent>, @Inject(MAT_DIALOG_DATA) public dialogData: any) {
     this.myGroup = new FormGroup({
       resources: new FormArray([])
     });
     // Optionally, initialize with one resource
     this.addResource();
+    this.language = this.dialogData.language
    }
-  
+
    get resources() {
     return this.myGroup.get('resources') as FormArray;
   }
-  
+
   addResource() {
     let formControls: { [key: string]: any } = {};
-    for(let control of this.dialogData.control.resource[0]){
-      formControls[control.name] = new FormControl('');
+    for (let control of this.dialogData.control.resource[0]) {
+      let validators = [];
+      for (const [key, value] of Object.entries(control.validators)) {
+        switch (key) {
+          case 'min':
+            validators.push(Validators.min(value as number));
+            break;
+          case 'max':
+            validators.push(Validators.max(value as number));
+            break;
+          case 'required':
+            if (value) {
+              validators.push(Validators.required);
+            }
+            break;
+          case 'requiredTrue':
+            if (value) {
+              validators.push(Validators.requiredTrue);
+            }
+            break;
+          case 'maxLength':
+            validators.push(Validators.maxLength(value as number));
+            break;
+          case 'pattern':
+            validators.push(Validators.pattern(value as string));
+            break;
+          case 'nullValidator':
+            if (value) {
+              validators.push(Validators.nullValidator);
+            }
+            break;
+          default:
+            break;
+        }
+      }
+      // Add more validators here if needed
+      formControls[control.name] = new FormControl('', validators);
     }
     const resourceGroup = new FormGroup(formControls);
     this.resources.push(resourceGroup);
   }
-  
+
    onClickAddResource(){
     this.addResource()
     let data =  this.dialogData.control.resource[0]
     this.dialogData.control.resource.push(data)
-
    }
-  
+
    confirmButton(){
     this.saveLearningResource.emit(this. getValues())
    }
-  
+
    getValues() {
     if(this.myGroup.valid){
-      return this.myGroup?.value?.resources 
+      return this.myGroup?.value?.resources
     }
   }
 

projects/dynamic-form/src/lib/components/chip-input/chip-input.component.css

@@ -3,4 +3,11 @@
     flex-direction: row;
     flex: 1;
     flex-wrap: wrap;
+}
+
+.add-chips{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.3125rem;
 }

projects/dynamic-form/src/lib/components/chip-input/chip-input.component.html

@@ -25,13 +25,13 @@
       (click)="addOption()"
       style="cursor: pointer"
     >
-      <mat-icon>add_circle</mat-icon> Add
+      <span class="add-chips"><mat-icon>add_circle</mat-icon> Add</span>
     </mat-chip>
   </div>
   <mat-slide-toggle
     *ngIf="chipControl?.meta?.showSelectAll"
     [(ngModel)]="enableSelectAll"
-    (change)="toggleSelectAll()"
+    (change)="toggleSelectAll($event)"
     color="primary"
   ></mat-slide-toggle>
 </mat-chip-listbox>

projects/dynamic-form/src/lib/components/chip-input/chip-input.component.ts

@@ -16,6 +16,7 @@ import { DialogInputComponent } from '../dialog-input/dialog-input.component';
   ],
 })
 export class ChipInputComponent implements OnInit, ControlValueAccessor {
+  @Input() viewOnly = false;
   @Input() chipControl: any;
   selectedChips: any;
   enableSelectAll: boolean = false;
@@ -83,6 +84,7 @@ export class ChipInputComponent implements OnInit, ControlValueAccessor {
       data: {
         header: this.chipControl.meta.addNewPopupHeader,
         label: this.chipControl.meta.addNewPopupSubHeader,
+        placeHolder:this.chipControl.meta.placeHolder,
         required: true,
         maxLength: 20,
         buttonText: {
@@ -105,20 +107,25 @@ export class ChipInputComponent implements OnInit, ControlValueAccessor {
     });
   }
 
-  toggleSelectAll() {
-    this.markAsTouched();
-    if (this.enableSelectAll) {
-      this.chipControl.options.map((chipItem: any) => {
-        this.selectedChips.add(chipItem);
-      });
-    } else {
-      this.selectedChips.clear();
-    }
-
-    if (this.selectedChips.size) {
-      this.onChange([...this.selectedChips]);
-    } else {
-      this.onChange([]);
+  toggleSelectAll(event:any) {
+    if(this.viewOnly){
+      event.source.checked = !event.checked;
+    }else{
+      this.markAsTouched();
+      if (this.enableSelectAll) {
+        this.chipControl.options.map((chipItem: any) => {
+          this.selectedChips.add(chipItem);
+        });
+      } else {
+        this.selectedChips.clear();
+      }
+
+      if (this.selectedChips.size) {
+        this.onChange([...this.selectedChips]);
+      } else {
+        this.onChange([]);
+      }
     }
+
   }
 }

projects/dynamic-form/src/lib/components/dialog-input/dialog-input.component.css

@@ -2,6 +2,8 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
+    padding: 0  0.625rem;
 }
 
 .buttons-section{

projects/dynamic-form/src/lib/components/dialog-input/dialog-input.component.html

@@ -1,17 +1,18 @@
 <div class="dialog-header">
-  <mat-label mat-dialog-title>{{ dialogData?.header }}</mat-label>
-  <mat-icon class="mat-cancel-icon" [mat-dialog-close]="false"
-    >cancel_circle_outline</mat-icon
-  >
+  <h2>{{ dialogData?.header }}</h2>
+  <mat-icon class="mat-cancel-icon" [mat-dialog-close]="false" style="cursor: pointer"
+    >cancel_circle_outline</mat-icon>
 </div>
+<hr>
 <div mat-dialog-content>
-  <mat-form-field style="width: 100%" floatLabel="always">
+  <mat-form-field style="width: 100%" floatLabel="always" appearance="outline">
     <mat-label>{{ dialogData?.label }}</mat-label>
     <input
       matInput
       [(ngModel)]="data"
       [required]="dialogData?.required"
       [maxlength]="dialogData?.maxLength"
+      [placeholder]="dialogData?.placeHolder"
     />
   </mat-form-field>
 </div>