sprintify-ui 0.6.69 → 0.6.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.69",
+  "version": "0.6.71",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseHasMany.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { isEqual } from 'lodash';
+import { debounce, isEqual } from 'lodash';
 import { Option } from '@/types';
 import { config } from '@/index';
 import { PropType } from 'vue';
@@ -128,38 +128,43 @@ watch(
 
 watch(
   () => props.modelValue,
-  (newValue, oldValue) => {
+  debounce(() => fetchModels(), 300),
+  { immediate: true }
+);
 
-    if (props.currentModels !== undefined) {
-      return;
-    }
+function fetchModels() {
+  if (props.currentModels !== undefined) {
+    return;
+  }
 
-    if (props.showRouteUrl == null) {
-      return;
-    }
+  if (props.showRouteUrl == null) {
+    return;
+  }
 
-    if (!props.modelValue) {
-      models.value = [];
-      return;
-    }
+  if (!props.modelValue) {
+    models.value = [];
+    return;
+  }
 
-    if (newValue == oldValue) {
-      return;
-    }
+  // Do not fetch if the modelValue is the same as the local models
 
-    const ids = props.modelValue.map((id) => id.toString());
+  const ids = props.modelValue.map((id: number | string) => id.toString());
 
-    http
-      .get(props.showRouteUrl(ids))
-      .then((response: AxiosResponse) => {
-        models.value = response.data.data.filter((i: any) => {
-          return ids.includes(i[props.primaryKey]);
-        });
-      })
-      .catch((e: Error) => e);
-  },
-  { immediate: true }
-);
+  const localModelIds = models.value.map((m) => m[props.primaryKey]);
+
+  if (isEqual(ids, localModelIds)) {
+    return;
+  }
+
+  http
+    .get(props.showRouteUrl(ids))
+    .then((response: AxiosResponse) => {
+      models.value = response.data.data.filter((i: any) => {
+        return ids.includes(i[props.primaryKey]);
+      });
+    })
+    .catch((e: Error) => e);
+}
 
 function onUpdate(newModels: Option[]) {
   models.value = newModels;