refactor(frontend): Pass action button into data table toolbar

Refs: #9 #15 #16

src/components/ui/data-table-toolbar.tsx

@@ -8,7 +8,6 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { DataTableViewOptions } from '@/components/ui/data-table-view-options';
 import { type LucideIcon } from 'lucide-react';
-import DataTableActionsButton from '@/components/data-table-actions-button';
 import ProfileFormDialog from '@/sections/profiles/components/profile-form-dialog';
 
 interface FilterOption {
@@ -32,19 +31,17 @@ export interface DataTableToolbarProps<TData> {
   table: Table<TData>;
   searchInputFilter: SearchInputFilter;
   filterableColumns: FilterableColumn[];
+  children: React.ReactNode;
 }
 
 export function DataTableToolbar<TData>({
   table,
   searchInputFilter,
   filterableColumns,
+  children,
 }: Readonly<DataTableToolbarProps<TData>>) {
   const isFiltered = table.getState().columnFilters.length > 0;
 
-  const selectedRows = table
-    .getSelectedRowModel()
-    .rows.map(({ original }) => original);
-
   const [showCreateDialog, setShowCreateDialog] = React.useState(false);
 
   return (
@@ -102,7 +99,7 @@ export function DataTableToolbar<TData>({
           setOpen={setShowCreateDialog}
         />
 
-        <DataTableActionsButton selectedRows={selectedRows} />
+        {children}
 
         <DataTableViewOptions table={table} />
       </div>

src/sections/profiles/components/profile-actions-button.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import React from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { ChevronDown } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import ProfileFormDialog from '@/sections/profiles/components/profile-form-dialog';
+import { Profile } from '@/modules/profiles/domain';
+
+interface DataTableActionsButtonProps {
+  selectedRows: Profile[];
+}
+
+export default function ProfileActionsButton({
+  selectedRows,
+}: Readonly<DataTableActionsButtonProps>) {
+  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false);
+  const [showUpdateDialog, setShowUpdateDialog] = React.useState(false);
+  const [showCreateDialog, setShowCreateDialog] = React.useState(false);
+
+  async function onDelete() {
+    console.info('deleted', selectedRows);
+    // invoke('delete_profile', { profileName: profile.name }).then(() => {
+    //   mutate('get_profiles');
+    // });
+    // setShowDeleteDialog(false);
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant='outline'
+            size='sm'
+            className='ml-auto hidden h-8 border-dashed lg:flex'
+          >
+            <ChevronDown className='mr-2 h-4 w-4' />
+            Actions
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align='end' className='w-[150px]'>
+          <DropdownMenuItem onSelect={() => setShowCreateDialog(true)}>
+            Create new
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={() => setShowUpdateDialog(true)}
+            disabled={!selectedRows || selectedRows?.length !== 1}
+          >
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onSelect={() => setShowDeleteDialog(true)}
+            disabled={!selectedRows || selectedRows?.length === 0}
+          >
+            Delete all
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <ProfileFormDialog
+        open={showCreateDialog}
+        setOpen={setShowCreateDialog}
+      />
+
+      <ProfileFormDialog
+        profile={selectedRows[0]}
+        open={showUpdateDialog}
+        setOpen={setShowUpdateDialog}
+      />
+
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete the{' '}
+              <strong>&nbsp;ALL</strong> selected profiles as well as it&apos;s{' '}
+              corresponding configuration settings and credentials.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={onDelete}>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

src/sections/profiles/components/profile-data-table.tsx

@@ -50,6 +50,7 @@ import {
 import ProfileFormDialog from '@/sections/profiles/components/profile-form-dialog';
 import { useReactTable } from '@tanstack/react-table';
 import { DataTablePagination } from '@/components/ui/data-table-pagination';
+import ProfileActionsButton from '@/sections/profiles/components/profile-actions-button';
 
 const RowAction: React.FC<{ row: Row<Profile> }> = ({ row }) => {
   const profile = row.original;
@@ -94,8 +95,8 @@ const RowAction: React.FC<{ row: Row<Profile> }> = ({ row }) => {
           <AlertDialogHeader>
             <AlertDialogTitle>Are you sure?</AlertDialogTitle>
             <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete the
-              <strong>&nbsp;{profile.name}</strong> profile as well as it&apos;s
+              This action cannot be undone. This will permanently delete the{' '}
+              <strong>&nbsp;{profile.name}</strong> profile as well as it&apos;s{' '}
               corresponding configuration settings and credentials.
             </AlertDialogDescription>
           </AlertDialogHeader>
@@ -264,13 +265,19 @@ export function ProfileDataTable({ data }: Readonly<ProfileDataTableProps>) {
     getFacetedUniqueValues: getFacetedUniqueValues(),
   });
 
+  const selectedRows = table
+    .getSelectedRowModel()
+    .rows.map(({ original }) => original);
+
   return (
     <div className='space-y-4'>
       <DataTableToolbar
         filterableColumns={filterableColumns}
         searchInputFilter={searchInputFilter}
         table={table}
-      />
+      >
+        <ProfileActionsButton selectedRows={selectedRows} />
+      </DataTableToolbar>
 
       <DataTable table={table} />
 

src/sections/profiles/components/profile-form-dialog.tsx

@@ -496,6 +496,8 @@ export default function ProfileFormDialog({
   const { resetFormData } = userProfileFormStore();
 
   function onOpenChange(openState: boolean) {
+    console.info('is edit', profile != undefined);
+    console.info('open state changed', openState);
     setOpen(openState);
     if (open) {
       resetFormData();