Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[atable] Fix atable modal attach to cell #220

Merged
merged 7 commits into from
Dec 17, 2024

Conversation

crabinak
Copy link
Collaborator

@Alchez @agritheory Here is a branch I came up with to hopefully solve #214 . I have this working by switching the modal to use absolute positioning, so it will move along with the scrolling without needing any scroll listeners (I ran into the same scroll listener issues in Histoire).

I also included the modal's ability to detect edges of its container (atable in this instance). Usually the modal will appear left along with the cell and below it, but if the modal would overflow off the right edge, it will instead adjust to butt up against the right edge of the container. If it would overflow below, it instead appears above the cell (the bottom 2 or three cells will use this behavior).

I tried to encapsulate most of this modal edge-detecting logic within ATableModal itself while keeping it fairly agnostic as to what its container or content will be.

I found it was easier to get positioning by using offsetLeft/Top to get the element position in its container (useElementSize was only giving me the position in the viewport). I felt like I was frantically duct taping this together while working on it, so there is probably room for improvement.

Copy link
Contributor

github-actions bot commented Dec 12, 2024

Coverage Report for ./atable

Status Category Percentage Covered / Total
🟢 Lines 72.24% (🎯 70%) 164 / 227
🟢 Statements 72.68% (🎯 70%) 173 / 238
🟢 Functions 82.22% (🎯 70%) 37 / 45
🔴 Branches 50.54% (🎯 70%) 92 / 182
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
atable/src/components/ACell.vue 94.33% 61.11% 100% 94.33% 106, 129-132, 163
atable/src/components/ATable.vue 56% 37.5% 88.88% 55.1% 108-112, 118-146
atable/src/components/ATableModal.vue 90% 75% 50% 90% 49
Unchanged Files
atable/src/utils.ts 100% 100% 100% 100%
atable/src/components/AExpansionRow.vue 0% 0% 0% 0% 33-3
atable/src/components/ARow.vue 58.33% 56.25% 50% 58.33% 50-64, 17
atable/src/components/ATableHeader.vue 100% 57.14% 100% 100%
atable/src/stores/table.ts 77.65% 53.03% 88.88% 77.64% 39-40, 53, 83-84, 122, 126-137, 164, 172-173, 179
Generated in workflow #504 for commit a75bd4b by the Vitest Coverage Report Action

Copy link
Contributor

github-actions bot commented Dec 12, 2024

Coverage Report for ./aform

Status Category Percentage Covered / Total
🟢 Lines 85.83% (🎯 70%) 200 / 233
🟢 Statements 85.29% (🎯 70%) 203 / 238
🟢 Functions 77.77% (🎯 70%) 42 / 54
🔴 Branches 68.46% (🎯 70%) 76 / 111
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
aform/src/components/form/ADate.vue 66.66% 66.66% 33.33% 66.66% 31, 41, 4
Unchanged Files
aform/src/components/AForm.vue 90% 40% 85.71% 90% 40-41
aform/src/components/base/CollapseButton.vue 100% 100% 100% 100%
aform/src/components/form/ACheckbox.vue 100% 100% 100% 100%
aform/src/components/form/AComboBox.vue 0% 0% 100% 0% 2-1
aform/src/components/form/ADatePicker.vue 94.91% 81.81% 92.85% 94.73% 68, 103, 29
aform/src/components/form/ADropdown.vue 91.48% 76.92% 84.61% 91.48% 55, 84-85, 93
aform/src/components/form/AFieldset.vue 87.5% 100% 50% 87.5% 8
aform/src/components/form/AFileAttach.vue 0% 0% 0% 0% 26-17
aform/src/components/form/ANumericInput.vue 100% 100% 100% 100%
aform/src/components/form/ATextInput.vue 100% 100% 100% 100%
aform/src/components/utilities/Login.vue 87.5% 88.88% 100% 87.5% 76-78
aform/src/directives/mask.ts 84.09% 59.09% 100% 83.72% 33-34, 41, 50, 65, 98, 103
Generated in workflow #504 for commit a75bd4b by the Vitest Coverage Report Action

@agritheory agritheory changed the title Fix atable modal attach to cell [atable] Fix atable modal attach to cell Dec 13, 2024
@agritheory agritheory marked this pull request as ready for review December 17, 2024 13:40
@agritheory agritheory merged commit d47e133 into development Dec 17, 2024
4 checks passed
@Alchez Alchez linked an issue Jan 23, 2025 that may be closed by this pull request
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.

[atable] ATableModal does not attach to cell when scrolling
3 participants