[Vue] rename PluginSetting component to GroupedSetting component and …

…refactor condition handling (#18628)

* rename PluginSetting component to GroupedSetting component, export and refactor angularjs condition handling in vue

* Add GroupedSettings component to encapsulate for loop and better scope computed properties + get to work in the UI

plugins/CorePluginsAdmin/vue/src/FormField/FormField.vue

@@ -236,9 +236,14 @@ export default defineComponent({
         && this.formField.uiControl !== 'checkbox'
         && this.formField.uiControl !== 'radio';
     },
+    /**
+     * @deprecated here for angularjs BC support. shouldn't be used directly, instead use
+     *             GroupedSetting.vue.
+     */
     showField() {
       if (!this.formField
         || !this.formField.condition
+        || !(this.formField.condition instanceof Function)
       ) {
         return true;
       }

plugins/CorePluginsAdmin/vue/src/PluginSettings/PluginSetting.vue → plugins/CorePluginsAdmin/vue/src/GroupedSettings/GroupedSetting.vue

@@ -5,14 +5,11 @@
 -->
 
 <template>
-  <div>
+  <div v-show="showField">
     <FormField
       :model-value="modelValue"
       @update:model-value="changeValue($event)"
-      :form-field="{
-        ...setting,
-        condition: conditionFunction,
-      }"
+      :form-field="setting"
     />
   </div>
 </template>
@@ -28,48 +25,33 @@ let conditionScope: IScope;
 
 export default defineComponent({
   props: {
-    pluginName: {
-      type: String,
-      required: true,
-    },
     setting: {
       type: Object,
       required: true,
     },
     modelValue: null,
-    settingValues: Object,
+    conditionValues: {
+      type: Object,
+      required: true,
+    },
   },
   components: {
     FormField,
   },
   emits: ['update:modelValue'],
   computed: {
-    conditionFunction() {
+    showField() {
       const condition = this.setting.condition as string;
       if (!condition) {
-        return undefined;
+        return true;
       }
 
-      return () => {
-        if (!conditionScope) {
-          const $rootScope = Matomo.helper.getAngularDependency('$rootScope');
-          conditionScope = $rootScope.$new(true);
-        }
-
-        return conditionScope.$eval(condition, this.conditionValues);
-      };
-    },
-    conditionValues() {
-      const values: Record<string, unknown> = {};
-      Object.entries(this.settingValues as Record<string, unknown>).forEach(([key, value]) => {
-        const [pluginName, settingName] = key.split('.');
-        if (pluginName !== this.pluginName) {
-          return;
-        }
+      if (!conditionScope) {
+        const $rootScope = Matomo.helper.getAngularDependency('$rootScope');
+        conditionScope = $rootScope.$new(true);
+      }
 
-        values[settingName] = value;
-      });
-      return values;
+      return conditionScope.$eval(condition, this.conditionValues);
     },
   },
   methods: {

plugins/CorePluginsAdmin/vue/src/GroupedSettings/GroupedSettings.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    v-for="setting in settings"
+    :key="`${groupName}.${setting.name}`"
+  >
+    <GroupedSetting
+      :model-value="allSettingValues[`${groupName}.${setting.name}`]"
+      @update:model-value="$emit('change', { name: setting.name, value: $event })"
+      :setting="setting"
+      :condition-values="settingValues"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import GroupedSetting from './GroupedSetting.vue';
+
+export default defineComponent({
+  props: {
+    groupName: String,
+    settings: {
+      type: Array,
+      required: true,
+    },
+    allSettingValues: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ['change'],
+  components: {
+    GroupedSetting,
+  },
+  computed: {
+    settingValues() {
+      const entries = Object.entries(this.allSettingValues as Record<string, unknown>)
+        .filter(([key]) => {
+          if (this.groupName) {
+            const [groupName] = key.split('.');
+            if (groupName !== this.groupName) {
+              return false;
+            }
+          }
+
+          return true;
+        })
+        .map(([key, value]) => (this.groupName ? [key.split('.')[1], value] : [key, value]));
+      return Object.fromEntries(entries);
+    },
+  },
+});
+</script>

plugins/CorePluginsAdmin/vue/src/PluginSettings/PluginSettings.vue

@@ -17,17 +17,12 @@
           class="card-title"
           :id="settings.pluginName"
         >{{ settings.title }}</h2>
-        <div
-          v-for="setting in settings.settings"
-          :key="`${setting.pluginName}.${setting.name}`"
-        >
-          <PluginSetting
-            v-model="settingValues[`${settings.pluginName}.${setting.name}`]"
-            :plugin-name="settings.pluginName"
-            :setting="setting"
-            :setting-values="settingValues"
-          />
-        </div>
+        <GroupedSettings
+          :group-name="settings.pluginName"
+          :settings="settings.settings"
+          :all-setting-values="settingValues"
+          @change="settingValues[`${settings.pluginName}.${$event.name}`] = $event.value"
+        />
         <input
           type="button"
           @click="saveSetting(settings.pluginName)"
@@ -82,7 +77,7 @@ import {
 } from 'CoreHome';
 import KeyPressEvent = JQuery.KeyPressEvent;
 import Field from '../Field/Field.vue';
-import PluginSetting from './PluginSetting.vue';
+import GroupedSettings from '../GroupedSettings/GroupedSettings.vue';
 
 const { $ } = window;
 
@@ -113,7 +108,7 @@ export default defineComponent({
   components: {
     ActivityIndicator,
     Field,
-    PluginSetting,
+    GroupedSettings,
   },
   data(): PluginSettingsState {
     return {

plugins/CorePluginsAdmin/vue/src/index.ts

@@ -21,3 +21,4 @@ export { default as PluginManagement } from './Plugins/PluginManagement';
 export { default as PluginUpload } from './Plugins/PluginUpload';
 export { default as SaveButton } from './SaveButton/SaveButton.vue';
 export { default as Form } from './Form/Form';
+export { default as GroupedSettings } from './GroupedSettings/GroupedSettings';