fix(#248): avoid debounce forms submit

bimdata · Jul 19, 2022 · 318e193 · 318e193
1 parent 39b3d72
commit 318e193
Show file tree

Hide file tree

Showing 16 changed files with 87 additions and 73 deletions.
diff --git a/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue b/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
@@ -69,8 +69,9 @@
 
 <script>
 import { ref, watch, computed } from "vue";
-import { useFiles } from "@/state/files.js";
-import { isFolder } from "@/utils/file-structure.js";
+import { useFiles } from "../../../../../state/files.js";
+import { debounce } from "../../../../../utils/async.js";
+import { isFolder } from "../../../../../utils/file-structure.js";
 
 export default {
   props: {
@@ -99,7 +100,7 @@ export default {
 
     const hasHistory = computed(() => props.file.history?.length > 1);
 
-    const renameFile = async () => {
+    const renameFile = debounce(async () => {
       if (fileName.value) {
         try {
           loading.value = true;
@@ -118,7 +119,7 @@ export default {
         hasError.value = true;
         nameInput.value.focus();
       }
-    };
+    }, 500);
 
     const showUpdateForm = ref(false);
     const openUpdateForm = () => {

diff --git a/src/components/specific/files/folder-creation-form/FolderCreationForm.vue b/src/components/specific/files/folder-creation-form/FolderCreationForm.vue
@@ -40,6 +40,7 @@
 <script>
 import { onMounted, ref } from "vue";
 import { useFiles } from "@/state/files";
+import { debounce } from "@/utils/async.js";
 
 export default {
   props: {
@@ -65,7 +66,7 @@ export default {
       hasError.value = false;
     };
 
-    const submit = async () => {
+    const submit = debounce(async () => {
       if (name.value) {
         await createFolder(props.project, {
           parent_id: props.folder.id,
@@ -77,7 +78,7 @@ export default {
         nameInput.value.focus();
         hasError.value = true;
       }
-    };
+    }, 500);
 
     const close = () => {
       reset();

diff --git a/src/components/specific/groups/group-card/group-card-update-form/GroupCardUpdateForm.vue b/src/components/specific/groups/group-card/group-card-update-form/GroupCardUpdateForm.vue
@@ -38,7 +38,8 @@
 
 <script>
 import { inject, onMounted, ref } from "vue";
-import { useGroups } from "@/state/groups";
+import { useGroups } from "../../../../../state/groups.js";
+import { debounce } from "../../../../../utils/async.js";
 
 export default {
   props: {
@@ -61,7 +62,7 @@ export default {
     const groupName = ref(props.group.name);
     const hasError = ref(false);
 
-    const submit = async () => {
+    const submit = debounce(async () => {
       if (groupName.value) {
         try {
           loading.value = true;
@@ -77,7 +78,7 @@ export default {
         nameInput.value.focus();
         hasError.value = true;
       }
-    };
+    }, 500);
 
     const close = () => {
       hasError.value = false;

diff --git a/src/components/specific/groups/group-creation-card/GroupCreationCard.vue b/src/components/specific/groups/group-creation-card/GroupCreationCard.vue
@@ -69,9 +69,10 @@
 
 <script>
 import { ref } from "vue";
-import colors from "@/config/group-colors";
-import { useGroups } from "@/state/groups";
-import { getRandomElement } from "@/utils/random";
+import colors from "../../../../config/group-colors.js";
+import { useGroups } from "../../../../state/groups.js";
+import { debounce } from "../../../../utils/async.js";
+import { getRandomElement } from "../../../../utils/random.js";
 
 export default {
   props: {
@@ -84,12 +85,11 @@ export default {
     const { createGroup } = useGroups();
 
     const loading = ref(false);
-
     const nameInput = ref(null);
     const groupName = ref("");
     const hasError = ref(false);
 
-    const submit = async () => {
+    const submit = debounce(async () => {
       if (groupName.value) {
         try {
           loading.value = true;
@@ -105,7 +105,7 @@ export default {
         nameInput.value.focus();
         hasError.value = true;
       }
-    };
+    }, 500);
 
     const showCreationForm = ref(false);
     const openCreationForm = () => {

diff --git a/src/components/specific/models/models-manager/models-table/model-name-cell/ModelNameCell.vue b/src/components/specific/models/models-manager/models-table/model-name-cell/ModelNameCell.vue
@@ -53,8 +53,9 @@
 
 <script>
 import { ref, watch } from "vue";
-import { MODEL_TYPE } from "@/config/models.js";
-import { useModels } from "@/state/models.js";
+import { MODEL_TYPE } from "../../../../../../config/models.js";
+import { useModels } from "../../../../../../state/models.js";
+import { debounce } from "../../../../../../utils/async.js";
 
 export default {
   props: {
@@ -81,7 +82,7 @@ export default {
     const modelName = ref("");
     const hasError = ref(false);
 
-    const renameModel = async () => {
+    const renameModel = debounce(async () => {
       if (modelName.value) {
         try {
           loading.value = true;
@@ -95,7 +96,7 @@ export default {
         hasError.value = true;
         nameInput.value.focus();
       }
-    };
+    }, 500);
 
     const showUpdateForm = ref(false);
     const openUpdateForm = () => {

diff --git a/...nents/specific/organizations/organizations-manager/organization-form/OrganizationForm.vue b/...nents/specific/organizations/organizations-manager/organization-form/OrganizationForm.vue
@@ -65,7 +65,8 @@
 
 <script>
 import { computed, inject, ref, watch } from "vue";
-import { useOrganizations } from "@/state/organizations.js";
+import { useOrganizations } from "../../../../../state/organizations.js";
+import { debounce } from "../../../../../utils/async.js";
 // Components
 import OrganizationFormSuccess from "./organization-form-success/OrganizationFormSuccess.vue";
 
@@ -110,7 +111,7 @@ export default {
       { immediate: true }
     );
 
-    const submit = async () => {
+    const submit = debounce(async () => {
       hasInvalidName.value = false;
       if (!orgaName.value) {
         hasInvalidName.value = true;
@@ -135,7 +136,7 @@ export default {
       } finally {
         localState.loading = false;
       }
-    };
+    }, 500);
 
     return {
       // References

diff --git a/...ponents/specific/projects/project-card/project-card-update-form/ProjectCardUpdateForm.vue b/...ponents/specific/projects/project-card/project-card-update-form/ProjectCardUpdateForm.vue
@@ -38,7 +38,8 @@
 
 <script>
 import { inject, onMounted, ref } from "vue";
-import { useProjects } from "@/state/projects";
+import { useProjects } from "../../../../../state/projects.js";
+import { debounce } from "../../../../../utils/async.js";
 
 export default {
   props: {
@@ -57,7 +58,7 @@ export default {
     const projectName = ref(props.project.name);
     const hasError = ref(false);
 
-    const renameProject = async () => {
+    const renameProject = debounce(async () => {
       if (projectName.value) {
         try {
           loading.value = true;
@@ -73,7 +74,7 @@ export default {
         nameInput.value.focus();
         hasError.value = true;
       }
-    };
+    }, 500);
 
     const close = () => {
       hasError.value = false;

diff --git a/src/components/specific/projects/project-creation-card/ProjectCreationCard.vue b/src/components/specific/projects/project-creation-card/ProjectCreationCard.vue
@@ -65,7 +65,8 @@
 
 <script>
 import { reactive, ref } from "vue";
-import { useProjects } from "@/state/projects";
+import { useProjects } from "../../../../state/projects.js";
+import { debounce } from "../../../../utils/async.js";
 
 export default {
   props: {
@@ -79,10 +80,10 @@ export default {
 
     const loading = ref(false);
     const nameInput = ref(null);
-
     const newProject = reactive({ name: "" });
     const hasError = ref(false);
-    const submit = async () => {
+
+    const submit = debounce(async () => {
       if (newProject.name) {
         try {
           loading.value = true;
@@ -95,7 +96,7 @@ export default {
         nameInput.value.focus();
         hasError.value = true;
       }
-    };
+    }, 500);
 
     const showCreationForm = ref(false);
     const openCreationForm = () => {

diff --git a/src/components/specific/spaces/space-card/space-card-update-form/SpaceCardUpdateForm.vue b/src/components/specific/spaces/space-card/space-card-update-form/SpaceCardUpdateForm.vue
@@ -38,7 +38,8 @@
 
 <script>
 import { inject, onMounted, ref } from "vue";
-import { useSpaces } from "@/state/spaces";
+import { useSpaces } from "../../../../../state/spaces.js";
+import { debounce } from "../../../../../utils/async.js";
 
 export default {
   props: {
@@ -57,7 +58,7 @@ export default {
     const spaceName = ref(props.space.name);
     const hasError = ref(false);
 
-    const submit = async () => {
+    const submit = debounce(async () => {
       if (spaceName.value) {
         try {
           loading.value = true;
@@ -70,7 +71,7 @@ export default {
         nameInput.value.focus();
         hasError.value = true;
       }
-    };
+    }, 500);
 
     const close = () => {
       hasError.value = false;

diff --git a/src/components/specific/spaces/space-creation-card/SpaceCreationCard.vue b/src/components/specific/spaces/space-creation-card/SpaceCreationCard.vue
@@ -54,7 +54,8 @@
 
 <script>
 import { onMounted, reactive, ref } from "vue";
-import { useSpaces } from "@/state/spaces";
+import { useSpaces } from "../../../../state/spaces.js";
+import { debounce } from "../../../../utils/async.js";
 
 export default {
   emits: ["close"],
@@ -66,7 +67,7 @@ export default {
     const newSpace = reactive({ name: "" });
     const hasError = ref(false);
 
-    const submit = async () => {
+    const submit = debounce(async () => {
       if (newSpace.name) {
         try {
           loading.value = true;
@@ -79,7 +80,7 @@ export default {
         nameInput.value.focus();
         hasError.value = true;
       }
-    };
+    }, 500);
 
     const close = () => {
       newSpace.name = "";

diff --git a/src/components/specific/subscriptions/organization-selector/OrganizationSelector.vue b/src/components/specific/subscriptions/organization-selector/OrganizationSelector.vue
@@ -76,8 +76,8 @@
 
 <script>
 import { reactive, ref } from "vue";
-import { useOrganizations } from "@/state/organizations.js";
-import { delay } from "@/utils/async.js";
+import { useOrganizations } from "../../../../state/organizations.js";
+import { debounce, delay } from "../../../../utils/async.js";
 
 export default {
   props: {
@@ -102,7 +102,7 @@ export default {
 
     const isSuccess = ref(false);
 
-    const submit = async () => {
+    const submit = debounce(async () => {
       try {
         newOrgaLoading.value = true;
         if (mode.value === "create") {
@@ -116,7 +116,7 @@ export default {
         newOrgaLoading.value = false;
         isSuccess.value = false;
       }
-    };
+    }, 500);
 
     return {
       // Reference

diff --git a/src/components/specific/subscriptions/space-creator/SpaceCreator.vue b/src/components/specific/subscriptions/space-creator/SpaceCreator.vue
@@ -60,11 +60,12 @@
 
 <script>
 import { ref, reactive, onMounted } from "vue";
-import { useSpaces } from "@/state/spaces.js";
-import { useAppModal } from "@/components/specific/app/app-modal/app-modal.js";
+import { useAppModal } from "../../app/app-modal/app-modal.js";
+import { useSpaces } from "../../../../state/spaces.js";
+import { debounce } from "../../../../utils/async.js";
 // Components
-import AppModal from "@/components/specific/app/app-modal/AppModal.vue";
-import OrganizationSelector from "@/components/specific/subscriptions/organization-selector/OrganizationSelector.vue";
+import AppModal from "../../app/app-modal/AppModal.vue";
+import OrganizationSelector from "../organization-selector/OrganizationSelector.vue";
 
 export default {
   components: {
@@ -110,7 +111,7 @@ export default {
       closeModal();
     };
 
-    const submit = async () => {
+    const submit = debounce(async () => {
       try {
         newSpaceLoading.value = true;
 
@@ -133,7 +134,7 @@ export default {
       } finally {
         newSpaceLoading.value = false;
       }
-    };
+    }, 500);
 
     onMounted(() => {
       setTimeout(() => spaceNameInput.value.focus(), 200);

diff --git a/src/components/specific/tags/tags-item/TagsItem.vue b/src/components/specific/tags/tags-item/TagsItem.vue
@@ -113,10 +113,10 @@
 
 <script>
 import { ref, watch, nextTick } from "vue";
-
-import TagService from "@/services/TagService";
-import { getBorderColor } from "@/utils/colors.js";
-import { dropdownPositioner } from "@/utils/positioner.js";
+import TagService from "../../../../services/TagService.js";
+import { debounce } from "../../../../utils/async.js";
+import { getBorderColor } from "../../../../utils/colors.js";
+import { dropdownPositioner } from "../../../../utils/positioner.js";
 
 export default {
   props: {
@@ -148,7 +148,7 @@ export default {
       setTimeout(() => editTagName.value && input.value.focus(), 50)
     );
 
-    const onSubmitTagName = async () => {
+    const onSubmitTagName = debounce(async () => {
       if (tagName.value && tagName.value !== props.tag.name) {
         await TagService.updateTag(props.project, props.tag, {
           name: tagName.value
@@ -157,7 +157,7 @@ export default {
         emit("fetch-tags");
         emit("file-updated");
       }
-    };
+    }, 500);
 
     const onCancelSubmitTagName = () => {
       tagName.value = props.tag.name;