resolve conflict: improve ui

client/res/templates/modals/resolve-save-conflict.tpl

@@ -1,34 +0,0 @@
-<div class="margin-bottom-3x">
-    <p>{{translate 'resolveSaveConflict' category='messages'}}</p>
-</div>
-
-<table class="table" style="table-layout: fixed;">
-    <thead>
-        <tr>
-            <th style="width: 25%">{{translate 'Field'}}</th>
-            <th style="width: 25%">{{translate 'Resolution'}}</th>
-            <th>{{translate 'Value'}}</th>
-        </tr>
-    </thead>
-    <tbody>
-    {{#each dataList}}
-        <tr>
-            <td class="cell cell-nowrap">
-                <span>
-                    {{translate field category='fields' scope=../entityType}}
-                </span>
-            </td>
-            <td class="cell">
-                <select class="form-control" data-name="resolution" data-field="{{field}}">
-                    {{options ../resolutionList resolution field='saveConflictResolution'}}
-                </select>
-            </td>
-            <td class="cell">
-                <div data-name="field" data-field="{{field}}">
-                    {{{var viewKey ../this}}}
-                </div>
-            </td>
-        </tr>
-    {{/each}}
-    </tbody>
-</table>

client/src/views/modals/resolve-save-conflict.js

@@ -27,10 +27,49 @@
  ************************************************************************/
 
 import ModalView from 'views/modal';
+import Select from 'ui/select';
 
 class ResolveSaveConflictModalView extends ModalView {
 
-    template = 'modals/resolve-save-conflict'
+    // language=Handlebars
+    templateContent = `
+        <div class="margin-bottom-3x">
+            <p>{{translate 'resolveSaveConflict' category='messages'}}</p>
+        </div>
+
+        <div class="panel panel-default no-side-margin">
+            <table class="table" style="table-layout: fixed;">
+                <thead>
+                <tr>
+                    <th style="width: 25%">{{translate 'Field'}}</th>
+                    <th style="width: 25%">{{translate 'Resolution'}}</th>
+                    <th>{{translate 'Value'}}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {{#each dataList}}
+                    <tr>
+                        <td class="cell cell-nowrap">
+                    <span>
+                        {{translate field category='fields' scope=../entityType}}
+                    </span>
+                        </td>
+                        <td class="cell">
+                            <select class="form-control" data-name="resolution" data-field="{{field}}">
+                                {{options ../resolutionList resolution field='saveConflictResolution'}}
+                            </select>
+                        </td>
+                        <td class="cell">
+                            <div data-name="field" data-field="{{field}}">
+                                {{{var viewKey ../this}}}
+                            </div>
+                        </td>
+                    </tr>
+                {{/each}}
+                </tbody>
+            </table>
+        </div>
+    `
 
     backdrop = true
 
@@ -42,6 +81,12 @@ class ResolveSaveConflictModalView extends ModalView {
 
     defaultResolution = 'current'
 
+    /**
+     * @private
+     * @type {string[]}
+     */
+    fieldList
+
     data() {
         const dataList = [];
 
@@ -153,7 +198,7 @@ class ResolveSaveConflictModalView extends ModalView {
             readOnly: true,
             model: this.model,
             name: field,
-            selector: '[data-name="field"][data-field="' + field + '"]',
+            selector: `[data-name="field"][data-field="${field}"]`,
             mode: 'list',
         });
     }
@@ -167,6 +212,12 @@ class ResolveSaveConflictModalView extends ModalView {
 
             this.setResolution(field, resolution);
         });
+
+        this.fieldList.forEach(field => {
+            const selectElement = this.element.querySelector(`select[data-field="${field}"]`);
+
+            Select.init(selectElement);
+        });
     }
 
     // noinspection JSUnusedGlobalSymbols