Refactor system setting (#27000)

This PR reduces the complexity of the system setting system.

It only needs one line to introduce a new option, and the option can be
used anywhere out-of-box.

It is still high-performant (and more performant) because the config
values are cached in the config system.

web_src/js/features/admin/config.js

@@ -1,37 +1,24 @@
-import $ from 'jquery';
 import {showTemporaryTooltip} from '../../modules/tippy.js';
+import {POST} from '../../modules/fetch.js';
 
-const {appSubUrl, csrfToken, pageData} = window.config;
+const {appSubUrl} = window.config;
 
 export function initAdminConfigs() {
-  const isAdminConfigPage = pageData?.adminConfigPage;
-  if (!isAdminConfigPage) return;
+  const elAdminConfig = document.querySelector('.page-content.admin.config');
+  if (!elAdminConfig) return;
 
-  $("input[type='checkbox']").on('change', (e) => {
-    const $this = $(e.currentTarget);
-    $.ajax({
-      url: `${appSubUrl}/admin/config`,
-      type: 'POST',
-      data: {
-        _csrf: csrfToken,
-        key: $this.attr('name'),
-        value: $this.is(':checked'),
-        version: $this.attr('version'),
-      }
-    }).done((resp) => {
-      if (resp) {
-        if (resp.redirect) {
-          window.location.href = resp.redirect;
-        } else if (resp.version) {
-          $this.attr('version', resp.version);
-        } else if (resp.err) {
-          showTemporaryTooltip(e.currentTarget, resp.err);
-          $this.prop('checked', !$this.is(':checked'));
-        }
+  for (const el of elAdminConfig.querySelectorAll('input[type="checkbox"][data-config-dyn-key]')) {
+    el.addEventListener('change', async () => {
+      try {
+        const resp = await POST(`${appSubUrl}/admin/config`, {
+          data: new URLSearchParams({key: el.getAttribute('data-config-dyn-key'), value: el.checked}),
+        });
+        const json = await resp.json();
+        if (json.errorMessage) throw new Error(json.errorMessage);
+      } catch (ex) {
+        showTemporaryTooltip(el, ex.toString());
+        el.checked = !el.checked;
       }
     });
-
-    e.preventDefault();
-    return false;
-  });
+  }
 }