Skip to content
This repository has been archived by the owner on Sep 9, 2024. It is now read-only.

Manage apps #116

Merged
merged 2 commits into from
Jun 1, 2024
Merged

Manage apps #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4c10566
Expandable table rows
MichaelMoyoMushabati Jun 1, 2024
20384d1
Manage Apps
MichaelMoyoMushabati Jun 1, 2024
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
17 changes: 11 additions & 6 deletions packages/ocular-ui/components/marketplace/marketplace-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,23 @@ const sidebarNavLinks = [
title: "Manage apps",
href: "/dashboard/marketplace/manage-apps",
},
{
title: "OAuth credentials",
href: "/dashboard/marketplace/oauth-credentials",
},

]

export default function MarketplaceLayout({ children }: MarketplaceLayoutProps) {
return (
<div className="flex flex-row items-start justify-start">
<div className="border-r h-screen sticky w-[250px] top-0">
<SidebarNav items={sidebarNavLinks} />
</div>
<div style={{ flex: 20 }} className="flex items-center justify-center">
{children}
</div>
<div className="border-r h-screen sticky w-[250px] top-0">
<div className="mx-5 text-md font-semibold mt-10">Ocular AI Marketplace</div>
<SidebarNav items={sidebarNavLinks} />
</div>
<div style={{ flex: 20 }} className="flex items-center justify-center">
{children}
</div>
</div>
)
}
98 changes: 73 additions & 25 deletions packages/ocular-ui/pages/dashboard/marketplace/manage-apps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
'use client';

import React, { useState } from 'react';
import { ChevronRight } from 'lucide-react';
import SectionContainer from '@/components/section-container';
import {
Table,
Expand All @@ -21,9 +23,9 @@ import {
getSortedRowModel,
useReactTable,
} from '@tanstack/react-table';
import * as React from 'react';
import Image from 'next/image';
import { formatLabel } from '@/lib/utils';
import { Button } from '@/components/ui/button';

// Define the App type
export type App = {
Expand All @@ -38,29 +40,35 @@ export const columns: ColumnDef<App>[] = [
header: 'App Name',
cell: ({ row }) => (
<div className="flex items-center">
<ChevronRight
className={`mr-2 h-4 transition-transform ${
row.getIsExpanded() ? 'rotate-90' : ''
}`}
/>
<Image
src={`/${row.original.name}.svg`}
alt={`${row.original.name} logo`}
className="w-6 h-6 mr-2"
width={24}
height={24}
src={`/${row.original.name}.svg`}
alt={`${row.original.name} logo`}
className="w-6 h-6 mr-2"
width={24}
height={24}
/>
<div>{formatLabel(row.getValue('name'))}</div>
<div className='text-md font-semibold'>{formatLabel(row.getValue('name'))}</div>
</div>
),
},
{
accessorKey: 'id',
header: 'App ID',
cell: ({ row }) => <div>{row.getValue('id')}</div>,
},
// {
// accessorKey: 'id',
// header: 'App ID',
// cell: ({ row }) => <div>{row.getValue('id')}</div>,
// },
];

export default function ManageApps() {
const [sorting, setSorting] = React.useState<SortingState>([]);
const [appData, setAppData] = React.useState<App[]>([]);
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [expandedRow, setExpandedRow] = React.useState<string | null>(null);

React.useEffect(() => {
async function fetchApps() {
Expand All @@ -80,6 +88,10 @@ export default function ManageApps() {
fetchApps();
}, []);

const handleRowClick = (rowId: string) => {
setExpandedRow(expandedRow === rowId ? null : rowId);
};

const table = useReactTable({
data: appData,
columns,
Expand Down Expand Up @@ -122,19 +134,55 @@ export default function ManageApps() {
<TableBody className="overflow-y-auto">
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && 'selected'}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
<React.Fragment key={row.id}>
<TableRow
data-state={row.getIsSelected() && 'selected'}
onClick={() => handleRowClick(row.id)}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{cell.id.includes('name') && (
<div className="flex items-center">
<ChevronRight
className={`mr-2 h-4 transition-transform ${
expandedRow === row.id ? 'rotate-90' : ''
}`}
/>
<Image
src={`/${row.original.name}.svg`}
alt={`${row.original.name} logo`}
className="w-6 h-6 mr-2"
width={24}
height={24}
/>
<div className="text-md font-semibold">
{formatLabel(row.getValue('name'))}
</div>
</div>
)}
{cell.id.includes('name') === false && (
flexRender(
cell.column.columnDef.cell,
cell.getContext()
)
)}
</TableCell>
))}
</TableRow>
{expandedRow === row.id && (
<TableRow>
<TableCell colSpan={columns.length}>
<div className="p-5 rounded-xl space-y-5">
<div className='space-x-5'>
<Button>Configure</Button>
<Button variant={"secondary"}>Uninstall</Button>
</div>
<p><strong>App ID:</strong> {row.original.id}</p>
</div>
</TableCell>
</TableRow>
)}
</React.Fragment>
))
) : (
<TableRow>
Expand Down