debounce tiptatp editor save to not interfere with typing (#4057)

Netflix · Nov 30, 2023 · e682307 · e682307
1 parent dff63a3
commit e682307
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue b/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, defineProps, watchEffect, watch } from "vue"
+import { debounce } from "lodash"
 
 import CaseApi from "@/case/api"
 import CaseResolutionSearchPopover from "@/case/CaseResolutionSearchPopover.vue"
@@ -45,12 +46,6 @@ watchEffect(() => {
   emit("update:open", drawerVisible.value)
 })
 
-const handleResolutionUpdate = (newResolution) => {
-  modelValue.value.resolution = newResolution
-  emit("update:modelValue", { ...modelValue.value }) // Emit the updated modelValue
-  saveCaseDetails()
-}
-
 const saveCaseDetails = async () => {
   try {
     setSaving(true)
@@ -60,6 +55,14 @@ const saveCaseDetails = async () => {
     console.error("Failed to save case details", e)
   }
 }
+
+const debouncedSave = debounce(saveCaseDetails, 1000)
+
+const handleResolutionUpdate = (newResolution) => {
+  modelValue.value.resolution = newResolution
+  emit("update:modelValue", { ...modelValue.value })
+  debouncedSave()
+}
 </script>
 
 <template>
@@ -153,7 +156,7 @@ const saveCaseDetails = async () => {
       <v-card flat color="grey-lighten-5" class="rounded-lg mt-6 ml-2 mr-2">
         <RichEditor
           :resolution="true"
-          v-model="modelValue.resolution"
+          :model-value="modelValue.resolution"
           @update:model-value="handleResolutionUpdate"
           style="min-height: 400px; margin: 10px; font-size: 0.9125rem; font-weight: 400"
         />

diff --git a/src/dispatch/static/dispatch/src/case/Page.vue b/src/dispatch/static/dispatch/src/case/Page.vue
@@ -32,8 +32,10 @@
 <script setup lang="ts">
 import { ref, watch } from "vue"
 import { useStore } from "vuex"
-
 import { useRoute } from "vue-router"
+
+import { debounce } from "lodash"
+
 import CaseApi from "@/case/api"
 import CaseAttributesDrawer from "@/case/CaseAttributesDrawer.vue"
 import PageHeader from "@/case//PageHeader.vue"
@@ -107,16 +109,6 @@ const fetchDetails = async () => {
   }
 }
 
-const handleTitleUpdate = (newTitle) => {
-  caseDetails.value.title = newTitle
-  saveCaseDetails()
-}
-
-const handleDescriptionUpdate = (newDescription) => {
-  caseDetails.value.description = newDescription
-  saveCaseDetails()
-}
-
 const saveCaseDetails = async () => {
   try {
     setSaving(true)
@@ -127,6 +119,18 @@ const saveCaseDetails = async () => {
   }
 }
 
+const debouncedSave = debounce(saveCaseDetails, 1000)
+
+const handleTitleUpdate = (newTitle) => {
+  caseDetails.value.title = newTitle
+  debouncedSave()
+}
+
+const handleDescriptionUpdate = (newDescription) => {
+  caseDetails.value.description = newDescription
+  debouncedSave()
+}
+
 watch(
   () => route.params.id,
   (newName, oldName) => {

diff --git a/src/dispatch/static/dispatch/src/components/RichEditor.vue b/src/dispatch/static/dispatch/src/components/RichEditor.vue
@@ -32,9 +32,23 @@ const editor = ref(null)
 const plainTextValue = ref("")
 const emit = defineEmits(["update:modelValue"])
 
+const userIsTyping = ref(false)
+
+const handleKeyDown = () => {
+  userIsTyping.value = true
+}
+
+const handleBlur = () => {
+  userIsTyping.value = false
+}
+
 watch(
   () => props.modelValue,
   (value) => {
+    if (userIsTyping.value) {
+      return
+    }
+
     const isSame = editor.value?.getHTML() === value
 
     if (isSame) {
@@ -44,7 +58,7 @@ watch(
     if (props.title) {
       editor.value?.chain().focus().setContent(`<h2>${value}</h2>`, false).run()
     } else {
-      editor.value?.chain().focus().setContent(`${value}`, false).run()
+      editor.value?.chain().setContent(`${value}`, false).run()
     }
   }
 )
@@ -63,6 +77,10 @@ onMounted(() => {
     keyboardShortcuts: {
       Enter: () => {}, // Override Enter key to do nothing
     },
+    editorProps: {
+      handleKeyDown,
+      handleBlur,
+    },
   })
 })