-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #899 from Health-Informatics-UoN/feat/607/projects…
…-pages Add Projects pages: Index and Details
- Loading branch information
Showing
29 changed files
with
1,720 additions
and
177 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -44,6 +44,7 @@ class Meta: | |
| "visibility", | ||
| "created_at", | ||
| "hidden", | ||
| "projects", | ||
| ) | ||
|
|
||
|
|
||
|
|
||
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| "use server"; | ||
|
|
||
| import request from "@/lib/api/request"; | ||
| import { fetchAllPages } from "@/lib/api/utils"; | ||
|
|
||
| const fetchKeys = { | ||
| list: (filter?: string) => (filter ? `projects/?${filter}` : "projects/"), | ||
| projectsDataset: (dataset: string) => `projects/?dataset=${dataset}`, | ||
| project: (id: string) => `projects/${id}/`, | ||
| }; | ||
|
|
||
| export async function getProjectsList( | ||
| filter?: string | undefined | ||
| ): Promise<PaginatedResponse<Project>> { | ||
| try { | ||
| return await request<Project>(fetchKeys.list(filter)); | ||
| } catch (error) { | ||
| console.warn("Failed to fetch data."); | ||
| return { count: 0, next: null, previous: null, results: [] }; | ||
| } | ||
| } | ||
|
|
||
| export async function getAllProjects(): Promise<Project[]> { | ||
| try { | ||
| // Add a fake filter to the query to ensure the fetchAllPages call works normally | ||
| return await fetchAllPages<Project>(fetchKeys.list(" ")); | ||
| } catch (error) { | ||
| console.warn("Failed to fetch all projects data"); | ||
| return []; | ||
| } | ||
| } | ||
|
|
||
| export async function getProjectsDataset( | ||
| dataset: string | ||
| ): Promise<PaginatedResponse<Project>> { | ||
| try { | ||
| return request<Project>(fetchKeys.projectsDataset(dataset)); | ||
| } catch (error) { | ||
| console.warn("Failed to fetch data."); | ||
| return { count: 0, next: null, previous: null, results: [] }; | ||
| } | ||
| } | ||
|
|
||
| export async function getProject(id: string): Promise<Project | null> { | ||
| try { | ||
| return await request<Project | null>(fetchKeys.project(id)); | ||
| } catch (error) { | ||
| return null; | ||
| } | ||
| } |
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
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
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
50 changes: 50 additions & 0 deletions
50
app/next-client-app/app/(protected)/projects/[id]/columns.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| "use client"; | ||
|
|
||
| import { DataTableColumnHeader } from "@/components/data-table/DataTableColumnHeader"; | ||
| import { ColumnDef } from "@tanstack/react-table"; | ||
| import { format } from "date-fns/format"; | ||
|
|
||
| export const columns: ColumnDef<DataSet>[] = [ | ||
| { | ||
| accessorKey: "id", | ||
| header: ({ column }) => ( | ||
| <DataTableColumnHeader column={column} title="ID" sortName="id" /> | ||
| ), | ||
| enableHiding: false, | ||
| enableSorting: true, | ||
| }, | ||
| { | ||
| accessorKey: "name", | ||
| header: ({ column }) => ( | ||
| <DataTableColumnHeader column={column} title="Name" sortName="name" /> | ||
| ), | ||
| enableHiding: true, | ||
| enableSorting: true, | ||
| }, | ||
| { | ||
| id: "Creation Date", | ||
| accessorKey: "created_at", | ||
| header: ({ column }) => ( | ||
| <DataTableColumnHeader | ||
| column={column} | ||
| title="Creation Date" | ||
| sortName="created_at" | ||
| /> | ||
| ), | ||
| enableHiding: true, | ||
| enableSorting: true, | ||
| cell: ({ row }) => { | ||
| const date = new Date(row.original.created_at); | ||
| return format(date, "MMM dd, yyyy h:mm a"); | ||
| }, | ||
| }, | ||
| { | ||
| id: "Data Partner", | ||
| accessorKey: "data_partner.name", | ||
| header: ({ column }) => ( | ||
| <DataTableColumnHeader column={column} title="Data Partner" /> | ||
| ), | ||
| enableHiding: true, | ||
| enableSorting: false, | ||
| }, | ||
| ]; |
80 changes: 80 additions & 0 deletions
80
app/next-client-app/app/(protected)/projects/[id]/layout.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { Forbidden } from "@/components/core/Forbidden"; | ||
| import { NavGroup } from "@/components/core/nav-group"; | ||
| import { Folders } from "lucide-react"; | ||
| import { Boundary } from "@/components/core/boundary"; | ||
| import { Suspense } from "react"; | ||
| import { Skeleton } from "@/components/ui/skeleton"; | ||
| import { format } from "date-fns/format"; | ||
| import { InfoItem } from "@/components/core/InfoItem"; | ||
| import Link from "next/link"; | ||
| import { getProject } from "@/api/projects"; | ||
| import { AvatarList } from "@/components/core/avatar-list"; | ||
|
|
||
| export default async function DatasetLayout({ | ||
| params, | ||
| children, | ||
| }: Readonly<{ | ||
| params: { id: string }; | ||
| children: React.ReactNode; | ||
| }>) { | ||
| const items = [ | ||
| { | ||
| name: "Datasets", | ||
| slug: "", | ||
| iconName: "Database", | ||
| }, | ||
| ]; | ||
|
|
||
| const project = await getProject(params.id); | ||
| let createdDate = new Date(); | ||
|
|
||
| if (!project) { | ||
| return <Forbidden />; | ||
| } | ||
|
|
||
| createdDate = new Date(project.created_at); | ||
|
|
||
| return ( | ||
| <div className="space-y-2"> | ||
| <div className="flex font-semibold text-xl items-center space-x-2"> | ||
| <Folders className="text-gray-500" /> | ||
| <Link href={`/projects`}> | ||
| <h2 className="text-gray-500 dark:text-gray-400">Projects</h2> | ||
| </Link> | ||
| <h2 className="text-gray-500 dark:text-gray-400">{"/"}</h2> | ||
| <Folders className="text-orange-700" /> | ||
| <h2>{project?.name}</h2> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col md:flex-row md:items-center text-sm space-y-2 md:space-y-0 divide-y md:divide-y-0 md:divide-x divide-gray-300"> | ||
| <InfoItem | ||
| label="Created" | ||
| value={format(createdDate, "MMM dd, yyyy h:mm a")} | ||
| className="py-1 md:py-0 md:pr-3" | ||
| /> | ||
| <div className="py-1 md:py-0 md:px-3 h-5 flex items-center gap-2"> | ||
| Members: <AvatarList members={project?.members || []} /> | ||
| </div> | ||
| </div> | ||
| {/* "Navs" group */} | ||
| <div className="flex justify-between"> | ||
| <NavGroup | ||
| path={`/projects/${params.id}`} | ||
| items={[ | ||
| ...items.map((x) => ({ | ||
| text: x.name, | ||
| slug: x.slug, | ||
| iconName: x.iconName, | ||
| })), | ||
| ]} | ||
| /> | ||
| </div> | ||
| <Boundary> | ||
| {" "} | ||
| <Suspense fallback={<Skeleton className="h-full w-full" />}> | ||
| {children} | ||
| </Suspense> | ||
| </Boundary> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.