Adding new cards with "doNotCompact" grid setting #380
Labels
No labels
_CRITICAL_
API
app
backEnd
Blocked, waiting for further changes
bug
cleanup
close
design
duplicate
enhancement
feature request
frontEnd
help wanted
invalid
low priority
needs input
needs review
project documentation
question
research
reviewed
script
security
SQL
style
testing
topLevel
wontfix
No milestone
No project
No assignees
2 participants
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
Andras/BoundlessFlowCampus2K#380
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Clarification of issue in comment.
The current solution, #289, requires the grid compacting to be set to vertical, which we don't want. When adding a new card when the setting is doNotCompact the cards simply get added to the top left of the dashboard, despite other cards being there.
Before adding:
After Adding:
We probably need to design our own method for checking the closest open location (from the top left corner). All views will have default width and height at some point, use temp values if they dont.
Useful information: https://github.com/react-grid-layout/react-grid-layout/tree/master/src/core
Parent Issue: #289
Im not sure I have correctly published and commited to git but i made a new branch for #380.
Code changes
Changed doNotCompact so instead of using Null it uses horirzontal. Also changed Preventcollision to false because it makes it so that the cards can actually move around and fill the gaps.
Then i changed the X variable in addnewview to infinity to tell the gridlayout to find the next available spot. Alternatively, you can set this to Y and change the doNotCompact to vertical if you would want to make it add vertically aswell. Perhaps this could be an added feature?
Images
First card:
Second Card:
When horizontal "row"? gets full:
Sorry, I think my instructions were a bit unclear, but we want a solution that allows us to have the compact setting as "doNotCompact", which allows us to place cards wherever on the grid without them being squashed to the top. The issue is that without compacting being set to vertical it simply places the new card in the top left corner, disregarding of the fact that other cards are there. I have looked at issues in the react-grid-layout git and it seems like it is a known issue.
However, since we are able to set the location of a card before creating it, know its default size, sizes and locations of other cards, as well as the grid dimensions, we can create a method that checks for spaces large enough for the card that's being added.
There could also be solution involving the grid-settings, but I have been unable to find any.
Oh, correct me if im wrong but do you mean like no snapping? so you can freely put the cards where ever you want without the other cards to move aswell? Because I thought the issue was to stop the cards from "piling" ontop of eachother.
What we want is this setting:
to be doNotCompact. It is however this setting that makes it so that the cards pile on top of each other. So the issue is to find a solution that allows us to keep this setting and for the cards to not pile when adding new cards.
I think that team_1 branch currently has vertical compacting which is a work-around to the piling-issue. I suggest quickly switching to the team_2 branch to better understand what I mean. Sorry for the confusing explanations.
I believe i have solved the bug now so that doNotcompact is still being used. However I ran out of grid spaces to test because you dont seem to have the remove card button in your branch (lol).
Changes and Additions
I commited the code however i never know if im supposed to push or not before review so i will just attach my dashboard.js in this reply
Other finds
I dont know if there is an issue for this or relevant but i found you cannot add two of the same cards. Lets say i add a text view then i want to add another. I have to add another vieww such as map view in order to add text view again.
EDIT
I just realised i accidentally made the logic inside of the team2 week2 branch, trying to move over changes to this branch.
Since this branch is total chaos right now i would advise to just try the solution on branch "Team2_week2"
I checked and ran the code, seems to work well! It would be good if you could break out the functionality from dashboard into its own file, then either clean up your current branch or create a new branch and manually move you changes there.
Very well done, my apologies for the previous confusions!
380-Fix-Add-Card-GridLayoutto #380-new-cards-with-doNotCompact-grid-settingThanks and no worries!
New fix
After trial and error i managed to rebuild the logic based on team1_week2
This branch does not have sizeconfig though but it wouldnt be that hard to add right now its hardcoded to 10 "spaces" on a column for cards to be places on a new row. You can just switch out lines 119-121. I can do it when we get to the point where size config is in the same branch as this resizing logic.. (which might be after today's merge?)
Broke out previous written code for logic in to dashboardUtils.js
I pushed the code to this new branch i made