-
Notifications
You must be signed in to change notification settings - Fork 6
Associated projects #332
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
base: main
Are you sure you want to change the base?
Associated projects #332
Conversation
cda0185 to
f270dbd
Compare
|
|
||
| // Route to fetch projects linked to a specific dataset ID | ||
| router.get( | ||
| '/:id/projects', // Adding /:id to represent DatasetID |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should have two separate routes - one which gets all projects for a given dataset id, and another which only fetches the projects which the current user is allowed to read. These routes can have paths /datasets/:id/projects and /datasets/:id/:username/projects.
For these two routes, determine whether the current user is permitted to only view their own projects or all projects, via:
const isPermittedToProjects = accessControls('projects')
# For the /datasets/:id/pprojects route:
isPermittedToProjects('read' )
# For the /datasets/:id/:username/projects route:
isPermittedToProjects('read', { checkOwnership: true } )
Then, in the /datasets/:id/:username/projects route, make sure that the logged-in user is assigned to the projects being retrieved. The other route can return all projects associated with the dataset.
There is a standard pattern we use to tell whether entities retrieved from the API should be filtered by the logged-in user or not. For example, here is a method that retrieves projects either based on the logged-in user, or by ignoring the logged in user. You can see this at https://github.com/IUSCA/bioloop/blob/main/ui/src/services/projects.js#L7
| asyncHandler(async (req, res, next) => { | ||
| const { search, sort_order, sort_by } = req.query; | ||
| // const datasetID = req.params.id; // DatasetID is retrieved from the URL parameter | ||
| const datasetID = parseInt(req.params.id, 10); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think this conversion is needed
| take: req.query.take, | ||
| orderBy: sort_obj, | ||
| where: filters, | ||
| include: build_include_object(), // Including related data as per existing logic |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rename build_include_object to build_projects_include_object
| import toast from "@/services/toast"; | ||
| import { useDebounceFn } from "@vueuse/core"; | ||
| const collapsed = ref(true); | ||
| const props = defineProps({ datasetId: String, appendFileBrowserUrl: Boolean }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of receiving datasetId as a prop and then using it to fetch associated projects, retrireve the associated projects from the parent component, and send that list of projects as a prop to this component. Then, use props.projects for constructing your project-list-table.
Since we are using pagination, you will also need another prop called totalItems which should also be provived by the parent component.
Remove the datasetId prop.
| sort_order: params.value.sortingOrder, | ||
| }; | ||
| const IntdatasetID = parseInt(props.datasetId, 10); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This casting shouldn't be necessary
| fetch_projects(); | ||
| watch( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This watcher will be moved to Dataset.vue
| }, | ||
| ); | ||
| watch( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This watcher will be moved to Dataset.vue
|
|
||
| //Code for displaying associated projects for a particular dataset | ||
|
|
||
| getProjects({ id, params }) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't catch errors here. There could be cases where we don't want to show errors when projects-retrieval fails.
Move the catch block to the component that calls the getProjects() method.
| } | ||
| params.value.currentPage = 1; | ||
| }, | ||
| ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add a watcher here which watches for changes in params. Emit an event to make the parent component aware of the fact that the search parameters have changes.
Then, in your parent component, catch this event, and use the updated params that the above event emitted to re-fetch the projects. This can be accomplished simply by moving your these 2 existing watchers to Dataset.vue
Description
The 'Associated projects' table displays the details of the projects associated with the dataset. It has the pagination, search, and sort features.
This table displays Name, Users, Datasets, Created_at, Updated_at, Assigned_at, and Assigner as columns.
1.) The name column demonstrates the project name in the link form. When clicked on, it will navigate to the respective project page.
2.) The Users column displays the list of users who are involved in the project.
3.) The Datasets column shows the number of datasets that are involved with the project.
4.) The Created_at column explains the date on which the project was created.
5.) The Updated_at column explains the date on which the project was recently updated.
6.) The Assigned_at column explains the date when the project is assigned to the respective dataset.
7.) The Assignor column displays the name of the user who assigned the dataset to this project.
Closes #[257]
Changes Made
Added a dropdown component of the table 'Associated Projects' on the dataset page.
List the main changes made in this PR. Be as specific as possible.
Screenshots (if applicable)
1.)

2.)

3.)

Checklist
Before submitting this PR, please make sure that: