opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-10-25 09:34:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core-blocks): add select all checkbox to big tables

Browse Source
This commit is contained in:
Naumov Alexey
2021-10-14 19:47:08 +03:00
parent 52556720ce
commit a0a89bedb8
7 changed files with 57 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/core-blocks/src/Table/TableColumnHeader.tsx
+9 -3
View File
@@ -13,15 +13,21 @@ import { useStyles } from '@cloudbeaver/core-theming';
interface Props {
title?: string;
min?: boolean;
flex?: boolean;
centerContent?: boolean;
className?: string;
}
export const TableColumnHeader: React.FC<Props> = function TableColumnHeader({
title, children, min, className,
title, min, flex, centerContent, className, children,
}) {
return styled(useStyles())(
<th title={title} className={className} {...use({ min })}>
{children}
<th
title={title}
className={className}
{...use({ min, centerContent })}
>
{flex ? <th-flex className={className}>{children}</th-flex> : children}
</th>
);
};
webapp/packages/core-blocks/src/Table/TableSelect.tsx
+10 -2
View File
@@ -8,6 +8,7 @@
import { observer } from 'mobx-react-lite';
import { useContext } from 'react';
import styled, { css } from 'reshadow';
import { useTranslate } from '@cloudbeaver/core-localization';
@@ -15,12 +16,19 @@ import { Checkbox } from '../FormControls/Checkboxes/Checkbox';
import { TableContext } from './TableContext';
interface Props {
id: string;
id?: string;
disabled?: boolean;
tooltip?: string;
className?: string;
}
const styles = css`
Checkbox {
margin-left: -10px;
margin-right: -10px;
}
`;
export const TableSelect = observer<Props>(function TableSelect({ id, disabled, tooltip, className }) {
const tableContext = useContext(TableContext);
const translate = useTranslate();
@@ -29,7 +37,7 @@ export const TableSelect = observer<Props>(function TableSelect({ id, disabled,
throw new Error('Context must be provided');
}
return (
return styled(styles)(
<Checkbox
id={id}
className={className}
webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionsTable.tsx
+6 -3
View File
@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
import styled, { css, use } from 'reshadow';
import {
Table, TableHeader, TableColumnHeader, TableBody
Table, TableHeader, TableColumnHeader, TableBody, TableSelect
} from '@cloudbeaver/core-blocks';
import { useTranslate } from '@cloudbeaver/core-localization';
import { useStyles, composes } from '@cloudbeaver/core-theming';
@@ -46,11 +46,14 @@ export const ConnectionsTable = observer<Props>(function ConnectionsTable({
expandedItems,
}) {
const translate = useTranslate();
const keys = connections.map(connection => connection.id);
return styled(useStyles(styles))(
<Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
<Table keys={keys} selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
<TableHeader>
<TableColumnHeader min />
<TableColumnHeader min flex centerContent>
<TableSelect />
</TableColumnHeader>
<TableColumnHeader min />
<TableColumnHeader min />
<TableColumnHeader>{translate('connections_connection_name')}</TableColumnHeader>
webapp/packages/core-theming/src/styles/_table.scss
+9
View File
@@ -77,6 +77,15 @@
width: 28px;
}
&[use|centerContent] > th-flex {
align-items: center;
justify-content: center;
}
> th-flex {
display: flex;
}
&:last-child {
border-right: none;
}
webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsTable/AuthConfigurationsTable.tsx
+7 -3
View File
@@ -9,7 +9,7 @@
import { observer } from 'mobx-react-lite';
import styled, { css, use } from 'reshadow';
import { Table, TableHeader, TableColumnHeader, TableBody } from '@cloudbeaver/core-blocks';
import { Table, TableHeader, TableColumnHeader, TableBody, TableSelect } from '@cloudbeaver/core-blocks';
import { useTranslate } from '@cloudbeaver/core-localization';
import type { AdminAuthProviderConfiguration } from '@cloudbeaver/core-sdk';
import { useStyles } from '@cloudbeaver/core-theming';
@@ -30,10 +30,14 @@ interface Props {
export const AuthConfigurationsTable = observer<Props>(function AuthConfigurationsTable({ configurations, selectedItems, expandedItems }) {
const translate = useTranslate();
const keys = configurations.map(configuration => configuration.id);
return styled(useStyles(styles))(
<Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
<Table keys={keys} selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
<TableHeader>
<TableColumnHeader min />
<TableColumnHeader min flex centerContent>
<TableSelect />
</TableColumnHeader>
<TableColumnHeader min />
<TableColumnHeader min />
<TableColumnHeader>{translate('administration_identity_providers_provider_configuration_name')}</TableColumnHeader>
webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/RolesTable.tsx
+7 -3
View File
@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
import styled, { css, use } from 'reshadow';
import type { RoleInfo } from '@cloudbeaver/core-authentication';
import { Table, TableHeader, TableColumnHeader, TableBody } from '@cloudbeaver/core-blocks';
import { Table, TableHeader, TableColumnHeader, TableBody, TableSelect } from '@cloudbeaver/core-blocks';
import { useTranslate } from '@cloudbeaver/core-localization';
import { useStyles } from '@cloudbeaver/core-theming';
@@ -30,10 +30,14 @@ interface Props {
export const RolesTable = observer<Props>(function RolesTable({ roles, selectedItems, expandedItems }) {
const translate = useTranslate();
const keys = roles.map(role => role.roleId);
return styled(useStyles(styles))(
<Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
<Table keys={keys} selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
<TableHeader>
<TableColumnHeader min />
<TableColumnHeader min flex centerContent>
<TableSelect />
</TableColumnHeader>
<TableColumnHeader min />
<TableColumnHeader>{translate('administration_roles_role_id')}</TableColumnHeader>
<TableColumnHeader>{translate('administration_roles_role_name')}</TableColumnHeader>
webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UsersTable.tsx
+9 -3
View File
@@ -11,7 +11,7 @@ import styled, { css, use } from 'reshadow';
import type { AdminUser } from '@cloudbeaver/core-authentication';
import {
Table, TableHeader, TableColumnHeader, TableBody
Table, TableHeader, TableColumnHeader, TableBody, TableSelect
} from '@cloudbeaver/core-blocks';
import { useTranslate } from '@cloudbeaver/core-localization';
import { useStyles } from '@cloudbeaver/core-theming';
@@ -33,10 +33,16 @@ interface Props {
export const UsersTable = observer<Props>(function UsersTable({ users, selectedItems, expandedItems, selectable }) {
const translate = useTranslate();
const keys = users.map(user => user.userId);
return styled(useStyles(styles))(
<Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
<Table keys={keys} selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
<TableHeader>
{selectable && <TableColumnHeader min />}
{selectable && (
<TableColumnHeader min flex centerContent>
<TableSelect />
</TableColumnHeader>
)}
<TableColumnHeader min />
<TableColumnHeader>{translate('authentication_user_name')}</TableColumnHeader>
<TableColumnHeader>{translate('authentication_user_role')}</TableColumnHeader>