From c43c0f92cfded82bd97b8bd35a614e60089c0746 Mon Sep 17 00:00:00 2001
From: maurofmferrao <maurofmferrao@gmail.com>
Date: Fri, 24 Jan 2025 13:37:48 +0000
Subject: [PATCH] Synchronised Event layout select fix relates to
 xibosignageltd/xibo-private#914

 - also esLint fixes
---
 ui/src/core/xibo-calendar.js                  | 48 +++++++++++++------
 .../calendar/sync-event-content-selector.hbs  |  6 +--
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/ui/src/core/xibo-calendar.js b/ui/src/core/xibo-calendar.js
index 9dca2c98b5..25151b01b7 100644
--- a/ui/src/core/xibo-calendar.js
+++ b/ui/src/core/xibo-calendar.js
@@ -931,7 +931,8 @@ $(function() {
   }
 });
 
-// Function to update the Condition dropdown according to the selected metric's available condition
+// Function to update the Condition dropdown
+// according to the selected metric's available condition
 function updateConditionField($row, conditions, selectedCondition) {
   const $conditionField = $row.find('select[name="criteria_condition[]"]');
 
@@ -942,17 +943,22 @@ function updateConditionField($row, conditions, selectedCondition) {
     // Populate with provided conditions
     conditions.forEach((condition) => {
       $conditionField.append(
-          $('<option>', { value: condition.id }).text(condition.name)
+        $('<option>', {value: condition.id}).text(condition.name),
       );
     });
 
-    // Pre-select the condition if provided, otherwise select the first condition
+    // Pre-select the condition if provided
+    // otherwise select the first condition
     $conditionField.val(selectedCondition || conditions[0]?.id || '');
   }
 }
 
 // Function to revert the Condition dropdown to its default selection
-function updateConditionFieldToDefault($row, defaultConditions, selectedCondition) {
+function updateConditionFieldToDefault(
+  $row,
+  defaultConditions,
+  selectedCondition,
+) {
   const $conditionField = $row.find('select[name="criteria_condition[]"]');
 
   if ($conditionField.length > 0 && defaultConditions) {
@@ -962,11 +968,12 @@ function updateConditionFieldToDefault($row, defaultConditions, selectedConditio
     // Populate with default conditions
     defaultConditions.forEach((condition) => {
       $conditionField.append(
-          $('<option>', { value: condition.id }).text(condition.name)
+        $('<option>', {value: condition.id}).text(condition.name),
       );
     });
 
-    // Pre-select the condition if provided, otherwise select the first condition
+    // Pre-select the condition if provided
+    // otherwise select the first condition
     $conditionField.val(selectedCondition || defaultConditions[0]?.id || '');
   }
 }
@@ -2226,7 +2233,13 @@ const setupSelectForSchedule = function(dialog) {
 
           dialog.find('#contentSelectorTable tbody')
             .html('').append(
-              templates.calendar.syncEventContentSelector(response.data),
+              templates.calendar.syncEventContentSelector({
+                ...response.data,
+                ...{
+                  urlForLayoutSearch: urlForLayoutSearch,
+                  trans: translations.schedule.syncEventSelector,
+                },
+              }),
             );
           const formId = dialog.find('form').attr('id');
           dialog.find('.pagedSelect select.form-control.syncContentSelect')
@@ -2251,10 +2264,10 @@ const setupSelectForSchedule = function(dialog) {
 
             dialog
               .find('.pagedSelect select.form-control.syncContentSelect')
-              .not('#layout_' + leadDisplayId)
-              .each(function() {
-                $(ev.currentTarget).data().initialValue = leadLayoutId;
-                makePagedSelect($(ev.currentTarget), '#' + formId);
+              .not('#layoutId_' + leadDisplayId)
+              .each(function(_idx, el) {
+                $(el).data().initialValue = leadLayoutId;
+                makePagedSelect($(el), '#' + formId);
               });
           });
         }, (xhr) => {
@@ -2294,7 +2307,7 @@ const configureCriteriaFields = function(dialog) {
     typeId,
     selectedMetric,
     elementValue,
-    selectedCondition
+    selectedCondition,
   ) {
     const $metricLabel = $row.find('label[for="criteria_metric[]"]');
     let $metricSelect;
@@ -2343,8 +2356,13 @@ const configureCriteriaFields = function(dialog) {
             updateConditionField($row, metric.conditions, selectedCondition);
           } else {
             // Use default conditions if none are defined
-            const criteriaDefaultCondition = $('#scheduleCriteriaFields').data('criteriaDefaultCondition');
-            updateConditionFieldToDefault($row, criteriaDefaultCondition, selectedCondition);
+            const criteriaDefaultCondition =
+              $('#scheduleCriteriaFields').data('criteriaDefaultCondition');
+            updateConditionFieldToDefault(
+              $row,
+              criteriaDefaultCondition,
+              selectedCondition,
+            );
           }
         }
       }
@@ -2413,7 +2431,7 @@ const configureCriteriaFields = function(dialog) {
         element.type,
         element.metric,
         element.value,
-        element.condition
+        element.condition,
       );
     });
   } else {
diff --git a/ui/src/templates/calendar/sync-event-content-selector.hbs b/ui/src/templates/calendar/sync-event-content-selector.hbs
index 2d14f9255d..d45e478ed2 100644
--- a/ui/src/templates/calendar/sync-event-content-selector.hbs
+++ b/ui/src/templates/calendar/sync-event-content-selector.hbs
@@ -4,7 +4,7 @@
         <td>{{display}}</td>
         <td>
             <div class="form-group pagedSelect">
-                <select class="form-control syncContentSelect single-select" name="layoutId_{{displayId}}" id="layoutId_{{displayId}}" data-search-url="{{urlForLayoutSearch}}"
+                <select class="form-control syncContentSelect single-select" name="layoutId_{{displayId}}" id="layoutId_{{displayId}}" data-search-url="{{../urlForLayoutSearch}}"
                 data-search-term="layout" data-width="100%" data-id-property="layoutId" data-text-property="layout" data-anchor-element="#contentSelectorTable"
                 data-initial-key="layoutId" data-initial-value="{{layoutId}}" data-display-id="{{displayId}}" data-lead-display-id="{{leadDisplayId}}">
                 <option></option>
@@ -12,8 +12,8 @@
             </div>
         {{#eq displayId leadDisplayId}}
         <button data-display-id="{{displayId}}" id="setMirrorContent" type="button" class="btn btn-success d-none"
-            title="{{trans.setOnAllDisplays}}">
-            {{trans.mirror}}
+            title="{{../trans.setOnAllDisplays}}">
+            {{../trans.mirror}}
         </button>
         {{/eq}}
         <input name="displayGroupIds[]" type="hidden" id="displayGroupIds[]" value="{{displayGroupId}}">