WIP

ditrit · Sep 13, 2023 · d51cce5 · d51cce5
1 parent 957f2f8
commit d51cce5
Show file tree

Hide file tree

Showing 12 changed files with 167 additions and 172 deletions.
diff --git a/src/components/inputs/ArrayInput.vue b/src/components/inputs/ArrayInput.vue
@@ -32,6 +32,7 @@ import {
 } from 'vue';
 import { isRequired } from 'src/composables/QuasarFieldRule';
 import ItemList from 'components/inputs/ItemList';
+import { initSelectOptions } from 'src/composables/InputManager';
 
 const props = defineProps({
   attribute: {
@@ -53,38 +54,6 @@ const localValue = ref(attribute.value.value);
 const defaultValues = ref(attribute.value.definition.rules.values || []);
 const variables = ref(plugin.value.data.variables || []);
 
-/**
- * Initialize the options for the select.
- */
-function initOptions() {
-  const categories = [...new Set(variables.value.map(({ category }) => category))];
-  const children = categories.map((category) => ({
-    type: 'category',
-    name: category,
-    children: variables.value
-      .filter((variable) => variable.category === category)
-      .map((variable) => ({
-        type: 'item',
-        name: variable.name,
-        value: variable.value !== null ? variable.value : variable.defaultValue,
-        formattedName: variable.formattedName,
-      })),
-  }));
-
-  options.value = [{
-    type: 'category',
-    name: 'default',
-    children: defaultValues.value.map((value) => ({
-      type: 'item',
-      value,
-    })),
-  }, {
-    type: 'category',
-    name: 'variable',
-    children,
-  }];
-}
-
 watch(() => arrayInput.value, () => {
   if (arrayInput.value) {
     arrayInput.value.validate();
@@ -106,6 +75,6 @@ watch(() => localValue.value, () => {
 }, { deep: true });
 
 onMounted(() => {
-  initOptions();
+  options.value = initSelectOptions(variables.value, defaultValues.value);
 });
 </script>
diff --git a/src/components/inputs/ItemList.vue b/src/components/inputs/ItemList.vue
@@ -2,13 +2,16 @@
   <q-expansion-item
     v-if="item.type === 'category'"
     expand-separator
-    :label="item.name"
+    dense-toggle
+    :header-inset-level="0"
+    :label="$te(item.name) ? $t(item.name) : item.name"
     header-class="text-weight-medium"
     default-closed
   >
     <item-list
       v-for="child in item.children"
       :key="child.name"
+      :header-inset-level="0.2"
       :item="child"
       class="item-list"
       @select-item="(value) => $emit('select-item', value)"
@@ -18,6 +21,7 @@
     v-else
     v-ripple
     clickable
+    class="bg-grey-3"
     @click="$emit('select-item', item.formattedName ? item.formattedName : item.value)"
   >
     <q-item-section

diff --git a/src/components/inputs/LinkInput.vue b/src/components/inputs/LinkInput.vue
@@ -34,6 +34,7 @@ import {
 } from 'vue';
 import { isRequired } from 'src/composables/QuasarFieldRule';
 import ItemList from 'components/inputs/ItemList';
+import { initSelectOptions } from 'src/composables/InputManager';
 
 const props = defineProps({
   attribute: {
@@ -51,9 +52,7 @@ const emit = defineEmits(['update:model-value']);
 const linkInput = ref(null);
 const { attribute, plugin } = toRefs(props);
 const localValue = ref(attribute.value.value);
-const options = ref(plugin.value.data.getComponentsByType(
-  attribute.value.definition.linkRef,
-).map(({ id }) => id));
+const options = ref([]);
 const iconName = ref(plugin.value.data.definitions.components.find(
   ({ type }) => type === attribute.value.definition.linkRef,
 ).icon);
@@ -62,38 +61,6 @@ const defaultValues = ref(plugin.value.data.getComponentsByType(
 ).map(({ id }) => id));
 const variables = ref(plugin.value.data.variables || []);
 
-/**
- * Initialize the options for the select.
- */
-function initOptions() {
-  const categories = [...new Set(variables.value.map(({ category }) => category))];
-  const children = categories.map((category) => ({
-    type: 'category',
-    name: category,
-    children: variables.value
-      .filter((variable) => variable.category === category)
-      .map((variable) => ({
-        type: 'item',
-        name: variable.name,
-        value: variable.value !== null ? variable.value : variable.defaultValue,
-        formattedName: variable.formattedName,
-      })),
-  }));
-
-  options.value = [{
-    type: 'category',
-    name: 'default',
-    children: defaultValues.value.map((value) => ({
-      type: 'item',
-      value,
-    })),
-  }, {
-    type: 'category',
-    name: 'variable',
-    children,
-  }];
-}
-
 watch(() => props.plugin.data.components, () => {
   defaultValues.value = props.plugin.data.getComponentsByType(
     props.attribute.definition.linkRef,
@@ -119,6 +86,6 @@ watch(() => localValue.value, () => {
 });
 
 onMounted(() => {
-  initOptions();
+  options.value = initSelectOptions(variables.value, defaultValues.value);
 });
 </script>
diff --git a/src/components/inputs/ReferenceInput.vue b/src/components/inputs/ReferenceInput.vue
@@ -32,6 +32,7 @@ import {
 } from 'vue';
 import { isRequired } from 'src/composables/QuasarFieldRule';
 import ItemList from 'components/inputs/ItemList';
+import { initSelectOptions } from 'src/composables/InputManager';
 
 const props = defineProps({
   attribute: {
@@ -49,10 +50,7 @@ const emit = defineEmits(['update:model-value']);
 const referenceInput = ref(null);
 const { attribute, plugin } = toRefs(props);
 const localValue = ref(attribute.value.value);
-const options = ref(plugin.value.data.getComponentsByType(
-  attribute.value.definition.containerRef,
-  plugin.value.data.components,
-).map(({ id }) => id));
+const options = ref([]);
 const iconName = ref(plugin.value.data.definitions.components.find(
   ({ type }) => type === attribute.value.definition.containerRef,
 ).icon);
@@ -62,38 +60,6 @@ const defaultValues = ref(plugin.value.data.getComponentsByType(
 ).map(({ id }) => id));
 const variables = ref(plugin.value.data.variables || []);
 
-/**
- * Initialize the options for the select.
- */
-function initOptions() {
-  const categories = [...new Set(variables.value.map(({ category }) => category))];
-  const children = categories.map((category) => ({
-    type: 'category',
-    name: category,
-    children: variables.value
-      .filter((variable) => variable.category === category)
-      .map((variable) => ({
-        type: 'item',
-        name: variable.name,
-        value: variable.value !== null ? variable.value : variable.defaultValue,
-        formattedName: variable.formattedName,
-      })),
-  }));
-
-  options.value = [{
-    type: 'category',
-    name: 'default',
-    children: defaultValues.value.map((value) => ({
-      type: 'item',
-      value,
-    })),
-  }, {
-    type: 'category',
-    name: 'variable',
-    children,
-  }];
-}
-
 watch(() => props.plugin.data.components, () => {
   defaultValues.value = props.plugin.data.getComponentsByType(
     props.attribute.definition.containerRef,
@@ -119,6 +85,6 @@ watch(() => localValue.value, () => {
 });
 
 onMounted(() => {
-  initOptions();
+  options.value = initSelectOptions(variables.value, defaultValues.value);
 });
 </script>
diff --git a/src/components/inputs/SelectInput.vue b/src/components/inputs/SelectInput.vue
@@ -26,6 +26,7 @@ import {
 } from 'vue';
 import { isRequired } from 'src/composables/QuasarFieldRule';
 import ItemList from 'components/inputs/ItemList';
+import { initSelectOptions } from 'src/composables/InputManager';
 
 const props = defineProps({
   attribute: {
@@ -47,38 +48,6 @@ const options = ref([]);
 const defaultValues = ref(attribute.value.definition.rules.values);
 const variables = ref(plugin.value.data.variables || []);
 
-/**
- * Initialize the options for the select.
- */
-function initOptions() {
-  const categories = [...new Set(variables.value.map(({ category }) => category))];
-  const children = categories.map((category) => ({
-    type: 'category',
-    name: category,
-    children: variables.value
-      .filter((variable) => variable.category === category)
-      .map((variable) => ({
-        type: 'item',
-        name: variable.name,
-        value: variable.value !== null ? variable.value : variable.defaultValue,
-        formattedName: variable.formattedName,
-      })),
-  }));
-
-  options.value = [{
-    type: 'category',
-    name: 'default',
-    children: defaultValues.value.map((value) => ({
-      type: 'item',
-      value,
-    })),
-  }, {
-    type: 'category',
-    name: 'variable',
-    children,
-  }];
-}
-
 watch(() => props.plugin.data.components, () => {
   defaultValues.value = props.plugin.data.getComponentsByType(
     props.attribute.definition.linkRef,
@@ -106,6 +75,6 @@ watch(() => localValue.value, () => {
 });
 
 onMounted(() => {
-  initOptions();
+  options.value = initSelectOptions(variables.value, defaultValues.value);
 });
 </script>
diff --git a/src/composables/InputManager.js b/src/composables/InputManager.js
@@ -0,0 +1,34 @@
+/**
+ * Initialize the options for the select input by formatting the default and variable values array.
+ * @param {Array} variables - Array of plugin variables values.
+ * @param {Array} defaultValues - Array of attribute default values.
+ * @returns {Array} Array of objects representing the default and variable values.
+ */
+export function initSelectOptions(variables, defaultValues) {
+  const categories = [...new Set(variables.map(({ category }) => category))];
+  const children = categories.map((category) => ({
+    type: 'category',
+    name: category,
+    children: variables
+      .filter((variable) => variable.category === category)
+      .map((variable) => ({
+        type: 'item',
+        name: variable.name,
+        value: variable.value !== null ? variable.value : variable.defaultValue,
+        formattedName: variable.formattedName,
+      })),
+  }));
+
+  return [{
+    type: 'category',
+    name: 'plugin.component.attribute.selectInput.defaultValue',
+    children: defaultValues.map((value) => ({
+      type: 'item',
+      value,
+    })),
+  }, {
+    type: 'category',
+    name: 'plugin.component.attribute.selectInput.variables',
+    children,
+  }];
+}
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
@@ -485,6 +485,10 @@ export default {
         hint: {
           array: 'Press enter to validate',
         },
+        selectInput: {
+          defaultValue: 'Default values',
+          variables: 'Variables',
+        },
       },
     },
   },

diff --git a/tests/unit/components/inputs/ArrayInput.spec.js b/tests/unit/components/inputs/ArrayInput.spec.js
@@ -10,7 +10,7 @@ describe('Test component: ArrayInput', () => {
   let wrapper;
 
   const options = [{
-    name: 'default',
+    name: 'plugin.component.attribute.selectInput.defaultValue',
     type: 'category',
     children: [{
       type: 'item',
@@ -20,7 +20,7 @@ describe('Test component: ArrayInput', () => {
       value: 'value2',
     }],
   }, {
-    name: 'variable',
+    name: 'plugin.component.attribute.selectInput.variables',
     type: 'category',
     children: [{
       name: 'variable',
@@ -111,12 +111,6 @@ describe('Test component: ArrayInput', () => {
     });
   });
 
-  describe('Test function: initOptions', () => {
-    it('should init options', () => {
-      expect(wrapper.vm.options).toEqual(options);
-    });
-  });
-
   describe('Test watcher: props.attributes', () => {
     it('should update localValue when props.attribute.value is defined', async () => {
       await wrapper.setProps({
@@ -129,4 +123,10 @@ describe('Test component: ArrayInput', () => {
       expect(wrapper.vm.localValue).toEqual(['updatedValue']);
     });
   });
+
+  describe('Test hook function: onMounted', () => {
+    it('should init options', () => {
+      expect(wrapper.vm.options).toEqual(options);
+    });
+  });
 });
diff --git a/tests/unit/components/inputs/LinkInput.spec.js b/tests/unit/components/inputs/LinkInput.spec.js
@@ -10,14 +10,14 @@ describe('Test component: LinkInput', () => {
   let wrapper;
 
   const options = [{
-    name: 'default',
+    name: 'plugin.component.attribute.selectInput.defaultValue',
     type: 'category',
     children: [{
       type: 'item',
       value: 'componentName',
     }],
   }, {
-    name: 'variable',
+    name: 'plugin.component.attribute.selectInput.variables',
     type: 'category',
     children: [{
       name: 'variable',
@@ -118,12 +118,6 @@ describe('Test component: LinkInput', () => {
     });
   });
 
-  describe('Test function: initOptions', () => {
-    it('should init options', () => {
-      expect(wrapper.vm.options).toEqual(options);
-    });
-  });
-
   describe('Test watcher: props.plugin.data.components', () => {
     it('should update options', async () => {
       await wrapper.setProps({
@@ -157,4 +151,10 @@ describe('Test component: LinkInput', () => {
       expect(wrapper.vm.options).toEqual(options);
     });
   });
+
+  describe('Test hook function: onMounted', () => {
+    it('should init options', () => {
+      expect(wrapper.vm.options).toEqual(options);
+    });
+  });
 });