128 lines
3.3 KiB
TypeScript
128 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useState } from 'react';
|
|
import { Package as PackageIcon, Plus } from 'lucide-react';
|
|
|
|
import { PageHeader } from '@/components/page-header';
|
|
import { Button } from '@/components/ui/button';
|
|
import type { Package } from '@/types';
|
|
|
|
import { PackageDialog } from './components/PackageDialog';
|
|
import { PackageTable } from './components/PackageTable';
|
|
import { usePackageColumns } from './components/PackageColumns';
|
|
import { usePackageFilters } from './hooks/usePackageFilters';
|
|
import { usePackageForm } from './hooks/usePackageForm';
|
|
import {
|
|
useDeletePackageMutation,
|
|
usePackagesQuery,
|
|
useProjectOptionsQuery,
|
|
} from './hooks/usePackageQueries';
|
|
|
|
export default function PackagePage() {
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
const { skip, setSkip, limit, setLimit } = usePackageFilters();
|
|
const packagesQuery = usePackagesQuery({ skip, limit });
|
|
const projectsQuery = useProjectOptionsQuery();
|
|
const deletePackageMutation = useDeletePackageMutation();
|
|
const packageForm = usePackageForm({
|
|
onSaved: () => setIsDialogOpen(false),
|
|
});
|
|
const {
|
|
register,
|
|
onSubmit,
|
|
openCreate: prepareCreatePackage,
|
|
openEdit: prepareEditPackage,
|
|
resetForm,
|
|
packageId,
|
|
projectId,
|
|
setProjectId,
|
|
errors,
|
|
isSubmitted,
|
|
canSubmit,
|
|
isSaving,
|
|
} = packageForm;
|
|
|
|
const openCreate = useCallback(() => {
|
|
prepareCreatePackage();
|
|
setIsDialogOpen(true);
|
|
}, [prepareCreatePackage]);
|
|
|
|
const openEdit = useCallback(
|
|
(pkg: Package) => {
|
|
prepareEditPackage(pkg);
|
|
setIsDialogOpen(true);
|
|
},
|
|
[prepareEditPackage],
|
|
);
|
|
|
|
const handleDialogOpenChange = useCallback(
|
|
(open: boolean) => {
|
|
setIsDialogOpen(open);
|
|
if (!open) {
|
|
resetForm();
|
|
}
|
|
},
|
|
[resetForm],
|
|
);
|
|
|
|
const deletePackage = useCallback(
|
|
(pkg: Package) => {
|
|
if (!confirm(`Are you sure you want to delete package "${pkg.name}"?`)) {
|
|
return;
|
|
}
|
|
deletePackageMutation.mutate(pkg);
|
|
},
|
|
[deletePackageMutation],
|
|
);
|
|
|
|
const projects = projectsQuery.data?.items ?? [];
|
|
const packages = packagesQuery.data?.items ?? [];
|
|
const total = packagesQuery.data?.totalItems ?? 0;
|
|
const columns = usePackageColumns(projects);
|
|
|
|
return (
|
|
<>
|
|
<main className="relative z-10 space-y-5">
|
|
<PageHeader
|
|
title="Package Management"
|
|
description="Manage project packages"
|
|
icon={PackageIcon}
|
|
actions={
|
|
<Button onClick={openCreate} size="sm">
|
|
<Plus />
|
|
Add New Package
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<PackageTable
|
|
columns={columns}
|
|
packages={packages}
|
|
isLoading={packagesQuery.isLoading || deletePackageMutation.isPending}
|
|
skip={skip}
|
|
limit={limit}
|
|
total={total}
|
|
onPageChange={setSkip}
|
|
onLimitChange={setLimit}
|
|
onEdit={openEdit}
|
|
onDelete={deletePackage}
|
|
/>
|
|
</main>
|
|
|
|
<PackageDialog
|
|
open={isDialogOpen}
|
|
onOpenChange={handleDialogOpenChange}
|
|
packageId={packageId}
|
|
projectId={projectId}
|
|
onProjectChange={setProjectId}
|
|
register={register}
|
|
errors={errors}
|
|
isSubmitted={isSubmitted}
|
|
onSubmit={onSubmit}
|
|
canSubmit={canSubmit}
|
|
isSaving={isSaving}
|
|
/>
|
|
</>
|
|
);
|
|
}
|