added more demo cases

heinerwalter · Jun 3, 2024 · 38d90a5 · 38d90a5
1 parent 5bdee13
commit 38d90a5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/projects/demo/src/app/components/all-inputs-demo/all-inputs-demo.component.html b/projects/demo/src/app/components/all-inputs-demo/all-inputs-demo.component.html
@@ -215,6 +215,15 @@ <h4>Groups</h4>
   </pe-array-form-group>
 </demo-input-demo-wrapper>
 
+<demo-input-demo-wrapper [value]="values.arrayInitiallyEmpty">
+  <pe-array-form-group label="Initially empty array with custom input elements (text input)"
+                       infoIconTooltip='Component: <pe-array-form-group> + <pe-text-input>'
+                       [(value)]="values.arrayInitiallyEmpty"
+                       [itemTemplate]="arrayFormGroupTemplate"
+                       (valueChange)="onInputValueChange('initially empty array', $event)">
+  </pe-array-form-group>
+</demo-input-demo-wrapper>
+
 <ng-template #arrayFormGroupTemplate let-value="value" let-onValueChange="onValueChange" let-index="index">
   <pe-text-input [value]="value"
                  (valueChange)="onValueChange($event)">
@@ -271,6 +280,16 @@ <h4>Groups</h4>
   </pe-array-form-group>
 </demo-input-demo-wrapper>
 
+<demo-input-demo-wrapper [value]="values.arrayWithInputGroupInitiallyEmpty">
+  <pe-array-form-group label="Initially empty array with input group"
+                       infoIconTooltip='Components: <pe-array-form-group> + <pe-input-group>'
+                       [(value)]="values.arrayWithInputGroupInitiallyEmpty"
+                       [itemTemplate]="arrayFormGroupWithInputGroupTemplate"
+                       [newItemFunction]="arrayWithInputGroupNewItemFunction"
+                       (valueChange)="onInputValueChange('initially empty array with input group', $event)">
+  </pe-array-form-group>
+</demo-input-demo-wrapper>
+
 <ng-template #arrayFormGroupWithInputGroupTemplate let-value="value" let-onValueChange="onValueChange"
              let-index="index">
   <pe-input-group orientation="horizontal">

diff --git a/projects/demo/src/app/components/all-inputs-demo/all-inputs-demo.component.ts b/projects/demo/src/app/components/all-inputs-demo/all-inputs-demo.component.ts
@@ -53,11 +53,17 @@ export class AllInputsDemoComponent {
     rating: 0 as number | undefined,
     ratingCustom: 0 as number | undefined,
     array: ['Line 1', 'Line 2', 'Not line 3'] as any[],
+    arrayInitiallyEmpty: undefined as unknown as any[],
     arrayWithInputGroup: [{ name: 'Max', number: 5 }, { name: 'Moritz', number: 3, country: 'Germany' }] as {
       name: string | undefined,
       number: number | undefined,
       country: string | undefined,
     }[],
+    arrayWithInputGroupInitiallyEmpty: undefined as unknown as {
+      name: string | undefined,
+      number: number | undefined,
+      country: string | undefined,
+    }[],
     inputGroup: {
       street: undefined as string | undefined,
       number: undefined as number | undefined,

diff --git a/projects/demo/src/app/model/contact.ts b/projects/demo/src/app/model/contact.ts
@@ -1,4 +1,4 @@
-import { PropertiesConfiguration, PropertyConfiguration } from 'ngx-property-editor';
+import { PropertiesConfiguration, PropertyConfiguration, PropertyEditorMode } from 'ngx-property-editor';
 import { Address } from './address';
 
 type FriendType = {
@@ -170,6 +170,16 @@ export class Contact {
         isArray: true,
         newArrayItemFunction: () => ({ name: undefined, type: undefined }),
         editable: true,
+        hideIfEmpty: true,
+        hidden: (data: Contact, mode: PropertyEditorMode) => {
+          switch (mode) {
+            case 'view':
+            case 'edit':
+              return false;
+            case 'table':
+              return true;
+          }
+        },
         group: [[
           new PropertyConfiguration({
             propertyName: 'name',