Skip to content

Conversation

@karthiek390
Copy link
Collaborator

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.

  • Feature added
  • Bug fixed
  • Code refactored
  • Tests changed
  • Documentation updated
  • Other changes: [describe]

Screenshots (if applicable)

1.)
Initiall display of associated projects

2.)
Associated Projects_Search

3.)
Associated Projects_Sort

Checklist

Before submitting this PR, please make sure that:

  • Your code passes linting and coding style checks.
  • Documentation has been updated to reflect the changes.
  • You have reviewed your own code and resolved any merge conflicts.
  • You have requested a review from at least one team member.
  • Any relevant issue(s) have been linked to this PR.

@karthiek390 karthiek390 marked this pull request as draft November 5, 2024 17:45
@karthiek390 karthiek390 marked this pull request as ready for review December 3, 2024 22:53

// Route to fetch projects linked to a specific dataset ID
router.get(
'/:id/projects', // Adding /:id to represent DatasetID
Copy link
Contributor

@ri-pandey ri-pandey Apr 11, 2025

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);
Copy link
Contributor

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
Copy link
Contributor

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 });
Copy link
Contributor

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);
Copy link
Contributor

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(
Copy link
Contributor

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(
Copy link
Contributor

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 }) {
Copy link
Contributor

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;
},
);
Copy link
Contributor

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

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.

3 participants