2022-08-11 04:33:29 +00:00
|
|
|
import {
|
|
|
|
SettableQuickActionsTableSettings,
|
|
|
|
QuickAction,
|
|
|
|
} from '@/react/docker/containers/ListView/ContainersDatatable/types';
|
|
|
|
|
2022-06-17 16:18:42 +00:00
|
|
|
import { Checkbox } from '@@/form-components/Checkbox';
|
2022-01-04 12:16:09 +00:00
|
|
|
|
2022-08-11 04:33:29 +00:00
|
|
|
import { useTableSettings } from './useZustandTableSettings';
|
2022-01-04 12:16:09 +00:00
|
|
|
|
|
|
|
export interface Action {
|
2022-08-11 04:33:29 +00:00
|
|
|
id: QuickAction;
|
2022-01-04 12:16:09 +00:00
|
|
|
label: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
actions: Action[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export function QuickActionsSettings({ actions }: Props) {
|
2022-08-11 04:33:29 +00:00
|
|
|
const { settings } =
|
|
|
|
useTableSettings<SettableQuickActionsTableSettings<QuickAction>>();
|
2022-01-04 12:16:09 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{actions.map(({ id, label }) => (
|
|
|
|
<Checkbox
|
|
|
|
key={id}
|
|
|
|
label={label}
|
|
|
|
id={`quick-actions-${id}`}
|
|
|
|
checked={!settings.hiddenQuickActions.includes(id)}
|
|
|
|
onChange={(e) => toggleAction(id, e.target.checked)}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
2022-08-11 04:33:29 +00:00
|
|
|
function toggleAction(key: QuickAction, visible: boolean) {
|
|
|
|
if (!visible) {
|
|
|
|
settings.setHiddenQuickActions([...settings.hiddenQuickActions, key]);
|
|
|
|
} else {
|
|
|
|
settings.setHiddenQuickActions(
|
|
|
|
settings.hiddenQuickActions.filter((action) => action !== key)
|
|
|
|
);
|
|
|
|
}
|
2022-01-04 12:16:09 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-08-11 04:33:29 +00:00
|
|
|
export function buildAction(id: QuickAction, label: string): Action {
|
2022-01-04 12:16:09 +00:00
|
|
|
return { id, label };
|
|
|
|
}
|