Merge pull request #47 from CareerPlug/CP-12003-scoll-and-highlight

CP-12003 / add scroll and highlight

app/javascript/template_builder/area.vue

@@ -362,7 +362,7 @@ export default {
       default: null
     }
   },
-  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to'],
+  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to', 'field-clicked'],
   data () {
     return {
       isShowFormulaModal: false,
@@ -823,6 +823,11 @@ export default {
         this.focusValueInput()
       }
 
+      // Emit field-clicked event if it was a simple click (not a drag)
+      if (!this.isMoved && this.editable) {
+        this.$emit('field-clicked', this.field)
+      }
+
       this.isDragged = false
       this.isMoved = false
 

app/javascript/template_builder/builder.vue

@@ -199,6 +199,7 @@
                 @draw="[onDraw($event), withSelectedFieldType ? '' : drawFieldType = '', showDrawField = false]"
                 @drop-field="onDropfield"
                 @remove-area="removeArea"
+                @field-clicked="scrollFieldIntoSidebar"
               />
               <DocumentControls
                 v-if="isBreakpointLg && editable"
@@ -1730,6 +1731,29 @@ export default {
 
       this.selectedAreaRef.value = area
     },
+    scrollFieldIntoSidebar (field) {
+      // Find the submitter for this field
+      const submitter = this.template.submitters.find(s => s.uuid === field.submitter_uuid)
+
+      // Switch to the correct submitter if needed
+      if (submitter && submitter !== this.selectedSubmitter) {
+        this.selectedSubmitter = submitter
+      }
+
+      // Wait for submitter switch to complete
+      this.$nextTick(() => {
+        // Scroll field into view in sidebar (with null check for safety)
+        if (this.$refs.fields) {
+          this.$refs.fields.scrollFieldIntoView(field)
+        }
+
+        // Highlight the field by setting the selected area
+        const area = field.areas?.[0]
+        if (area) {
+          this.selectedAreaRef.value = area
+        }
+      })
+    },
     baseFetch (path, options = {}) {
       return fetch(this.baseUrl + path, {
         ...options,

app/javascript/template_builder/document.vue

@@ -24,6 +24,7 @@
       @remove-area="$emit('remove-area', $event)"
       @scroll-to="scrollToArea"
       @draw="$emit('draw', { area: {...$event.area, attachment_uuid: document.uuid }, isTooSmall: $event.isTooSmall })"
+      @field-clicked="$emit('field-clicked', $event)"
     />
   </div>
 </template>
@@ -105,7 +106,7 @@ export default {
       default: false
     }
   },
-  emits: ['draw', 'drop-field', 'remove-area'],
+  emits: ['draw', 'drop-field', 'remove-area', 'field-clicked'],
   data () {
     return {
       pageRefs: []

app/javascript/template_builder/fields.vue

@@ -323,6 +323,30 @@ export default {
     }
   },
   methods: {
+    scrollFieldIntoView (field) {
+      // Wait for next tick to ensure DOM is updated
+      this.$nextTick(() => {
+        // Find the field element in the sidebar
+        const fieldElement = this.$refs.fields.querySelector(`[data-uuid="${field.uuid}"]`)
+
+        if (fieldElement) {
+          // Scroll the field into view with smooth behavior and centered positioning
+          fieldElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'nearest'
+          })
+
+          // Add temporary highlight class
+          fieldElement.classList.add('field-highlight')
+
+          // Remove highlight after animation
+          setTimeout(() => {
+            fieldElement.classList.remove('field-highlight')
+          }, 2000)
+        }
+      })
+    },
     onDragstart (event, field) {
       this.removeDragOverlay(event)
 
@@ -427,3 +451,20 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+@keyframes field-highlight-bg {
+  0% {
+    background-color: rgb(191, 219, 254);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+:deep(.field-highlight .fields-list-item) {
+  animation: field-highlight-bg 2s ease-out;
+  border-color: rgb(59, 130, 246) !important;
+  border-width: 2px !important;
+}
+</style>

app/javascript/template_builder/page.vue

@@ -33,6 +33,7 @@
         @stop-resize="resizeDirection = null"
         @remove="$emit('remove-area', item.area)"
         @scroll-to="$emit('scroll-to', $event)"
+        @field-clicked="$emit('field-clicked', $event)"
       />
       <FieldArea
         v-if="newArea"
@@ -140,7 +141,7 @@ export default {
       required: true
     }
   },
-  emits: ['draw', 'drop-field', 'remove-area', 'scroll-to'],
+  emits: ['draw', 'drop-field', 'remove-area', 'scroll-to', 'field-clicked'],
   data () {
     return {
       areaRefs: [],