From e53daebfc9ff72cdc3a62561b4a6d3bac915929f Mon Sep 17 00:00:00 2001
From: Harris Tzovanakis <me@drjova.com>
Date: Thu, 6 Jan 2022 17:51:36 +0100
Subject: [PATCH] complex list addition of adding an element in a given
 position

---
 .../complex-list-field.component.html         | 10 ++++++-
 .../complex-list-field.component.scss         |  8 ++++--
 .../complex-list-field.component.ts           | 27 ++++++++++++++++++-
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/complex-list-field/complex-list-field.component.html b/src/complex-list-field/complex-list-field.component.html
index bc1e9ac0..cab1ff12 100644
--- a/src/complex-list-field/complex-list-field.component.html
+++ b/src/complex-list-field/complex-list-field.component.html
@@ -45,8 +45,16 @@
   </div>
   <div [ngClass]="redLeftBorderClass">
     <!-- Elements -->
-    <div *ngFor="let item of paginatedItems; trackBy:trackByElement">
+    <div *ngFor="let item of paginatedItems; index as i; trackBy:trackByElement">
+
       <div class="complex-list-field-wrapper">
+
+        <div class="add-new-element">
+          <a href="javascript:void(0)" (click)="onAddNewElementAtPosition(i)">
+            Add new element here
+          </a>
+        </div>
+
         <span *ngIf="shouldDisplayViewTemplate && values.get(item.index).keySeq().size != 0">
           <ng-template [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{item: values.get(item.index)}"></ng-template>
           <a href="javascript:void(0)" (click)="item.editFormDisplayedByUser = !shouldDisplayEditableFieldsForItem(item)">
diff --git a/src/complex-list-field/complex-list-field.component.scss b/src/complex-list-field/complex-list-field.component.scss
index 0398f41e..4cd9fa83 100644
--- a/src/complex-list-field/complex-list-field.component.scss
+++ b/src/complex-list-field/complex-list-field.component.scss
@@ -13,7 +13,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 15px;
-  background-color: white; 
+  background-color: white;
   box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
 }
 
@@ -32,7 +32,7 @@
 
 .find-button {
   color: darkslategray;
-  
+
   .fa-search {
     opacity: 0.83;
   }
@@ -49,3 +49,7 @@
 label.btn {
   color: white !important;
 }
+
+.add-new-element {
+  text-align: right;
+}
diff --git a/src/complex-list-field/complex-list-field.component.ts b/src/complex-list-field/complex-list-field.component.ts
index cdebeef2..3b963ef9 100644
--- a/src/complex-list-field/complex-list-field.component.ts
+++ b/src/complex-list-field/complex-list-field.component.ts
@@ -33,16 +33,20 @@ import {
 import { List, Map, Set, Iterable } from 'immutable';
 
 import { AbstractListFieldComponent } from '../abstract-list-field';
+
 import {
   AppGlobalsService,
   JsonStoreService,
   DomUtilService,
   PathUtilService,
   ListPageChangerService,
-  ProblemsService
+  ProblemsService,
+  EmptyValueService,
 } from '../shared/services';
 import { LongListNavigatorConfig, JSONSchema, PaginatedItem } from '../shared/interfaces';
 
+
+
 @Component({
   selector: 'complex-list-field',
   styleUrls: [
@@ -74,6 +78,7 @@ export class ComplexListFieldComponent extends AbstractListFieldComponent implem
     public domUtilService: DomUtilService,
     public pathUtilService: PathUtilService,
     public changeDetectorRef: ChangeDetectorRef,
+    public emptyValueService: EmptyValueService,
     public listPageChangerService: ListPageChangerService) {
     super(appGlobalsService, problemsService, jsonStoreService, pathUtilService, changeDetectorRef);
   }
@@ -156,6 +161,26 @@ export class ComplexListFieldComponent extends AbstractListFieldComponent implem
     }
   }
 
+  onAddNewElementAtPosition(index: number) {
+    const itemSchema = this.schema.items;
+    const emptyValue = this.emptyValueService.generateEmptyValue(itemSchema);
+    const values: List<any> = this.jsonStoreService.getIn(this.path);
+
+    let insertIndex;
+    if (this.navigator) {
+      insertIndex = index + (this.navigator.itemsPerPage * (this.currentPage - 1));
+    } else {
+      insertIndex = index;
+    }
+    const insertPath = this.path.concat(insertIndex);
+    this.jsonStoreService.addIn(insertPath, emptyValue);
+    // focus on the new added element
+    const insertPathString = this.pathUtilService.toPathString(insertPath);
+    setTimeout(() => {
+      this.domUtilService.focusAndSelectFirstEditableChildById(insertPathString);
+    });
+  }
+
   onFindInputKeypress(key: string) {
     if (key === 'Enter') {
       this.onFindClick();