Skip to content

Commit

Permalink
feat: simplify the miller columns
Browse files Browse the repository at this point in the history
  • Loading branch information
@mintsweet
mintsweet committed Sep 27, 2024
1 parent fb0dd2e commit 569953f
Show file tree
Hide file tree
Showing 6 changed files with 189 additions and 213 deletions.
4 changes: 2 additions & 2 deletions config-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
"dependencies": {
"@ant-design/icons": "^5.4.0",
"@fontsource/roboto": "^5.0.14",
"@mints/hooks": "^1.0.0-beta.2",
"@mints/miller-columns": "^2.0.0-beta.5",
"@mints/hooks": "^1.0.0-beta.9",
"@mints/miller-columns": "^2.0.0-beta.10",
"@mui/icons-material": "^5.16.7",
"@mui/material": "^5.16.7",
"@mui/styled-engine-sc": "^6.0.0-alpha.18",
Expand Down
129 changes: 47 additions & 82 deletions config-ui/src/plugins/components/data-scope-remote/search-local.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@
*
*/

import { useState, useReducer, useCallback } from 'react';
import { useState, useReducer } from 'react';
import { CheckCircleFilled, SearchOutlined } from '@ant-design/icons';
import { Space, Tag, Button, Input, Modal } from 'antd';
import { MillerColumns } from '@mints/miller-columns';
import { useDebounce } from '@mints/hooks';
import type { IDType } from '@mints/miller-columns';
import { MillerColumns } from '@mints/miller-columns';

import API from '@/api';
import { Block, Loading, Message } from '@/components';
Expand Down Expand Up @@ -76,43 +77,26 @@ export const SearchLocal = ({ mode, plugin, connectionId, config, disabledScope,

const searchDebounce = useDebounce(search, { wait: 500 });

const request = useCallback(
async (groupId?: string | number, params?: any) => {
const res = await API.scope.remote(plugin, connectionId, {
groupId: groupId ?? null,
pageToken: params?.nextPageToken,
});

return {
data: res.children.map((it) => ({
parentId: it.parentId,
id: it.id,
title: it.name ?? it.fullName,
canExpand: it.type === 'group',
original: it,
})),
hasMore: !!res.nextPageToken,
params: {
nextPageToken: res.nextPageToken,
},
};
},
[plugin, connectionId, scope, searchDebounce],
);
const request = async (groupId?: string | number, params?: any) => {
const res = await API.scope.remote(plugin, connectionId, {
groupId: groupId ?? null,
pageToken: params?.nextPageToken,
});

const requestAll = useCallback(
async (groupId?: string | number) => {
return {
data: searchDebounce
? scope
.filter((it) => it.title.includes(searchDebounce) && !it.canExpand)
.map((it) => ({ ...it, parentId: null }))
: scope.filter((it) => it.parentId === (groupId ?? null)),
hasMore: false,
};
},
[scope, searchDebounce],
);
return {
data: res.children.map((it) => ({
parentId: it.parentId,
id: it.id,
title: it.name ?? it.fullName,
canExpand: it.type === 'group',
original: it,
})),
hasMore: !!res.nextPageToken,
params: {
nextPageToken: res.nextPageToken,
},
};
};

const handleRequestAll = async () => {
setOpen(false);
Expand Down Expand Up @@ -145,6 +129,24 @@ export const SearchLocal = ({ mode, plugin, connectionId, config, disabledScope,
dispatch({ type: 'DONE' });
};

const millerColumnsProps = {
bordered: true,
theme: {
colorPrimary: '#7497f7',
borderColor: '#dbe4fd',
},
columnHeight: 300,
mode,
renderTitle: (id?: IDType) =>
!id &&
config.millerColumn?.firstColumnTitle && <S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>,
renderLoading: () => <Loading size={20} style={{ padding: '4px 12px' }} />,
selectable: true,
disabledIds: disabledScope.map((it) => it.id),
selectedIds: selectedScope.map((it) => it.id),
onSelectedIds: (_: IDType[], data?: any) => onChange(data ?? []),
};

return (
<>
<Block title={config.title} required>
Expand Down Expand Up @@ -189,56 +191,19 @@ export const SearchLocal = ({ mode, plugin, connectionId, config, disabledScope,
)}
</Block>
<Block>
{status === 'idle' && (
{status === 'idle' ? (
<MillerColumns
bordered
theme={{
colorPrimary: '#7497f7',
borderColor: '#dbe4fd',
}}
{...millerColumnsProps}
request={request}
columnCount={search ? 1 : config.millerColumn?.columnCount ?? 1}
columnHeight={300}
mode={mode}
renderTitle={(id) =>
!id &&
config.millerColumn?.firstColumnTitle && (
<S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>
)
}
renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
renderError={() => <span style={{ color: 'red' }}>Something Error</span>}
selectable
disabledIds={(disabledScope ?? []).map((it) => it.id)}
selectedIds={selectedScope.map((it) => it.id)}
onSelectedIds={(_, data) => onChange(data ?? [])}
columnCount={config.millerColumn?.columnCount ?? 1}
/>
)}
{status === 'done' && (
) : (
<>
<Input prefix={<SearchOutlined />} value={search} onChange={(e) => setSearch(e.target.value)} />
<MillerColumns
bordered
theme={{
colorPrimary: '#7497f7',
borderColor: '#dbe4fd',
}}
request={requestAll}
columnCount={search ? 1 : config.millerColumn?.columnCount ?? 1}
columnHeight={300}
mode={mode}
renderTitle={(id) =>
!id &&
config.millerColumn?.firstColumnTitle && (
<S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>
)
}
renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
renderError={() => <span style={{ color: 'red' }}>Something Error</span>}
selectable
disabledIds={(disabledScope ?? []).map((it) => it.id)}
selectedIds={selectedScope.map((it) => it.id)}
onSelectedIds={(_, data) => onChange(data ?? [])}
{...millerColumnsProps}
loading={status === 'loading'}
items={searchDebounce ? scope.filter((it) => it.title.includes(searchDebounce) && !it.canExpand) : scope}
/>
</>
)}
Expand Down
135 changes: 61 additions & 74 deletions config-ui/src/plugins/components/data-scope-remote/search-remote.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@
*
*/

import { useState, useCallback } from 'react';
import { useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { Space, Tag, Input } from 'antd';
import { MillerColumns } from '@mints/miller-columns';
import { useRequest } from '@mints/hooks';
import { useDebounce } from '@mints/hooks';
import type { IDType } from '@mints/miller-columns';
import { MillerColumns } from '@mints/miller-columns';

import API from '@/api';
import { Block, Loading } from '@/components';
Expand All @@ -43,60 +45,62 @@ export const SearchRemote = ({ mode, plugin, connectionId, config, disabledScope

const searchDebounce = useDebounce(search, { wait: 500 });

const request = useCallback(
async (groupId?: string | number, params?: any) => {
let data = [];
let hasMore = false;
let newParams = {};

if (!searchDebounce) {
const res = await API.scope.remote(plugin, connectionId, {
groupId: groupId ?? null,
pageToken: params?.pageToken,
});

data = res.children.map((it) => ({
parentId: it.parentId,
id: it.id,
title: it.name ?? it.fullName,
canExpand: it.type === 'group',
original: it,
}));
const { loading, data } = useRequest(async () => {
if (!searchDebounce) {
return [];
}
const res = await API.scope.searchRemote(plugin, connectionId, {
search: searchDebounce,
page: 1,
pageSize: 50,
});
return res.children.map((it) => ({
parentId: it.parentId,
id: it.id,
title: it.fullName ?? it.name,
canExpand: it.type === 'group',
original: it,
}));
}, [plugin, connectionId, searchDebounce]);

hasMore = !!res.nextPageToken;
newParams = {
pageToken: res.nextPageToken,
};
} else {
const res = await API.scope.searchRemote(plugin, connectionId, {
search: searchDebounce,
page: params?.page ?? 1,
pageSize: 20,
});
const request = async (groupId?: string | number, params?: any) => {
const res = await API.scope.remote(plugin, connectionId, {
groupId: groupId ?? null,
pageToken: params?.pageToken,
});

data = res.children.map((it) => ({
parentId: it.parentId,
id: it.id,
title: it.fullName ?? it.name,
canExpand: it.type === 'group',
original: it,
}));
return {
data: res.children.map((it) => ({
parentId: it.parentId,
id: it.id,
title: it.name ?? it.fullName,
canExpand: it.type === 'group',
original: it,
})),
hasMore: !!res.nextPageToken,
params: {
pageToken: res.nextPageToken,
},
};
};

hasMore = res.children.length === res.pageSize;
newParams = {
page: (params?.page ?? 0) + 1,
count: (params?.count ?? 0) + res.children.length,
};
}

return {
data,
hasMore,
params: newParams,
};
const millerColumnsProps = {
bordered: true,
theme: {
colorPrimary: '#7497f7',
borderColor: '#dbe4fd',
},
[plugin, connectionId, searchDebounce],
);
columnHeight: 300,
mode,
renderTitle: (id?: IDType) =>
!id &&
config.millerColumn?.firstColumnTitle && <S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>,
renderLoading: () => <Loading size={20} style={{ padding: '4px 12px' }} />,
selectable: true,
disabledIds: disabledScope.map((it) => it.id),
selectedIds: selectedScope.map((it) => it.id),
onSelectedIds: (_: IDType[], data?: any) => onChange(data ?? []),
};

return (
<>
Expand Down Expand Up @@ -125,28 +129,11 @@ export const SearchRemote = ({ mode, plugin, connectionId, config, disabledScope
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
<MillerColumns
bordered
theme={{
colorPrimary: '#7497f7',
borderColor: '#dbe4fd',
}}
request={request}
columnCount={searchDebounce ? 1 : config.millerColumn?.columnCount ?? 1}
columnHeight={300}
mode={mode}
renderTitle={(id?) =>
!id &&
config.millerColumn?.firstColumnTitle && (
<S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>
)
}
renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
selectable
disabledIds={disabledScope.map((it) => it.id)}
selectedIds={selectedScope.map((it) => it.id)}
onSelectedIds={(_, data) => onChange(data ?? [])}
/>
{searchDebounce ? (
<MillerColumns {...millerColumnsProps} loading={loading} items={data ?? []} columnCount={1} />
) : (
<MillerColumns {...millerColumnsProps} request={request} columnCount={config.millerColumn?.columnCount} />
)}
</Block>
</>
);
Expand Down
Loading

0 comments on commit 569953f

Please sign in to comment.