Migrate CIDER Resource Allocation Interface to XRAS Admin and implement relative_order drag and sort functionality #8
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…rces, updated actions and reducers, updated Allocation Types table and dropdowns
asimregmi
changed the title
asimregmi
changed the title
yomatters
reviewed
Oct 24, 2024
There was a problem hiding this comment.
@asimregmi, this is looking really good! I've made some specific suggestions about parts of the code inline. Here are a few general points of feedback, mainly about the user experience.
- On the resource list page, please remove the paragraph beginning with "Only resource submission questions can be modified...". That's not true anymore with these changes.
- On the resource edit page, I suggest renaming the "Descriptive Text" column to "Help Text." I think that will help to distinguish it from the "Allocations Description" field.
- I'd recommend changing the names of the buttons above the Allocations Types tables to "Manage Allocation Types" and "Manage Required Resources." Then in the modal, you can display a list of checkboxes instead of a select field. That will also allow users to remove an item, which I think is particularly important for the required resources.
- With Vite, you don't need to import the global
Reactobject in each component unless you're explicitly referencing it. - I'd recommend using a code formatter and linter to format and check your JavaScript code. I like Prettier for formatting and ESLint for linting. Both have extensions that integrate them with VSCode (and probably other editors), or you can run them from the command line.
src/shared/Grid.jsx
Outdated
Comment on lines
10
to
40
| select: ({ column, row, style }) => ( | ||
| <td style={style}> | ||
| <SelectInput | ||
| label="" | ||
| options={row[column.key].options} | ||
| value={row[column.key].value} | ||
| onChange={(e) => row[column.key].onChange(e.target.value)} | ||
| style={{ width: '100%', margin: 0 }} | ||
| /> | ||
| </td> | ||
| ), | ||
| input: ({ column, row, style }) => ( | ||
| <td style={style}> | ||
| <FormField | ||
| label="" | ||
| type="text" | ||
| value={row[column.key].value} | ||
| onChange={(e) => row[column.key].onChange(e.target.value)} | ||
| style={{ width: '92%', margin: 0 }} | ||
| /> | ||
| </td> | ||
| ), | ||
| checkbox: ({ column, row, style }) => ( | ||
| <td style={style}> | ||
| <input | ||
| type="checkbox" | ||
| checked={row[column.key].checked} | ||
| onChange={(e) => row[column.key].onChange(e.target.checked)} | ||
| /> | ||
| </td> | ||
| ), |
There was a problem hiding this comment.
This approach, where the row contains configuration objects for each field, is interesting, though it's different from what I did in the My Projects interface. Let's discuss this offline and decide how we're going to handle editable fields in the grid so that we can use the same approach everywhere.
| const Tooltip = ({ title, placement, children }) => { | ||
| // useEffect hook to initialize the tooltip on component mount & destroy on component unmount | ||
| useEffect(() => { | ||
| $('[data-toggle="tooltip"]').tooltip(); |
There was a problem hiding this comment.
I'd prefer not to add a jQuery dependency if we can avoid it, though I realize that may be tricky with Bootstrap 2. Have you tried the Tooltip component from React Bootstrap? If the CSS classes haven't changed, it may work with Bootstrap 2 as well.
src/resources/Resources.jsx
Outdated
Comment on lines
16
to
49
| const handleDragStart = (e, index) => { | ||
| draggedIndexRef.current = index; | ||
| }; | ||
|
|
||
| const handleDragOver = (e, index) => { | ||
| e.preventDefault(); | ||
| if (draggedIndexRef.current === index) return; | ||
|
|
||
| const newResources = [...resources]; | ||
| const draggedItem = newResources[draggedIndexRef.current]; | ||
| newResources.splice(draggedIndexRef.current, 1); | ||
| newResources.splice(index, 0, draggedItem); | ||
|
|
||
| draggedIndexRef.current = index; | ||
| setResources(newResources); | ||
|
|
||
| // Scroll logic to start scroll scroll when dragging items | ||
| const { clientY } = e; | ||
| const scrollThreshold = 130; | ||
|
|
||
| if (clientY < scrollThreshold) { | ||
| startScrolling(-1, scrollIntervalRef); | ||
| } else if (window.innerHeight - clientY < scrollThreshold) { | ||
| startScrolling(1, scrollIntervalRef); | ||
| } else { | ||
| stopScrolling(scrollIntervalRef); | ||
| } | ||
| }; | ||
|
|
||
| const handleDrop = () => { | ||
| draggedIndexRef.current = null; | ||
| stopScrolling(scrollIntervalRef); | ||
| updateBackend(relative_url_root, resources); | ||
| }; |
There was a problem hiding this comment.
If it's not too much work, it might be nice to break the drag-to-reorder logic out into a separate component. I can imagine it's something we might want to use elsewhere.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
This PR implements the migration of "Allocations" page from CIDER into XRAS Admin
resources/resource_idpage. It also adds a new dragging and sorting functionality in the main/resourceslisting page.Branch
ramps-583-implement-relative-order-column-in-allocations_process_resourcesis checked out fromramps-554-migrate-cider-resource-allocations-interfaceso has both changes from the two Jira tickets.Related
Changes
EditResource.jsxand supporting React components, helpers, and reducers inside/src/edit-resourceResources.jsxand supporting reducers and helper functions inside/src/resourcesGrid.jsx,Alert.jsxxras_admin/app/views/resources/show.html.erbapp/views/resources/index.html.erbandapp/views/resources/show.html.erbto accomodate new React componentsTesting
git pull origin/ramps-583-implement-relative-order-column-in-allocations_process_resourcesin xras_admin repogit pull origin/ramps-583-implement-relative-order-column-in-allocations_process_resourcesin xras-ui reporelative_orderinteger column inxras.allocations_process_resourcestablenpm run devin xras-ui directory