From 77df2ed4ce3a4da1f0d942b64e30b2d32b6f2301 Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Sun, 3 Nov 2024 17:57:48 +0200
Subject: [PATCH] array field add ref

---
 .../res/templates/modals/array-field-add.tpl  | 31 ++++++++++---------
 client/src/views/fields/array.js              |  6 +++-
 client/src/views/modals/array-field-add.js    | 18 +++++++++--
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/client/res/templates/modals/array-field-add.tpl b/client/res/templates/modals/array-field-add.tpl
index 814c501a4a..bcbcc19021 100644
--- a/client/res/templates/modals/array-field-add.tpl
+++ b/client/res/templates/modals/array-field-add.tpl
@@ -1,8 +1,8 @@
-{{#unless optionList}}
+{{#unless optionDataList}}
     {{translate 'No Data'}}
 {{/unless}}
 
-{{#if optionList}}
+{{#if optionDataList}}
     <div class="margin-bottom-2x margin-top">
         <input
             type="text"
@@ -14,18 +14,21 @@
         >
     </div>
     <ul class="list-group list-group-panel array-add-list-group no-side-margin">
-    {{#each optionList}}
-        <li class="list-group-item clearfix" data-name="{{./this}}">
-            <input
-                class="cell form-checkbox form-checkbox-small"
-                type="checkbox"
-                data-value="{{./this}}"
-            >
-            <a role="button" tabindex="0" class="add text-bold" data-value="{{./this}}">
-                {{#if ../translatedOptions}}{{prop ../translatedOptions this}}{{else}}{{./this}}{{/if}}
-            </a>
-        </li>
-    {{/each}}
+        {{#each optionDataList}}
+            <li class="list-group-item clearfix" data-name="{{value}}">
+                <input
+                    class="cell form-checkbox form-checkbox-small"
+                    type="checkbox"
+                    data-value="{{value}}"
+                >
+                <a
+                    role="button"
+                    tabindex="0"
+                    class="add text-bold"
+                    data-value="{{value}}"
+                >{{label}}</a>
+            </li>
+        {{/each}}
     </ul>
 {{/if}}
 
diff --git a/client/src/views/fields/array.js b/client/src/views/fields/array.js
index 01ebe1188b..8425bfae5a 100644
--- a/client/src/views/fields/array.js
+++ b/client/src/views/fields/array.js
@@ -870,8 +870,12 @@ class ArrayFieldView extends BaseFieldView {
         };
     }
 
+    /**
+     * @protected
+     * @return {Promise<import('views/modals/array-field-add').default>}
+     */
     actionAddItem() {
-        this.createView('addModal', this.addItemModalView, this.getAddItemModalOptions(), view => {
+        return this.createView('dialog', this.addItemModalView, this.getAddItemModalOptions(), view => {
             view.render();
 
             view.once('add', item => {
diff --git a/client/src/views/modals/array-field-add.js b/client/src/views/modals/array-field-add.js
index db1d1d6acd..421245cfdb 100644
--- a/client/src/views/modals/array-field-add.js
+++ b/client/src/views/modals/array-field-add.js
@@ -37,8 +37,7 @@ class ArrayFieldAddModalView extends ModalView {
 
     data() {
         return {
-            optionList: this.optionList,
-            translatedOptions: this.translations,
+            optionDataList: this.getOptionDataList(),
         };
     }
 
@@ -76,7 +75,11 @@ class ArrayFieldAddModalView extends ModalView {
     setup() {
         this.headerText = this.translate('Add Item');
         this.checkedList = [];
+
+        /** @type {Object.<string, string>} */
         this.translations = Espo.Utils.clone(this.options.translatedOptions || {});
+
+        /** @type {string[]} */
         this.optionList = this.options.options || [];
 
         this.optionList.forEach(item => {
@@ -112,6 +115,17 @@ class ArrayFieldAddModalView extends ModalView {
         }, 100);
     }
 
+    /**
+     * @protected
+     * @return {{value: string, label: string}[]}
+     */
+    getOptionDataList() {
+        return this.optionList.map(value => ({
+            value: value,
+            label: (value in this.translations) ? this.translations[value] : value,
+        }));
+    }
+
     processQuickSearch(text) {
         text = text.trim();