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

Migrate CIDER Resource Allocation Interface to XRAS Admin and implement relative_order drag and sort functionality #8

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
0a848bc
feat(edit-resource): add placeholder for edit resource component
yomatters Sep 17, 2024
729c67b
xras ui admin React components for new interface
asimregmi Sep 24, 2024
1c04a17
added support for add/update Required Resources & utils, reducers
asimregmi Sep 27, 2024
3e0a6a9
minor formatting and tweaks in Allocation Grid
asimregmi Sep 27, 2024
966e4d5
New AddNewModal react component for allocation types & required resou…
asimregmi Oct 4, 2024
7b1db38
added new Resources component to drag and sort resources by relative_…
asimregmi Oct 15, 2024
9985536
updated styles for drag and ordering, code refactoring, and new scrol…
asimregmi Oct 16, 2024
8be91be
changed fetch URL to /resources instead of /resources/resource_id
asimregmi Oct 21, 2024
4f3b0f9
added relative_url_root
asimregmi Oct 22, 2024
14a58ed
updated error handling
asimregmi Oct 23, 2024
2b8f07c
fix: Changed resource_name to display_resource_name
rebeccaeve Nov 4, 2024
a61a6e6
custom hooksand updated React component
asimregmi Nov 13, 2024
479e9b6
handleChange function for coluumn level and cell level onChange handlers
asimregmi Nov 13, 2024
9229738
small fix to remove allocation id
asimregmi Nov 13, 2024
23bb732
exchange rates UI component, reducers, and useExchangeRates.js hooks
asimregmi Nov 21, 2024
faf9f2b
added DatePicker component and date validation before submission
asimregmi Jan 25, 2025
5e705df
added notes under ExchangeRate Grid, usesExchangeRates feature boolean
asimregmi Jan 27, 2025
6ca35db
enable/disable dates and rate fields and code improvement
asimregmi Jan 30, 2025
39ce2ad
bug fix for empty rate error
asimregmi Jan 31, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,897 changes: 4,897 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

59 changes: 59 additions & 0 deletions src/edit-resource/AddNewModal.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from 'react';
import PropTypes from 'prop-types';

export const AddNewModal = ({ show, onClose, title, children }) => {
if (!show) {
return null;
}

return (
<div style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
display: 'flex',
alignItems: 'center',
zIndex: 1050,
}}>
<div className="modal fade in" tabIndex="-1" role="dialog" aria-hidden="true" style={{
width: '90%',
maxWidth: '600px',
maxHeight: '90%',
overflow: 'auto',
backgroundColor: 'white',
position: 'relative',
}}>
asimregmi marked this conversation as resolved.
Show resolved Hide resolved
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" onClick={onClose} aria-label="Close">
<h3 aria-hidden="true" className="text-danger">&times;</h3>
</button>
<h3 className="modal-title">{title}</h3>
</div>
<div className="modal-body">
{children}
</div>
<div className="modal-footer" style={{
padding: '15px',
textAlign: 'right',
borderTop: '1px solid #e5e5e5',
backgroundColor: '#f8f9fa'
}}>
</div>
</div>
</div>
</div>
</div>
);
};

AddNewModal.propTypes = {
show: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
children: PropTypes.node.isRequired,
};
33 changes: 33 additions & 0 deletions src/edit-resource/AllocationTypesGrid.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
import Grid from '../shared/Grid';
import style from './AllocationTypesGrid.module.scss';

export const AllocationGrid = React.memo(({ columns, rows, onAddRequiredResource, onAddAllocationType }) => (
<div className={style["allocation-types-grid"]}>
<div className={style["header-container"]}>
<h2 className={style["header-title"]}>Allocation Types</h2>
<div className={style["header-buttons"]}>
<button className='btn btn-primary' onClick={onAddAllocationType}>
<i className="fa fa-plus"></i> Add Allocation Type
</button>
<button className='btn btn-primary' onClick={onAddRequiredResource}>
<i className="fa fa-plus"></i> Add Required Resource
</button>
</div>
</div>
<Grid
classes={style["no-scroll-grid"]}
columns={columns}
rows={rows}
rowClasses={Array(rows.length).fill(style["vertical-align-center"])}
/>
</div>
));

AllocationGrid.propTypes = {
columns: PropTypes.array.isRequired,
rows: PropTypes.array.isRequired,
onAddRequiredResource: PropTypes.func.isRequired,
onAddAllocationType: PropTypes.func.isRequired,
};
25 changes: 25 additions & 0 deletions src/edit-resource/AllocationTypesGrid.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}

.header-buttons {
display: flex;
gap: 1rem; /* Space between the buttons */
}

.no-scroll-grid {
overflow: auto; //hidden for no-scroll
height: auto;
}

.allocation-types-grid {
margin-bottom: 0.8rem;
margin-top: 0.8rem;
}

.vertical-align-center td {
vertical-align: middle;
}
Loading