Skip to content
This repository was archived by the owner on Aug 30, 2025. It is now read-only.

Commit daef366

Browse files
alishakawaguchialishakawaguchi
authored
change schema table exclude column to use switches (#256)
1 parent d54ce0e commit daef366

File tree

3 files changed

+107
-143
lines changed

3 files changed

+107
-143
lines changed

‎frontend/components/jobs/SchemaTable/column.tsx

Lines changed: 9 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,8 @@ import {
2323
PopoverContent,
2424
PopoverTrigger,
2525
} from '@/components/ui/popover';
26-
import {
27-
Select,
28-
SelectContent,
29-
SelectItem,
30-
SelectTrigger,
31-
SelectValue,
32-
} from '@/components/ui/select';
3326

27+
import { Switch } from '@/components/ui/switch';
3428
import { cn } from '@/libs/utils';
3529
import { DatabaseColumn } from '@/neosync-api-client/mgmt/v1alpha1/connection_pb';
3630
import { Transformer } from '@/neosync-api-client/mgmt/v1alpha1/job_pb';
@@ -164,7 +158,7 @@ export function getColumns(
164158
{
165159
accessorKey: 'exclude',
166160
header: ({ column }) => (
167-
<DataTableColumnHeader column={column} title="Exclude" />
161+
<DataTableColumnHeader column={column} title="Include" />
168162
),
169163
cell: ({ row }) => {
170164
return (
@@ -174,35 +168,13 @@ export function getColumns(
174168
render={({ field }) => (
175169
<FormItem>
176170
<FormControl>
177-
<Select
178-
onValueChange={field.onChange}
179-
value={
180-
field.value == true || field.value == 'true'
181-
? 'true'
182-
: 'false'
183-
}
184-
>
185-
<SelectTrigger className="">
186-
<SelectValue />
187-
</SelectTrigger>
188-
<SelectContent>
189-
<SelectItem
190-
className="cursor-pointer"
191-
key="exclude"
192-
value="true"
193-
>
194-
Exclude
195-
</SelectItem>
196-
197-
<SelectItem
198-
className="cursor-pointer"
199-
key="include"
200-
value="false"
201-
>
202-
Include
203-
</SelectItem>
204-
</SelectContent>
205-
</Select>
171+
<Switch
172+
checked={!field.value}
173+
onCheckedChange={(checked: boolean) => {
174+
console.log(checked);
175+
field.onChange(!checked);
176+
}}
177+
/>
206178
</FormControl>
207179
<FormMessage />
208180
</FormItem>

‎frontend/components/jobs/SchemaTable/data-table-toolbar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export function DataTableToolbar<TData>({
6767
const rows = table.getSelectedRowModel();
6868

6969
rows.rows.forEach((r) => {
70-
form.setValue(`mappings.${r.index}.exclude`, value, {
70+
form.setValue(`mappings.${r.index}.exclude`, value === 'false', {
7171
shouldDirty: true,
7272
});
7373
});
@@ -80,11 +80,11 @@ export function DataTableToolbar<TData>({
8080
<SelectValue placeholder="bulk update exclude..." />
8181
</SelectTrigger>
8282
<SelectContent>
83-
<SelectItem className="cursor-pointer" key="exclude" value="true">
83+
<SelectItem className="cursor-pointer" key="exclude" value="false">
8484
Exclude
8585
</SelectItem>
8686

87-
<SelectItem className="cursor-pointer" key="include" value="false">
87+
<SelectItem className="cursor-pointer" key="include" value="true">
8888
Include
8989
</SelectItem>
9090
</SelectContent>

‎frontend/components/jobs/SchemaTable/data-table.tsx

Lines changed: 95 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -232,113 +232,105 @@ export function DataTable<TData, TValue>({
232232
}
233233

234234
return (
235-
<div className="space-y-2">
236-
<div className="flex flex-row">
237-
<div className="basis-1/4 min-w-[170px] max-w-[400px] mb-10"></div>
238-
<div className="basis-3/4">
239-
<DataTableToolbar
240-
table={table}
241-
transformers={transformers}
242-
onClearFilters={() => {
243-
setFiltersUpdated(true);
244-
}}
245-
/>
246-
</div>
235+
<div className="flex flex-row">
236+
<div className="basis-1/3 min-w-[170px] max-w-[400px] pt-[45px]">
237+
<Tree
238+
data={treeData}
239+
className="h-full border rounded-md"
240+
onSelectChange={handlefilter}
241+
/>
247242
</div>
248-
249-
<div className="flex flex-row">
250-
<div className="basis-1/3 min-w-[170px] max-w-[400px]">
251-
<Tree
252-
data={treeData}
253-
className="h-full border rounded-md"
254-
onSelectChange={handlefilter}
255-
/>
256-
</div>
257-
<div className="basis-3/4">
258-
<div className="rounded-md border">
243+
<div className="basis-3/4 space-y-2">
244+
<DataTableToolbar
245+
table={table}
246+
transformers={transformers}
247+
onClearFilters={() => {
248+
setFiltersUpdated(true);
249+
}}
250+
/>
251+
<div className="rounded-md border">
252+
<Table>
253+
<TableHeader>
254+
{table.getHeaderGroups().map((headerGroup) => (
255+
<TableRow key={headerGroup.id}>
256+
{headerGroup.headers.map((header) => {
257+
return (
258+
<TableHead
259+
key={header.id}
260+
className={
261+
header.id == 'select' ? ' w-[40px]' : 'w-[197px]'
262+
}
263+
>
264+
{header.isPlaceholder
265+
? null
266+
: flexRender(
267+
header.column.columnDef.header,
268+
header.getContext()
269+
)}
270+
{header.column.getCanFilter() ? (
271+
<div>
272+
<FilterSelect
273+
column={header.column}
274+
table={table}
275+
transformers={transformers || []}
276+
onSelect={() => {
277+
setFiltersUpdated(true);
278+
}}
279+
/>
280+
</div>
281+
) : null}
282+
</TableHead>
283+
);
284+
})}
285+
</TableRow>
286+
))}
287+
</TableHeader>
288+
</Table>
289+
<ScrollArea className="h-[700px]">
259290
<Table>
260-
<TableHeader>
261-
{table.getHeaderGroups().map((headerGroup) => (
262-
<TableRow key={headerGroup.id}>
263-
{headerGroup.headers.map((header) => {
264-
return (
265-
<TableHead
266-
key={header.id}
267-
className={
268-
header.id == 'select' ? ' w-[40px]' : 'w-[197px]'
269-
}
270-
>
271-
{header.isPlaceholder
272-
? null
273-
: flexRender(
274-
header.column.columnDef.header,
275-
header.getContext()
276-
)}
277-
{header.column.getCanFilter() ? (
278-
<div>
279-
<FilterSelect
280-
column={header.column}
281-
table={table}
282-
transformers={transformers || []}
283-
onSelect={() => {
284-
setFiltersUpdated(true);
285-
}}
286-
/>
287-
</div>
288-
) : null}
289-
</TableHead>
290-
);
291-
})}
291+
<TableBody>
292+
{table.getRowModel().rows?.length ? (
293+
table.getRowModel().rows.map((row) => (
294+
<TableRow
295+
key={row.id}
296+
data-state={row.getIsSelected() && 'selected'}
297+
>
298+
{row.getVisibleCells().map((cell) => {
299+
return (
300+
<TableCell
301+
className={
302+
cell.column.id == 'select'
303+
? ' w-[40px]'
304+
: 'w-[197px]'
305+
}
306+
key={cell.id}
307+
>
308+
{flexRender(
309+
cell.column.columnDef.cell,
310+
cell.getContext()
311+
)}
312+
</TableCell>
313+
);
314+
})}
315+
</TableRow>
316+
))
317+
) : (
318+
<TableRow>
319+
<TableCell
320+
colSpan={columns.length}
321+
className="h-24 text-center "
322+
>
323+
No results.
324+
</TableCell>
292325
</TableRow>
293-
))}
294-
</TableHeader>
326+
)}
327+
</TableBody>
295328
</Table>
296-
<ScrollArea className="h-[700px]">
297-
<Table>
298-
<TableBody>
299-
{table.getRowModel().rows?.length ? (
300-
table.getRowModel().rows.map((row) => (
301-
<TableRow
302-
key={row.id}
303-
data-state={row.getIsSelected() && 'selected'}
304-
>
305-
{row.getVisibleCells().map((cell) => {
306-
return (
307-
<TableCell
308-
className={
309-
cell.column.id == 'select'
310-
? ' w-[40px]'
311-
: 'w-[197px]'
312-
}
313-
key={cell.id}
314-
>
315-
{flexRender(
316-
cell.column.columnDef.cell,
317-
cell.getContext()
318-
)}
319-
</TableCell>
320-
);
321-
})}
322-
</TableRow>
323-
))
324-
) : (
325-
<TableRow>
326-
<TableCell
327-
colSpan={columns.length}
328-
className="h-24 text-center "
329-
>
330-
No results.
331-
</TableCell>
332-
</TableRow>
333-
)}
334-
</TableBody>
335-
</Table>
336-
</ScrollArea>
337-
</div>
338-
<div className="flex-1 text-sm text-muted-foreground">
339-
{table.getFilteredSelectedRowModel().rows.length} of{' '}
340-
{table.getFilteredRowModel().rows.length} row(s) selected.
341-
</div>
329+
</ScrollArea>
330+
</div>
331+
<div className="flex-1 text-sm text-muted-foreground">
332+
{table.getFilteredSelectedRowModel().rows.length} of{' '}
333+
{table.getFilteredRowModel().rows.length} row(s) selected.
342334
</div>
343335
</div>
344336
</div>

0 commit comments

Comments
 (0)