From 2b8ee4c7a5e16998ea49b0f3b015503fee7e5e6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Colomb?= <src@andre.colomb.de>
Date: Sun, 1 Dec 2024 13:30:05 +0100
Subject: [PATCH] chore(gui): cache input type in each advanced settings
 category (#9802)

Each section in the advanced settings dialog has similar code to insert
repeated input fields for each option. But only the first section (GUI
options) was adjusted in #9743 to avoid calling the `inputTypeFor()`
function repeatedly.

Apply the same caching to a locally scoped variable for each ng-repeat
entry by defining it in an ng-init directive.
---
 .../settings/advancedSettingsModalView.html   | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/gui/default/syncthing/settings/advancedSettingsModalView.html b/gui/default/syncthing/settings/advancedSettingsModalView.html
index ae92c0150..074a35fb2 100644
--- a/gui/default/syncthing/settings/advancedSettingsModalView.html
+++ b/gui/default/syncthing/settings/advancedSettingsModalView.html
@@ -34,11 +34,11 @@
         <div id="optionsConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="optionsHeading">
           <div class="panel-body less-padding">
             <form class="form-horizontal" role="form">
-              <div ng-repeat="(key, value) in advancedConfig.options" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
+              <div ng-repeat="(key, value) in advancedConfig.options" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                 <label for="optionsInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-options.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
                 <div class="col-sm-8">
-                  <input ng-if="inputTypeFor(key, value) == 'list'" id="optionsInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.options[key]" ng-list />
-                  <input ng-if="inputTypeFor(key, value) != 'list'" id="optionsInput{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="advancedConfig.options[key]" />
+                  <input ng-if="type == 'list'" id="optionsInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.options[key]" ng-list />
+                  <input ng-if="type != 'list'" id="optionsInput{{$index}}" class="form-control" type="{{type}}" ng-model="advancedConfig.options[key]" />
                 </div>
               </div>
             </form>
@@ -53,11 +53,11 @@
         <div id="ldapConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ldapHeading">
           <div class="panel-body less-padding">
             <form class="form-horizontal" role="form">
-              <div ng-repeat="(key, value) in advancedConfig.ldap" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
+              <div ng-repeat="(key, value) in advancedConfig.ldap" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                 <label for="ldapInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-ldap.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
                 <div class="col-sm-8">
-                  <input ng-if="inputTypeFor(key, value) == 'list'" id="ldapInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.ldap[key]" ng-list />
-                  <input ng-if="inputTypeFor(key, value) != 'list'" id="ldapInput{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="advancedConfig.ldap[key]" />
+                  <input ng-if="type == 'list'" id="ldapInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.ldap[key]" ng-list />
+                  <input ng-if="type != 'list'" id="ldapInput{{$index}}" class="form-control" type="{{type}}" ng-model="advancedConfig.ldap[key]" />
                 </div>
               </div>
             </form>
@@ -83,11 +83,11 @@
               <div id="folder{{folderIndex}}Config" class="panel-collapse collapse" role="tabpanel" aria-labelledby="folder{{folderIndex}}Heading">
                 <div class="panel-body less-padding">
                   <form class="form-horizontal" role="form">
-                    <div ng-repeat="(key, value) in folder" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
+                    <div ng-repeat="(key, value) in folder" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                       <label for="folder{{folderIndex}}Input{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-folder.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
                       <div class="col-sm-8">
-                        <input ng-if="inputTypeFor(key, value) == 'list'" id="folder{{folderIndex}}Input{{$index}}" class="form-control" type="text" ng-model="folder[key]" ng-list />
-                        <input ng-if="inputTypeFor(key, value) != 'list'" id="folder{{folderIndex}}Input{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="folder[key]" />
+                        <input ng-if="type == 'list'" id="folder{{folderIndex}}Input{{$index}}" class="form-control" type="text" ng-model="folder[key]" ng-list />
+                        <input ng-if="type != 'list'" id="folder{{folderIndex}}Input{{$index}}" class="form-control" type="{{type}}" ng-model="folder[key]" />
                       </div>
                     </div>
                   </form>
@@ -113,11 +113,11 @@
               <div id="device{{deviceIndex}}Config" class="panel-collapse collapse" role="tabpanel" aria-labelledby="device{{deviceIndex}}Heading">
                 <div class="panel-body less-padding">
                   <form class="form-horizontal" role="form">
-                    <div ng-repeat="(key, value) in device" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
+                    <div ng-repeat="(key, value) in device" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                       <label for="device{{deviceIndex}}Input{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-device.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
                       <div class="col-sm-8">
-                        <input ng-if="inputTypeFor(key, value) == 'list'" id="device{{deviceIndex}}Input{{$index}}" class="form-control" type="text" ng-model="device[key]" ng-list />
-                        <input ng-if="inputTypeFor(key, value) != 'list'" id="device{{deviceIndex}}Input{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="device[key]" />
+                        <input ng-if="type == 'list'" id="device{{deviceIndex}}Input{{$index}}" class="form-control" type="text" ng-model="device[key]" ng-list />
+                        <input ng-if="type != 'list'" id="device{{deviceIndex}}Input{{$index}}" class="form-control" type="{{type}}" ng-model="device[key]" />
                       </div>
                     </div>
                   </form>
@@ -141,11 +141,11 @@
               </div>
               <div id="advancedDefaultFolder" class="panel-collapse collapse" role="tabpanel" aria-labelledby="advancedDefaultFolderHeading">
                 <form class="form-horizontal" role="form">
-                  <div ng-repeat="(key, value) in advancedConfig.defaults.folder" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
+                  <div ng-repeat="(key, value) in advancedConfig.defaults.folder" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                     <label for="advancedDefaultFolderInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-folder.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
                     <div class="col-sm-8">
-                      <input ng-if="inputTypeFor(key, value) == 'list'" id="advancedDefaultFolderInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.folder[key]" ng-list />
-                      <input ng-if="inputTypeFor(key, value) != 'list'" id="advancedDefaultFolderInput{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="advancedConfig.defaults.folder[key]" />
+                      <input ng-if="type == 'list'" id="advancedDefaultFolderInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.folder[key]" ng-list />
+                      <input ng-if="type != 'list'" id="advancedDefaultFolderInput{{$index}}" class="form-control" type="{{type}}" ng-model="advancedConfig.defaults.folder[key]" />
                     </div>
                   </div>
                 </form>
@@ -157,11 +157,11 @@
               </div>
               <div id="advancedDefaultDevice" class="panel-collapse collapse" role="tabpanel" aria-labelledby="advancedDefaultDeviceHeading">
                 <form class="form-horizontal" role="form">
-                  <div ng-repeat="(key, value) in advancedConfig.defaults.device" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
+                  <div ng-repeat="(key, value) in advancedConfig.defaults.device" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                     <label for="advancedDefaultDeviceInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-device.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
                     <div class="col-sm-8">
-                      <input ng-if="inputTypeFor(key, value) == 'list'" id="advancedDefaultDeviceInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.device[key]" ng-list />
-                      <input ng-if="inputTypeFor(key, value) != 'list'" id="advancedDefaultDeviceInput{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="advancedConfig.defaults.device[key]" />
+                      <input ng-if="type == 'list'" id="advancedDefaultDeviceInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.device[key]" ng-list />
+                      <input ng-if="type != 'list'" id="advancedDefaultDeviceInput{{$index}}" class="form-control" type="{{type}}" ng-model="advancedConfig.defaults.device[key]" />
                     </div>
                   </div>
                 </form>
@@ -173,14 +173,14 @@
               </div>
               <div id="advancedDefaultIgnores" class="panel-collapse collapse" role="tabpanel" aria-labelledby="advancedDefaultIgnoresHeading">
                 <form class="form-horizontal" role="form">
-                  <div ng-repeat="(key, value) in advancedConfig.defaults.ignores" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
+                  <div ng-repeat="(key, value) in advancedConfig.defaults.ignores" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                     <label for="advancedDefaultIgnoresInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-defaults.ignores.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
                     <div class="col-sm-8">
                       <div ng-switch="key">
                         <!-- Special case to preserve empty lines in multi-line input -->
                         <textarea ng-switch-when="lines" id="advancedDefaultIgnoresInput{{$index}}" class="form-control" rows="5" ng-model="advancedConfig.defaults.ignores._lines" ng-model-options="{ getterSetter: true }"></textarea>
-                        <input ng-switch-default ng-if="inputTypeFor(key, value) == 'list'" id="advancedDefaultIgnoresInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.ignores[key]" ng-list />
-                        <input ng-switch-default ng-if="inputTypeFor(key, value) != 'list'" id="advancedDefaultIgnoresInput{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="advancedConfig.defaults.ignores[key]" />
+                        <input ng-switch-default ng-if="type == 'list'" id="advancedDefaultIgnoresInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.ignores[key]" ng-list />
+                        <input ng-switch-default ng-if="type != 'list'" id="advancedDefaultIgnoresInput{{$index}}" class="form-control" type="{{type}}" ng-model="advancedConfig.defaults.ignores[key]" />
                       </div>
                     </div>
                   </div>