Skip to content

Refactor ScheduleOverlap.vue into mixins and child components#215

Draft
ttonyxx wants to merge 1 commit intomainfrom
refactor/schedule-overlap
Draft

Refactor ScheduleOverlap.vue into mixins and child components#215
ttonyxx wants to merge 1 commit intomainfrom
refactor/schedule-overlap

Conversation

@ttonyxx
Copy link
Contributor

@ttonyxx ttonyxx commented Feb 15, 2026

Summary

  • Decompose ScheduleOverlap.vue (4,625 lines → 2,894 lines, 37% reduction) into focused modules
  • Extract 3 mixins: dragMixin.js (drag/touch handling), availabilityMixin.js (response fetching, availability logic, watchers), signUpMixin.js (sign-up block CRUD)
  • Extract 2 child components: DaysOnlyCalendar.vue (monthly calendar grid), EditAvailabilitySidebar.vue (edit-availability sidebar with dialogs and options)
  • All $refs calls from Event.vue and LandingPageCalendar.vue remain functional (mixin methods merge onto this)

New files

File Lines Description
mixins/dragMixin.js 425 Drag interaction, touch/mouse events, coordinate math
mixins/availabilityMixin.js 814 Response fetching, availability parsing, calendar events, submit/delete
mixins/signUpMixin.js 183 Sign-up block CRUD, form reset, submission
DaysOnlyCalendar.vue 108 Monthly calendar grid with pagination and hint text
EditAvailabilitySidebar.vue 328 Edit sidebar: calendar options, overlay toggle, guest name, delete dialog

Test plan

  • Create a new event and add availability by dragging
  • View heatmap with multiple respondents
  • Edit existing availability
  • Test days-only events (monthly calendar grid, pagination)
  • Test sign-up form (create blocks, edit, delete, respond)
  • Test group events (calendar overlay, working hours, buffer time)
  • Test schedule event flow
  • Test guest name editing
  • Test delete availability / leave group
  • Verify Event.vue $refs calls work (startEditing, submitAvailability, etc.)

🤖 Generated with Claude Code

Decompose the 4,625-line ScheduleOverlap.vue into smaller, focused modules
to improve maintainability and readability:

- Extract dragMixin.js (425 lines): drag interaction, touch/mouse events,
  coordinate math, column offsets
- Extract availabilityMixin.js (814 lines): response fetching, availability
  parsing, calendar event integration, submit/delete flows, watchers
- Extract signUpMixin.js (183 lines): sign-up block CRUD, form reset,
  submission logic
- Extract DaysOnlyCalendar.vue (108 lines): monthly calendar grid template
  with pagination and hint text
- Extract EditAvailabilitySidebar.vue (328 lines): edit-availability sidebar
  with calendar options, overlay toggle, guest name editing, delete dialog

ScheduleOverlap.vue is reduced to 2,894 lines (37% reduction). All $refs
calls from Event.vue and LandingPageCalendar.vue remain functional since
mixin methods merge onto `this`.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments