chore:🌻 add placeholder for nested array

NsdHSO · Sep 19, 2023 · e8d7264 · e8d7264
1 parent b7407f6
commit e8d7264
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 55 deletions.
diff --git a/ftx-ftm/src/lib/ftx-ftm/ftx-ftm.component.html b/ftx-ftm/src/lib/ftx-ftm/ftx-ftm.component.html
@@ -7,6 +7,7 @@
   <ng-container
     *ngFor="let control of formData.controls | keyvalue; let i = index"
   >
+    <!--FormControl-->
     <ng-container
       *ngIf="
         generateFormBuilderService.getCustomFromControlType(
@@ -33,7 +34,7 @@
         </div>
       </div>
     </ng-container>
-
+    <!--FormGroup-->
     <ng-container
       *ngIf="
         generateFormBuilderService.getCustomFromControlType(
@@ -78,11 +79,78 @@
         </div>
       </div>
     </ng-container>
-    <!--		<sivan-input-->
-    <!--			[mainControl]="formData?.get(control.key)"-->
-    <!--			[hintTop]="'TEST'"-->
-    <!--			[placeholder]="'Placeholder'"-->
-    <!--		></sivan-input>-->
+
+    <ng-container
+      *ngIf="
+        generateFormBuilderService.getCustomFromControlType(
+          formData.get(control.key)
+        ) === 'FormArray'
+      "
+    >
+      <div class="flex items-center">
+        <div class="max-w-42 w-32">{{ control.key }}</div>
+        <div class="grid grid-flow-col gap-4 ftm-group-container-entity">
+          <ng-container
+            *ngFor="let array of formData.get(control.key).controls | keyvalue"
+          >
+            <ng-container
+              *ngIf="
+                generateFormBuilderService.getCustomFromControlType(
+                  formData.get(control.key).get(array.key)
+                ) === 'FormControl'
+              "
+            >
+              <div @fadeInOut class="w-full">
+                <sivan-input
+                  [mainControl]="formData.get(control.key).get(array.key)"
+                  [placeholder]="'d'"
+                  [hintTop]="'s'"
+                />
+              </div>
+            </ng-container>
+            <ng-container
+              *ngIf="
+                generateFormBuilderService.getCustomFromControlType(
+                  formData.get(control.key).get(array.key)
+                ) === 'FormArray'
+              "
+            >
+              <ng-container
+                *ngFor="
+                  let nestedArray of formData.get(control.key).get(array.key)
+                    .controls | keyvalue
+                "
+              >
+                <sivan-input
+                  [mainControl]="
+                    formData
+                      .get(control.key)
+                      .get(array.key)
+                      .get(nestedArray.key)
+                  "
+                  [placeholder]="
+                    dataSource
+                      | retrievePlaceholder
+                        : 'placeholder'
+                        : array.key
+                        : control.key
+                        : nestedArray.key
+                  "
+                  [hintTop]="
+                    dataSource
+                      | retrievePlaceholder
+                        : 'labelHint'
+                        : array.key
+                        : control.key
+                        : nestedArray.key
+                  "
+                />
+              </ng-container>
+            </ng-container>
+          </ng-container>
+        </div>
+      </div>
+    </ng-container>
   </ng-container>
   <ngx-button-component
     class="bg-white p-2"

diff --git a/ftx-ftm/src/lib/ftx-ftm/ftx-ftm.component.ts b/ftx-ftm/src/lib/ftx-ftm/ftx-ftm.component.ts
@@ -107,4 +107,8 @@ export class FtxFtmComponent {
 
     this.formData;
   }
+
+  public name(param: any) {
+    console.log(param);
+  }
 }
diff --git a/ftx-ftm/src/lib/ftx-ftm/util/pipes/retrieve-placeholder.pipe.ts b/ftx-ftm/src/lib/ftx-ftm/util/pipes/retrieve-placeholder.pipe.ts
@@ -15,17 +15,25 @@ export class RetrievePlaceholderPipe implements PipeTransform {
           }
           return v;
         });
-
-        return (
-          group.values.find((v: DataFormBuilder) => {
-            if (v.label !== undefined) {
-              return v.label.toLowerCase() === args[1];
-            }
-            return v;
-          })[args[0] as string] || group[args[0] as string]
-        );
+        if (group.values) {
+          return (
+            group.values.find((v: DataFormBuilder) => {
+              if (v.label !== undefined) {
+                return v.label.toLowerCase() === args[1];
+              }
+              return v;
+            })[args[0] as string] || group[args[0] as string]
+          );
+        }
+        if (group.bulkValues) {
+          return (
+            group.bulkValues[args[1] as string].bulkValues[args[3] as string][
+              args[0] as string
+            ] || 'Nothing'
+          );
+        }
       }
-      const key = value.values.find((v: DataFormBuilder) => {
+      const key = value.values?.find((v: DataFormBuilder) => {
         if (v.label) {
           return v.label.toLowerCase() === (args[1] as string).toLowerCase();
         }

diff --git a/ftx-sivan-shared/src/lib/components/input/sivan-input.component.html b/ftx-sivan-shared/src/lib/components/input/sivan-input.component.html
@@ -91,7 +91,7 @@
 <div
   @fadeInOut
   *ngIf="mainControl?.errors"
-  class="text-red-500 text-sm bg-slate-200 dark:bg-white"
+  class="text-red-500 text-sm bg-slate-200 dark:bg-inherit"
 >
   {{ mainControl.errors?.['error']  }}
 </div>

diff --git a/src/app/components/contentSteps/infoUser/info-user.component.ts b/src/app/components/contentSteps/infoUser/info-user.component.ts
@@ -201,11 +201,15 @@ export class InfoUserComponent {
                 errorMsg: 'Only' + ' char',
               },
             ],
+            // TODO: inner validator
+            //            validator: {
+            //              field: 'ds6',
+            //            },
           },
           {
-            label: 'ds3',
+            label: 'ds6',
             value: 'gasd',
-            labelHint: 'Personal TEst',
+            placeholder: 'Personal TEst',
             validators: [
               { type: TypeConstantEnum.REQUIRED },
               {
@@ -218,6 +222,7 @@ export class InfoUserComponent {
           {
             label: 'ds25',
             value: 'TssEST',
+            placeholder: 'Personal TEst25',
             labelHint: 'Personal TEst',
             validators: [
               { type: TypeConstantEnum.REQUIRED },
@@ -310,6 +315,7 @@ export class InfoUserComponent {
                 value: 1231,
                 validators: [{ type: TypeConstantEnum.REQUIRED }],
                 labelHint: 'Childrens',
+                placeholder: 'Avram Avramescu',
               },
               {
                 label: 'train',
@@ -319,49 +325,20 @@ export class InfoUserComponent {
               },
             ],
           },
+
           {
-            label: 'Barto',
-            bulkValues: [
-              {
-                value: null,
-                labelHint: 'barot Childrens',
-              },
-              {
-                label: 'barot Childrens train',
-                value: 23222,
-                placeholder: ' barot NAMING',
-                labelHint: 'Number',
-              },
-            ],
-          },
-          {
-            label: 'Barto2',
-            bulkValues: [
-              {
-                value: null,
-                labelHint: 'barot Childrens',
-              },
-              {
-                label: 'barot Childrens train',
-                value: 23222,
-                placeholder: ' barot NAMING',
-                labelHint: 'Number',
-              },
-            ],
-          },
-          {
-            label: 'Bartos',
+            label: 'Ivan2',
             bulkValues: [
               {
                 value: null,
-                labelHint: 'barot Childrens',
+                validators: [{ type: TypeConstantEnum.REQUIRED }],
+                labelHint: 'Childrens',
               },
               {
-                label: 'barot Childrens train',
-                value: 23222,
-                placeholder: ' barot NAMING',
+                label: 'train',
+                value: 232,
+                placeholder: 'NAMING',
                 labelHint: 'Number',
-                validators: [{ type: TypeConstantEnum.REQUIRED }],
               },
             ],
           },