sort on OK, and remove duplicate value from TagInput

mrc-ide · Aug 25, 2023 · 7d45e46 · 7d45e46
1 parent b419569
commit 7d45e46
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 10 deletions.
diff --git a/app/static/src/app/components/options/EditParamSettings.vue b/app/static/src/app/components/options/EditParamSettings.vue
@@ -191,13 +191,15 @@ export default defineComponent({
         });
         const updateUserValues = (newValues: number[]) => {
             // sort and remove duplicates
-            const cleaned = Array.from(new Set(newValues)).sort((a, b) => a - b);
-            settingsInternal.customValues = cleaned;
+            settingsInternal.customValues = newValues;
         };
 
         const close = () => { emit("close"); };
         const updateSettings = () => {
-            store.commit(`sensitivity/${SensitivityMutation.SetParamSettings}`, { ...settingsInternal });
+            // sort custom values
+            const customValues = settingsInternal.customValues.sort((a, b) => a - b);
+            store.commit(`sensitivity/${SensitivityMutation.SetParamSettings}`,
+                { ...settingsInternal, customValues });
             close();
         };
 

diff --git a/app/static/src/app/components/options/TagInput.vue b/app/static/src/app/components/options/TagInput.vue
@@ -1,15 +1,17 @@
 <template>
     <vue-tags-input style="border-color: #d7dce1;"
+                    v-model="currentTag"
                     :tags="computedTags"
                     :placeholder="'...'"
                     :validate="validate"
                     :add-tag-on-blur="true"
                     :add-tag-on-keys="[13, ',', 32, ':']"
+                    @on-error="handleError"
                     @on-tags-changed="handleTagsChanged"/>
 </template>
 <script lang="ts">
 import {
-    PropType, computed, defineComponent, watch
+    PropType, computed, defineComponent, watch, ref
 } from "vue";
 import VueTagsInput from "vue3-tags-input";
 import { useStore } from "vuex";
@@ -30,6 +32,8 @@ export default defineComponent({
     setup(props, { emit }) {
         const store = useStore();
 
+        const currentTag = ref("");
+
         const paramValues = computed(() => store.state.run.parameterValues);
 
         watch(paramValues, () => {
@@ -61,6 +65,11 @@ export default defineComponent({
             return paramValues.value && tag in paramValues.value;
         };
 
+        const handleError = () => {
+            // remove duplicate current tag
+            currentTag.value = "";
+        };
+
         const handleTagsChanged = (tags: string[]) => {
             const parsedTags = tags.map((tag) => {
                 if (isNumeric(tag)) {
@@ -97,7 +106,9 @@ export default defineComponent({
         };
 
         return {
+            currentTag,
             computedTags,
+            handleError,
             handleTagsChanged,
             validate
         };
@@ -112,4 +123,9 @@ export default defineComponent({
 .v3ti-tag .v3ti-remove-tag {
     text-decoration: none !important;
 }
+
+.v3ti-new-tag--error {
+  text-decoration: none !important;
+  color: #000 !important;
+}
 </style>
diff --git a/app/static/tests/unit/components/options/editParamSettings.test.ts b/app/static/tests/unit/components/options/editParamSettings.test.ts
@@ -301,11 +301,11 @@ describe("EditParamSettings", () => {
         expect(wrapper.findComponent(ErrorInfo).exists()).toBe(false);
     });
 
-    it("updates values from TagInput, dedupes and sorts", async () => {
+    it("updates values from TagInput", async () => {
         const mockSetParamSettings = jest.fn();
         const wrapper = await getWrapper(customSettings, true, mockSetParamSettings);
-        wrapper.findComponent(TagInput).vm.$emit("update", [5, 1, 5, 0, -1, -2, 1]);
-        const expectedValues = [-2, -1, 0, 1, 5];
+        const expectedValues = [-1, 0, 1];
+        wrapper.findComponent(TagInput).vm.$emit("update", expectedValues);
         await nextTick();
         expect((wrapper.vm as any).settingsInternal.customValues).toStrictEqual(expectedValues);
         await wrapper.find("#ok-settings").trigger("click");
@@ -314,8 +314,14 @@ describe("EditParamSettings", () => {
         expect(committed.customValues).toStrictEqual(expectedValues);
     });
 
-    it("test set", () => {
-        const cleaned = [...new Set([1, 2, 1])].sort();
-        expect(cleaned).toStrictEqual([1, 2]);
+    it("sorts custom values on commit", async () => {
+        const mockSetParamSettings = jest.fn();
+        const wrapper = await getWrapper(customSettings, true, mockSetParamSettings);
+        wrapper.findComponent(TagInput).vm.$emit("update", [5, 1, 0, -2, -1]);
+        await wrapper.find("#ok-settings").trigger("click");
+        expect(mockSetParamSettings.mock.calls[0][1]).toStrictEqual({
+            ...customSettings,
+            customValues: [-2, -1, 0, 1, 5]
+        });
     });
 });
diff --git a/app/static/tests/unit/components/options/tagInput.test.ts b/app/static/tests/unit/components/options/tagInput.test.ts
@@ -89,4 +89,15 @@ describe("Tag Input", () => {
         (tagsInput.vm as any).$emit("on-tags-changed", ["1", "2", "p2", "p1: 1.1", "p3"]);
         expect(wrapper.emitted("update")![0]).toStrictEqual([[1, 2]]);
     });
+
+    it("resets input value model on error", async () => {
+        const wrapper = getWrapper();
+        const vm = wrapper.vm as any;
+        vm.currentTag = "blah";
+        await nextTick();
+        const vueTagsInput = wrapper.findComponent(VueTagsInput);
+        expect(vueTagsInput.props().modelValue).toBe("blah");
+        await vueTagsInput.vm.$emit("on-error");
+        expect(vueTagsInput.props().modelValue).toBe("");
+    });
 });