UI improvement: Add option to select/deselect all filters in Log Viewer drop-down (#10815)

jakob-bagterp · nathanwoulfe · web-flow · commit 4dd3b81b1fc3 · 2021-08-17T14:22:58.000+10:00
* Update search.controller.js

Minor linting update to existing code

* Basic functionality for select and deselect all log level filters

* Fix button texts and added localisations for languages en, en_us, da

* Grammar correction of Danish localisation

* Finalise button styling using the umb-button directive, including localisation of labels

* Minor linting update

* Add various localisations of "select all" and "deselect all" for Log Viewer

* Minor refactor of select/deselect buttons to be wrapped in &lt;umb-dropdown-item&gt; directive

* use foreach/map

Co-authored-by: Nathan Woulfe &lt;nathan@nathanw.com.au&gt;
diff --git a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.controller.js b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.controller.js
@@ -24,7 +24,7 @@
             },
             {
                 name: 'Information',
-                logTypeColor: 'success' 
+                logTypeColor: 'success'
             },
             {
                 name: 'Warning',
@@ -44,7 +44,7 @@
             enabled: false,
             interval: 0,
             promise: null,
-            
+
             defaultButton: {
                 labelKey: "logViewer_polling",
                 handler: function() {
@@ -156,6 +156,8 @@
         vm.search = search;
         vm.getFilterName = getFilterName;
         vm.setLogLevelFilter = setLogLevelFilter;
+        vm.selectAllLogLevelFilters = selectAllLogLevelFilters;
+        vm.deselectAllLogLevelFilters = deselectAllLogLevelFilters;
         vm.toggleOrderBy = toggleOrderBy;
         vm.selectSearch = selectSearch;
         vm.resetSearch = resetSearch;
@@ -259,7 +261,7 @@
         }
 
         function setLogTypeColor(logItems) {
-            logItems.forEach(logItem => 
+            logItems.forEach(logItem =>
                 logItem.logTypeColor = vm.logLevels.find(x => x.name === logItem.Level).logTypeColor);
         }
 
@@ -295,6 +297,24 @@
             getLogs();
         }
 
+        function updateAllLogLevelFilterCheckboxes(bool) {
+            vm.logLevels.forEach(logLevel => logLevel.selected = bool);
+        }
+
+        function selectAllLogLevelFilters() {
+            vm.logOptions.logLevels = vm.logLevels.map(logLevel => logLevel.name);
+            updateAllLogLevelFilterCheckboxes(true);
+
+            getLogs();
+        }
+
+        function deselectAllLogLevelFilters() {
+            vm.logOptions.logLevels = [];
+            updateAllLogLevelFilterCheckboxes(false);
+
+            getLogs();
+        }
+
         function toggleOrderBy(){
             vm.logOptions.orderDirection = vm.logOptions.orderDirection === 'Descending' ? 'Ascending' : 'Descending';
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
@@ -48,6 +48,29 @@
                                             </label>
                                         </div>
                                     </umb-dropdown-item>
+
+                                    <!-- Select all log level filters -->
+                                    <umb-dropdown-item>
+                                        <umb-button action="vm.selectAllLogLevelFilters()"
+                                                    label="Select all"
+                                                    label-key="logViewer_selectAllLogLevelFilters"
+                                                    type="button"
+                                                    button-style="link"
+                                                    size="xs">
+                                        </umb-button>
+                                    </umb-dropdown-item>
+
+                                    <!-- Deselect all log level filters -->
+                                    <umb-dropdown-item>
+                                        <umb-button action="vm.deselectAllLogLevelFilters()"
+                                                    label="Deselect all"
+                                                    label-key="logViewer_deselectAllLogLevelFilters"
+                                                    type="button"
+                                                    button-style="link"
+                                                    size="xs">
+                                        </umb-button>
+                                    </umb-dropdown-item>
+
                                 </umb-dropdown>
                             </div>
 
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/cs.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/cs.xml
@@ -2195,6 +2195,8 @@
   </area>
   <area alias="logViewer">
       <key alias="logLevels">Úrovně logování</key>
+      <key alias="selectAllLogLevelFilters">Vybrat vše</key>
+      <key alias="deselectAllLogLevelFilters">Odznačit vše</key>
       <key alias="savedSearches">Uložená vyhledávání</key>
       <key alias="totalItems">Celkem položek</key>
       <key alias="timestamp">Časové razítko</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/cy.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/cy.xml
@@ -2544,6 +2544,8 @@ Er mwyn gweinyddu eich gwefan, agorwch swyddfa gefn Umbraco a dechreuwch ychwang
     <area alias="logViewer">
         <key alias="deleteSavedSearch">Dileu Chwiliad Cadwedig</key>
         <key alias="logLevels">Lefelau Log</key>
+        <key alias="selectAllLogLevelFilters">Dewiswch y cyfan</key>
+        <key alias="deselectAllLogLevelFilters">Dad-ddewiswch bawb</key>
         <key alias="savedSearches">Chwiliadau Cadwedig</key>
         <key alias="saveSearch">Arbed Chwiliad</key>
         <key alias="saveSearchDescription">Rhoi enw cyfeillgar am eich ymholiad chwilio</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1931,6 +1931,8 @@ Mange hilsner fra Umbraco robotten
   <area alias="logViewer">
     <key alias="deleteSavedSearch">Slet gemte søgning</key>
     <key alias="logLevels">Log type</key>
+    <key alias="selectAllLogLevelFilters">Vælg alle</key>
+    <key alias="deselectAllLogLevelFilters">Fravælg alle</key>
     <key alias="savedSearches">Gemte søgninger</key>
     <key alias="saveSearch">Gem søgning</key>
     <key alias="saveSearchDescription">Indtast et navn for din søgebetingelse</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/de.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/de.xml
@@ -2231,4 +2231,8 @@
     <key alias="openCloseBackofficeHelp">Back-Office Hilfe öffnen / schliessen</key>
     <key alias="openCloseBackofficeProfileOptions">Ihre Profil-Einstellungen öffnen / schliessen</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">Wählen Sie Alle</key>
+    <key alias="deselectAllLogLevelFilters">Alle abwählen</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2329,6 +2329,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
   <area alias="logViewer">
       <key alias="deleteSavedSearch">Delete Saved Search</key>
       <key alias="logLevels">Log Levels</key>
+      <key alias="selectAllLogLevelFilters">Select all</key>
+      <key alias="deselectAllLogLevelFilters">Deselect all</key>
       <key alias="savedSearches">Saved Searches</key>
       <key alias="saveSearch">Save Search</key>
       <key alias="saveSearchDescription">Enter a friendly name for your search query</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2348,6 +2348,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
   <area alias="logViewer">
       <key alias="deleteSavedSearch">Delete Saved Search</key>
       <key alias="logLevels">Log Levels</key>
+      <key alias="selectAllLogLevelFilters">Select all</key>
+      <key alias="deselectAllLogLevelFilters">Deselect all</key>
       <key alias="savedSearches">Saved Searches</key>
       <key alias="saveSearch">Save Search</key>
       <key alias="saveSearchDescription">Enter a friendly name for your search query</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/es.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/es.xml
@@ -1627,4 +1627,8 @@
   <area alias="textbox">
     <key alias="characters_left">caracteres restantes</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">Seleccionar todo</key>
+    <key alias="deselectAllLogLevelFilters">Deseleccionar todo</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml
@@ -2208,6 +2208,8 @@ Pour gérer votre site, ouvrez simplement le backoffice Umbraco et commencez à
   </area>
   <area alias="logViewer">
       <key alias="logLevels">Niveaux de Log</key>
+      <key alias="selectAllLogLevelFilters">Tout sélectionner</key>
+      <key alias="deselectAllLogLevelFilters">Tout déselectionner</key>
       <key alias="savedSearches">Recherches sauvegardées</key>
       <key alias="totalItems">Nombre total d'éléments</key>
       <key alias="timestamp">Date</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/he.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/he.xml
@@ -864,4 +864,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="userTypes">סוגי משתמש</key>
     <key alias="writer">כותב</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">בחר הכל</key>
+    <key alias="deselectAllLogLevelFilters">הסר סימון מהכל</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/it.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/it.xml
@@ -951,4 +951,8 @@ Per gestire il tuo sito web, è sufficiente aprire il backoffice di Umbraco e in
         <key alias="umbInfo">Info</key>
         <key alias="umbListView">Elementi</key>
     </area>
+    <area alias="logViewer">
+        <key alias="selectAllLogLevelFilters">Seleziona tutto</key>
+        <key alias="deselectAllLogLevelFilters">Deselezionare tutto</key>
+    </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/ja.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/ja.xml
@@ -1085,4 +1085,8 @@ Runwayをインストールして作られた新しいウェブサイトがど
     <key alias="enterCustomValidation">... またはカスタム検証を入力</key>
     <key alias="fieldIsMandatory">必須フィールドです</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">すべて選択</key>
+    <key alias="deselectAllLogLevelFilters">すべての選択を解除</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/ko.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/ko.xml
@@ -845,4 +845,8 @@
     <key alias="userTypes">사용자 타입</key>
     <key alias="writer">작성자</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">모두 선택</key>
+    <key alias="deselectAllLogLevelFilters">모두 선택 해제</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/nb.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/nb.xml
@@ -918,4 +918,8 @@ Vennlig hilsen Umbraco roboten
     <key alias="yourHistory" version="7.0">Din historikk</key>
     <key alias="sessionExpires" version="7.0">Sesjonen utløper om</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">Velg alle</key>
+    <key alias="deselectAllLogLevelFilters">Opphev alle</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/nl.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/nl.xml
@@ -2131,6 +2131,8 @@ Echter, Runway biedt een gemakkelijke basis om je snel op weg te helpen. Als je
   <area alias="logViewer">
     <key alias="deleteSavedSearch">Opgeslagen zoekopdracht verwijderen</key>
     <key alias="logLevels">Log Niveaus</key>
+    <key alias="selectAllLogLevelFilters">Selecteer alles</key>
+    <key alias="deselectAllLogLevelFilters">Deselecteer alles</key>
     <key alias="savedSearches">Opgeslagen Zoekopdrachten</key>
     <key alias="saveSearch">Zoekopdracht opslaan</key>
     <key alias="saveSearchDescription">Enter a friendly name for your search query</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/pl.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/pl.xml
@@ -1460,4 +1460,8 @@ Naciśnij przycisk <strong>instaluj</strong>, aby zainstalować bazę danych Umb
   <area alias="textbox">
     <key alias="characters_left">pozostało znaków</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">Zaznacz wszystko</key>
+    <key alias="deselectAllLogLevelFilters">Odznacz wszystkie</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/pt.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/pt.xml
@@ -835,4 +835,8 @@ Você pode publicar esta página e todas suas sub-páginas ao selecionar <em>pub
     <key alias="userTypes">Tipos de usuários</key>
     <key alias="writer">Escrevente</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">Selecionar tudo</key>
+    <key alias="deselectAllLogLevelFilters">Desmarcar todos</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/ru.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/ru.xml
@@ -1818,4 +1818,8 @@
     <key alias="invalidNumber">Не является числом</key>
     <key alias="invalidEmail">неверный формат email-адреса</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">Выбрать все</key>
+    <key alias="deselectAllLogLevelFilters">Убрать выделение со всего</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/sv.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/sv.xml
@@ -1008,4 +1008,8 @@
     <key alias="sortCreateDateDescending">Äldst</key>
     <key alias="sortLastLoginDateDescending">Senaste login</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">Välj alla</key>
+    <key alias="deselectAllLogLevelFilters">Avmarkera alla</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/tr.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/tr.xml
@@ -2357,6 +2357,8 @@ Web sitenizi yönetmek için, Umbraco'nun arka ofisini açın ve içerik eklemey
   <area alias="logViewer">
     <key alias="deleteSavedSearch">Kaydedilmiş Aramayı Sil</key>
     <key alias="logLevels">Günlük Düzeyleri</key>
+    <key alias="selectAllLogLevelFilters">Hepsini seç</key>
+    <key alias="deselectAllLogLevelFilters">Tüm seçimleri kaldır</key>
     <key alias="savedSearches">Kaydedilmiş Aramalar</key>
     <key alias="saveSearch">Aramayı Kaydet</key>
     <key alias="saveSearchDescription">Arama sorgunuz için kolay bir ad girin</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/zh.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/zh.xml
@@ -1239,4 +1239,8 @@
     <key alias="enabledConfirm">现在已启用 URL 跟踪程序。</key>
     <key alias="enableError">启用 URL 跟踪程序时出错, 可以在日志文件中找到更多信息。</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">全选</key>
+    <key alias="deselectAllLogLevelFilters">取消全选</key>
+  </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/zh_tw.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/zh_tw.xml
@@ -1219,4 +1219,8 @@
     <key alias="enabledConfirm">轉址追蹤器已開啟。</key>
     <key alias="enableError">啟動轉址追蹤器錯誤，更多資訊請參閱您的紀錄檔。</key>
   </area>
+  <area alias="logViewer">
+    <key alias="selectAllLogLevelFilters">全選</key>
+    <key alias="deselectAllLogLevelFilters">取消全選</key>
+  </area>
 </language>
