dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-26 15:36:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
Jan Prochazka
2021-01-23 07:22:09 +01:00
parent 37cc86f8d2
commit 451af5d09f
141 changed files with 763 additions and 787 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/src/DragAndDropFileTarget.js
View File

@@ -11,7 +11,7 @@ const TargetStyled = styled.div`
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: ${(props) => props.theme.main_background_blue[3]}; background: ${props => props.theme.main_background_blue[3]};
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
z-index: 1000; z-index: 1000;
@@ -52,8 +52,8 @@ export default function DragAndDropFileTarget({ isDragActive, inputProps }) {
<InfoWrapper> <InfoWrapper>
Supported file types:{' '} Supported file types:{' '}
{fileFormats {fileFormats
.filter((x) => x.readerFunc) .filter(x => x.readerFunc)
.map((x) => x.name) .map(x => x.name)
.join(', ')} .join(', ')}
</InfoWrapper> </InfoWrapper>
</InfoBox> </InfoBox>

20
packages/web/src/Screen.js
View File

@@ -21,10 +21,10 @@ import ErrorBoundary from './utility/ErrorBoundary';
const BodyDiv = styled.div` const BodyDiv = styled.div`
position: fixed; position: fixed;
top: ${dimensions.tabsPanel.height + dimensions.toolBar.height}px; top: ${dimensions.tabsPanel.height + dimensions.toolBar.height}px;
left: ${(props) => props.contentLeft}px; left: ${props => props.contentLeft}px;
bottom: ${dimensions.statusBar.height}px; bottom: ${dimensions.statusBar.height}px;
right: 0; right: 0;
background-color: ${(props) => props.theme.content_background}; background-color: ${props => props.theme.content_background};
`; `;
const ToolBarDiv = styled.div` const ToolBarDiv = styled.div`
@@ -32,7 +32,7 @@ const ToolBarDiv = styled.div`
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: ${(props) => props.theme.toolbar_background}; background-color: ${props => props.theme.toolbar_background};
height: ${dimensions.toolBar.height}px; height: ${dimensions.toolBar.height}px;
`; `;
@@ -42,7 +42,7 @@ const IconBar = styled.div`
left: 0; left: 0;
bottom: ${dimensions.statusBar.height}px; bottom: ${dimensions.statusBar.height}px;
width: ${dimensions.widgetMenu.iconSize}px; width: ${dimensions.widgetMenu.iconSize}px;
background-color: ${(props) => props.theme.widget_background}; background-color: ${props => props.theme.widget_background};
`; `;
const LeftPanel = styled.div` const LeftPanel = styled.div`
@@ -50,7 +50,7 @@ const LeftPanel = styled.div`
top: ${dimensions.toolBar.height}px; top: ${dimensions.toolBar.height}px;
left: ${dimensions.widgetMenu.iconSize}px; left: ${dimensions.widgetMenu.iconSize}px;
bottom: ${dimensions.statusBar.height}px; bottom: ${dimensions.statusBar.height}px;
background-color: ${(props) => props.theme.left_background}; background-color: ${props => props.theme.left_background};
display: flex; display: flex;
`; `;
@@ -58,11 +58,11 @@ const TabsPanelContainer = styled.div`
display: flex; display: flex;
position: fixed; position: fixed;
top: ${dimensions.toolBar.height}px; top: ${dimensions.toolBar.height}px;
left: ${(props) => props.contentLeft}px; left: ${props => props.contentLeft}px;
height: ${dimensions.tabsPanel.height}px; height: ${dimensions.tabsPanel.height}px;
right: 0; right: 0;
background-color: ${(props) => props.theme.tabs_background2}; background-color: ${props => props.theme.tabs_background2};
border-top: 1px solid ${(props) => props.theme.border}; border-top: 1px solid ${props => props.theme.border};
overflow-x: auto; overflow-x: auto;
@@ -78,7 +78,7 @@ const StausBarContainer = styled.div`
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: ${(props) => props.theme.statusbar_background}; background-color: ${props => props.theme.statusbar_background};
`; `;
const ScreenHorizontalSplitHandle = styled(HorizontalSplitHandle)` const ScreenHorizontalSplitHandle = styled(HorizontalSplitHandle)`
@@ -100,7 +100,7 @@ export default function Screen() {
? dimensions.widgetMenu.iconSize + leftPanelWidth + dimensions.splitter.thickness ? dimensions.widgetMenu.iconSize + leftPanelWidth + dimensions.splitter.thickness
: dimensions.widgetMenu.iconSize; : dimensions.widgetMenu.iconSize;
const toolbarPortalRef = React.useRef(); const toolbarPortalRef = React.useRef();
const onSplitDown = useSplitterDrag('clientX', (diff) => setLeftPanelWidth((v) => v + diff)); const onSplitDown = useSplitterDrag('clientX', diff => setLeftPanelWidth(v => v + diff));
const { getRootProps, getInputProps, isDragActive } = useUploadsZone(); const { getRootProps, getInputProps, isDragActive } = useUploadsZone();

10
packages/web/src/TabContent.js
View File

@@ -12,7 +12,7 @@ const TabContainerStyled = styled.div`
right: 0; right: 0;
bottom: 0; bottom: 0;
display: flex; display: flex;
visibility: ${(props) => visibility: ${props =>
// @ts-ignore // @ts-ignore
props.tabVisible ? 'visible' : 'hidden'}; props.tabVisible ? 'visible' : 'hidden'};
`; `;
@@ -52,15 +52,15 @@ export default function TabContent({ toolbarPortalRef }) {
_.difference( _.difference(
_.keys(mountedTabs), _.keys(mountedTabs),
_.map( _.map(
files.filter((x) => x.closedTime == null), files.filter(x => x.closedTime == null),
'tabid' 'tabid'
) )
).length > 0 ).length > 0
) { ) {
setMountedTabs(_.pickBy(mountedTabs, (v, k) => files.find((x) => x.tabid == k && x.closedTime == null))); setMountedTabs(_.pickBy(mountedTabs, (v, k) => files.find(x => x.tabid == k && x.closedTime == null)));
} }
const selectedTab = files.find((x) => x.selected); const selectedTab = files.find(x => x.selected);
if (selectedTab) { if (selectedTab) {
const { tabid } = selectedTab; const { tabid } = selectedTab;
if (tabid && !mountedTabs[tabid]) if (tabid && !mountedTabs[tabid])
@@ -70,7 +70,7 @@ export default function TabContent({ toolbarPortalRef }) {
}); });
} }
return _.keys(mountedTabs).map((tabid) => { return _.keys(mountedTabs).map(tabid => {
const { TabComponent, props } = mountedTabs[tabid]; const { TabComponent, props } = mountedTabs[tabid];
const tabVisible = tabid == (selectedTab && selectedTab.tabid); const tabVisible = tabid == (selectedTab && selectedTab.tabid);
return ( return (

52
packages/web/src/TabsPanel.js
View File

@@ -31,8 +31,8 @@ const DbWrapperHandler = styled.div`
const DbNameWrapper = styled.div` const DbNameWrapper = styled.div`
text-align: center; text-align: center;
font-size: 8pt; font-size: 8pt;
border-bottom: 1px solid ${(props) => props.theme.border}; border-bottom: 1px solid ${props => props.theme.border};
border-right: 1px solid ${(props) => props.theme.border}; border-right: 1px solid ${props => props.theme.border};
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding: 1px; padding: 1px;
@@ -44,9 +44,9 @@ const DbNameWrapper = styled.div`
// height: 15px; // height: 15px;
&:hover { &:hover {
background-color: ${(props) => props.theme.tabs_background3}; background-color: ${props => props.theme.tabs_background3};
} }
background-color: ${(props) => background-color: ${props =>
// @ts-ignore // @ts-ignore
props.selected ? props.theme.tabs_background1 : 'inherit'}; props.selected ? props.theme.tabs_background1 : 'inherit'};
`; `;
@@ -57,7 +57,7 @@ const DbNameWrapper = styled.div`
// `; // `;
const FileTabItem = styled.div` const FileTabItem = styled.div`
border-right: 1px solid ${(props) => props.theme.border}; border-right: 1px solid ${props => props.theme.border};
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
flex-shrink: 1; flex-shrink: 1;
@@ -68,9 +68,9 @@ const FileTabItem = styled.div`
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
&:hover { &:hover {
color: ${(props) => props.theme.tabs_font_hover}; color: ${props => props.theme.tabs_font_hover};
} }
background-color: ${(props) => background-color: ${props =>
// @ts-ignore // @ts-ignore
props.selected ? props.theme.tabs_background1 : 'inherit'}; props.selected ? props.theme.tabs_background1 : 'inherit'};
`; `;
@@ -83,7 +83,7 @@ const CloseButton = styled(FontIcon)`
margin-left: 5px; margin-left: 5px;
color: gray; color: gray;
&:hover { &:hover {
color: ${(props) => props.theme.tabs_font2}; color: ${props => props.theme.tabs_font2};
} }
`; `;
@@ -140,21 +140,21 @@ export default function TabsPanel() {
if (e.target.closest('.tabCloseButton')) { if (e.target.closest('.tabCloseButton')) {
return; return;
} }
setOpenedTabs((files) => setOpenedTabs(files =>
files.map((x) => ({ files.map(x => ({
...x, ...x,
selected: x.tabid == tabid, selected: x.tabid == tabid,
})) }))
); );
}; };
const closeTabFunc = (closeCondition) => (tabid) => { const closeTabFunc = closeCondition => tabid => {
setOpenedTabs((files) => { setOpenedTabs(files => {
const active = files.find((x) => x.tabid == tabid); const active = files.find(x => x.tabid == tabid);
if (!active) return files; if (!active) return files;
const lastSelectedIndex = _.findIndex(files, (x) => x.tabid == tabid); const lastSelectedIndex = _.findIndex(files, x => x.tabid == tabid);
let selectedIndex = lastSelectedIndex; let selectedIndex = lastSelectedIndex;
const newFiles = files.map((x) => ({ const newFiles = files.map(x => ({
...x, ...x,
closedTime: x.closedTime || (closeCondition(x, active) ? new Date().getTime() : undefined), closedTime: x.closedTime || (closeCondition(x, active) ? new Date().getTime() : undefined),
})); }));
@@ -180,8 +180,8 @@ export default function TabsPanel() {
const closeTab = closeTabFunc((x, active) => x.tabid == active.tabid); const closeTab = closeTabFunc((x, active) => x.tabid == active.tabid);
const closeAll = () => { const closeAll = () => {
const closedTime = new Date().getTime(); const closedTime = new Date().getTime();
setOpenedTabs((tabs) => setOpenedTabs(tabs =>
tabs.map((tab) => ({ tabs.map(tab => ({
...tab, ...tab,
closedTime: tab.closedTime || closedTime, closedTime: tab.closedTime || closedTime,
selected: false, selected: false,
@@ -226,8 +226,8 @@ export default function TabsPanel() {
// tabs.map(x => x.tooltip) // tabs.map(x => x.tooltip)
// ); // );
const tabsWithDb = tabs const tabsWithDb = tabs
.filter((x) => !x.closedTime) .filter(x => !x.closedTime)
.map((tab) => ({ .map(tab => ({
...tab, ...tab,
tabDbName: getTabDbName(tab), tabDbName: getTabDbName(tab),
tabDbKey: getTabDbKey(tab), tabDbKey: getTabDbKey(tab),
@@ -235,7 +235,7 @@ export default function TabsPanel() {
const tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey'); const tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey');
const dbKeys = _.keys(tabsByDb).sort(); const dbKeys = _.keys(tabsByDb).sort();
const handleSetDb = async (props) => { const handleSetDb = async props => {
const { conid, database } = props || {}; const { conid, database } = props || {};
if (conid) { if (conid) {
const connection = await getConnectionInfo({ conid, database }); const connection = await getConnectionInfo({ conid, database });
@@ -249,7 +249,7 @@ export default function TabsPanel() {
return ( return (
<> <>
{dbKeys.map((dbKey) => ( {dbKeys.map(dbKey => (
<DbWrapperHandler key={dbKey}> <DbWrapperHandler key={dbKey}>
<DbNameWrapper <DbNameWrapper
// @ts-ignore // @ts-ignore
@@ -260,15 +260,15 @@ export default function TabsPanel() {
<FontIcon icon={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName} <FontIcon icon={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
</DbNameWrapper> </DbNameWrapper>
<DbGroupHandler> <DbGroupHandler>
{_.sortBy(tabsByDb[dbKey], 'title').map((tab) => ( {_.sortBy(tabsByDb[dbKey], 'title').map(tab => (
<FileTabItem <FileTabItem
{...tab} {...tab}
title={tab.tooltip} title={tab.tooltip}
key={tab.tabid} key={tab.tabid}
theme={theme} theme={theme}
onClick={(e) => handleTabClick(e, tab.tabid)} onClick={e => handleTabClick(e, tab.tabid)}
onMouseUp={(e) => handleMouseUp(e, tab.tabid)} onMouseUp={e => handleMouseUp(e, tab.tabid)}
onContextMenu={(e) => handleContextMenu(e, tab.tabid, tab.props)} onContextMenu={e => handleContextMenu(e, tab.tabid, tab.props)}
> >
{<FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />} {<FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />}
<FileNameWrapper>{tab.title}</FileNameWrapper> <FileNameWrapper>{tab.title}</FileNameWrapper>
@@ -276,7 +276,7 @@ export default function TabsPanel() {
icon="icon close" icon="icon close"
className="tabCloseButton" className="tabCloseButton"
theme={theme} theme={theme}
onClick={(e) => { onClick={e => {
e.preventDefault(); e.preventDefault();
closeTab(tab.tabid); closeTab(tab.tabid);
}} }}

10
packages/web/src/appobj/AppObjectCore.js
View File

@@ -10,11 +10,11 @@ import useTheme from '../theme/useTheme';
const AppObjectDiv = styled.div` const AppObjectDiv = styled.div`
padding: 5px; padding: 5px;
&:hover { &:hover {
background-color: ${(props) => props.theme.left_background_blue[1]}; background-color: ${props => props.theme.left_background_blue[1]};
} }
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
font-weight: ${(props) => (props.isBold ? 'bold' : 'normal')}; font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
`; `;
const IconWrap = styled.span` const IconWrap = styled.span`
@@ -28,7 +28,7 @@ const StatusIconWrap = styled.span`
const ExtInfoWrap = styled.span` const ExtInfoWrap = styled.span`
font-weight: normal; font-weight: normal;
margin-left: 5px; margin-left: 5px;
color: ${(props) => props.theme.left_font3}; color: ${props => props.theme.left_font3};
`; `;
export function AppObjectCore({ export function AppObjectCore({
@@ -50,7 +50,7 @@ export function AppObjectCore({
const theme = useTheme(); const theme = useTheme();
const showMenu = useShowMenu(); const showMenu = useShowMenu();
const handleContextMenu = (event) => { const handleContextMenu = event => {
if (!Menu) return; if (!Menu) return;
event.preventDefault(); event.preventDefault();
@@ -68,7 +68,7 @@ export function AppObjectCore({
theme={theme} theme={theme}
isBold={isBold} isBold={isBold}
draggable draggable
onDragStart={(e) => { onDragStart={e => {
e.dataTransfer.setData('app_object_drag_data', JSON.stringify(data)); e.dataTransfer.setData('app_object_drag_data', JSON.stringify(data));
}} }}
{...other} {...other}

16
packages/web/src/appobj/AppObjectList.js
View File

@@ -22,7 +22,7 @@ const GroupDiv = styled.div`
user-select: none; user-select: none;
padding: 5px; padding: 5px;
&:hover { &:hover {
background-color: ${(props) => props.theme.left_background_blue[1]}; background-color: ${props => props.theme.left_background_blue[1]};
} }
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -57,7 +57,7 @@ function AppObjectListItem({
}; };
if (SubItems) { if (SubItems) {
commonProps.onClick2 = () => setIsExpanded((v) => !v); commonProps.onClick2 = () => setIsExpanded(v => !v);
} }
if (onObjectClick) { if (onObjectClick) {
commonProps.onClick3 = onObjectClick; commonProps.onClick3 = onObjectClick;
@@ -90,9 +90,9 @@ function AppObjectGroup({ group, items }) {
<ExpandIconHolder> <ExpandIconHolder>
<ExpandIcon isExpanded={isExpanded} /> <ExpandIcon isExpanded={isExpanded} />
</ExpandIconHolder> </ExpandIconHolder>
{group} {items && `(${items.filter((x) => x.component).length})`} {group} {items && `(${items.filter(x => x.component).length})`}
</GroupDiv> </GroupDiv>
{isExpanded && items.map((x) => x.component)} {isExpanded && items.map(x => x.component)}
</> </>
); );
} }
@@ -108,7 +108,7 @@ export function AppObjectList({
isExpandable = undefined, isExpandable = undefined,
getCommonProps = undefined, getCommonProps = undefined,
}) { }) {
const createComponent = (data) => ( const createComponent = data => (
<AppObjectListItem <AppObjectListItem
key={AppObjectComponent.extractKey(data)} key={AppObjectComponent.extractKey(data)}
AppObjectComponent={AppObjectComponent} AppObjectComponent={AppObjectComponent}
@@ -123,7 +123,7 @@ export function AppObjectList({
if (groupFunc) { if (groupFunc) {
const listGrouped = _.compact( const listGrouped = _.compact(
(list || []).map((data) => { (list || []).map(data => {
const matcher = AppObjectComponent.createMatcher && AppObjectComponent.createMatcher(data); const matcher = AppObjectComponent.createMatcher && AppObjectComponent.createMatcher(data);
if (matcher && !matcher(filter)) return null; if (matcher && !matcher(filter)) return null;
const component = createComponent(data); const component = createComponent(data);
@@ -132,12 +132,12 @@ export function AppObjectList({
}) })
); );
const groups = _.groupBy(listGrouped, 'group'); const groups = _.groupBy(listGrouped, 'group');
return (groupOrdered || _.keys(groups)).map((group) => ( return (groupOrdered || _.keys(groups)).map(group => (
<AppObjectGroup key={group} group={group} items={groups[group]} /> <AppObjectGroup key={group} group={group} items={groups[group]} />
)); ));
} }
return (list || []).map((data) => { return (list || []).map(data => {
const matcher = AppObjectComponent.createMatcher && AppObjectComponent.createMatcher(data); const matcher = AppObjectComponent.createMatcher && AppObjectComponent.createMatcher(data);
if (matcher && !matcher(filter)) return null; if (matcher && !matcher(filter)) return null;
return createComponent(data); return createComponent(data);

4
packages/web/src/appobj/ArchiveFileAppObject.js
View File

@@ -69,7 +69,7 @@ function ArchiveFileAppObject({ data, commonProps }) {
); );
} }
ArchiveFileAppObject.extractKey = (data) => data.fileName; ArchiveFileAppObject.extractKey = data => data.fileName;
ArchiveFileAppObject.createMatcher = ({ fileName }) => (filter) => filterName(filter, fileName); ArchiveFileAppObject.createMatcher = ({ fileName }) => filter => filterName(filter, fileName);
export default ArchiveFileAppObject; export default ArchiveFileAppObject;

4
packages/web/src/appobj/ArchiveFolderAppObject.js
View File

@@ -28,7 +28,7 @@ function ArchiveFolderAppObject({ data, commonProps }) {
); );
} }
ArchiveFolderAppObject.extractKey = (data) => data.name; ArchiveFolderAppObject.extractKey = data => data.name;
ArchiveFolderAppObject.createMatcher = (data) => (filter) => filterName(filter, data.name); ArchiveFolderAppObject.createMatcher = data => filter => filterName(filter, data.name);
export default ArchiveFolderAppObject; export default ArchiveFolderAppObject;

10
packages/web/src/appobj/ClosedTabAppObject.js
View File

@@ -8,10 +8,10 @@ import { AppObjectCore } from './AppObjectCore';
function Menu({ data }) { function Menu({ data }) {
const setOpenedTabs = useSetOpenedTabs(); const setOpenedTabs = useSetOpenedTabs();
const handleDelete = () => { const handleDelete = () => {
setOpenedTabs((tabs) => tabs.filter((x) => x.tabid != data.tabid)); setOpenedTabs(tabs => tabs.filter(x => x.tabid != data.tabid));
}; };
const handleDeleteOlder = () => { const handleDeleteOlder = () => {
setOpenedTabs((tabs) => tabs.filter((x) => !x.closedTime || x.closedTime >= data.closedTime)); setOpenedTabs(tabs => tabs.filter(x => !x.closedTime || x.closedTime >= data.closedTime));
}; };
return ( return (
<> <>
@@ -26,8 +26,8 @@ function ClosedTabAppObject({ data, commonProps }) {
const setOpenedTabs = useSetOpenedTabs(); const setOpenedTabs = useSetOpenedTabs();
const onClick = () => { const onClick = () => {
setOpenedTabs((files) => setOpenedTabs(files =>
files.map((x) => ({ files.map(x => ({
...x, ...x,
selected: x.tabid == tabid, selected: x.tabid == tabid,
closedTime: x.tabid == tabid ? undefined : x.closedTime, closedTime: x.tabid == tabid ? undefined : x.closedTime,
@@ -49,6 +49,6 @@ function ClosedTabAppObject({ data, commonProps }) {
); );
} }
ClosedTabAppObject.extractKey = (data) => data.tabid; ClosedTabAppObject.extractKey = data => data.tabid;
export default ClosedTabAppObject; export default ClosedTabAppObject;

18
packages/web/src/appobj/ConnectionAppObject.js
View File

@@ -19,10 +19,10 @@ function Menu({ data }) {
const config = useConfig(); const config = useConfig();
const handleEdit = () => { const handleEdit = () => {
showModal((modalState) => <ConnectionModal modalState={modalState} connection={data} />); showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
}; };
const handleDelete = () => { const handleDelete = () => {
showModal((modalState) => ( showModal(modalState => (
<ConfirmModal <ConfirmModal
modalState={modalState} modalState={modalState}
message={`Really delete connection ${data.displayName || data.server}?`} message={`Really delete connection ${data.displayName || data.server}?`}
@@ -31,16 +31,16 @@ function Menu({ data }) {
)); ));
}; };
const handleCreateDatabase = () => { const handleCreateDatabase = () => {
showModal((modalState) => <CreateDatabaseModal modalState={modalState} conid={data._id} />); showModal(modalState => <CreateDatabaseModal modalState={modalState} conid={data._id} />);
}; };
const handleRefresh = () => { const handleRefresh = () => {
axios.post('server-connections/refresh', { conid: data._id }); axios.post('server-connections/refresh', { conid: data._id });
}; };
const handleDisconnect = () => { const handleDisconnect = () => {
setOpenedConnections((list) => list.filter((x) => x != data._id)); setOpenedConnections(list => list.filter(x => x != data._id));
}; };
const handleConnect = () => { const handleConnect = () => {
setOpenedConnections((list) => [...list, data._id]); setOpenedConnections(list => [...list, data._id]);
}; };
return ( return (
<> <>
@@ -72,13 +72,13 @@ function ConnectionAppObject({ data, commonProps }) {
const extensions = useExtensions(); const extensions = useExtensions();
const isBold = _.get(currentDatabase, 'connection._id') == _id; const isBold = _.get(currentDatabase, 'connection._id') == _id;
const onClick = () => setOpenedConnections((c) => [...c, _id]); const onClick = () => setOpenedConnections(c => [...c, _id]);
let statusIcon = null; let statusIcon = null;
let statusTitle = null; let statusTitle = null;
let extInfo = null; let extInfo = null;
if (extensions.drivers.find((x) => x.engine == engine)) { if (extensions.drivers.find(x => x.engine == engine)) {
const match = (engine || '').match(/^([^@]*)@/); const match = (engine || '').match(/^([^@]*)@/);
extInfo = match ? match[1] : engine; extInfo = match ? match[1] : engine;
} else { } else {
@@ -113,7 +113,7 @@ function ConnectionAppObject({ data, commonProps }) {
); );
} }
ConnectionAppObject.extractKey = (data) => data._id; ConnectionAppObject.extractKey = data => data._id;
ConnectionAppObject.createMatcher = ({ displayName, server }) => (filter) => filterName(filter, displayName, server); ConnectionAppObject.createMatcher = ({ displayName, server }) => filter => filterName(filter, displayName, server);
export default ConnectionAppObject; export default ConnectionAppObject;

6
packages/web/src/appobj/DatabaseAppObject.js
View File

@@ -32,7 +32,7 @@ function Menu({ data }) {
}; };
const handleImport = () => { const handleImport = () => {
showModal((modalState) => ( showModal(modalState => (
<ImportExportModal <ImportExportModal
modalState={modalState} modalState={modalState}
initialValues={{ initialValues={{
@@ -46,7 +46,7 @@ function Menu({ data }) {
}; };
const handleExport = () => { const handleExport = () => {
showModal((modalState) => ( showModal(modalState => (
<ImportExportModal <ImportExportModal
modalState={modalState} modalState={modalState}
initialValues={{ initialValues={{
@@ -85,6 +85,6 @@ function DatabaseAppObject({ data, commonProps }) {
); );
} }
DatabaseAppObject.extractKey = (props) => props.name; DatabaseAppObject.extractKey = props => props.name;
export default DatabaseAppObject; export default DatabaseAppObject;

6
packages/web/src/appobj/DatabaseObjectAppObject.js
View File

@@ -168,12 +168,12 @@ function Menu({ data }) {
return ( return (
<> <>
{menus[data.objectTypeField].map((menu) => ( {menus[data.objectTypeField].map(menu => (
<DropDownMenuItem <DropDownMenuItem
key={menu.label} key={menu.label}
onClick={async () => { onClick={async () => {
if (menu.isExport) { if (menu.isExport) {
showModal((modalState) => ( showModal(modalState => (
<ImportExportModal <ImportExportModal
modalState={modalState} modalState={modalState}
initialValues={{ initialValues={{
@@ -303,6 +303,6 @@ function DatabaseObjectAppObject({ data, commonProps }) {
DatabaseObjectAppObject.extractKey = ({ schemaName, pureName }) => DatabaseObjectAppObject.extractKey = ({ schemaName, pureName }) =>
schemaName ? `${schemaName}.${pureName}` : pureName; schemaName ? `${schemaName}.${pureName}` : pureName;
DatabaseObjectAppObject.createMatcher = ({ pureName }) => (filter) => filterName(filter, pureName); DatabaseObjectAppObject.createMatcher = ({ pureName }) => filter => filterName(filter, pureName);
export default DatabaseObjectAppObject; export default DatabaseObjectAppObject;

8
packages/web/src/appobj/FavoriteFileAppObject.js
View File

@@ -12,7 +12,7 @@ export function useOpenFavorite() {
const openNewTab = useOpenNewTab(); const openNewTab = useOpenNewTab();
const openFavorite = React.useCallback( const openFavorite = React.useCallback(
async (favorite) => { async favorite => {
const { icon, tabComponent, title, props, tabdata } = favorite; const { icon, tabComponent, title, props, tabdata } = favorite;
let tabdataNew = tabdata; let tabdataNew = tabdata;
if (props.savedFile) { if (props.savedFile) {
@@ -50,7 +50,7 @@ export function FavoriteFileAppObject({ data, commonProps }) {
const electron = getElectron(); const electron = getElectron();
const editFavorite = () => { const editFavorite = () => {
showModal((modalState) => <FavoriteModal modalState={modalState} editingData={data} />); showModal(modalState => <FavoriteModal modalState={modalState} editingData={data} />);
}; };
const editFavoriteJson = async () => { const editFavoriteJson = async () => {
@@ -87,7 +87,7 @@ export function FavoriteFileAppObject({ data, commonProps }) {
icon={icon || 'img favorite'} icon={icon || 'img favorite'}
title={title} title={title}
disableRename disableRename
onLoad={async (data) => { onLoad={async data => {
openFavorite(data); openFavorite(data);
}} }}
menuExt={ menuExt={
@@ -101,4 +101,4 @@ export function FavoriteFileAppObject({ data, commonProps }) {
); );
} }
FavoriteFileAppObject.extractKey = (data) => data.file; FavoriteFileAppObject.extractKey = data => data.file;

4
packages/web/src/appobj/MacroAppObject.js
View File

@@ -9,7 +9,7 @@ function MacroAppObject({ data, commonProps }) {
return <AppObjectCore {...commonProps} data={data} title={title} icon={'img macro'} />; return <AppObjectCore {...commonProps} data={data} title={title} icon={'img macro'} />;
} }
MacroAppObject.extractKey = (data) => data.name; MacroAppObject.extractKey = data => data.name;
MacroAppObject.createMatcher = ({ name, title }) => (filter) => filterName(filter, name, title); MacroAppObject.createMatcher = ({ name, title }) => filter => filterName(filter, name, title);
export default MacroAppObject; export default MacroAppObject;

22
packages/web/src/appobj/SavedFileAppObject.js
View File

@@ -17,7 +17,7 @@ function Menu({ data, menuExt = null, title = undefined, disableRename = false }
const hasPermission = useHasPermission(); const hasPermission = useHasPermission();
const showModal = useShowModal(); const showModal = useShowModal();
const handleDelete = () => { const handleDelete = () => {
showModal((modalState) => ( showModal(modalState => (
<ConfirmModal <ConfirmModal
modalState={modalState} modalState={modalState}
message={`Really delete file ${title || data.file}?`} message={`Really delete file ${title || data.file}?`}
@@ -28,13 +28,13 @@ function Menu({ data, menuExt = null, title = undefined, disableRename = false }
)); ));
}; };
const handleRename = () => { const handleRename = () => {
showModal((modalState) => ( showModal(modalState => (
<InputTextModal <InputTextModal
modalState={modalState} modalState={modalState}
value={data.file} value={data.file}
label="New file name" label="New file name"
header="Rename file" header="Rename file"
onConfirm={(newFile) => { onConfirm={newFile => {
axios.post('files/rename', { ...data, newFile }); axios.post('files/rename', { ...data, newFile });
}} }}
/> />
@@ -77,7 +77,7 @@ export function SavedFileAppObjectBase({
title={title || file} title={title || file}
icon={icon} icon={icon}
onClick={onClick} onClick={onClick}
Menu={(props) => <Menu {...props} menuExt={menuExt} title={title} disableRename={disableRename} />} Menu={props => <Menu {...props} menuExt={menuExt} title={title} disableRename={disableRename} />}
/> />
); );
} }
@@ -123,7 +123,7 @@ export function SavedSqlFileAppObject({ data, commonProps }) {
<DropDownMenuItem onClick={handleGenerateExecute}>Generate shell execute</DropDownMenuItem> <DropDownMenuItem onClick={handleGenerateExecute}>Generate shell execute</DropDownMenuItem>
) : null ) : null
} }
onLoad={(data) => { onLoad={data => {
newQuery({ newQuery({
title: file, title: file,
initialData: data, initialData: data,
@@ -147,7 +147,7 @@ export function SavedShellFileAppObject({ data, commonProps }) {
commonProps={commonProps} commonProps={commonProps}
format="text" format="text"
icon="img shell" icon="img shell"
onLoad={(data) => { onLoad={data => {
openNewTab( openNewTab(
{ {
title: file, title: file,
@@ -183,7 +183,7 @@ export function SavedChartFileAppObject({ data, commonProps }) {
commonProps={commonProps} commonProps={commonProps}
format="json" format="json"
icon="img chart" icon="img chart"
onLoad={(data) => { onLoad={data => {
openNewTab( openNewTab(
{ {
title: file, title: file,
@@ -222,7 +222,7 @@ export function SavedQueryFileAppObject({ data, commonProps }) {
commonProps={commonProps} commonProps={commonProps}
format="json" format="json"
icon="img query-design" icon="img query-design"
onLoad={(data) => { onLoad={data => {
openNewTab( openNewTab(
{ {
title: file, title: file,
@@ -266,7 +266,7 @@ export function SavedMarkdownFileAppObject({ data, commonProps }) {
commonProps={commonProps} commonProps={commonProps}
format="text" format="text"
icon="img markdown" icon="img markdown"
onLoad={(data) => { onLoad={data => {
openNewTab( openNewTab(
{ {
title: file, title: file,
@@ -308,7 +308,7 @@ export function SavedFileAppObject({ data, commonProps }) {
SavedChartFileAppObject, SavedChartFileAppObject,
SavedMarkdownFileAppObject, SavedMarkdownFileAppObject,
SavedFileAppObject, SavedFileAppObject,
].forEach((fn) => { ].forEach(fn => {
// @ts-ignore // @ts-ignore
fn.extractKey = (data) => data.file; fn.extractKey = data => data.file;
}); });

10
packages/web/src/celldata/CellDataView.js
View File

@@ -9,7 +9,7 @@ import useTheme from '../theme/useTheme';
const Toolbar = styled.div` const Toolbar = styled.div`
display: flex; display: flex;
background: ${(props) => props.theme.toolbar_background}; background: ${props => props.theme.toolbar_background};
align-items: center; align-items: center;
`; `;
@@ -65,10 +65,10 @@ export default function CellDataView({ selection = undefined, grider = undefined
value = selectedValue; value = selectedValue;
} }
const autodetectFormatType = React.useMemo(() => autodetect(selection, grider, value), [selection, grider, value]); const autodetectFormatType = React.useMemo(() => autodetect(selection, grider, value), [selection, grider, value]);
const autodetectFormat = formats.find((x) => x.type == autodetectFormatType); const autodetectFormat = formats.find(x => x.type == autodetectFormatType);
const usedFormatType = selectedFormatType == 'autodetect' ? autodetectFormatType : selectedFormatType; const usedFormatType = selectedFormatType == 'autodetect' ? autodetectFormatType : selectedFormatType;
const usedFormat = formats.find((x) => x.type == usedFormatType); const usedFormat = formats.find(x => x.type == usedFormatType);
const { Component } = usedFormat || {}; const { Component } = usedFormat || {};
@@ -76,10 +76,10 @@ export default function CellDataView({ selection = undefined, grider = undefined
<MainWrapper> <MainWrapper>
<Toolbar theme={theme}> <Toolbar theme={theme}>
Format: Format:
<SelectField value={selectedFormatType} onChange={(e) => setSelectedFormatType(e.target.value)}> <SelectField value={selectedFormatType} onChange={e => setSelectedFormatType(e.target.value)}>
<option value="autodetect">Autodetect - {autodetectFormat.title}</option> <option value="autodetect">Autodetect - {autodetectFormat.title}</option>
{formats.map((fmt) => ( {formats.map(fmt => (
<option value={fmt.type} key={fmt.type}> <option value={fmt.type} key={fmt.type}>
{fmt.title} {fmt.title}
</option> </option>

10
packages/web/src/charts/ChartEditor.js
View File

@@ -19,7 +19,7 @@ import { presetPrimaryColors } from '@ant-design/colors';
import ErrorInfo from '../widgets/ErrorInfo'; import ErrorInfo from '../widgets/ErrorInfo';
const LeftContainer = styled.div` const LeftContainer = styled.div`
background-color: ${(props) => props.theme.manager_background}; background-color: ${props => props.theme.manager_background};
display: flex; display: flex;
flex: 1; flex: 1;
`; `;
@@ -71,7 +71,7 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
React.useEffect(() => { React.useEffect(() => {
if (data) { if (data) {
setAvailableColumnNames(data ? data.structure.columns.map((x) => x.columnName) : []); setAvailableColumnNames(data ? data.structure.columns.map(x => x.columnName) : []);
} }
}, [data]); }, [data]);
@@ -119,21 +119,21 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
{availableColumnNames.length > 0 && ( {availableColumnNames.length > 0 && (
<FormSelectField label="Label column" name="labelColumn"> <FormSelectField label="Label column" name="labelColumn">
<option value=""></option> <option value=""></option>
{availableColumnNames.map((col) => ( {availableColumnNames.map(col => (
<option value={col} key={col}> <option value={col} key={col}>
{col} {col}
</option> </option>
))} ))}
</FormSelectField> </FormSelectField>
)} )}
{availableColumnNames.map((col) => ( {availableColumnNames.map(col => (
<React.Fragment key={col}> <React.Fragment key={col}>
<FormCheckboxField label={col} name={`dataColumn_${col}`} /> <FormCheckboxField label={col} name={`dataColumn_${col}`} />
{config[`dataColumn_${col}`] && ( {config[`dataColumn_${col}`] && (
<FormSelectField label="Color" name={`dataColumnColor_${col}`}> <FormSelectField label="Color" name={`dataColumnColor_${col}`}>
<option value="">Random</option> <option value="">Random</option>
{_.keys(presetPrimaryColors).map((color) => ( {_.keys(presetPrimaryColors).map(color => (
<option value={color} key={color}> <option value={color} key={color}>
{_.startCase(color)} {_.startCase(color)}
</option> </option>

8
packages/web/src/charts/DataChart.js
View File

@@ -27,8 +27,8 @@ function getTimeAxis(labels) {
function getLabels(labelValues, timeAxis, chartType) { function getLabels(labelValues, timeAxis, chartType) {
if (!timeAxis) return labelValues; if (!timeAxis) return labelValues;
if (chartType === 'line') return timeAxis.map((x) => x.toDate()); if (chartType === 'line') return timeAxis.map(x => x.toDate());
return timeAxis.map((x) => x.format('D. M. YYYY')); return timeAxis.map(x => x.format('D. M. YYYY'));
} }
function getOptions(timeAxis, chartType) { function getOptions(timeAxis, chartType) {
@@ -70,7 +70,7 @@ function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartTyp
}); });
let backgroundColor = null; let backgroundColor = null;
let borderColor = null; let borderColor = null;
const labelValues = freeData.rows.map((x) => x[labelColumn]); const labelValues = freeData.rows.map(x => x[labelColumn]);
const timeAxis = getTimeAxis(labelValues); const timeAxis = getTimeAxis(labelValues);
const labels = getLabels(labelValues, timeAxis, chartType); const labels = getLabels(labelValues, timeAxis, chartType);
const res = { const res = {
@@ -91,7 +91,7 @@ function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartTyp
return { return {
label: dataColumn, label: dataColumn,
data: freeData.rows.map((row) => row[dataColumn]), data: freeData.rows.map(row => row[dataColumn]),
backgroundColor, backgroundColor,
borderColor, borderColor,
borderWidth: 1, borderWidth: 1,

8
packages/web/src/charts/chartDataLoader.ts
View File

@@ -19,7 +19,7 @@ export async function loadChartStructure(driver: EngineDriver, conid, database,
dumpSqlSelect(dmp, select); dumpSqlSelect(dmp, select);
const resp = await axios.post('database-connections/query-data', { conid, database, sql: dmp.s }); const resp = await axios.post('database-connections/query-data', { conid, database, sql: dmp.s });
if (resp.data.errorMessage) throw new Error(resp.data.errorMessage); if (resp.data.errorMessage) throw new Error(resp.data.errorMessage);
return resp.data.columns.map((x) => x.columnName); return resp.data.columns.map(x => x.columnName);
} }
export async function loadChartData(driver: EngineDriver, conid, database, sql, config) { export async function loadChartData(driver: EngineDriver, conid, database, sql, config) {
@@ -38,7 +38,7 @@ export async function loadChartData(driver: EngineDriver, conid, database, sql,
alias: labelColumn, alias: labelColumn,
}, },
// @ts-ignore // @ts-ignore
...dataColumns.map((columnName) => ({ ...dataColumns.map(columnName => ({
exprType: 'call', exprType: 'call',
func: 'SUM', func: 'SUM',
args: [ args: [
@@ -81,12 +81,12 @@ export async function loadChartData(driver: EngineDriver, conid, database, sql,
rows = _.reverse([...rows]); rows = _.reverse([...rows]);
} }
if (showRelativeValues) { if (showRelativeValues) {
const maxValues = dataColumns.map((col) => _.max(rows.map((row) => row[col]))); const maxValues = dataColumns.map(col => _.max(rows.map(row => row[col])));
for (const [col, max] of _.zip(dataColumns, maxValues)) { for (const [col, max] of _.zip(dataColumns, maxValues)) {
if (!max) continue; if (!max) continue;
if (!_.isNumber(max)) continue; if (!_.isNumber(max)) continue;
if (!(max > 0)) continue; if (!(max > 0)) continue;
rows = rows.map((row) => ({ rows = rows.map(row => ({
...row, ...row,
[col]: (row[col] / max) * 100, [col]: (row[col] / max) * 100,
})); }));

12
packages/web/src/datagrid/ChangeSetGrider.ts
View File

@@ -26,7 +26,7 @@ export default class ChangeSetGrider extends Grider {
super(); super();
this.changeSet = changeSetState && changeSetState.value; this.changeSet = changeSetState && changeSetState.value;
this.insertedRows = getChangeSetInsertedRows(this.changeSet, display.baseTable); this.insertedRows = getChangeSetInsertedRows(this.changeSet, display.baseTable);
this.setChangeSet = (value) => dispatchChangeSet({ type: 'set', value }); this.setChangeSet = value => dispatchChangeSet({ type: 'set', value });
this.rowCacheIndexes = new Set(); this.rowCacheIndexes = new Set();
this.rowDataCache = {}; this.rowDataCache = {};
this.rowStatusCache = {}; this.rowStatusCache = {};
@@ -98,12 +98,12 @@ export default class ChangeSetGrider extends Grider {
setCellValue(index: number, uniqueName: string, value: any) { setCellValue(index: number, uniqueName: string, value: any) {
const row = this.getRowSource(index); const row = this.getRowSource(index);
const definition = this.display.getChangeSetField(row, uniqueName, this.getInsertedRowIndex(index)); const definition = this.display.getChangeSetField(row, uniqueName, this.getInsertedRowIndex(index));
this.applyModification((chs) => setChangeSetValue(chs, definition, value)); this.applyModification(chs => setChangeSetValue(chs, definition, value));
} }
deleteRow(index: number) { deleteRow(index: number) {
this.requireRowCache(index); this.requireRowCache(index);
this.applyModification((chs) => deleteChangeSetRows(chs, this.rowDefinitionsCache[index])); this.applyModification(chs => deleteChangeSetRows(chs, this.rowDefinitionsCache[index]));
} }
get rowCountInUpdate() { get rowCountInUpdate() {
@@ -117,7 +117,7 @@ export default class ChangeSetGrider extends Grider {
insertRow(): number { insertRow(): number {
const res = this.rowCountInUpdate; const res = this.rowCountInUpdate;
this.applyModification((chs) => changeSetInsertNewRow(chs, this.display.baseTable)); this.applyModification(chs => changeSetInsertNewRow(chs, this.display.baseTable));
return res; return res;
} }
@@ -131,10 +131,10 @@ export default class ChangeSetGrider extends Grider {
revertRowChanges(index: number) { revertRowChanges(index: number) {
this.requireRowCache(index); this.requireRowCache(index);
this.applyModification((chs) => revertChangeSetRowChanges(chs, this.rowDefinitionsCache[index])); this.applyModification(chs => revertChangeSetRowChanges(chs, this.rowDefinitionsCache[index]));
} }
revertAllChanges() { revertAllChanges() {
this.applyModification((chs) => createChangeSet()); this.applyModification(chs => createChangeSet());
} }
undo() { undo() {
this.dispatchChangeSet({ type: 'undo' }); this.dispatchChangeSet({ type: 'undo' });

2
packages/web/src/datagrid/ColumnHeaderControl.js
View File

@@ -29,7 +29,7 @@ const IconWrapper = styled.span`
`; `;
const ResizeHandle = styled.div` const ResizeHandle = styled.div`
background-color: ${(props) => props.theme.border}; background-color: ${props => props.theme.border};
width: 2px; width: 2px;
cursor: col-resize; cursor: col-resize;
z-index: 1; z-index: 1;

2
packages/web/src/datagrid/ColumnLabel.js
View File

@@ -5,7 +5,7 @@ import styled from 'styled-components';
import { FontIcon } from '../icons'; import { FontIcon } from '../icons';
const Label = styled.span` const Label = styled.span`
font-weight: ${(props) => (props.notNull ? 'bold' : 'normal')}; font-weight: ${props => (props.notNull ? 'bold' : 'normal')};
white-space: nowrap; white-space: nowrap;
`; `;

8
packages/web/src/datagrid/ColumnManager.js
View File

@@ -16,7 +16,7 @@ const Row = styled.div`
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
background-color: ${(props) => props.theme.manager_background_blue[1]}; background-color: ${props => props.theme.manager_background_blue[1]};
} }
`; `;
@@ -46,7 +46,7 @@ function ColumnManagerRow(props) {
onMouseEnter={() => setIsHover(true)} onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)} onMouseLeave={() => setIsHover(false)}
theme={theme} theme={theme}
onClick={(e) => { onClick={e => {
// @ts-ignore // @ts-ignore
if (e.target.closest('.expandColumnIcon')) return; if (e.target.closest('.expandColumnIcon')) return;
display.focusColumn(column.uniqueName); display.focusColumn(column.uniqueName);
@@ -84,8 +84,8 @@ export default function ColumnManager(props) {
<ManagerInnerContainer style={{ maxWidth: props.managerSize }}> <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
{display {display
.getColumns(columnFilter) .getColumns(columnFilter)
.filter((column) => filterName(columnFilter, column.columnName)) .filter(column => filterName(columnFilter, column.columnName))
.map((column) => ( .map(column => (
<ColumnManagerRow key={column.uniqueName} display={display} column={column} /> <ColumnManagerRow key={column.uniqueName} display={display} column={column} />
))} ))}
</ManagerInnerContainer> </ManagerInnerContainer>

2
packages/web/src/datagrid/DataGrid.js
View File

@@ -10,7 +10,7 @@ import CellDataView from '../celldata/CellDataView';
import useTheme from '../theme/useTheme'; import useTheme from '../theme/useTheme';
const LeftContainer = styled.div` const LeftContainer = styled.div`
background-color: ${(props) => props.theme.manager_background}; background-color: ${props => props.theme.manager_background};
display: flex; display: flex;
flex: 1; flex: 1;
`; `;

58
packages/web/src/datagrid/DataGridRow.js
View File

@@ -11,13 +11,13 @@ import { FontIcon } from '../icons';
const TableBodyCell = styled.td` const TableBodyCell = styled.td`
font-weight: normal; font-weight: normal;
border: 1px solid ${(props) => props.theme.border}; border: 1px solid ${props => props.theme.border};
// border-collapse: collapse; // border-collapse: collapse;
padding: 2px; padding: 2px;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
${(props) => ${props =>
props.isSelected && props.isSelected &&
!props.isAutofillSelected && !props.isAutofillSelected &&
!props.isFocusedColumn && !props.isFocusedColumn &&
@@ -26,20 +26,20 @@ const TableBodyCell = styled.td`
background-color: ${props.theme.gridbody_selection[4]}; background-color: ${props.theme.gridbody_selection[4]};
color: ${props.theme.gridbody_invfont1};`} color: ${props.theme.gridbody_invfont1};`}
${(props) => ${props =>
props.isFrameSelected && props.isFrameSelected &&
` `
outline: 3px solid ${props.theme.gridbody_selection[4]}; outline: 3px solid ${props.theme.gridbody_selection[4]};
outline-offset: -3px;`} outline-offset: -3px;`}
${(props) => ${props =>
props.isAutofillSelected && props.isAutofillSelected &&
!props.isFocusedColumn && !props.isFocusedColumn &&
` `
outline: 3px solid ${props.theme.gridbody_selection[4]}; outline: 3px solid ${props.theme.gridbody_selection[4]};
outline-offset: -3px;`} outline-offset: -3px;`}
${(props) => ${props =>
props.isModifiedRow && props.isModifiedRow &&
!props.isInsertedRow && !props.isInsertedRow &&
!props.isSelected && !props.isSelected &&
@@ -48,7 +48,7 @@ const TableBodyCell = styled.td`
!props.isFocusedColumn && !props.isFocusedColumn &&
` `
background-color: ${props.theme.gridbody_background_gold[1]};`} background-color: ${props.theme.gridbody_background_gold[1]};`}
${(props) => ${props =>
!props.isSelected && !props.isSelected &&
!props.isAutofillSelected && !props.isAutofillSelected &&
!props.isInsertedRow && !props.isInsertedRow &&
@@ -57,7 +57,7 @@ const TableBodyCell = styled.td`
` `
background-color: ${props.theme.gridbody_background_orange[1]};`} background-color: ${props.theme.gridbody_background_orange[1]};`}
${(props) => ${props =>
!props.isSelected && !props.isSelected &&
!props.isAutofillSelected && !props.isAutofillSelected &&
!props.isFocusedColumn && !props.isFocusedColumn &&
@@ -65,7 +65,7 @@ const TableBodyCell = styled.td`
` `
background-color: ${props.theme.gridbody_background_green[1]};`} background-color: ${props.theme.gridbody_background_green[1]};`}
${(props) => ${props =>
!props.isSelected && !props.isSelected &&
!props.isAutofillSelected && !props.isAutofillSelected &&
!props.isFocusedColumn && !props.isFocusedColumn &&
@@ -74,13 +74,13 @@ const TableBodyCell = styled.td`
background-color: ${props.theme.gridbody_background_volcano[1]}; background-color: ${props.theme.gridbody_background_volcano[1]};
`} `}
${(props) => ${props =>
props.isFocusedColumn && props.isFocusedColumn &&
` `
background-color: ${props.theme.gridbody_background_yellow[0]}; background-color: ${props.theme.gridbody_background_yellow[0]};
`} `}
${(props) => ${props =>
props.isDeletedRow && props.isDeletedRow &&
` `
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEElEQVQImWNgIAX8x4KJBAD+agT8INXz9wAAAABJRU5ErkJggg=='); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEElEQVQImWNgIAX8x4KJBAD+agT8INXz9wAAAABJRU5ErkJggg==');
@@ -90,30 +90,30 @@ const TableBodyCell = styled.td`
`; `;
const HintSpan = styled.span` const HintSpan = styled.span`
color: ${(props) => props.theme.gridbody_font3}; color: ${props => props.theme.gridbody_font3};
margin-left: 5px; margin-left: 5px;
`; `;
const NullSpan = styled.span` const NullSpan = styled.span`
color: ${(props) => props.theme.gridbody_font3}; color: ${props => props.theme.gridbody_font3};
font-style: italic; font-style: italic;
`; `;
const TableBodyRow = styled.tr` const TableBodyRow = styled.tr`
// height: 35px; // height: 35px;
background-color: ${(props) => props.theme.gridbody_background}; background-color: ${props => props.theme.gridbody_background};
&:nth-child(6n + 3) { &:nth-child(6n + 3) {
background-color: ${(props) => props.theme.gridbody_background_alt2}; background-color: ${props => props.theme.gridbody_background_alt2};
} }
&:nth-child(6n + 6) { &:nth-child(6n + 6) {
background-color: ${(props) => props.theme.gridbody_background_alt3}; background-color: ${props => props.theme.gridbody_background_alt3};
} }
`; `;
const TableHeaderCell = styled.td` const TableHeaderCell = styled.td`
border: 1px solid ${(props) => props.theme.border}; border: 1px solid ${props => props.theme.border};
text-align: left; text-align: left;
padding: 2px; padding: 2px;
background-color: ${(props) => props.theme.gridheader_background}; background-color: ${props => props.theme.gridheader_background};
overflow: hidden; overflow: hidden;
position: relative; position: relative;
`; `;
@@ -121,7 +121,7 @@ const TableHeaderCell = styled.td`
const AutoFillPoint = styled.div` const AutoFillPoint = styled.div`
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: ${(props) => props.theme.gridbody_selection[6]}; background-color: ${props => props.theme.gridbody_selection[6]};
position: absolute; position: absolute;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
@@ -133,12 +133,12 @@ export const ShowFormButton = styled.div`
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 1px; top: 1px;
color: ${(props) => props.theme.gridbody_font3}; color: ${props => props.theme.gridbody_font3};
background-color: ${(props) => props.theme.gridheader_background}; background-color: ${props => props.theme.gridheader_background};
border: 1px solid ${(props) => props.theme.gridheader_background}; border: 1px solid ${props => props.theme.gridheader_background};
&:hover { &:hover {
color: ${(props) => props.theme.gridheader_font_hover}; color: ${props => props.theme.gridheader_font_hover};
border: 1px solid ${(props) => props.theme.border}; border: 1px solid ${props => props.theme.border};
top: 1px; top: 1px;
right: 0px; right: 0px;
} }
@@ -199,7 +199,7 @@ function RowHeaderCell({ rowIndex, theme, onSetFormView, rowData }) {
{!!onSetFormView && mouseIn && ( {!!onSetFormView && mouseIn && (
<ShowFormButton <ShowFormButton
theme={theme} theme={theme}
onClick={(e) => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
onSetFormView(rowData); onSetFormView(rowData);
}} }}
@@ -251,12 +251,12 @@ function DataGridRow(props) {
const rowStatus = grider.getRowStatus(rowIndex); const rowStatus = grider.getRowStatus(rowIndex);
const hintFieldsAllowed = visibleRealColumns const hintFieldsAllowed = visibleRealColumns
.filter((col) => { .filter(col => {
if (!col.hintColumnName) return false; if (!col.hintColumnName) return false;
if (rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)) return false; if (rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)) return false;
return true; return true;
}) })
.map((col) => col.uniqueName); .map(col => col.uniqueName);
if (!rowData) return null; if (!rowData) return null;
@@ -264,7 +264,7 @@ function DataGridRow(props) {
<TableBodyRow style={{ height: `${rowHeight}px` }} theme={theme}> <TableBodyRow style={{ height: `${rowHeight}px` }} theme={theme}>
<RowHeaderCell rowIndex={rowIndex} theme={theme} onSetFormView={onSetFormView} rowData={rowData} /> <RowHeaderCell rowIndex={rowIndex} theme={theme} onSetFormView={onSetFormView} rowData={rowData} />
{visibleRealColumns.map((col) => ( {visibleRealColumns.map(col => (
<TableBodyCell <TableBodyCell
key={col.uniqueName} key={col.uniqueName}
theme={theme} theme={theme}
@@ -299,7 +299,7 @@ function DataGridRow(props) {
// grider={grider} // grider={grider}
// rowIndex={rowIndex} // rowIndex={rowIndex}
// uniqueName={col.uniqueName} // uniqueName={col.uniqueName}
onSetValue={(value) => grider.setCellValue(rowIndex, col.uniqueName, value)} onSetValue={value => grider.setCellValue(rowIndex, col.uniqueName, value)}
/> />
) : ( ) : (
<> <>
@@ -311,7 +311,7 @@ function DataGridRow(props) {
<ShowFormButton <ShowFormButton
theme={theme} theme={theme}
className="buttonLike" className="buttonLike"
onClick={(e) => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
onSetFormView(rowData, col); onSetFormView(rowData, col);
}} }}

4
packages/web/src/datagrid/JslDataGridCore.js
View File

@@ -59,11 +59,11 @@ export default function JslDataGridCore(props) {
initialValues.sourceJslId = jslid; initialValues.sourceJslId = jslid;
initialValues.sourceList = ['query-data']; initialValues.sourceList = ['query-data'];
} }
showModal((modalState) => <ImportExportModal modalState={modalState} initialValues={initialValues} />); showModal(modalState => <ImportExportModal modalState={modalState} initialValues={initialValues} />);
} }
const handleJslDataStats = React.useCallback( const handleJslDataStats = React.useCallback(
(stats) => { stats => {
if (stats.changeIndex < changeIndex) return; if (stats.changeIndex < changeIndex) return;
setChangeIndex(stats.changeIndex); setChangeIndex(stats.changeIndex);
setRowCountLoaded(stats.rowCount); setRowCountLoaded(stats.rowCount);

10
packages/web/src/datagrid/LoadingDataGridCore.js
View File

@@ -32,7 +32,7 @@ export default function LoadingDataGridCore(props) {
const handleLoadRowCount = async () => { const handleLoadRowCount = async () => {
const rowCount = await loadRowCount(props); const rowCount = await loadRowCount(props);
setLoadProps((oldLoadProps) => ({ setLoadProps(oldLoadProps => ({
...oldLoadProps, ...oldLoadProps,
allRowCount: rowCount, allRowCount: rowCount,
})); }));
@@ -62,7 +62,7 @@ export default function LoadingDataGridCore(props) {
const loadNextData = async () => { const loadNextData = async () => {
if (isLoading) return; if (isLoading) return;
setLoadProps((oldLoadProps) => ({ setLoadProps(oldLoadProps => ({
...oldLoadProps, ...oldLoadProps,
isLoading: true, isLoading: true,
})); }));
@@ -80,7 +80,7 @@ export default function LoadingDataGridCore(props) {
// } // }
// console.log('nextRows', nextRows); // console.log('nextRows', nextRows);
if (nextRows.errorMessage) { if (nextRows.errorMessage) {
setLoadProps((oldLoadProps) => ({ setLoadProps(oldLoadProps => ({
...oldLoadProps, ...oldLoadProps,
isLoading: false, isLoading: false,
errorMessage: nextRows.errorMessage, errorMessage: nextRows.errorMessage,
@@ -91,7 +91,7 @@ export default function LoadingDataGridCore(props) {
loadedRows: [...loadedRows, ...nextRows], loadedRows: [...loadedRows, ...nextRows],
loadedTime, loadedTime,
}; };
setLoadProps((oldLoadProps) => ({ setLoadProps(oldLoadProps => ({
...oldLoadProps, ...oldLoadProps,
isLoading: false, isLoading: false,
isLoadedAll: oldLoadProps.loadNextDataToken == loadNextDataToken && nextRows.length === 0, isLoadedAll: oldLoadProps.loadNextDataToken == loadNextDataToken && nextRows.length === 0,
@@ -102,7 +102,7 @@ export default function LoadingDataGridCore(props) {
}; };
React.useEffect(() => { React.useEffect(() => {
setLoadProps((oldProps) => ({ setLoadProps(oldProps => ({
...oldProps, ...oldProps,
isLoadedAll: false, isLoadedAll: false,
})); }));

1
packages/web/src/datagrid/ManagerStyles.js
View File

@@ -5,4 +5,3 @@ export const ManagerInnerContainer = styled.div`
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
`; `;

10
packages/web/src/datagrid/ReferenceHeader.js
View File

@@ -9,12 +9,12 @@ const Container = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: ${(props) => props.theme.gridheader_background_cyan[0]}; background: ${props => props.theme.gridheader_background_cyan[0]};
height: ${dimensions.toolBar.height}px; height: ${dimensions.toolBar.height}px;
min-height: ${dimensions.toolBar.height}px; min-height: ${dimensions.toolBar.height}px;
overflow: hidden; overflow: hidden;
border-top: 1px solid ${(props) => props.theme.border}; border-top: 1px solid ${props => props.theme.border};
border-bottom: 1px solid ${(props) => props.theme.border}; border-bottom: 1px solid ${props => props.theme.border};
`; `;
const Header = styled.div` const Header = styled.div`
@@ -34,8 +34,8 @@ export default function ReferenceHeader({ reference, onClose }) {
<Header> <Header>
<FontIcon icon="img reference" /> <FontIcon icon="img reference" />
<HeaderText> <HeaderText>
{reference.pureName} [{reference.columns.map((x) => x.refName).join(', ')}] = master [ {reference.pureName} [{reference.columns.map(x => x.refName).join(', ')}] = master [
{reference.columns.map((x) => x.baseName).join(', ')}] {reference.columns.map(x => x.baseName).join(', ')}]
</HeaderText> </HeaderText>
</Header> </Header>
<ToolbarButton icon="icon close" onClick={onClose} patchY={6}> <ToolbarButton icon="icon close" onClick={onClose} patchY={6}>

14
packages/web/src/datagrid/ReferenceManager.js
View File

@@ -38,7 +38,7 @@ function ManagerRow({ tableName, columns, icon, onClick }) {
<LinkContainer onClick={onClick} theme={theme}> <LinkContainer onClick={onClick} theme={theme}>
<FontIcon icon={icon} /> <FontIcon icon={icon} />
<NameContainer> <NameContainer>
{tableName} ({columns.map((x) => x.columnName).join(', ')}) {tableName} ({columns.map(x => x.columnName).join(', ')})
</NameContainer> </NameContainer>
</LinkContainer> </LinkContainer>
); );
@@ -62,8 +62,8 @@ export default function ReferenceManager(props) {
<> <>
<Header>References tables ({foreignKeys.length})</Header> <Header>References tables ({foreignKeys.length})</Header>
{foreignKeys {foreignKeys
.filter((fk) => filterName(filter, fk.refTableName)) .filter(fk => filterName(filter, fk.refTableName))
.map((fk) => ( .map(fk => (
<ManagerRow <ManagerRow
key={fk.constraintName} key={fk.constraintName}
icon="img link" icon="img link"
@@ -73,7 +73,7 @@ export default function ReferenceManager(props) {
props.onReferenceClick({ props.onReferenceClick({
schemaName: fk.refSchemaName, schemaName: fk.refSchemaName,
pureName: fk.refTableName, pureName: fk.refTableName,
columns: fk.columns.map((col) => ({ columns: fk.columns.map(col => ({
baseName: col.columnName, baseName: col.columnName,
refName: col.refColumnName, refName: col.refColumnName,
})), })),
@@ -87,8 +87,8 @@ export default function ReferenceManager(props) {
<> <>
<Header>Dependend tables ({dependencies.length})</Header> <Header>Dependend tables ({dependencies.length})</Header>
{dependencies {dependencies
.filter((fk) => filterName(filter, fk.pureName)) .filter(fk => filterName(filter, fk.pureName))
.map((fk) => ( .map(fk => (
<ManagerRow <ManagerRow
key={fk.constraintName} key={fk.constraintName}
icon="img reference" icon="img reference"
@@ -98,7 +98,7 @@ export default function ReferenceManager(props) {
props.onReferenceClick({ props.onReferenceClick({
schemaName: fk.schemaName, schemaName: fk.schemaName,
pureName: fk.pureName, pureName: fk.pureName,
columns: fk.columns.map((col) => ({ columns: fk.columns.map(col => ({
baseName: col.refColumnName, baseName: col.refColumnName,
refName: col.columnName, refName: col.columnName,
})), })),

32
packages/web/src/datagrid/SeriesSizes.ts
View File

@@ -31,7 +31,7 @@ export class SeriesSizes {
return this.frozenModelIndexes != null ? this.frozenModelIndexes.length : 0; return this.frozenModelIndexes != null ? this.frozenModelIndexes.length : 0;
} }
public get frozenSize(): number { public get frozenSize(): number {
return _.sumBy(this.frozenItems, (x) => x.size); return _.sumBy(this.frozenItems, x => x.size);
} }
public get realCount(): number { public get realCount(): number {
return this.frozenCount + this.scrollCount; return this.frozenCount + this.scrollCount;
@@ -63,14 +63,14 @@ export class SeriesSizes {
public buildIndex(): void { public buildIndex(): void {
this.scrollItems = []; this.scrollItems = [];
this.scrollIndexes = _.filter( this.scrollIndexes = _.filter(
_.map(_.range(this.count), (x) => this.modelToReal(x) - this.frozenCount), _.map(_.range(this.count), x => this.modelToReal(x) - this.frozenCount),
// _.map(this.intKeys(_.keys(this.sizeOverridesByModelIndex)), (x) => this.modelToReal(x) - this.frozenCount), // _.map(this.intKeys(_.keys(this.sizeOverridesByModelIndex)), (x) => this.modelToReal(x) - this.frozenCount),
(x) => x >= 0 x => x >= 0
); );
this.scrollIndexes.sort(); this.scrollIndexes.sort();
let lastScrollIndex: number = -1; let lastScrollIndex: number = -1;
let lastEndPosition: number = 0; let lastEndPosition: number = 0;
this.scrollIndexes.forEach((scrollIndex) => { this.scrollIndexes.forEach(scrollIndex => {
let modelIndex: number = this.realToModel(scrollIndex + this.frozenCount); let modelIndex: number = this.realToModel(scrollIndex + this.frozenCount);
let size: number = this.sizeOverridesByModelIndex[modelIndex]; let size: number = this.sizeOverridesByModelIndex[modelIndex];
let item = new SeriesSizeItem(); let item = new SeriesSizeItem();
@@ -82,7 +82,7 @@ export class SeriesSizes {
lastScrollIndex = scrollIndex; lastScrollIndex = scrollIndex;
lastEndPosition = item.endPosition; lastEndPosition = item.endPosition;
}); });
this.positions = _.map(this.scrollItems, (x) => x.position); this.positions = _.map(this.scrollItems, x => x.position);
this.frozenItems = []; this.frozenItems = [];
let lastpos: number = 0; let lastpos: number = 0;
for (let i: number = 0; i < this.frozenCount; i++) { for (let i: number = 0; i < this.frozenCount; i++) {
@@ -157,11 +157,11 @@ export class SeriesSizes {
public getScroll(sourceScrollIndex: number, targetScrollIndex: number): number { public getScroll(sourceScrollIndex: number, targetScrollIndex: number): number {
if (sourceScrollIndex < targetScrollIndex) { if (sourceScrollIndex < targetScrollIndex) {
return -_.sum( return -_.sum(
_.map(_.range(sourceScrollIndex, targetScrollIndex - sourceScrollIndex), (x) => this.getSizeByScrollIndex(x)) _.map(_.range(sourceScrollIndex, targetScrollIndex - sourceScrollIndex), x => this.getSizeByScrollIndex(x))
); );
} else { } else {
return _.sum( return _.sum(
_.map(_.range(targetScrollIndex, sourceScrollIndex - targetScrollIndex), (x) => this.getSizeByScrollIndex(x)) _.map(_.range(targetScrollIndex, sourceScrollIndex - targetScrollIndex), x => this.getSizeByScrollIndex(x))
); );
} }
} }
@@ -171,15 +171,15 @@ export class SeriesSizes {
} }
public getTotalScrollSizeSum(): number { public getTotalScrollSizeSum(): number {
let scrollSizeOverrides = _.map( let scrollSizeOverrides = _.map(
_.filter(this.intKeys(this.sizeOverridesByModelIndex), (x) => this.modelIndexIsInScrollArea(x)), _.filter(this.intKeys(this.sizeOverridesByModelIndex), x => this.modelIndexIsInScrollArea(x)),
(x) => this.sizeOverridesByModelIndex[x] x => this.sizeOverridesByModelIndex[x]
); );
return _.sum(scrollSizeOverrides) + (this.count - scrollSizeOverrides.length) * this.defaultSize; return _.sum(scrollSizeOverrides) + (this.count - scrollSizeOverrides.length) * this.defaultSize;
} }
public getVisibleScrollSizeSum(): number { public getVisibleScrollSizeSum(): number {
let scrollSizeOverrides = _.map( let scrollSizeOverrides = _.map(
_.filter(this.intKeys(this.sizeOverridesByModelIndex), (x) => !_.includes(this.hiddenAndFrozenModelIndexes, x)), _.filter(this.intKeys(this.sizeOverridesByModelIndex), x => !_.includes(this.hiddenAndFrozenModelIndexes, x)),
(x) => this.sizeOverridesByModelIndex[x] x => this.sizeOverridesByModelIndex[x]
); );
return ( return (
_.sum(scrollSizeOverrides) + _.sum(scrollSizeOverrides) +
@@ -187,7 +187,7 @@ export class SeriesSizes {
); );
} }
private intKeys(value): number[] { private intKeys(value): number[] {
return _.keys(value).map((x) => _.parseInt(x)); return _.keys(value).map(x => _.parseInt(x));
} }
public getPositionByRealIndex(realIndex: number): number { public getPositionByRealIndex(realIndex: number): number {
if (realIndex < 0) return 0; if (realIndex < 0) return 0;
@@ -289,13 +289,13 @@ export class SeriesSizes {
} }
public setExtraordinaryIndexes(hidden: number[], frozen: number[]): void { public setExtraordinaryIndexes(hidden: number[], frozen: number[]): void {
//this._hiddenAndFrozenModelIndexes = _.clone(hidden); //this._hiddenAndFrozenModelIndexes = _.clone(hidden);
hidden = hidden.filter((x) => x >= 0); hidden = hidden.filter(x => x >= 0);
frozen = frozen.filter((x) => x >= 0); frozen = frozen.filter(x => x >= 0);
hidden.sort((a, b) => a - b); hidden.sort((a, b) => a - b);
frozen.sort((a, b) => a - b); frozen.sort((a, b) => a - b);
this.frozenModelIndexes = _.filter(frozen, (x) => !_.includes(hidden, x)); this.frozenModelIndexes = _.filter(frozen, x => !_.includes(hidden, x));
this.hiddenModelIndexes = _.filter(hidden, (x) => !_.includes(frozen, x)); this.hiddenModelIndexes = _.filter(hidden, x => !_.includes(frozen, x));
this.hiddenAndFrozenModelIndexes = _.concat(hidden, this.frozenModelIndexes); this.hiddenAndFrozenModelIndexes = _.concat(hidden, this.frozenModelIndexes);
this.frozenModelIndexes.sort((a, b) => a - b); this.frozenModelIndexes.sort((a, b) => a - b);
if (this.hiddenAndFrozenModelIndexes.length == 0) this.hiddenAndFrozenModelIndexes = null; if (this.hiddenAndFrozenModelIndexes.length == 0) this.hiddenAndFrozenModelIndexes = null;

16
packages/web/src/datagrid/TableDataGrid.js
View File

@@ -56,12 +56,12 @@ export default function TableDataGrid({
const { childConfig } = config; const { childConfig } = config;
const setChildConfig = (value, reference = undefined) => { const setChildConfig = (value, reference = undefined) => {
if (_.isFunction(value)) { if (_.isFunction(value)) {
setConfig((x) => ({ setConfig(x => ({
...x, ...x,
childConfig: value(x.childConfig), childConfig: value(x.childConfig),
})); }));
} else { } else {
setConfig((x) => ({ setConfig(x => ({
...x, ...x,
childConfig: value, childConfig: value,
reference: reference === undefined ? x.reference : reference, reference: reference === undefined ? x.reference : reference,
@@ -106,7 +106,7 @@ export default function TableDataGrid({
const [formDisplay, setFormDisplay] = React.useState(createFormDisplay()); const [formDisplay, setFormDisplay] = React.useState(createFormDisplay());
React.useEffect(() => { React.useEffect(() => {
setRefReloadToken((v) => v + 1); setRefReloadToken(v => v + 1);
if (!reference && display && display.isGrouped) display.clearGrouping(); if (!reference && display && display.isGrouped) display.clearGrouping();
}, [reference]); }, [reference]);
@@ -151,18 +151,18 @@ export default function TableDataGrid({
const filters = { const filters = {
...filtersBase, ...filtersBase,
..._.fromPairs( ..._.fromPairs(
reference.columns.map((col) => [ reference.columns.map(col => [
col.refName, col.refName,
selectedRows.map((x) => getFilterValueExpression(x[col.baseName], col.dataType)).join(', '), selectedRows.map(x => getFilterValueExpression(x[col.baseName], col.dataType)).join(', '),
]) ])
), ),
}; };
if (stableStringify(filters) != stableStringify(childConfig.filters)) { if (stableStringify(filters) != stableStringify(childConfig.filters)) {
setChildConfig((cfg) => ({ setChildConfig(cfg => ({
...cfg, ...cfg,
filters, filters,
})); }));
setChildCache((ca) => ({ setChildCache(ca => ({
...ca, ...ca,
refreshTime: new Date().getTime(), refreshTime: new Date().getTime(),
})); }));
@@ -192,7 +192,7 @@ export default function TableDataGrid({
dispatchChangeSet={dispatchChangeSet} dispatchChangeSet={dispatchChangeSet}
toolbarPortalRef={toolbarPortalRef} toolbarPortalRef={toolbarPortalRef}
showReferences showReferences
onReferenceClick={(reference) => setChildConfig(createGridConfig(), reference)} onReferenceClick={reference => setChildConfig(createGridConfig(), reference)}
onReferenceSourceChanged={reference ? handleReferenceSourceChanged : null} onReferenceSourceChanged={reference ? handleReferenceSourceChanged : null}
refReloadToken={refReloadToken.toString()} refReloadToken={refReloadToken.toString()}
masterLoadedTime={masterLoadedTime} masterLoadedTime={masterLoadedTime}

2
packages/web/src/datagrid/gridutil.ts
View File

@@ -128,7 +128,7 @@ export function filterCellForRow(cell, row: number): CellAddress | null {
} }
export function filterCellsForRow(cells, row: number): CellAddress[] | null { export function filterCellsForRow(cells, row: number): CellAddress[] | null {
const res = (cells || []).filter((x) => x[0] == row || _.isString(x[0])); const res = (cells || []).filter(x => x[0] == row || _.isString(x[0]));
return res.length > 0 ? res : null; return res.length > 0 ? res : null;
} }

1
packages/web/src/datagrid/selection.ts
View File

@@ -67,4 +67,3 @@ export function cellFromEvent(event): CellAddress {
const row = cell.getAttribute('data-row'); const row = cell.getAttribute('data-row');
return convertCellAddress(row, col); return convertCellAddress(row, col);
} }

88
packages/web/src/designer/Designer.js
View File

@@ -11,7 +11,7 @@ import { getTableInfo } from '../utility/metadataLoaders';
const Wrapper = styled.div` const Wrapper = styled.div`
flex: 1; flex: 1;
background-color: ${(props) => props.theme.designer_background}; background-color: ${props => props.theme.designer_background};
overflow: scroll; overflow: scroll;
`; `;
@@ -27,12 +27,12 @@ const EmptyInfo = styled.div`
`; `;
function fixPositions(tables) { function fixPositions(tables) {
const minLeft = _.min(tables.map((x) => x.left)); const minLeft = _.min(tables.map(x => x.left));
const minTop = _.min(tables.map((x) => x.top)); const minTop = _.min(tables.map(x => x.top));
if (minLeft < 0 || minTop < 0) { if (minLeft < 0 || minTop < 0) {
const dLeft = minLeft < 0 ? -minLeft : 0; const dLeft = minLeft < 0 ? -minLeft : 0;
const dTop = minTop < 0 ? -minTop : 0; const dTop = minTop < 0 ? -minTop : 0;
return tables.map((tbl) => ({ return tables.map(tbl => ({
...tbl, ...tbl,
left: tbl.left + dLeft, left: tbl.left + dLeft,
top: tbl.top + dTop, top: tbl.top + dTop,
@@ -51,7 +51,7 @@ export default function Designer({ value, onChange, conid, database }) {
const wrapperRef = React.useRef(); const wrapperRef = React.useRef();
const [changeToken, setChangeToken] = React.useState(0); const [changeToken, setChangeToken] = React.useState(0);
const handleDrop = (e) => { const handleDrop = e => {
var data = e.dataTransfer.getData('app_object_drag_data'); var data = e.dataTransfer.getData('app_object_drag_data');
e.preventDefault(); e.preventDefault();
if (!data) return; if (!data) return;
@@ -63,11 +63,11 @@ export default function Designer({ value, onChange, conid, database }) {
json.left = e.clientX - rect.left; json.left = e.clientX - rect.left;
json.top = e.clientY - rect.top; json.top = e.clientY - rect.top;
onChange((current) => { onChange(current => {
const foreignKeys = _.compact([ const foreignKeys = _.compact([
...(json.foreignKeys || []).map((fk) => { ...(json.foreignKeys || []).map(fk => {
const tables = ((current || {}).tables || []).filter( const tables = ((current || {}).tables || []).filter(
(tbl) => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName tbl => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
); );
if (tables.length == 1) if (tables.length == 1)
return { return {
@@ -78,8 +78,8 @@ export default function Designer({ value, onChange, conid, database }) {
return null; return null;
}), }),
..._.flatten( ..._.flatten(
((current || {}).tables || []).map((tbl) => ((current || {}).tables || []).map(tbl =>
(tbl.foreignKeys || []).map((fk) => { (tbl.foreignKeys || []).map(fk => {
if (fk.refTableName == json.pureName && fk.refSchemaName == json.schemaName) { if (fk.refTableName == json.pureName && fk.refSchemaName == json.schemaName) {
return { return {
...fk, ...fk,
@@ -105,7 +105,7 @@ export default function Designer({ value, onChange, conid, database }) {
sourceId: foreignKeys[0].sourceId, sourceId: foreignKeys[0].sourceId,
targetId: foreignKeys[0].targetId, targetId: foreignKeys[0].targetId,
joinType: 'INNER JOIN', joinType: 'INNER JOIN',
columns: foreignKeys[0].columns.map((col) => ({ columns: foreignKeys[0].columns.map(col => ({
source: col.columnName, source: col.columnName,
target: col.refColumnName, target: col.refColumnName,
})), })),
@@ -117,21 +117,21 @@ export default function Designer({ value, onChange, conid, database }) {
}; };
const changeTable = React.useCallback( const changeTable = React.useCallback(
(table) => { table => {
onChange((current) => ({ onChange(current => ({
...current, ...current,
tables: fixPositions((current.tables || []).map((x) => (x.designerId == table.designerId ? table : x))), tables: fixPositions((current.tables || []).map(x => (x.designerId == table.designerId ? table : x))),
})); }));
}, },
[onChange] [onChange]
); );
const bringToFront = React.useCallback( const bringToFront = React.useCallback(
(table) => { table => {
onChange( onChange(
(current) => ({ current => ({
...current, ...current,
tables: [...(current.tables || []).filter((x) => x.designerId != table.designerId), table], tables: [...(current.tables || []).filter(x => x.designerId != table.designerId), table],
}), }),
true true
); );
@@ -140,43 +140,43 @@ export default function Designer({ value, onChange, conid, database }) {
); );
const removeTable = React.useCallback( const removeTable = React.useCallback(
(table) => { table => {
onChange((current) => ({ onChange(current => ({
...current, ...current,
tables: (current.tables || []).filter((x) => x.designerId != table.designerId), tables: (current.tables || []).filter(x => x.designerId != table.designerId),
references: (current.references || []).filter( references: (current.references || []).filter(
(x) => x.sourceId != table.designerId && x.targetId != table.designerId x => x.sourceId != table.designerId && x.targetId != table.designerId
), ),
columns: (current.columns || []).filter((x) => x.designerId != table.designerId), columns: (current.columns || []).filter(x => x.designerId != table.designerId),
})); }));
}, },
[onChange] [onChange]
); );
const changeReference = React.useCallback( const changeReference = React.useCallback(
(ref) => { ref => {
onChange((current) => ({ onChange(current => ({
...current, ...current,
references: (current.references || []).map((x) => (x.designerId == ref.designerId ? ref : x)), references: (current.references || []).map(x => (x.designerId == ref.designerId ? ref : x)),
})); }));
}, },
[onChange] [onChange]
); );
const removeReference = React.useCallback( const removeReference = React.useCallback(
(ref) => { ref => {
onChange((current) => ({ onChange(current => ({
...current, ...current,
references: (current.references || []).filter((x) => x.designerId != ref.designerId), references: (current.references || []).filter(x => x.designerId != ref.designerId),
})); }));
}, },
[onChange] [onChange]
); );
const handleCreateReference = (source, target) => { const handleCreateReference = (source, target) => {
onChange((current) => { onChange(current => {
const existingReference = (current.references || []).find( const existingReference = (current.references || []).find(
(x) => x =>
(x.sourceId == source.designerId && x.targetId == target.designerId) || (x.sourceId == source.designerId && x.targetId == target.designerId) ||
(x.sourceId == target.designerId && x.targetId == source.designerId) (x.sourceId == target.designerId && x.targetId == source.designerId)
); );
@@ -184,7 +184,7 @@ export default function Designer({ value, onChange, conid, database }) {
return { return {
...current, ...current,
references: existingReference references: existingReference
? current.references.map((ref) => ? current.references.map(ref =>
ref == existingReference ref == existingReference
? { ? {
...existingReference, ...existingReference,
@@ -230,8 +230,8 @@ export default function Designer({ value, onChange, conid, database }) {
schemaName: foreignKey.refSchemaName, schemaName: foreignKey.refSchemaName,
}); });
const newTableDesignerId = uuidv1(); const newTableDesignerId = uuidv1();
onChange((current) => { onChange(current => {
const fromTable = (current.tables || []).find((x) => x.designerId == designerId); const fromTable = (current.tables || []).find(x => x.designerId == designerId);
if (!fromTable) return; if (!fromTable) return;
return { return {
...current, ...current,
@@ -251,7 +251,7 @@ export default function Designer({ value, onChange, conid, database }) {
sourceId: fromTable.designerId, sourceId: fromTable.designerId,
targetId: newTableDesignerId, targetId: newTableDesignerId,
joinType: 'INNER JOIN', joinType: 'INNER JOIN',
columns: foreignKey.columns.map((col) => ({ columns: foreignKey.columns.map(col => ({
source: col.columnName, source: col.columnName,
target: col.refColumnName, target: col.refColumnName,
})), })),
@@ -262,12 +262,12 @@ export default function Designer({ value, onChange, conid, database }) {
}; };
const handleSelectColumn = React.useCallback( const handleSelectColumn = React.useCallback(
(column) => { column => {
onChange( onChange(
(current) => ({ current => ({
...current, ...current,
columns: (current.columns || []).find( columns: (current.columns || []).find(
(x) => x.designerId == column.designerId && x.columnName == column.columnName x => x.designerId == column.designerId && x.columnName == column.columnName
) )
? current.columns ? current.columns
: [...cleanupDesignColumns(current.columns), _.pick(column, ['designerId', 'columnName'])], : [...cleanupDesignColumns(current.columns), _.pick(column, ['designerId', 'columnName'])],
@@ -280,15 +280,15 @@ export default function Designer({ value, onChange, conid, database }) {
const handleChangeColumn = React.useCallback( const handleChangeColumn = React.useCallback(
(column, changeFunc) => { (column, changeFunc) => {
onChange((current) => { onChange(current => {
const currentColumns = (current || {}).columns || []; const currentColumns = (current || {}).columns || [];
const existing = currentColumns.find( const existing = currentColumns.find(
(x) => x.designerId == column.designerId && x.columnName == column.columnName x => x.designerId == column.designerId && x.columnName == column.columnName
); );
if (existing) { if (existing) {
return { return {
...current, ...current,
columns: currentColumns.map((x) => (x == existing ? changeFunc(existing) : x)), columns: currentColumns.map(x => (x == existing ? changeFunc(existing) : x)),
}; };
} else { } else {
return { return {
@@ -311,8 +311,8 @@ export default function Designer({ value, onChange, conid, database }) {
return ( return (
<Wrapper theme={theme}> <Wrapper theme={theme}>
{(tables || []).length == 0 && <EmptyInfo>Drag &amp; drop tables or views from left panel here</EmptyInfo>} {(tables || []).length == 0 && <EmptyInfo>Drag &amp; drop tables or views from left panel here</EmptyInfo>}
<Canvas onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} ref={wrapperRef}> <Canvas onDragOver={e => e.preventDefault()} onDrop={handleDrop} ref={wrapperRef}>
{(references || []).map((ref) => ( {(references || []).map(ref => (
<DesignerReference <DesignerReference
key={ref.designerId} key={ref.designerId}
changeToken={changeToken} changeToken={changeToken}
@@ -323,7 +323,7 @@ export default function Designer({ value, onChange, conid, database }) {
designer={value} designer={value}
/> />
))} ))}
{(tables || []).map((table) => ( {(tables || []).map(table => (
<DesignerTable <DesignerTable
key={table.designerId} key={table.designerId}
sourceDragColumn={sourceDragColumn} sourceDragColumn={sourceDragColumn}
@@ -340,7 +340,7 @@ export default function Designer({ value, onChange, conid, database }) {
onRemoveTable={removeTable} onRemoveTable={removeTable}
setChangeToken={setChangeToken} setChangeToken={setChangeToken}
wrapperRef={wrapperRef} wrapperRef={wrapperRef}
onChangeDomTable={(table) => { onChangeDomTable={table => {
domTablesRef.current[table.designerId] = table; domTablesRef.current[table.designerId] = table;
}} }}
designer={value} designer={value}

6
packages/web/src/designer/DesignerComponentCreator.ts
View File

@@ -28,7 +28,7 @@ export class DesignerComponent {
return this.parentComponent ? this.parentComponent.myAndParentTables : []; return this.parentComponent ? this.parentComponent.myAndParentTables : [];
} }
get thisAndSubComponentsTables() { get thisAndSubComponentsTables() {
return [...this.tables, ..._.flatten(this.subComponents.map((x) => x.thisAndSubComponentsTables))]; return [...this.tables, ..._.flatten(this.subComponents.map(x => x.thisAndSubComponentsTables))];
} }
} }
@@ -49,7 +49,7 @@ export class DesignerComponentCreator {
root = findPrimaryTable(this.toAdd); root = findPrimaryTable(this.toAdd);
} }
if (!root) return null; if (!root) return null;
_.remove(this.toAdd, (x) => x == root); _.remove(this.toAdd, x => x == root);
const res = new DesignerComponent(); const res = new DesignerComponent();
res.tables.push(root); res.tables.push(root);
@@ -60,7 +60,7 @@ export class DesignerComponentCreator {
if (ref) { if (ref) {
res.tables.push(test); res.tables.push(test);
res.nonPrimaryReferences.push(ref); res.nonPrimaryReferences.push(ref);
_.remove(this.toAdd, (x) => x == test); _.remove(this.toAdd, x => x == test);
found = true; found = true;
break; break;
} }

34
packages/web/src/designer/DesignerQueryDumper.ts
View File

@@ -26,7 +26,7 @@ export class DesignerQueryDumper {
constructor(public designer: DesignerInfo, public components: DesignerComponent[]) {} constructor(public designer: DesignerInfo, public components: DesignerComponent[]) {}
get topLevelTables(): DesignerTableInfo[] { get topLevelTables(): DesignerTableInfo[] {
return _.flatten(this.components.map((x) => x.tables)); return _.flatten(this.components.map(x => x.tables));
} }
dumpComponent(component: DesignerComponent) { dumpComponent(component: DesignerComponent) {
@@ -81,15 +81,15 @@ export class DesignerQueryDumper {
addConditions(select: Select, tables: DesignerTableInfo[]) { addConditions(select: Select, tables: DesignerTableInfo[]) {
for (const column of this.designer.columns || []) { for (const column of this.designer.columns || []) {
if (!column.filter) continue; if (!column.filter) continue;
const table = (this.designer.tables || []).find((x) => x.designerId == column.designerId); const table = (this.designer.tables || []).find(x => x.designerId == column.designerId);
if (!table) continue; if (!table) continue;
if (!tables.find((x) => x.designerId == table.designerId)) continue; if (!tables.find(x => x.designerId == table.designerId)) continue;
const condition = parseFilter(column.filter, findDesignerFilterType(column, this.designer)); const condition = parseFilter(column.filter, findDesignerFilterType(column, this.designer));
if (condition) { if (condition) {
select.where = mergeConditions( select.where = mergeConditions(
select.where, select.where,
_.cloneDeepWith(condition, (expr) => { _.cloneDeepWith(condition, expr => {
if (expr.exprType == 'placeholder') if (expr.exprType == 'placeholder')
return { return {
exprType: 'column', exprType: 'column',
@@ -105,15 +105,15 @@ export class DesignerQueryDumper {
addGroupConditions(select: Select, tables: DesignerTableInfo[], selectIsGrouped: boolean) { addGroupConditions(select: Select, tables: DesignerTableInfo[], selectIsGrouped: boolean) {
for (const column of this.designer.columns || []) { for (const column of this.designer.columns || []) {
if (!column.groupFilter) continue; if (!column.groupFilter) continue;
const table = (this.designer.tables || []).find((x) => x.designerId == column.designerId); const table = (this.designer.tables || []).find(x => x.designerId == column.designerId);
if (!table) continue; if (!table) continue;
if (!tables.find((x) => x.designerId == table.designerId)) continue; if (!tables.find(x => x.designerId == table.designerId)) continue;
const condition = parseFilter(column.groupFilter, findDesignerFilterType(column, this.designer)); const condition = parseFilter(column.groupFilter, findDesignerFilterType(column, this.designer));
if (condition) { if (condition) {
select.having = mergeConditions( select.having = mergeConditions(
select.having, select.having,
_.cloneDeepWith(condition, (expr) => { _.cloneDeepWith(condition, expr => {
if (expr.exprType == 'placeholder') { if (expr.exprType == 'placeholder') {
return this.getColumnOutputExpression(column, selectIsGrouped); return this.getColumnOutputExpression(column, selectIsGrouped);
} }
@@ -174,20 +174,20 @@ export class DesignerQueryDumper {
} }
} }
const topLevelColumns = (this.designer.columns || []).filter((col) => const topLevelColumns = (this.designer.columns || []).filter(col =>
topLevelTables.find((tbl) => tbl.designerId == col.designerId) topLevelTables.find(tbl => tbl.designerId == col.designerId)
); );
const selectIsGrouped = !!topLevelColumns.find((x) => x.isGrouped || (x.aggregate && x.aggregate != '---')); const selectIsGrouped = !!topLevelColumns.find(x => x.isGrouped || (x.aggregate && x.aggregate != '---'));
const outputColumns = topLevelColumns.filter((x) => x.isOutput); const outputColumns = topLevelColumns.filter(x => x.isOutput);
if (outputColumns.length == 0) { if (outputColumns.length == 0) {
res.selectAll = true; res.selectAll = true;
} else { } else {
res.columns = outputColumns.map((col) => this.getColumnOutputExpression(col, selectIsGrouped)); res.columns = outputColumns.map(col => this.getColumnOutputExpression(col, selectIsGrouped));
} }
const groupedColumns = topLevelColumns.filter((x) => x.isGrouped); const groupedColumns = topLevelColumns.filter(x => x.isGrouped);
if (groupedColumns.length > 0) { if (groupedColumns.length > 0) {
res.groupBy = groupedColumns.map((col) => ({ res.groupBy = groupedColumns.map(col => ({
exprType: 'column', exprType: 'column',
columnName: col.columnName, columnName: col.columnName,
source: findQuerySource(this.designer, col.designerId), source: findQuerySource(this.designer, col.designerId),
@@ -195,11 +195,11 @@ export class DesignerQueryDumper {
} }
const orderColumns = _.sortBy( const orderColumns = _.sortBy(
topLevelColumns.filter((x) => x.sortOrder), topLevelColumns.filter(x => x.sortOrder),
(x) => Math.abs(x.sortOrder) x => Math.abs(x.sortOrder)
); );
if (orderColumns.length > 0) { if (orderColumns.length > 0) {
res.orderBy = orderColumns.map((col) => ({ res.orderBy = orderColumns.map(col => ({
exprType: 'column', exprType: 'column',
direction: col.sortOrder < 0 ? 'DESC' : 'ASC', direction: col.sortOrder < 0 ? 'DESC' : 'ASC',
columnName: col.columnName, columnName: col.columnName,

16
packages/web/src/designer/DesignerReference.js
View File

@@ -19,8 +19,8 @@ const StyledSvg = styled.svg`
const ReferenceWrapper = styled.div` const ReferenceWrapper = styled.div`
position: absolute; position: absolute;
border: 1px solid ${(props) => props.theme.designer_line}; border: 1px solid ${props => props.theme.designer_line};
background-color: ${(props) => props.theme.designer_background}; background-color: ${props => props.theme.designer_background};
z-index: 900; z-index: 900;
border-radius: 10px; border-radius: 10px;
width: 32px; width: 32px;
@@ -35,7 +35,7 @@ const ReferenceText = styled.span`
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 900; z-index: 900;
white-space: nowrap; white-space: nowrap;
background-color: ${(props) => props.theme.designer_background}; background-color: ${props => props.theme.designer_background};
`; `;
function ReferenceContextMenu({ remove, setJoinType, isConnected }) { function ReferenceContextMenu({ remove, setJoinType, isConnected }) {
@@ -88,10 +88,10 @@ export default function DesignerReference({
possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.left - buswi, dirdst: -1 }); possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.left - buswi, dirdst: -1 });
possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.right + buswi, dirdst: 1 }); possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.right + buswi, dirdst: 1 });
let minpos = _.minBy(possibilities, (p) => Math.abs(p.xsrc - p.xdst)); let minpos = _.minBy(possibilities, p => Math.abs(p.xsrc - p.xdst));
let srcY = _.mean(columns.map((x) => sourceTable.getColumnY(x.source))); let srcY = _.mean(columns.map(x => sourceTable.getColumnY(x.source)));
let dstY = _.mean(columns.map((x) => targetTable.getColumnY(x.target))); let dstY = _.mean(columns.map(x => targetTable.getColumnY(x.target)));
if (columns.length == 0) { if (columns.length == 0) {
srcY = sourceTable.getColumnY(''); srcY = sourceTable.getColumnY('');
@@ -103,7 +103,7 @@ export default function DesignerReference({
const lineStyle = { fill: 'none', stroke: theme.designer_line, strokeWidth: 2 }; const lineStyle = { fill: 'none', stroke: theme.designer_line, strokeWidth: 2 };
const handleContextMenu = (event) => { const handleContextMenu = event => {
event.preventDefault(); event.preventDefault();
showMenu( showMenu(
event.pageX, event.pageX,
@@ -111,7 +111,7 @@ export default function DesignerReference({
<ReferenceContextMenu <ReferenceContextMenu
remove={() => onRemoveReference({ designerId })} remove={() => onRemoveReference({ designerId })}
isConnected={isConnectedByReference(designer, { designerId: sourceId }, { designerId: targetId }, reference)} isConnected={isConnectedByReference(designer, { designerId: sourceId }, { designerId: targetId }, reference)}
setJoinType={(joinType) => { setJoinType={joinType => {
onChangeReference({ onChangeReference({
...reference, ...reference,
joinType, joinType,

62
packages/web/src/designer/DesignerTable.js
View File

@@ -15,20 +15,20 @@ import InputTextModal from '../modals/InputTextModal';
const Wrapper = styled.div` const Wrapper = styled.div`
position: absolute; position: absolute;
// background-color: white; // background-color: white;
background-color: ${(props) => props.theme.designtable_background}; background-color: ${props => props.theme.designtable_background};
border: 1px solid ${(props) => props.theme.border}; border: 1px solid ${props => props.theme.border};
`; `;
const Header = styled.div` const Header = styled.div`
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
padding: 2px; padding: 2px;
background: ${(props) => background: ${props =>
// @ts-ignore // @ts-ignore
props.objectTypeField == 'views' props.objectTypeField == 'views'
? props.theme.designtable_background_magenta[2] ? props.theme.designtable_background_magenta[2]
: props.theme.designtable_background_blue[2]}; : props.theme.designtable_background_blue[2]};
border-bottom: 1px solid ${(props) => props.theme.border}; border-bottom: 1px solid ${props => props.theme.border};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -44,7 +44,7 @@ const ColumnsWrapper = styled.div`
const HeaderLabel = styled.div``; const HeaderLabel = styled.div``;
const CloseWrapper = styled.div` const CloseWrapper = styled.div`
${(props) => ${props =>
` `
background-color: ${props.theme.toolbar_background} ; background-color: ${props.theme.toolbar_background} ;
@@ -63,7 +63,7 @@ const CloseWrapper = styled.div`
// } // }
const ColumnLine = styled.div` const ColumnLine = styled.div`
${(props) => ${props =>
// @ts-ignore // @ts-ignore
!props.isDragSource && !props.isDragSource &&
// @ts-ignore // @ts-ignore
@@ -74,14 +74,14 @@ const ColumnLine = styled.div`
} }
`} `}
${(props) => ${props =>
// @ts-ignore // @ts-ignore
props.isDragSource && props.isDragSource &&
` `
background-color: ${props.theme.designtable_background_cyan[2]}; background-color: ${props.theme.designtable_background_cyan[2]};
`} `}
${(props) => ${props =>
// @ts-ignore // @ts-ignore
props.isDragTarget && props.isDragTarget &&
` `
@@ -113,7 +113,7 @@ function ColumnContextMenu({ setSortOrder, addReference }) {
function ColumnDesignerIcons({ column, designerId, designer }) { function ColumnDesignerIcons({ column, designerId, designer }) {
const designerColumn = (designer.columns || []).find( const designerColumn = (designer.columns || []).find(
(x) => x.designerId == designerId && x.columnName == column.columnName x => x.designerId == designerId && x.columnName == column.columnName
); );
if (!designerColumn) return null; if (!designerColumn) return null;
return ( return (
@@ -155,7 +155,7 @@ export default function DesignerTable({
const moveStartXRef = React.useRef(null); const moveStartXRef = React.useRef(null);
const moveStartYRef = React.useRef(null); const moveStartYRef = React.useRef(null);
const handleMove = React.useCallback((e) => { const handleMove = React.useCallback(e => {
let diffX = e.clientX - moveStartXRef.current; let diffX = e.clientX - moveStartXRef.current;
let diffY = e.clientY - moveStartYRef.current; let diffY = e.clientY - moveStartYRef.current;
moveStartXRef.current = e.clientX; moveStartXRef.current = e.clientX;
@@ -180,11 +180,11 @@ export default function DesignerTable({
const changeTokenDebounced = React.useRef( const changeTokenDebounced = React.useRef(
// @ts-ignore // @ts-ignore
_.debounce(() => setChangeToken((x) => x + 1), 100) _.debounce(() => setChangeToken(x => x + 1), 100)
); );
const handleMoveEnd = React.useCallback( const handleMoveEnd = React.useCallback(
(e) => { e => {
if (movingPositionRef.current) { if (movingPositionRef.current) {
onChangeTable({ onChangeTable({
...table, ...table,
@@ -217,7 +217,7 @@ export default function DesignerTable({
}, [movingPosition == null, handleMove, handleMoveEnd]); }, [movingPosition == null, handleMove, handleMoveEnd]);
const headerMouseDown = React.useCallback( const headerMouseDown = React.useCallback(
(e) => { e => {
e.preventDefault(); e.preventDefault();
moveStartXRef.current = e.clientX; moveStartXRef.current = e.clientX;
moveStartYRef.current = e.clientY; moveStartYRef.current = e.clientY;
@@ -235,13 +235,13 @@ export default function DesignerTable({
}; };
const handleSetTableAlias = () => { const handleSetTableAlias = () => {
showModal((modalState) => ( showModal(modalState => (
<InputTextModal <InputTextModal
modalState={modalState} modalState={modalState}
value={alias || ''} value={alias || ''}
label="New alias" label="New alias"
header="Set table alias" header="Set table alias"
onConfirm={(newAlias) => { onConfirm={newAlias => {
onChangeTable({ onChangeTable({
...table, ...table,
alias: newAlias, alias: newAlias,
@@ -251,7 +251,7 @@ export default function DesignerTable({
)); ));
}; };
const handleHeaderContextMenu = (event) => { const handleHeaderContextMenu = event => {
event.preventDefault(); event.preventDefault();
showMenu( showMenu(
event.pageX, event.pageX,
@@ -272,20 +272,20 @@ export default function DesignerTable({
); );
}; };
const handleColumnContextMenu = (column) => (event) => { const handleColumnContextMenu = column => event => {
event.preventDefault(); event.preventDefault();
const foreignKey = findForeignKeyForColumn(table, column); const foreignKey = findForeignKeyForColumn(table, column);
showMenu( showMenu(
event.pageX, event.pageX,
event.pageY, event.pageY,
<ColumnContextMenu <ColumnContextMenu
setSortOrder={(sortOrder) => { setSortOrder={sortOrder => {
onChangeColumn( onChangeColumn(
{ {
...column, ...column,
designerId, designerId,
}, },
(col) => ({ ...col, sortOrder }) col => ({ ...col, sortOrder })
); );
}} }}
addReference={ addReference={
@@ -307,7 +307,7 @@ export default function DesignerTable({
top: movingPosition ? movingPosition.top : top, top: movingPosition ? movingPosition.top : top,
}} }}
onMouseDown={() => onBringToFront(table)} onMouseDown={() => onBringToFront(table)}
ref={(dom) => dispatchDomColumn('', dom)} ref={dom => dispatchDomColumn('', dom)}
> >
<Header <Header
onMouseDown={headerMouseDown} onMouseDown={headerMouseDown}
@@ -322,13 +322,13 @@ export default function DesignerTable({
</CloseWrapper> </CloseWrapper>
</Header> </Header>
<ColumnsWrapper> <ColumnsWrapper>
{(columns || []).map((column) => ( {(columns || []).map(column => (
<ColumnLine <ColumnLine
onContextMenu={handleColumnContextMenu(column)} onContextMenu={handleColumnContextMenu(column)}
key={column.columnName} key={column.columnName}
theme={theme} theme={theme}
draggable draggable
ref={(dom) => dispatchDomColumn(column.columnName, dom)} ref={dom => dispatchDomColumn(column.columnName, dom)}
// @ts-ignore // @ts-ignore
isDragSource={ isDragSource={
sourceDragColumn && sourceDragColumn &&
@@ -341,7 +341,7 @@ export default function DesignerTable({
targetDragColumn.designerId == designerId && targetDragColumn.designerId == designerId &&
targetDragColumn.columnName == column.columnName targetDragColumn.columnName == column.columnName
} }
onDragStart={(e) => { onDragStart={e => {
const dragData = { const dragData = {
...column, ...column,
designerId, designerId,
@@ -349,11 +349,11 @@ export default function DesignerTable({
setSourceDragColumn(dragData); setSourceDragColumn(dragData);
e.dataTransfer.setData('designer_column_drag_data', JSON.stringify(dragData)); e.dataTransfer.setData('designer_column_drag_data', JSON.stringify(dragData));
}} }}
onDragEnd={(e) => { onDragEnd={e => {
setTargetDragColumn(null); setTargetDragColumn(null);
setSourceDragColumn(null); setSourceDragColumn(null);
}} }}
onDragOver={(e) => { onDragOver={e => {
if (sourceDragColumn) { if (sourceDragColumn) {
e.preventDefault(); e.preventDefault();
setTargetDragColumn({ setTargetDragColumn({
@@ -362,7 +362,7 @@ export default function DesignerTable({
}); });
} }
}} }}
onDrop={(e) => { onDrop={e => {
var data = e.dataTransfer.getData('designer_column_drag_data'); var data = e.dataTransfer.getData('designer_column_drag_data');
e.preventDefault(); e.preventDefault();
if (!data) return; if (!data) return;
@@ -370,7 +370,7 @@ export default function DesignerTable({
setTargetDragColumn(null); setTargetDragColumn(null);
setSourceDragColumn(null); setSourceDragColumn(null);
}} }}
onMouseDown={(e) => onMouseDown={e =>
onSelectColumn({ onSelectColumn({
...column, ...column,
designerId, designerId,
@@ -380,17 +380,17 @@ export default function DesignerTable({
<CheckboxField <CheckboxField
checked={ checked={
!!(designer.columns || []).find( !!(designer.columns || []).find(
(x) => x.designerId == designerId && x.columnName == column.columnName && x.isOutput x => x.designerId == designerId && x.columnName == column.columnName && x.isOutput
) )
} }
onChange={(e) => { onChange={e => {
if (e.target.checked) { if (e.target.checked) {
onChangeColumn( onChangeColumn(
{ {
...column, ...column,
designerId, designerId,
}, },
(col) => ({ ...col, isOutput: true }) col => ({ ...col, isOutput: true })
); );
} else { } else {
onChangeColumn( onChangeColumn(
@@ -398,7 +398,7 @@ export default function DesignerTable({
...column, ...column,
designerId, designerId,
}, },
(col) => ({ ...col, isOutput: false }) col => ({ ...col, isOutput: false })
); );
} }
}} }}

2
packages/web/src/designer/DomTableRef.ts
View File

@@ -1,4 +1,4 @@
import { DesignerTableInfo } from "./types"; import { DesignerTableInfo } from './types';
export default class DomTableRef { export default class DomTableRef {
domTable: Element; domTable: Element;

50
packages/web/src/designer/QueryDesignColumns.js
View File

@@ -6,7 +6,7 @@ import InlineButton from '../widgets/InlineButton';
import { findDesignerFilterType } from './designerTools'; import { findDesignerFilterType } from './designerTools';
function getTableDisplayName(column, tables) { function getTableDisplayName(column, tables) {
const table = (tables || []).find((x) => x.designerId == column.designerId); const table = (tables || []).find(x => x.designerId == column.designerId);
if (table) return table.alias || table.pureName; if (table) return table.alias || table.pureName;
return ''; return '';
} }
@@ -15,10 +15,10 @@ export default function QueryDesignColumns({ value, onChange }) {
const { columns, tables } = value || {}; const { columns, tables } = value || {};
const changeColumn = React.useCallback( const changeColumn = React.useCallback(
(col) => { col => {
onChange((current) => ({ onChange(current => ({
...current, ...current,
columns: (current.columns || []).map((x) => columns: (current.columns || []).map(x =>
x.designerId == col.designerId && x.columnName == col.columnName ? col : x x.designerId == col.designerId && x.columnName == col.columnName ? col : x
), ),
})); }));
@@ -27,30 +27,28 @@ export default function QueryDesignColumns({ value, onChange }) {
); );
const removeColumn = React.useCallback( const removeColumn = React.useCallback(
(col) => { col => {
onChange((current) => ({ onChange(current => ({
...current, ...current,
columns: (current.columns || []).filter( columns: (current.columns || []).filter(x => x.designerId != col.designerId || x.columnName != col.columnName),
(x) => x.designerId != col.designerId || x.columnName != col.columnName
),
})); }));
}, },
[onChange] [onChange]
); );
const hasGroupedColumn = !!(columns || []).find((x) => x.isGrouped); const hasGroupedColumn = !!(columns || []).find(x => x.isGrouped);
return ( return (
<TableControl rows={columns || []}> <TableControl rows={columns || []}>
<TableColumn fieldName="columnName" header="Column/Expression" /> <TableColumn fieldName="columnName" header="Column/Expression" />
<TableColumn fieldName="tableDisplayName" header="Table" formatter={(row) => getTableDisplayName(row, tables)} /> <TableColumn fieldName="tableDisplayName" header="Table" formatter={row => getTableDisplayName(row, tables)} />
<TableColumn <TableColumn
fieldName="isOutput" fieldName="isOutput"
header="Output" header="Output"
formatter={(row) => ( formatter={row => (
<CheckboxField <CheckboxField
checked={row.isOutput} checked={row.isOutput}
onChange={(e) => { onChange={e => {
if (e.target.checked) changeColumn({ ...row, isOutput: true }); if (e.target.checked) changeColumn({ ...row, isOutput: true });
else changeColumn({ ...row, isOutput: false }); else changeColumn({ ...row, isOutput: false });
}} }}
@@ -60,10 +58,10 @@ export default function QueryDesignColumns({ value, onChange }) {
<TableColumn <TableColumn
fieldName="alias" fieldName="alias"
header="Alias" header="Alias"
formatter={(row) => ( formatter={row => (
<TextField <TextField
value={row.alias} value={row.alias}
onChange={(e) => { onChange={e => {
changeColumn({ ...row, alias: e.target.value }); changeColumn({ ...row, alias: e.target.value });
}} }}
/> />
@@ -73,10 +71,10 @@ export default function QueryDesignColumns({ value, onChange }) {
<TableColumn <TableColumn
fieldName="isGrouped" fieldName="isGrouped"
header="Group by" header="Group by"
formatter={(row) => ( formatter={row => (
<CheckboxField <CheckboxField
checked={row.isGrouped} checked={row.isGrouped}
onChange={(e) => { onChange={e => {
if (e.target.checked) changeColumn({ ...row, isGrouped: true }); if (e.target.checked) changeColumn({ ...row, isGrouped: true });
else changeColumn({ ...row, isGrouped: false }); else changeColumn({ ...row, isGrouped: false });
}} }}
@@ -86,11 +84,11 @@ export default function QueryDesignColumns({ value, onChange }) {
<TableColumn <TableColumn
fieldName="aggregate" fieldName="aggregate"
header="Aggregate" header="Aggregate"
formatter={(row) => formatter={row =>
!row.isGrouped && ( !row.isGrouped && (
<SelectField <SelectField
value={row.aggregate} value={row.aggregate}
onChange={(e) => { onChange={e => {
changeColumn({ ...row, aggregate: e.target.value }); changeColumn({ ...row, aggregate: e.target.value });
}} }}
> >
@@ -108,10 +106,10 @@ export default function QueryDesignColumns({ value, onChange }) {
<TableColumn <TableColumn
fieldName="sortOrder" fieldName="sortOrder"
header="Sort order" header="Sort order"
formatter={(row) => ( formatter={row => (
<SelectField <SelectField
value={row.sortOrder} value={row.sortOrder}
onChange={(e) => { onChange={e => {
changeColumn({ ...row, sortOrder: parseInt(e.target.value) }); changeColumn({ ...row, sortOrder: parseInt(e.target.value) });
}} }}
> >
@@ -128,11 +126,11 @@ export default function QueryDesignColumns({ value, onChange }) {
<TableColumn <TableColumn
fieldName="filter" fieldName="filter"
header="Filter" header="Filter"
formatter={(row) => ( formatter={row => (
<DataFilterControl <DataFilterControl
filterType={findDesignerFilterType(row, value)} filterType={findDesignerFilterType(row, value)}
filter={row.filter} filter={row.filter}
setFilter={(filter) => { setFilter={filter => {
changeColumn({ ...row, filter }); changeColumn({ ...row, filter });
}} }}
/> />
@@ -142,11 +140,11 @@ export default function QueryDesignColumns({ value, onChange }) {
<TableColumn <TableColumn
fieldName="groupFilter" fieldName="groupFilter"
header="Group filter" header="Group filter"
formatter={(row) => ( formatter={row => (
<DataFilterControl <DataFilterControl
filterType={findDesignerFilterType(row, value)} filterType={findDesignerFilterType(row, value)}
filter={row.groupFilter} filter={row.groupFilter}
setFilter={(groupFilter) => { setFilter={groupFilter => {
changeColumn({ ...row, groupFilter }); changeColumn({ ...row, groupFilter });
}} }}
/> />
@@ -156,7 +154,7 @@ export default function QueryDesignColumns({ value, onChange }) {
<TableColumn <TableColumn
fieldName="actions" fieldName="actions"
header="" header=""
formatter={(row) => ( formatter={row => (
<> <>
<InlineButton onClick={() => removeColumn(row)}>Remove</InlineButton> <InlineButton onClick={() => removeColumn(row)}>Remove</InlineButton>
</> </>

2
packages/web/src/designer/cleanupDesignColumns.js
View File

@@ -1,5 +1,5 @@
export default function cleanupDesignColumns(columns) { export default function cleanupDesignColumns(columns) {
return (columns || []).filter( return (columns || []).filter(
(x) => x.isOutput || x.isGrouped || x.alias || (x.aggregate && x.aggregate != '---') || x.sortOrder || x.filter x => x.isOutput || x.isGrouped || x.alias || (x.aggregate && x.aggregate != '---') || x.sortOrder || x.filter
); );
} }

27
packages/web/src/designer/designerTools.ts
View File

@@ -12,9 +12,8 @@ export function referenceIsConnecting(
tables2: DesignerTableInfo[] tables2: DesignerTableInfo[]
) { ) {
return ( return (
(tables1.find((x) => x.designerId == reference.sourceId) && (tables1.find(x => x.designerId == reference.sourceId) && tables2.find(x => x.designerId == reference.targetId)) ||
tables2.find((x) => x.designerId == reference.targetId)) || (tables1.find(x => x.designerId == reference.targetId) && tables2.find(x => x.designerId == reference.sourceId))
(tables1.find((x) => x.designerId == reference.targetId) && tables2.find((x) => x.designerId == reference.sourceId))
); );
} }
@@ -43,7 +42,7 @@ export function findConnectingReference(
} }
export function findQuerySource(designer: DesignerInfo, designerId: string): Source { export function findQuerySource(designer: DesignerInfo, designerId: string): Source {
const table = designer.tables.find((x) => x.designerId == designerId); const table = designer.tables.find(x => x.designerId == designerId);
if (!table) return null; if (!table) return null;
return { return {
name: table, name: table,
@@ -71,14 +70,14 @@ export function mergeSelectsFromDesigner(select1: Select, select2: Select): Sele
} }
export function findPrimaryTable(tables: DesignerTableInfo[]) { export function findPrimaryTable(tables: DesignerTableInfo[]) {
return _.minBy(tables, (x) => x.top); return _.minBy(tables, x => x.top);
} }
export function getReferenceConditions(reference: DesignerReferenceInfo, designer: DesignerInfo): Condition[] { export function getReferenceConditions(reference: DesignerReferenceInfo, designer: DesignerInfo): Condition[] {
const sourceTable = designer.tables.find((x) => x.designerId == reference.sourceId); const sourceTable = designer.tables.find(x => x.designerId == reference.sourceId);
const targetTable = designer.tables.find((x) => x.designerId == reference.targetId); const targetTable = designer.tables.find(x => x.designerId == reference.targetId);
return reference.columns.map((col) => ({ return reference.columns.map(col => ({
conditionType: 'binary', conditionType: 'binary',
operator: '=', operator: '=',
left: { left: {
@@ -123,19 +122,19 @@ export function isConnectedByReference(
const creator = new DesignerComponentCreator({ const creator = new DesignerComponentCreator({
...designer, ...designer,
references: withoutRef references: withoutRef
? designer.references.filter((x) => x.designerId != withoutRef.designerId) ? designer.references.filter(x => x.designerId != withoutRef.designerId)
: designer.references, : designer.references,
}); });
const arrays = creator.components.map((x) => x.thisAndSubComponentsTables); const arrays = creator.components.map(x => x.thisAndSubComponentsTables);
const array1 = arrays.find((a) => a.find((x) => x.designerId == table1.designerId)); const array1 = arrays.find(a => a.find(x => x.designerId == table1.designerId));
const array2 = arrays.find((a) => a.find((x) => x.designerId == table2.designerId)); const array2 = arrays.find(a => a.find(x => x.designerId == table2.designerId));
return array1 == array2; return array1 == array2;
} }
export function findDesignerFilterType({ designerId, columnName }, designer) { export function findDesignerFilterType({ designerId, columnName }, designer) {
const table = (designer.tables || []).find((x) => x.designerId == designerId); const table = (designer.tables || []).find(x => x.designerId == designerId);
if (table) { if (table) {
const column = (table.columns || []).find((x) => x.columnName == columnName); const column = (table.columns || []).find(x => x.columnName == columnName);
if (column) { if (column) {
const { dataType } = column; const { dataType } = column;
return getFilterType(dataType); return getFilterType(dataType);

10
packages/web/src/formview/ChangeSetFormer.ts
View File

@@ -28,7 +28,7 @@ export default class ChangeSetFormer extends Former {
) { ) {
super(); super();
this.changeSet = changeSetState && changeSetState.value; this.changeSet = changeSetState && changeSetState.value;
this.setChangeSet = (value) => dispatchChangeSet({ type: 'set', value }); this.setChangeSet = value => dispatchChangeSet({ type: 'set', value });
this.batchChangeSet = null; this.batchChangeSet = null;
this.rowDefinition = display.getChangeSetRow(sourceRow); this.rowDefinition = display.getChangeSetRow(sourceRow);
const [matchedField, matchedChangeSetItem] = findExistingChangeSetItem(this.changeSet, this.rowDefinition); const [matchedField, matchedChangeSetItem] = findExistingChangeSetItem(this.changeSet, this.rowDefinition);
@@ -54,11 +54,11 @@ export default class ChangeSetFormer extends Former {
setCellValue(uniqueName: string, value: any) { setCellValue(uniqueName: string, value: any) {
const row = this.sourceRow; const row = this.sourceRow;
const definition = this.display.getChangeSetField(row, uniqueName); const definition = this.display.getChangeSetField(row, uniqueName);
this.applyModification((chs) => setChangeSetValue(chs, definition, value)); this.applyModification(chs => setChangeSetValue(chs, definition, value));
} }
deleteRow(index: number) { deleteRow(index: number) {
this.applyModification((chs) => deleteChangeSetRows(chs, this.rowDefinition)); this.applyModification(chs => deleteChangeSetRows(chs, this.rowDefinition));
} }
beginUpdate() { beginUpdate() {
@@ -70,10 +70,10 @@ export default class ChangeSetFormer extends Former {
} }
revertRowChanges() { revertRowChanges() {
this.applyModification((chs) => revertChangeSetRowChanges(chs, this.rowDefinition)); this.applyModification(chs => revertChangeSetRowChanges(chs, this.rowDefinition));
} }
revertAllChanges() { revertAllChanges() {
this.applyModification((chs) => createChangeSet()); this.applyModification(chs => createChangeSet());
} }
undo() { undo() {
this.dispatchChangeSet({ type: 'undo' }); this.dispatchChangeSet({ type: 'undo' });

42
packages/web/src/formview/FormView.js
View File

@@ -37,24 +37,24 @@ const Wrapper = styled.div`
`; `;
const TableRow = styled.tr` const TableRow = styled.tr`
background-color: ${(props) => props.theme.gridbody_background}; background-color: ${props => props.theme.gridbody_background};
&:nth-child(6n + 3) { &:nth-child(6n + 3) {
background-color: ${(props) => props.theme.gridbody_background_alt2}; background-color: ${props => props.theme.gridbody_background_alt2};
} }
&:nth-child(6n + 6) { &:nth-child(6n + 6) {
background-color: ${(props) => props.theme.gridbody_background_alt3}; background-color: ${props => props.theme.gridbody_background_alt3};
} }
`; `;
const TableHeaderCell = styled.td` const TableHeaderCell = styled.td`
border: 1px solid ${(props) => props.theme.border}; border: 1px solid ${props => props.theme.border};
text-align: left; text-align: left;
padding: 2px; padding: 2px;
background-color: ${(props) => props.theme.gridheader_background}; background-color: ${props => props.theme.gridheader_background};
overflow: hidden; overflow: hidden;
position: relative; position: relative;
${(props) => ${props =>
props.isSelected && props.isSelected &&
` `
background: initial; background: initial;
@@ -64,7 +64,7 @@ const TableHeaderCell = styled.td`
const TableBodyCell = styled.td` const TableBodyCell = styled.td`
font-weight: normal; font-weight: normal;
border: 1px solid ${(props) => props.theme.border}; border: 1px solid ${props => props.theme.border};
// border-collapse: collapse; // border-collapse: collapse;
padding: 2px; padding: 2px;
white-space: nowrap; white-space: nowrap;
@@ -73,14 +73,14 @@ const TableBodyCell = styled.td`
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
${(props) => ${props =>
props.isSelected && props.isSelected &&
` `
background: initial; background: initial;
background-color: ${props.theme.gridbody_selection[4]}; background-color: ${props.theme.gridbody_selection[4]};
color: ${props.theme.gridbody_invfont1};`} color: ${props.theme.gridbody_invfont1};`}
${(props) => ${props =>
!props.isSelected && !props.isSelected &&
props.isModifiedCell && props.isModifiedCell &&
` `
@@ -96,7 +96,7 @@ const FocusField = styled.input`
const RowCountLabel = styled.div` const RowCountLabel = styled.div`
position: absolute; position: absolute;
background-color: ${(props) => props.theme.gridbody_background_yellow[1]}; background-color: ${props => props.theme.gridbody_background_yellow[1]};
right: 40px; right: 40px;
bottom: 20px; bottom: 20px;
`; `;
@@ -145,7 +145,7 @@ export default function FormView(props) {
const { rowData, rowStatus } = former; const { rowData, rowStatus } = former;
const handleSwitchToTable = () => { const handleSwitchToTable = () => {
setConfig((cfg) => ({ setConfig(cfg => ({
...cfg, ...cfg,
isFormView: false, isFormView: false,
formViewKey: null, formViewKey: null,
@@ -156,7 +156,7 @@ export default function FormView(props) {
? () => formDisplay.filterCellValue(getCellColumn(currentCell), rowData) ? () => formDisplay.filterCellValue(getCellColumn(currentCell), rowData)
: null; : null;
const handleContextMenu = (event) => { const handleContextMenu = event => {
event.preventDefault(); event.preventDefault();
showMenu( showMenu(
event.pageX, event.pageX,
@@ -196,7 +196,7 @@ export default function FormView(props) {
return [row, col]; return [row, col];
}; };
const handleCursorMove = (event) => { const handleCursorMove = event => {
if (event.ctrlKey) { if (event.ctrlKey) {
switch (event.keyCode) { switch (event.keyCode) {
case keycodes.leftArrow: case keycodes.leftArrow:
@@ -225,7 +225,7 @@ export default function FormView(props) {
} }
}; };
const handleKeyNavigation = (event) => { const handleKeyNavigation = event => {
if (event.ctrlKey) { if (event.ctrlKey) {
switch (event.keyCode) { switch (event.keyCode) {
case keycodes.upArrow: case keycodes.upArrow:
@@ -268,7 +268,7 @@ export default function FormView(props) {
} }
} }
const scrollIntoView = (cell) => { const scrollIntoView = cell => {
const element = cellRefs.current[`${cell[0]},${cell[1]}`]; const element = cellRefs.current[`${cell[0]},${cell[1]}`];
if (element) element.scrollIntoView(); if (element) element.scrollIntoView();
}; };
@@ -290,7 +290,7 @@ export default function FormView(props) {
copyTextToClipboard(text); copyTextToClipboard(text);
} }
const handleKeyDown = (event) => { const handleKeyDown = event => {
const navigation = handleKeyNavigation(event); const navigation = handleKeyNavigation(event);
if (navigation) { if (navigation) {
event.preventDefault(); event.preventDefault();
@@ -374,7 +374,7 @@ export default function FormView(props) {
} }
}; };
const handleTableMouseDown = (event) => { const handleTableMouseDown = event => {
event.preventDefault(); event.preventDefault();
if (focusFieldRef.current) focusFieldRef.current.focus(); if (focusFieldRef.current) focusFieldRef.current.focus();
@@ -478,7 +478,7 @@ export default function FormView(props) {
data-col={chunkIndex * 2} data-col={chunkIndex * 2}
// @ts-ignore // @ts-ignore
isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2} isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
ref={(element) => setCellRef(rowIndex, chunkIndex * 2, element)} ref={element => setCellRef(rowIndex, chunkIndex * 2, element)}
> >
<ColumnLabel {...col} /> <ColumnLabel {...col} />
</TableHeaderCell> </TableHeaderCell>
@@ -489,7 +489,7 @@ export default function FormView(props) {
// @ts-ignore // @ts-ignore
isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1} isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)} isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)}
ref={(element) => setCellRef(rowIndex, chunkIndex * 2 + 1, element)} ref={element => setCellRef(rowIndex, chunkIndex * 2 + 1, element)}
> >
{inplaceEditorState.cell && {inplaceEditorState.cell &&
rowIndex == inplaceEditorState.cell[0] && rowIndex == inplaceEditorState.cell[0] &&
@@ -499,7 +499,7 @@ export default function FormView(props) {
inplaceEditorState={inplaceEditorState} inplaceEditorState={inplaceEditorState}
dispatchInsplaceEditor={dispatchInsplaceEditor} dispatchInsplaceEditor={dispatchInsplaceEditor}
cellValue={rowData[col.uniqueName]} cellValue={rowData[col.uniqueName]}
onSetValue={(value) => { onSetValue={value => {
former.setCellValue(col.uniqueName, value); former.setCellValue(col.uniqueName, value);
}} }}
// grider={grider} // grider={grider}
@@ -520,7 +520,7 @@ export default function FormView(props) {
<ShowFormButton <ShowFormButton
theme={theme} theme={theme}
className="buttonLike" className="buttonLike"
onClick={(e) => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
openReferenceForm(rowData, col, openNewTab, conid, database); openReferenceForm(rowData, col, openNewTab, conid, database);
}} }}

17
packages/web/src/formview/FormViewFilters.js
View File

@@ -44,7 +44,7 @@ function PrimaryKeyFilterEditor({ column, baseTable, formDisplay }) {
formDisplay.reload(); formDisplay.reload();
}; };
const handleKeyDown = (ev) => { const handleKeyDown = ev => {
if (ev.keyCode == keycodes.enter) { if (ev.keyCode == keycodes.enter) {
applyFilter(); applyFilter();
} }
@@ -58,13 +58,10 @@ function PrimaryKeyFilterEditor({ column, baseTable, formDisplay }) {
<ColumnNameWrapper> <ColumnNameWrapper>
<div> <div>
<FontIcon icon="img primary-key" /> <FontIcon icon="img primary-key" />
<ColumnLabel {...baseTable.columns.find((x) => x.columnName == column.columnName)} /> <ColumnLabel {...baseTable.columns.find(x => x.columnName == column.columnName)} />
</div> </div>
{formDisplay.config.formViewKeyRequested && ( {formDisplay.config.formViewKeyRequested && (
<InlineButton <InlineButton square onClick={cancelFilter}>
square
onClick={cancelFilter}
>
<FontIcon icon="icon delete" /> <FontIcon icon="icon delete" />
</InlineButton> </InlineButton>
)} )}
@@ -86,11 +83,11 @@ export default function FormViewFilters(props) {
return ( return (
<ManagerInnerContainer style={{ maxWidth: props.managerSize }}> <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
{baseTable.primaryKey.columns.map((col) => ( {baseTable.primaryKey.columns.map(col => (
<PrimaryKeyFilterEditor key={col.columnName} baseTable={baseTable} column={col} formDisplay={formDisplay} /> <PrimaryKeyFilterEditor key={col.columnName} baseTable={baseTable} column={col} formDisplay={formDisplay} />
))} ))}
{allFilterNames.map((columnName) => { {allFilterNames.map(columnName => {
const column = baseTable.columns.find((x) => x.columnName == columnName); const column = baseTable.columns.find(x => x.columnName == columnName);
if (!column) return null; if (!column) return null;
return ( return (
<ColumnWrapper key={columnName}> <ColumnWrapper key={columnName}>
@@ -108,7 +105,7 @@ export default function FormViewFilters(props) {
<DataFilterControl <DataFilterControl
filterType={getFilterType(column.dataType)} filterType={getFilterType(column.dataType)}
filter={filters[column.columnName]} filter={filters[column.columnName]}
setFilter={(value) => formDisplay.setFilter(column.columnName, value)} setFilter={value => formDisplay.setFilter(column.columnName, value)}
/> />
</ColumnWrapper> </ColumnWrapper>
); );

16
packages/web/src/formview/SqlFormView.js
View File

@@ -84,12 +84,12 @@ export default function SqlFormView(props) {
if (isLoadingData) return; if (isLoadingData) return;
let newLoadedRow = false; let newLoadedRow = false;
if (formDisplay.config.formViewKeyRequested || formDisplay.config.formViewKey) { if (formDisplay.config.formViewKeyRequested || formDisplay.config.formViewKey) {
setLoadProps((oldLoadProps) => ({ setLoadProps(oldLoadProps => ({
...oldLoadProps, ...oldLoadProps,
isLoadingData: true, isLoadingData: true,
})); }));
const row = await loadRow(props, formDisplay.getCurrentRowQuery()); const row = await loadRow(props, formDisplay.getCurrentRowQuery());
setLoadProps((oldLoadProps) => ({ setLoadProps(oldLoadProps => ({
...oldLoadProps, ...oldLoadProps,
isLoadingData: false, isLoadingData: false,
isLoadedData: true, isLoadedData: true,
@@ -107,14 +107,14 @@ export default function SqlFormView(props) {
}; };
const handleLoadRowCount = async () => { const handleLoadRowCount = async () => {
setLoadProps((oldLoadProps) => ({ setLoadProps(oldLoadProps => ({
...oldLoadProps, ...oldLoadProps,
isLoadingCount: true, isLoadingCount: true,
})); }));
const countRow = await loadRow(props, formDisplay.getCountQuery()); const countRow = await loadRow(props, formDisplay.getCountQuery());
const countBeforeRow = await loadRow(props, formDisplay.getBeforeCountQuery()); const countBeforeRow = await loadRow(props, formDisplay.getBeforeCountQuery());
setLoadProps((oldLoadProps) => ({ setLoadProps(oldLoadProps => ({
...oldLoadProps, ...oldLoadProps,
isLoadedCount: true, isLoadedCount: true,
isLoadingCount: false, isLoadingCount: false,
@@ -123,8 +123,8 @@ export default function SqlFormView(props) {
})); }));
}; };
const handleNavigate = async (command) => { const handleNavigate = async command => {
setLoadProps((oldLoadProps) => ({ setLoadProps(oldLoadProps => ({
...oldLoadProps, ...oldLoadProps,
isLoadingData: true, isLoadingData: true,
})); }));
@@ -132,7 +132,7 @@ export default function SqlFormView(props) {
if (row) { if (row) {
formDisplay.navigate(row); formDisplay.navigate(row);
} }
setLoadProps((oldLoadProps) => ({ setLoadProps(oldLoadProps => ({
...oldLoadProps, ...oldLoadProps,
isLoadingData: false, isLoadingData: false,
isLoadedData: true, isLoadedData: true,
@@ -227,7 +227,7 @@ export default function SqlFormView(props) {
}); });
const { errorMessage } = resp.data || {}; const { errorMessage } = resp.data || {};
if (errorMessage) { if (errorMessage) {
showModal((modalState) => ( showModal(modalState => (
<ErrorMessageModal modalState={modalState} message={errorMessage} title="Error when saving" /> <ErrorMessageModal modalState={modalState} message={errorMessage} title="Error when saving" />
)); ));
} else { } else {

30
packages/web/src/freetable/FreeTableColumnEditor.js
View File

@@ -14,7 +14,7 @@ const Row = styled.div`
// padding: 5px; // padding: 5px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: ${(props) => props.theme.manager_background_blue[1]}; background-color: ${props => props.theme.manager_background_blue[1]};
} }
`; `;
const Name = styled.div` const Name = styled.div`
@@ -29,13 +29,13 @@ const Icon = styled(FontIcon)`
position: relative; position: relative;
top: 5px; top: 5px;
&:hover { &:hover {
background-color: ${(props) => props.theme.manager_background3}; background-color: ${props => props.theme.manager_background3};
} }
padding: 5px; padding: 5px;
`; `;
const EditorInput = styled.input` const EditorInput = styled.input`
width: calc(100% - 10px); width: calc(100% - 10px);
background-color: ${(props) => background-color: ${props =>
// @ts-ignore // @ts-ignore
props.isError ? props.theme.manager_background_red[1] : props.theme.manager_background}; props.isError ? props.theme.manager_background_red[1] : props.theme.manager_background};
`; `;
@@ -53,7 +53,7 @@ function ColumnNameEditor({
const [value, setValue] = React.useState(defaultValue || ''); const [value, setValue] = React.useState(defaultValue || '');
const editorRef = React.useRef(null); const editorRef = React.useRef(null);
const isError = value && existingNames && existingNames.includes(value); const isError = value && existingNames && existingNames.includes(value);
const handleKeyDown = (event) => { const handleKeyDown = event => {
if (value && event.keyCode == keycodes.enter && !isError) { if (value && event.keyCode == keycodes.enter && !isError) {
onEnter(value); onEnter(value);
setValue(''); setValue('');
@@ -82,7 +82,7 @@ function ColumnNameEditor({
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onBlur={handleBlur} onBlur={handleBlur}
value={value} value={value}
onChange={(ev) => setValue(ev.target.value)} onChange={ev => setValue(ev.target.value)}
// @ts-ignore // @ts-ignore
isError={isError} isError={isError}
{...other} {...other}
@@ -141,17 +141,17 @@ export default function FreeTableColumnEditor(props) {
index == editingColumn ? ( index == editingColumn ? (
<ColumnNameEditor <ColumnNameEditor
defaultValue={column.columnName} defaultValue={column.columnName}
onEnter={(columnName) => { onEnter={columnName => {
dispatchChangeColumns( dispatchChangeColumns(
props, props,
(cols) => cols.map((col, i) => (index == i ? { columnName } : col)), cols => cols.map((col, i) => (index == i ? { columnName } : col)),
(row) => _.mapKeys(row, (v, k) => (k == column.columnName ? columnName : k)) row => _.mapKeys(row, (v, k) => (k == column.columnName ? columnName : k))
); );
}} }}
onBlur={() => setEditingColumn(null)} onBlur={() => setEditingColumn(null)}
focusOnCreate focusOnCreate
blurOnEnter blurOnEnter
existingNames={model.structure.columns.map((x) => x.columnName)} existingNames={model.structure.columns.map(x => x.columnName)}
/> />
) : ( ) : (
<ColumnManagerRow <ColumnManagerRow
@@ -159,23 +159,23 @@ export default function FreeTableColumnEditor(props) {
column={column} column={column}
onEdit={() => setEditingColumn(index)} onEdit={() => setEditingColumn(index)}
onRemove={() => { onRemove={() => {
dispatchChangeColumns(props, (cols) => cols.filter((c, i) => i != index)); dispatchChangeColumns(props, cols => cols.filter((c, i) => i != index));
}} }}
onUp={() => { onUp={() => {
dispatchChangeColumns(props, (cols) => exchange(cols, index, index - 1)); dispatchChangeColumns(props, cols => exchange(cols, index, index - 1));
}} }}
onDown={() => { onDown={() => {
dispatchChangeColumns(props, (cols) => exchange(cols, index, index + 1)); dispatchChangeColumns(props, cols => exchange(cols, index, index + 1));
}} }}
/> />
) )
)} )}
<ColumnNameEditor <ColumnNameEditor
onEnter={(columnName) => { onEnter={columnName => {
dispatchChangeColumns(props, (cols) => [...cols, { columnName }]); dispatchChangeColumns(props, cols => [...cols, { columnName }]);
}} }}
placeholder="New column" placeholder="New column"
existingNames={model.structure.columns.map((x) => x.columnName)} existingNames={model.structure.columns.map(x => x.columnName)}
/> />
</ManagerInnerContainer> </ManagerInnerContainer>
</> </>

4
packages/web/src/freetable/FreeTableGrid.js
View File

@@ -12,7 +12,7 @@ import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar
import useTheme from '../theme/useTheme'; import useTheme from '../theme/useTheme';
const LeftContainer = styled.div` const LeftContainer = styled.div`
background-color: ${(props) => props.theme.manager_background}; background-color: ${props => props.theme.manager_background};
display: flex; display: flex;
flex: 1; flex: 1;
`; `;
@@ -25,7 +25,7 @@ const DataGridContainer = styled.div`
function extractMacroValuesForMacro(macroValues, macro) { function extractMacroValuesForMacro(macroValues, macro) {
if (!macro) return {}; if (!macro) return {};
return { return {
..._.fromPairs((macro.args || []).filter((x) => x.default != null).map((x) => [x.name, x.default])), ..._.fromPairs((macro.args || []).filter(x => x.default != null).map(x => [x.name, x.default])),
..._.mapKeys(macroValues, (v, k) => k.replace(/^.*#/, '')), ..._.mapKeys(macroValues, (v, k) => k.replace(/^.*#/, '')),
}; };
} }

6
packages/web/src/freetable/FreeTableGridCore.js
View File

@@ -47,18 +47,18 @@ export default function FreeTableGridCore(props) {
initialValues.sourceStorageType = 'jsldata'; initialValues.sourceStorageType = 'jsldata';
initialValues.sourceJslId = jslid; initialValues.sourceJslId = jslid;
initialValues.sourceList = ['editor-data']; initialValues.sourceList = ['editor-data'];
showModal((modalState) => <ImportExportModal modalState={modalState} initialValues={initialValues} />); showModal(modalState => <ImportExportModal modalState={modalState} initialValues={initialValues} />);
} }
const handleSelectionChanged = React.useCallback( const handleSelectionChanged = React.useCallback(
(cells) => { cells => {
if (onSelectionChanged) onSelectionChanged(cells); if (onSelectionChanged) onSelectionChanged(cells);
setSelectedCells(cells); setSelectedCells(cells);
}, },
[setSelectedCells] [setSelectedCells]
); );
const handleKeyDown = React.useCallback((event) => { const handleKeyDown = React.useCallback(event => {
if (event.keyCode == keycodes.escape) { if (event.keyCode == keycodes.escape) {
setSelectedMacro(null); setSelectedMacro(null);
} }

4
packages/web/src/freetable/MacroDetail.js
View File

@@ -19,8 +19,8 @@ const Container = styled.div`
height: ${dimensions.toolBar.height}px; height: ${dimensions.toolBar.height}px;
min-height: ${dimensions.toolBar.height}px; min-height: ${dimensions.toolBar.height}px;
overflow: hidden; overflow: hidden;
border-top: 1px solid ${(props) => props.theme.border}; border-top: 1px solid ${props => props.theme.border};
border-bottom: 1px solid ${(props) => props.theme.border}; border-bottom: 1px solid ${props => props.theme.border};
`; `;
const Header = styled.div` const Header = styled.div`

6
packages/web/src/freetable/MacroManager.js
View File

@@ -25,12 +25,12 @@ export default function MacroManager({ managerSize, selectedMacro, setSelectedMa
<AppObjectList <AppObjectList
list={_.sortBy(macros, 'title')} list={_.sortBy(macros, 'title')}
AppObjectComponent={MacroAppObject} AppObjectComponent={MacroAppObject}
onObjectClick={(macro) => setSelectedMacro(macro)} onObjectClick={macro => setSelectedMacro(macro)}
getCommonProps={(data) => ({ getCommonProps={data => ({
isBold: selectedMacro && selectedMacro.name == data.name, isBold: selectedMacro && selectedMacro.name == data.name,
})} })}
filter={filter} filter={filter}
groupFunc={(data) => data.group} groupFunc={data => data.group}
/> />
{/* {macros.map((macro) => ( {/* {macros.map((macro) => (
<MacroListItem key={`${macro.group}/${macro.name}`} macro={macro} /> <MacroListItem key={`${macro.group}/${macro.name}`} macro={macro} />

2
packages/web/src/freetable/MacroParameters.js
View File

@@ -6,7 +6,7 @@ import { FormProvider } from '../utility/FormProvider';
export default function MacroParameters({ args, onChangeValues, macroValues, namePrefix }) { export default function MacroParameters({ args, onChangeValues, macroValues, namePrefix }) {
if (!args || args.length == 0) return null; if (!args || args.length == 0) return null;
const initialValues = { const initialValues = {
..._.fromPairs(args.filter((x) => x.default != null).map((x) => [`${namePrefix}${x.name}`, x.default])), ..._.fromPairs(args.filter(x => x.default != null).map(x => [`${namePrefix}${x.name}`, x.default])),
...macroValues, ...macroValues,
}; };
return ( return (

54
packages/web/src/impexp/ImportExportConfigurator.js
View File

@@ -53,7 +53,7 @@ const Column = styled.div`
const Label = styled.div` const Label = styled.div`
margin: 5px; margin: 5px;
margin-top: 15px; margin-top: 15px;
color: ${(props) => props.theme.modal_font2}; color: ${props => props.theme.modal_font2};
`; `;
const SourceNameWrapper = styled.div` const SourceNameWrapper = styled.div`
@@ -67,10 +67,10 @@ const SourceNameButtons = styled.div`
const IconButtonWrapper = styled.div` const IconButtonWrapper = styled.div`
&:hover { &:hover {
background-color: ${(props) => props.theme.modal_background2}; background-color: ${props => props.theme.modal_background2};
} }
cursor: pointer; cursor: pointer;
color: ${(props) => props.theme.modal_font_blue[7]}; color: ${props => props.theme.modal_font_blue[7]};
margin-left: 5px; margin-left: 5px;
`; `;
@@ -82,12 +82,12 @@ const SqlWrapper = styled.div`
const DragWrapper = styled.div` const DragWrapper = styled.div`
padding: 10px; padding: 10px;
background: ${(props) => props.theme.modal_background2}; background: ${props => props.theme.modal_background2};
`; `;
const ArrowWrapper = styled.div` const ArrowWrapper = styled.div`
font-size: 30px; font-size: 30px;
color: ${(props) => props.theme.modal_font_blue[7]}; color: ${props => props.theme.modal_font_blue[7]};
align-self: center; align-self: center;
`; `;
@@ -128,7 +128,7 @@ async function addFilesToSourceList(extensions, files, values, setValues, prefer
await (format.addFileToSourceList || addFileToSourceListDefault)(file, newSources, newValues); await (format.addFileToSourceList || addFileToSourceListDefault)(file, newSources, newValues);
} }
} }
newValues['sourceList'] = [...(values.sourceList || []).filter((x) => !newSources.includes(x)), ...newSources]; newValues['sourceList'] = [...(values.sourceList || []).filter(x => !newSources.includes(x)), ...newSources];
if (preferedStorageType && preferedStorageType != values.sourceStorageType) { if (preferedStorageType && preferedStorageType != values.sourceStorageType) {
newValues['sourceStorageType'] = preferedStorageType; newValues['sourceStorageType'] = preferedStorageType;
} }
@@ -158,7 +158,7 @@ function ElectronFilesInput() {
setIsLoading(true); setIsLoading(true);
await addFilesToSourceList( await addFilesToSourceList(
extensions, extensions,
files.map((full) => ({ files.map(full => ({
fileName: full, fileName: full,
shortName: path.parse(full).name, shortName: path.parse(full).name,
})), })),
@@ -197,7 +197,7 @@ function FilesInput({ setPreviewSource = undefined }) {
const showModal = useShowModal(); const showModal = useShowModal();
const { values, setValues } = useForm(); const { values, setValues } = useForm();
const extensions = useExtensions(); const extensions = useExtensions();
const doAddUrl = (url) => { const doAddUrl = url => {
addFilesToSourceList( addFilesToSourceList(
extensions, extensions,
[ [
@@ -214,7 +214,7 @@ function FilesInput({ setPreviewSource = undefined }) {
); );
}; };
const handleAddUrl = () => const handleAddUrl = () =>
showModal((modalState) => <ChangeDownloadUrlModal modalState={modalState} onConfirm={doAddUrl} />); showModal(modalState => <ChangeDownloadUrlModal modalState={modalState} onConfirm={doAddUrl} />);
return ( return (
<> <>
<ButtonsLine> <ButtonsLine>
@@ -245,7 +245,7 @@ function SourceTargetConfig({
? [{ value: 'jsldata', label: 'Query result data', directions: ['source'] }] ? [{ value: 'jsldata', label: 'Query result data', directions: ['source'] }]
: [ : [
{ value: 'database', label: 'Database', directions: ['source', 'target'] }, { value: 'database', label: 'Database', directions: ['source', 'target'] },
...extensions.fileFormats.map((format) => ({ ...extensions.fileFormats.map(format => ({
value: format.storageType, value: format.storageType,
label: `${format.name} files(s)`, label: `${format.name} files(s)`,
directions: getFileFormatDirections(format), directions: getFileFormatDirections(format),
@@ -269,7 +269,7 @@ function SourceTargetConfig({
<FontIcon icon="icon export" /> Target configuration <FontIcon icon="icon export" /> Target configuration
</Title> </Title>
)} )}
<FormReactSelect options={types.filter((x) => x.directions.includes(direction))} name={storageTypeField} /> <FormReactSelect options={types.filter(x => x.directions.includes(direction))} name={storageTypeField} />
{(storageType == 'database' || storageType == 'query') && ( {(storageType == 'database' || storageType == 'query') && (
<> <>
<Label theme={theme}>Server</Label> <Label theme={theme}>Server</Label>
@@ -298,7 +298,7 @@ function SourceTargetConfig({
onClick={() => onClick={() =>
setFieldValue( setFieldValue(
'sourceList', 'sourceList',
_.uniq([...(values.sourceList || []), ...(dbinfo && dbinfo.tables.map((x) => x.pureName))]) _.uniq([...(values.sourceList || []), ...(dbinfo && dbinfo.tables.map(x => x.pureName))])
) )
} }
/> />
@@ -308,7 +308,7 @@ function SourceTargetConfig({
onClick={() => onClick={() =>
setFieldValue( setFieldValue(
'sourceList', 'sourceList',
_.uniq([...(values.sourceList || []), ...(dbinfo && dbinfo.views.map((x) => x.pureName))]) _.uniq([...(values.sourceList || []), ...(dbinfo && dbinfo.views.map(x => x.pureName))])
) )
} }
/> />
@@ -324,7 +324,7 @@ function SourceTargetConfig({
<SqlWrapper> <SqlWrapper>
<SqlEditor <SqlEditor
value={values.sourceSql} value={values.sourceSql}
onChange={(value) => setFieldValue('sourceSql', value)} onChange={value => setFieldValue('sourceSql', value)}
engine={engine} engine={engine}
focusOnCreate focusOnCreate
/> />
@@ -353,7 +353,7 @@ function SourceTargetConfig({
onClick={() => onClick={() =>
setFieldValue( setFieldValue(
'sourceList', 'sourceList',
_.uniq([...(values.sourceList || []), ...(archiveFiles && archiveFiles.map((x) => x.name))]) _.uniq([...(values.sourceList || []), ...(archiveFiles && archiveFiles.map(x => x.name))])
) )
} }
/> />
@@ -366,7 +366,7 @@ function SourceTargetConfig({
{format && format.args && ( {format && format.args && (
<FormArgumentList <FormArgumentList
args={format.args.filter((arg) => !arg.direction || arg.direction == direction)} args={format.args.filter(arg => !arg.direction || arg.direction == direction)}
namePrefix={`${direction}_${format.storageType}_`} namePrefix={`${direction}_${format.storageType}_`}
/> />
)} )}
@@ -382,14 +382,14 @@ function SourceName({ name }) {
const handleDelete = () => { const handleDelete = () => {
setFieldValue( setFieldValue(
'sourceList', 'sourceList',
values.sourceList.filter((x) => x != name) values.sourceList.filter(x => x != name)
); );
}; };
const doChangeUrl = (url) => { const doChangeUrl = url => {
setFieldValue(`sourceFile_${name}`, { fileName: url, isDownload: true }); setFieldValue(`sourceFile_${name}`, { fileName: url, isDownload: true });
}; };
const handleChangeUrl = () => { const handleChangeUrl = () => {
showModal((modalState) => ( showModal(modalState => (
<ChangeDownloadUrlModal modalState={modalState} url={obj.fileName} onConfirm={doChangeUrl} /> <ChangeDownloadUrlModal modalState={modalState} url={obj.fileName} onConfirm={doChangeUrl} />
)); ));
}; };
@@ -423,7 +423,7 @@ export default function ImportExportConfigurator({ uploadedFile = undefined, onC
const extensions = useExtensions(); const extensions = useExtensions();
const handleUpload = React.useCallback( const handleUpload = React.useCallback(
(file) => { file => {
addFilesToSourceList( addFilesToSourceList(
extensions, extensions,
[ [
@@ -516,36 +516,36 @@ export default function ImportExportConfigurator({ uploadedFile = undefined, onC
<FontIcon icon="icon tables" /> Map source tables/files <FontIcon icon="icon tables" /> Map source tables/files
</Title> </Title>
<TableControl rows={sourceList || []}> <TableControl rows={sourceList || []}>
<TableColumn fieldName="source" header="Source" formatter={(row) => <SourceName name={row} />} /> <TableColumn fieldName="source" header="Source" formatter={row => <SourceName name={row} />} />
<TableColumn <TableColumn
fieldName="action" fieldName="action"
header="Action" header="Action"
formatter={(row) => ( formatter={row => (
<SelectField <SelectField
options={getActionOptions(extensions, row, values, targetDbinfo)} options={getActionOptions(extensions, row, values, targetDbinfo)}
value={values[`actionType_${row}`] || getActionOptions(extensions, row, values, targetDbinfo)[0].value} value={values[`actionType_${row}`] || getActionOptions(extensions, row, values, targetDbinfo)[0].value}
onChange={(e) => setFieldValue(`actionType_${row}`, e.target.value)} onChange={e => setFieldValue(`actionType_${row}`, e.target.value)}
/> />
)} )}
/> />
<TableColumn <TableColumn
fieldName="target" fieldName="target"
header="Target" header="Target"
formatter={(row) => ( formatter={row => (
<TextField <TextField
value={getTargetName(extensions, row, values)} value={getTargetName(extensions, row, values)}
onChange={(e) => setFieldValue(`targetName_${row}`, e.target.value)} onChange={e => setFieldValue(`targetName_${row}`, e.target.value)}
/> />
)} )}
/> />
<TableColumn <TableColumn
fieldName="preview" fieldName="preview"
header="Preview" header="Preview"
formatter={(row) => formatter={row =>
supportsPreview ? ( supportsPreview ? (
<CheckboxField <CheckboxField
checked={previewSource == row} checked={previewSource == row}
onChange={(e) => { onChange={e => {
if (e.target.checked) setPreviewSource(row); if (e.target.checked) setPreviewSource(row);
else setPreviewSource(null); else setPreviewSource(null);
}} }}

2
packages/web/src/impexp/ScriptWriter.js
View File

@@ -39,7 +39,7 @@ export default class ScriptWriter {
getScript(schedule = null) { getScript(schedule = null) {
const packageNames = this.packageNames; const packageNames = this.packageNames;
let prefix = _.uniq(packageNames) let prefix = _.uniq(packageNames)
.map((packageName) => `// @require ${packageName}\n`) .map(packageName => `// @require ${packageName}\n`)
.join(''); .join('');
if (schedule) prefix += `// @schedule ${schedule}`; if (schedule) prefix += `// @schedule ${schedule}`;
if (prefix) prefix += '\n'; if (prefix) prefix += '\n';

2
packages/web/src/modals/ChangeDownloadUrlModal.js
View File

@@ -19,7 +19,7 @@ export default function ChangeDownloadUrlModal({ modalState, url = '', onConfirm
// }; // };
const handleSubmit = React.useCallback( const handleSubmit = React.useCallback(
async (values) => { async values => {
onConfirm(values.url); onConfirm(values.url);
modalState.close(); modalState.close();
}, },

12
packages/web/src/modals/ConnectionModal.js
View File

@@ -14,10 +14,10 @@ import { FormProvider, useForm } from '../utility/FormProvider';
function DriverFields({ extensions }) { function DriverFields({ extensions }) {
const { values, setFieldValue } = useForm(); const { values, setFieldValue } = useForm();
const { authType, engine } = values; const { authType, engine } = values;
const driver = extensions.drivers.find((x) => x.engine == engine); const driver = extensions.drivers.find(x => x.engine == engine);
// const { authTypes } = driver || {}; // const { authTypes } = driver || {};
const [authTypes, setAuthTypes] = React.useState(null); const [authTypes, setAuthTypes] = React.useState(null);
const currentAuthType = authTypes && authTypes.find((x) => x.name == authType); const currentAuthType = authTypes && authTypes.find(x => x.name == authType);
const loadAuthTypes = async () => { const loadAuthTypes = async () => {
const resp = await axios.post('plugins/auth-types', { engine }); const resp = await axios.post('plugins/auth-types', { engine });
@@ -39,7 +39,7 @@ function DriverFields({ extensions }) {
<> <>
{!!authTypes && ( {!!authTypes && (
<FormSelectField label="Authentication" name="authType"> <FormSelectField label="Authentication" name="authType">
{authTypes.map((auth) => ( {authTypes.map(auth => (
<option value={auth.name} key={auth.name}> <option value={auth.name} key={auth.name}>
{auth.title} {auth.title}
</option> </option>
@@ -66,7 +66,7 @@ export default function ConnectionModal({ modalState, connection = undefined })
const [isTesting, setIsTesting] = React.useState(false); const [isTesting, setIsTesting] = React.useState(false);
const testIdRef = React.useRef(0); const testIdRef = React.useRef(0);
const handleTest = async (values) => { const handleTest = async values => {
setIsTesting(true); setIsTesting(true);
testIdRef.current += 1; testIdRef.current += 1;
const testid = testIdRef.current; const testid = testIdRef.current;
@@ -82,7 +82,7 @@ export default function ConnectionModal({ modalState, connection = undefined })
setIsTesting(false); setIsTesting(false);
}; };
const handleSubmit = async (values) => { const handleSubmit = async values => {
axios.post('connections/save', values); axios.post('connections/save', values);
modalState.close(); modalState.close();
}; };
@@ -93,7 +93,7 @@ export default function ConnectionModal({ modalState, connection = undefined })
<ModalContent> <ModalContent>
<FormSelectField label="Database engine" name="engine"> <FormSelectField label="Database engine" name="engine">
<option value="(select driver)"></option> <option value="(select driver)"></option>
{extensions.drivers.map((driver) => ( {extensions.drivers.map(driver => (
<option value={driver.engine} key={driver.engine}> <option value={driver.engine} key={driver.engine}>
{driver.title} {driver.title}
</option> </option>

2
packages/web/src/modals/CreateDatabaseModal.js
View File

@@ -8,7 +8,7 @@ import ModalFooter from './ModalFooter';
import { FormProvider } from '../utility/FormProvider'; import { FormProvider } from '../utility/FormProvider';
export default function CreateDatabaseModal({ modalState, conid }) { export default function CreateDatabaseModal({ modalState, conid }) {
const handleSubmit = async (values) => { const handleSubmit = async values => {
const { name } = values; const { name } = values;
axios.post('server-connections/create-database', { conid, name }); axios.post('server-connections/create-database', { conid, name });

16
packages/web/src/modals/FavoriteModal.js
View File

@@ -48,7 +48,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
const canWriteFavorite = hasPermission('files/favorites/write'); const canWriteFavorite = hasPermission('files/favorites/write');
const getTabSaveData = async (values) => { const getTabSaveData = async values => {
const tabdata = {}; const tabdata = {};
const skipEditor = !!savedFile && values.whatToSave != 'content'; const skipEditor = !!savedFile && values.whatToSave != 'content';
@@ -78,7 +78,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
}; };
}; };
const saveTab = async (values) => { const saveTab = async values => {
const data = await getTabSaveData(values); const data = await getTabSaveData(values);
axios.post('files/save', { axios.post('files/save', {
@@ -89,7 +89,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
}); });
}; };
const saveFile = async (values) => { const saveFile = async values => {
const oldDataResp = await axios.post('files/load', { const oldDataResp = await axios.post('files/load', {
folder: 'favorites', folder: 'favorites',
file: editingData.file, file: editingData.file,
@@ -107,7 +107,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
}); });
}; };
const handleSubmit = async (values) => { const handleSubmit = async values => {
modalState.close(); modalState.close();
if (savingTab) { if (savingTab) {
saveTab(values); saveTab(values);
@@ -117,7 +117,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
} }
}; };
const handleCopyLink = async (values) => { const handleCopyLink = async values => {
const tabdata = await getTabSaveData(values); const tabdata = await getTabSaveData(values);
copyTextToClipboard(`${document.location.origin}#tabdata=${encodeURIComponent(JSON.stringify(tabdata))}`); copyTextToClipboard(`${document.location.origin}#tabdata=${encodeURIComponent(JSON.stringify(tabdata))}`);
}; };
@@ -136,7 +136,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
{!!savingTab && !electron && canWriteFavorite && ( {!!savingTab && !electron && canWriteFavorite && (
<FormCheckboxField label="Share as link" name="shareAsLink" /> <FormCheckboxField label="Share as link" name="shareAsLink" />
)} )}
<FormCondition condition={(values) => !values.shareAsLink && canWriteFavorite}> <FormCondition condition={values => !values.shareAsLink && canWriteFavorite}>
<FormCheckboxField label="Show in toolbar" name="showInToolbar" /> <FormCheckboxField label="Show in toolbar" name="showInToolbar" />
<FormCheckboxField label="Open on startup" name="openOnStartup" /> <FormCheckboxField label="Open on startup" name="openOnStartup" />
</FormCondition> </FormCondition>
@@ -148,10 +148,10 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
)} )}
</ModalContent> </ModalContent>
<ModalFooter> <ModalFooter>
<FormCondition condition={(values) => !values.shareAsLink && canWriteFavorite}> <FormCondition condition={values => !values.shareAsLink && canWriteFavorite}>
<FormSubmit value="OK" onClick={handleSubmit} /> <FormSubmit value="OK" onClick={handleSubmit} />
</FormCondition> </FormCondition>
<FormCondition condition={(values) => values.shareAsLink || !canWriteFavorite}> <FormCondition condition={values => values.shareAsLink || !canWriteFavorite}>
<FormButton value="Copy link" onClick={handleCopyLink} /> <FormButton value="Copy link" onClick={handleCopyLink} />
</FormCondition> </FormCondition>
<FormButton value="Cancel" onClick={() => modalState.close()} /> <FormButton value="Cancel" onClick={() => modalState.close()} />

2
packages/web/src/modals/FilterMultipleValuesModal.js
View File

@@ -49,7 +49,7 @@ export default function FilterMultipleValuesModal({ modalState, onFilter }) {
<ModalHeader modalState={modalState}>Filter multiple values</ModalHeader> <ModalHeader modalState={modalState}>Filter multiple values</ModalHeader>
<ModalContent> <ModalContent>
<Wrapper> <Wrapper>
<textarea rows={10} ref={editorRef} value={text} onChange={(e) => setText(e.target.value)} /> <textarea rows={10} ref={editorRef} value={text} onChange={e => setText(e.target.value)} />
<OptionsWrapper> <OptionsWrapper>
<RadioGroupItem text="Is one of line" value="is" defaultChecked setMode={setMode} /> <RadioGroupItem text="Is one of line" value="is" defaultChecked setMode={setMode} />
<RadioGroupItem text="Is not one of line" value="is_not" setMode={setMode} /> <RadioGroupItem text="Is not one of line" value="is_not" setMode={setMode} />

12
packages/web/src/modals/ImportExportModal.js
View File

@@ -52,7 +52,7 @@ const WidgetColumnWrapper = styled.div`
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
border-left: 1px solid ${(props) => props.theme.border}; border-left: 1px solid ${props => props.theme.border};
`; `;
const FormWrapper = styled.div` const FormWrapper = styled.div`
@@ -67,7 +67,7 @@ const FormWrapper = styled.div`
`; `;
const ContentWrapper = styled.div` const ContentWrapper = styled.div`
border-top: 1px solid ${(props) => props.theme.border}; border-top: 1px solid ${props => props.theme.border};
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -80,9 +80,9 @@ const Footer = styled.div`
left: 0; left: 0;
right: 0; right: 0;
bottom: 0px; bottom: 0px;
background-color: ${(props) => props.theme.modalheader_background}; background-color: ${props => props.theme.modalheader_background};
border-top: 1px solid ${(props) => props.theme.border}; border-top: 1px solid ${props => props.theme.border};
// padding: 15px; // padding: 15px;
`; `;
@@ -155,13 +155,13 @@ export default function ImportExportModal({
} }
}, [runnerId, socket]); }, [runnerId, socket]);
const handleExecute = async (values) => { const handleExecute = async values => {
if (busy) return; if (busy) return;
setBusy(true); setBusy(true);
const script = await createImpExpScript(extensions, values); const script = await createImpExpScript(extensions, values);
setExecuteNumber((num) => num + 1); setExecuteNumber(num => num + 1);
let runid = runnerId; let runid = runnerId;
const resp = await axios.post('runners/start', { script }); const resp = await axios.post('runners/start', { script });

2
packages/web/src/modals/InputTextModal.js
View File

@@ -7,7 +7,7 @@ import ModalFooter from './ModalFooter';
import { FormProvider } from '../utility/FormProvider'; import { FormProvider } from '../utility/FormProvider';
export default function InputTextModal({ header, label, value, modalState, onConfirm }) { export default function InputTextModal({ header, label, value, modalState, onConfirm }) {
const handleSubmit = async (values) => { const handleSubmit = async values => {
const { value } = values; const { value } = values;
modalState.close(); modalState.close();
onConfirm(value); onConfirm(value);

32
packages/web/src/modals/InsertJoinModal.js
View File

@@ -34,7 +34,7 @@ const JOIN_TYPES = ['INNER JOIN', 'LEFT JOIN', 'RIGHT JOIN'];
export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onInsert }) { export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onInsert }) {
const sources = React.useMemo( const sources = React.useMemo(
() => analyseQuerySources(sql, [...dbinfo.tables.map((x) => x.pureName), ...dbinfo.views.map((x) => x.pureName)]), () => analyseQuerySources(sql, [...dbinfo.tables.map(x => x.pureName), ...dbinfo.views.map(x => x.pureName)]),
[sql, dbinfo] [sql, dbinfo]
); );
@@ -51,22 +51,22 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
const source = sources[sourceIndex]; const source = sources[sourceIndex];
if (!source) return []; if (!source) return [];
/** @type {import('dbgate-types').TableInfo} */ /** @type {import('dbgate-types').TableInfo} */
const table = dbinfo.tables.find((x) => x.pureName == sources[sourceIndex].name); const table = dbinfo.tables.find(x => x.pureName == sources[sourceIndex].name);
if (!table) return []; if (!table) return [];
return [ return [
...table.foreignKeys.map((fk) => ({ ...table.foreignKeys.map(fk => ({
baseColumns: fk.columns.map((x) => x.columnName).join(', '), baseColumns: fk.columns.map(x => x.columnName).join(', '),
refTable: fk.refTableName, refTable: fk.refTableName,
refColumns: fk.columns.map((x) => x.refColumnName).join(', '), refColumns: fk.columns.map(x => x.refColumnName).join(', '),
constraintName: fk.constraintName, constraintName: fk.constraintName,
columnMap: fk.columns, columnMap: fk.columns,
})), })),
...table.dependencies.map((fk) => ({ ...table.dependencies.map(fk => ({
baseColumns: fk.columns.map((x) => x.refColumnName).join(', '), baseColumns: fk.columns.map(x => x.refColumnName).join(', '),
refTable: fk.pureName, refTable: fk.pureName,
refColumns: fk.columns.map((x) => x.columnName).join(', '), refColumns: fk.columns.map(x => x.columnName).join(', '),
constraintName: fk.constraintName, constraintName: fk.constraintName,
columnMap: fk.columns.map((x) => ({ columnMap: fk.columns.map(x => ({
columnName: x.refColumnName, columnName: x.refColumnName,
refColumnName: x.columnName, refColumnName: x.columnName,
})), })),
@@ -79,18 +79,18 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
const target = targets[targetIndex]; const target = targets[targetIndex];
if (source && target) { if (source && target) {
return `${JOIN_TYPES[joinIndex]} ${target.refTable}${alias ? ` ${alias}` : ''} ON ${target.columnMap return `${JOIN_TYPES[joinIndex]} ${target.refTable}${alias ? ` ${alias}` : ''} ON ${target.columnMap
.map((col) => `${source.name}.${col.columnName} = ${alias || target.refTable}.${col.refColumnName}`) .map(col => `${source.name}.${col.columnName} = ${alias || target.refTable}.${col.refColumnName}`)
.join(' AND ')}`; .join(' AND ')}`;
} }
return ''; return '';
}, [joinIndex, sources, targets, sourceIndex, targetIndex, alias]); }, [joinIndex, sources, targets, sourceIndex, targetIndex, alias]);
const sourceKeyDown = React.useCallback((event) => { const sourceKeyDown = React.useCallback(event => {
if (event.keyCode == keycodes.enter || event.keyCode == keycodes.rightArrow) { if (event.keyCode == keycodes.enter || event.keyCode == keycodes.rightArrow) {
targetRef.current.focus(); targetRef.current.focus();
} }
}, []); }, []);
const targetKeyDown = React.useCallback((event) => { const targetKeyDown = React.useCallback(event => {
if (event.keyCode == keycodes.leftArrow) { if (event.keyCode == keycodes.leftArrow) {
sourceRef.current.focus(); sourceRef.current.focus();
} }
@@ -98,7 +98,7 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
joinRef.current.focus(); joinRef.current.focus();
} }
}, []); }, []);
const joinKeyDown = React.useCallback((event) => { const joinKeyDown = React.useCallback(event => {
if (event.keyCode == keycodes.leftArrow) { if (event.keyCode == keycodes.leftArrow) {
targetRef.current.focus(); targetRef.current.focus();
} }
@@ -107,7 +107,7 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
} }
}, []); }, []);
const aliasKeyDown = React.useCallback( const aliasKeyDown = React.useCallback(
(event) => { event => {
if (event.keyCode == keycodes.enter) { if (event.keyCode == keycodes.enter) {
event.preventDefault(); event.preventDefault();
modalState.close(); modalState.close();
@@ -154,7 +154,7 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
<FlexColumn> <FlexColumn>
<Label>Join</Label> <Label>Join</Label>
<TableControl <TableControl
rows={JOIN_TYPES.map((name) => ({ name }))} rows={JOIN_TYPES.map(name => ({ name }))}
selectedIndex={joinIndex} selectedIndex={joinIndex}
setSelectedIndex={setJoinIndex} setSelectedIndex={setJoinIndex}
tableRef={joinRef} tableRef={joinRef}
@@ -165,7 +165,7 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
<Label>Alias</Label> <Label>Alias</Label>
<TextField <TextField
value={alias} value={alias}
onChange={(e) => setAlias(e.target.value)} onChange={e => setAlias(e.target.value)}
editorRef={aliasRef} editorRef={aliasRef}
onKeyDown={aliasKeyDown} onKeyDown={aliasKeyDown}
/> />

10
packages/web/src/modals/ModalBase.js
View File

@@ -20,13 +20,13 @@ import ErrorBoundary from '../utility/ErrorBoundary';
// `; // `;
const StyledModal = styled(Modal)` const StyledModal = styled(Modal)`
border: 1px solid ${(props) => props.theme.border}; border: 1px solid ${props => props.theme.border};
background: ${(props) => props.theme.modal_background}; background: ${props => props.theme.modal_background};
overflow: auto; overflow: auto;
webkitoverflowscrolling: touch; webkitoverflowscrolling: touch;
outline: none; outline: none;
${(props) => ${props =>
props.fullScreen && props.fullScreen &&
` `
position: fixed; position: fixed;
@@ -38,7 +38,7 @@ const StyledModal = styled(Modal)`
// height: 100%; // height: 100%;
`} `}
${(props) => ${props =>
!props.fullScreen && !props.fullScreen &&
` `
border-radius: 10px; border-radius: 10px;
@@ -50,7 +50,7 @@ const StyledModal = styled(Modal)`
// z-index:1200; // z-index:1200;
${(props) => ${props =>
props.isFlex && props.isFlex &&
` `
display: flex; display: flex;

4
packages/web/src/modals/ModalContent.js
View File

@@ -3,8 +3,8 @@ import styled from 'styled-components';
import useTheme from '../theme/useTheme'; import useTheme from '../theme/useTheme';
const Wrapper = styled.div` const Wrapper = styled.div`
border-bottom: 1px solid ${(props) => props.theme.border}; border-bottom: 1px solid ${props => props.theme.border};
border-top: 1px solid ${(props) => props.theme.border}; border-top: 1px solid ${props => props.theme.border};
padding: 15px; padding: 15px;
`; `;

4
packages/web/src/modals/ModalFooter.js
View File

@@ -3,9 +3,9 @@ import styled from 'styled-components';
import useTheme from '../theme/useTheme'; import useTheme from '../theme/useTheme';
const Wrapper = styled.div` const Wrapper = styled.div`
border-bottom: 1px solid ${(props) => props.theme.border}; border-bottom: 1px solid ${props => props.theme.border};
padding: 15px; padding: 15px;
background-color: ${(props) => props.theme.modalheader_background}; background-color: ${props => props.theme.modalheader_background};
`; `;
export default function ModalFooter({ children }) { export default function ModalFooter({ children }) {

4
packages/web/src/modals/ModalHeader.js
View File

@@ -8,13 +8,13 @@ const Wrapper = styled.div`
padding: 15px; padding: 15px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: ${(props) => props.theme.modalheader_background}; background-color: ${props => props.theme.modalheader_background};
`; `;
const CloseWrapper = styled.div` const CloseWrapper = styled.div`
font-size: 12pt; font-size: 12pt;
&:hover { &:hover {
background-color: ${(props) => props.theme.modalheader_background2}; background-color: ${props => props.theme.modalheader_background2};
} }
padding: 5px 10px; padding: 5px 10px;
border-radius: 10px; border-radius: 10px;

2
packages/web/src/modals/SaveArchiveModal.js
View File

@@ -14,7 +14,7 @@ const SelectWrapper = styled.div`
`; `;
export default function SaveArchiveModal({ file = 'new-table', folder = 'default', modalState, onSave }) { export default function SaveArchiveModal({ file = 'new-table', folder = 'default', modalState, onSave }) {
const handleSubmit = async (values) => { const handleSubmit = async values => {
const { file, folder } = values; const { file, folder } = values;
modalState.close(); modalState.close();
if (onSave) onSave(folder, file); if (onSave) onSave(folder, file);

2
packages/web/src/modals/SaveFileModal.js
View File

@@ -8,7 +8,7 @@ import ModalFooter from './ModalFooter';
import { FormProvider } from '../utility/FormProvider'; import { FormProvider } from '../utility/FormProvider';
export default function SaveFileModal({ data, folder, format, modalState, name, onSave = undefined }) { export default function SaveFileModal({ data, folder, format, modalState, name, onSave = undefined }) {
const handleSubmit = async (values) => { const handleSubmit = async values => {
const { name } = values; const { name } = values;
await axios.post('files/save', { folder, file: name, data, format }); await axios.post('files/save', { folder, file: name, data, format });
modalState.close(); modalState.close();

8
packages/web/src/modals/SaveTabModal.js
View File

@@ -8,9 +8,9 @@ export default function SaveTabModal({ data, folder, format, modalState, tabid,
const setOpenedTabs = useSetOpenedTabs(); const setOpenedTabs = useSetOpenedTabs();
const openedTabs = useOpenedTabs(); const openedTabs = useOpenedTabs();
const { savedFile } = openedTabs.find((x) => x.tabid == tabid).props || {}; const { savedFile } = openedTabs.find(x => x.tabid == tabid).props || {};
const onSave = (name) => const onSave = name =>
changeTab(tabid, setOpenedTabs, (tab) => ({ changeTab(tabid, setOpenedTabs, tab => ({
...tab, ...tab,
title: name, title: name,
props: { props: {
@@ -22,7 +22,7 @@ export default function SaveTabModal({ data, folder, format, modalState, tabid,
})); }));
const handleKeyboard = React.useCallback( const handleKeyboard = React.useCallback(
(e) => { e => {
if (e.keyCode == keycodes.s && e.ctrlKey) { if (e.keyCode == keycodes.s && e.ctrlKey) {
e.preventDefault(); e.preventDefault();
modalState.open(); modalState.open();

2
packages/web/src/modals/SetFilterModal.js
View File

@@ -93,7 +93,7 @@ export default function SetFilterModal({ modalState, onFilter, filterType, condi
return `${condition}${value}`; return `${condition}${value}`;
}; };
const handleOk = (values) => { const handleOk = values => {
const { value1, condition1, value2, condition2, joinOperator } = values; const { value1, condition1, value2, condition2, joinOperator } = values;
const term1 = createTerm(condition1, value1); const term1 = createTerm(condition1, value1);
const term2 = createTerm(condition2, value2); const term2 = createTerm(condition2, value2);

8
packages/web/src/modals/showModal.js
View File

@@ -22,11 +22,7 @@ export function ModalLayer() {
return ( return (
<div> <div>
{modals.map((modal, index) => ( {modals.map((modal, index) => (
<ShowModalComponent <ShowModalComponent key={index} renderModal={modal} onClose={() => setModals(x => x.filter(y => y != modal))} />
key={index}
renderModal={modal}
onClose={() => setModals((x) => x.filter((y) => y != modal))}
/>
))} ))}
</div> </div>
); );
@@ -34,7 +30,7 @@ export function ModalLayer() {
export default function useShowModal() { export default function useShowModal() {
const [modals, setModals] = React.useContext(Context); const [modals, setModals] = React.useContext(Context);
const showModal = (renderModal) => { const showModal = renderModal => {
setModals([...modals, renderModal]); setModals([...modals, renderModal]);
}; };
return showModal; return showModal;

4
packages/web/src/plugins/PluginsList.js
View File

@@ -10,7 +10,7 @@ const Wrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
&:hover { &:hover {
background-color: ${(props) => props.theme.left_background_blue[1]}; background-color: ${props => props.theme.left_background_blue[1]};
} }
`; `;
@@ -79,7 +79,7 @@ function PluginsListItem({ packageManifest }) {
export default function PluginsList({ plugins }) { export default function PluginsList({ plugins }) {
return ( return (
<> <>
{plugins.map((packageManifest) => ( {plugins.map(packageManifest => (
<PluginsListItem packageManifest={packageManifest} key={packageManifest.name} /> <PluginsListItem packageManifest={packageManifest} key={packageManifest.name} />
))} ))}
</> </>

8
packages/web/src/plugins/PluginsProvider.js
View File

@@ -31,10 +31,10 @@ export default function PluginsProvider({ children }) {
newPlugins[installed.name] = moduleContent; newPlugins[installed.name] = moduleContent;
} }
} }
setPlugins((x) => setPlugins(x =>
_.pick( _.pick(
{ ...x, ...newPlugins }, { ...x, ...newPlugins },
installedPlugins.map((y) => y.name) installedPlugins.map(y => y.name)
) )
); );
}; };
@@ -51,12 +51,12 @@ export function usePlugins() {
return React.useMemo( return React.useMemo(
() => () =>
installed installed
.map((manifest) => ({ .map(manifest => ({
packageName: manifest.name, packageName: manifest.name,
manifest, manifest,
content: loaded[manifest.name], content: loaded[manifest.name],
})) }))
.filter((x) => x.content), .filter(x => x.content),
[installed, loaded] [installed, loaded]
); );
} }

14
packages/web/src/query/MessagesView.js
View File

@@ -7,7 +7,7 @@ const MainContainer = styled.div`
flex: 1; flex: 1;
display: flex; display: flex;
overflow-y: scroll; overflow-y: scroll;
background-color: ${(props) => props.theme.gridbody_background}; background-color: ${props => props.theme.gridbody_background};
`; `;
const StyledTable = styled.table` const StyledTable = styled.table`
@@ -18,22 +18,22 @@ const StyledTable = styled.table`
const StyledHeader = styled.td` const StyledHeader = styled.td`
text-align: left; text-align: left;
border-bottom: 2px solid ${(props) => props.theme.border}; border-bottom: 2px solid ${props => props.theme.border};
background-color: ${(props) => props.theme.gridheader_background}; background-color: ${props => props.theme.gridheader_background};
padding: 5px; padding: 5px;
`; `;
const StyledCell = styled.td` const StyledCell = styled.td`
border-top: 1px solid ${(props) => props.theme.border}; border-top: 1px solid ${props => props.theme.border};
padding: 5px; padding: 5px;
`; `;
const StyledRow = styled.tr` const StyledRow = styled.tr`
color: ${(props) => color: ${props =>
// @ts-ignore // @ts-ignore
props.severity == 'error' ? props.theme.gridbody_font_red[5] : props.theme.gridbody_font1}; props.severity == 'error' ? props.theme.gridbody_font_red[5] : props.theme.gridbody_font1};
${(props) => ${props =>
// @ts-ignore // @ts-ignore
props.line != null && props.line != null &&
` `
@@ -55,7 +55,7 @@ function formatDuration(duration) {
} }
function MessagesView({ items, onMessageClick, showProcedure = false, showLine = false }) { function MessagesView({ items, onMessageClick, showProcedure = false, showLine = false }) {
const handleClick = (row) => { const handleClick = row => {
if (onMessageClick) onMessageClick(row); if (onMessageClick) onMessageClick(row);
}; };
const theme = useTheme(); const theme = useTheme();

8
packages/web/src/query/RunnerOuputFiles.js
View File

@@ -39,12 +39,12 @@ export default function RunnerOutputFiles({ runnerId, executeNumber }) {
return ( return (
<TableControl rows={files}> <TableControl rows={files}>
<TableColumn fieldName="name" header="Name" /> <TableColumn fieldName="name" header="Name" />
<TableColumn fieldName="size" header="Size" formatter={(row) => formatFileSize(row.size)} /> <TableColumn fieldName="size" header="Size" formatter={row => formatFileSize(row.size)} />
{!electron && ( {!electron && (
<TableColumn <TableColumn
fieldName="download" fieldName="download"
header="Download" header="Download"
formatter={(row) => ( formatter={row => (
<a href={`${resolveApi()}/runners/data/${runnerId}/${row.name}`} target="_blank" rel="noopener noreferrer"> <a href={`${resolveApi()}/runners/data/${runnerId}/${row.name}`} target="_blank" rel="noopener noreferrer">
download download
</a> </a>
@@ -55,7 +55,7 @@ export default function RunnerOutputFiles({ runnerId, executeNumber }) {
<TableColumn <TableColumn
fieldName="copy" fieldName="copy"
header="Copy" header="Copy"
formatter={(row) => ( formatter={row => (
<a <a
href="#" href="#"
onClick={() => { onClick={() => {
@@ -75,7 +75,7 @@ export default function RunnerOutputFiles({ runnerId, executeNumber }) {
<TableColumn <TableColumn
fieldName="show" fieldName="show"
header="Show" header="Show"
formatter={(row) => ( formatter={row => (
<a <a
href="#" href="#"
onClick={() => { onClick={() => {

2
packages/web/src/query/SocketMessagesView.js
View File

@@ -23,7 +23,7 @@ export default function SocketMessagesView({
[] []
); );
const handleInfo = React.useCallback((info) => { const handleInfo = React.useCallback(info => {
cachedMessagesRef.current.push(info); cachedMessagesRef.current.push(info);
displayCachedMessages(); displayCachedMessages();
}, []); }, []);

15
packages/web/src/serviceWorker.js
View File

@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
// [::1] is the IPv6 localhost address. // [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' || window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4. // 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match( window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
); );
export function register(config) { export function register(config) {
@@ -101,15 +99,12 @@ function registerValidSW(swUrl, config) {
function checkValidServiceWorker(swUrl, config) { function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page. // Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, { fetch(swUrl, {
headers: { 'Service-Worker': 'script' } headers: { 'Service-Worker': 'script' },
}) })
.then(response => { .then(response => {
// Ensure service worker exists, and that we really are getting a JS file. // Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type'); const contentType = response.headers.get('content-type');
if ( if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page. // No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => { registration.unregister().then(() => {
@@ -122,9 +117,7 @@ function checkValidServiceWorker(swUrl, config) {
} }
}) })
.catch(() => { .catch(() => {
console.log( console.log('No internet connection found. App is running in offline mode.');
'No internet connection found. App is running in offline mode.'
);
}); });
} }

6
packages/web/src/sqleditor/ResultTabs.js
View File

@@ -8,9 +8,9 @@ export default function ResultTabs({ children, sessionId, executeNumber }) {
const socket = useSocket(); const socket = useSocket();
const [resultInfos, setResultInfos] = React.useState([]); const [resultInfos, setResultInfos] = React.useState([]);
const handleResultSet = React.useCallback((props) => { const handleResultSet = React.useCallback(props => {
const { jslid, resultIndex } = props; const { jslid, resultIndex } = props;
setResultInfos((array) => [...array, { jslid, resultIndex }]); setResultInfos(array => [...array, { jslid, resultIndex }]);
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
@@ -29,7 +29,7 @@ export default function ResultTabs({ children, sessionId, executeNumber }) {
return ( return (
<TabControl activePageLabel={resultInfos.length > 0 ? 'Result 1' : null}> <TabControl activePageLabel={resultInfos.length > 0 ? 'Result 1' : null}>
{children} {children}
{_.sortBy(resultInfos, 'resultIndex').map((info) => ( {_.sortBy(resultInfos, 'resultIndex').map(info => (
<TabPage label={`Result ${info.resultIndex + 1}`} key={info.jslid}> <TabPage label={`Result ${info.resultIndex + 1}`} key={info.jslid}>
<JslDataGrid jslid={info.jslid} key={info.jslid} /> <JslDataGrid jslid={info.jslid} key={info.jslid} />
</TabPage> </TabPage>

4
packages/web/src/sqleditor/SqlEditor.js
View File

@@ -78,13 +78,13 @@ export default function SqlEditor({
if (keyCode == keycodes.j && event.ctrlKey && !readOnly && tabVisible) { if (keyCode == keycodes.j && event.ctrlKey && !readOnly && tabVisible) {
event.preventDefault(); event.preventDefault();
const dbinfo = await getDatabaseInfo({ conid, database }); const dbinfo = await getDatabaseInfo({ conid, database });
showModal((modalState) => ( showModal(modalState => (
<InsertJoinModal <InsertJoinModal
sql={currentEditorRef.current.editor.getValue()} sql={currentEditorRef.current.editor.getValue()}
modalState={modalState} modalState={modalState}
engine={engine} engine={engine}
dbinfo={dbinfo} dbinfo={dbinfo}
onInsert={(text) => { onInsert={text => {
const editor = currentEditorRef.current.editor; const editor = currentEditorRef.current.editor;
editor.session.insert(editor.getCursorPosition(), text); editor.session.insert(editor.getCursorPosition(), text);
}} }}

2
packages/web/src/sqleditor/analyseQuerySources.js
View File

@@ -1,5 +1,5 @@
export default function analyseQuerySources(sql, sourceNames) { export default function analyseQuerySources(sql, sourceNames) {
const upperSourceNames = sourceNames.map((x) => x.toUpperCase()); const upperSourceNames = sourceNames.map(x => x.toUpperCase());
const tokens = sql.split(/\s+/); const tokens = sql.split(/\s+/);
const res = []; const res = [];
for (let i = 0; i < tokens.length; i += 1) { for (let i = 0; i < tokens.length; i += 1) {

16
packages/web/src/sqleditor/useCodeCompletion.js
View File

@@ -34,7 +34,7 @@ export default function useCodeCompletion({ conid, database, tabVisible, current
const line = session.getLine(cursor.row).slice(0, cursor.column); const line = session.getLine(cursor.row).slice(0, cursor.column);
const dbinfo = await getDatabaseInfo({ conid, database }); const dbinfo = await getDatabaseInfo({ conid, database });
let list = COMMON_KEYWORDS.map((word) => ({ let list = COMMON_KEYWORDS.map(word => ({
name: word, name: word,
value: word, value: word,
caption: word, caption: word,
@@ -47,17 +47,17 @@ export default function useCodeCompletion({ conid, database, tabVisible, current
if (colMatch) { if (colMatch) {
const table = colMatch[1]; const table = colMatch[1];
const sources = analyseQuerySources(editor.getValue(), [ const sources = analyseQuerySources(editor.getValue(), [
...dbinfo.tables.map((x) => x.pureName), ...dbinfo.tables.map(x => x.pureName),
...dbinfo.views.map((x) => x.pureName), ...dbinfo.views.map(x => x.pureName),
]); ]);
const source = sources.find((x) => (x.alias || x.name) == table); const source = sources.find(x => (x.alias || x.name) == table);
console.log('sources', sources); console.log('sources', sources);
console.log('table', table, source); console.log('table', table, source);
if (source) { if (source) {
const table = dbinfo.tables.find((x) => x.pureName == source.name); const table = dbinfo.tables.find(x => x.pureName == source.name);
if (table) { if (table) {
list = [ list = [
...table.columns.map((x) => ({ ...table.columns.map(x => ({
name: x.columnName, name: x.columnName,
value: x.columnName, value: x.columnName,
caption: x.columnName, caption: x.columnName,
@@ -70,14 +70,14 @@ export default function useCodeCompletion({ conid, database, tabVisible, current
} else { } else {
list = [ list = [
...list, ...list,
...dbinfo.tables.map((x) => ({ ...dbinfo.tables.map(x => ({
name: x.pureName, name: x.pureName,
value: x.pureName, value: x.pureName,
caption: x.pureName, caption: x.pureName,
meta: 'table', meta: 'table',
score: 1000, score: 1000,
})), })),
...dbinfo.views.map((x) => ({ ...dbinfo.views.map(x => ({
name: x.pureName, name: x.pureName,
value: x.pureName, value: x.pureName,
caption: x.pureName, caption: x.pureName,

6
packages/web/src/tabs/ChartTab.js
View File

@@ -30,11 +30,11 @@ export default function ChartTab({ tabVisible, toolbarPortalRef, conid, database
}, [modelState]); }, [modelState]);
const setConfig = React.useCallback( const setConfig = React.useCallback(
(config) => config =>
// @ts-ignore // @ts-ignore
dispatchModel({ dispatchModel({
type: 'compute', type: 'compute',
compute: (v) => ({ ...v, config: _.isFunction(config) ? config(v.config) : config }), compute: v => ({ ...v, config: _.isFunction(config) ? config(v.config) : config }),
}), }),
[dispatchModel] [dispatchModel]
); );
@@ -75,4 +75,4 @@ export default function ChartTab({ tabVisible, toolbarPortalRef, conid, database
); );
} }
ChartTab.allowAddToFavorites = (props) => true; ChartTab.allowAddToFavorites = props => true;

4
packages/web/src/tabs/FavoriteEditorTab.js
View File

@@ -42,7 +42,7 @@ export default function FavoriteEditorTab({ tabid, tabVisible, savedFile, toolba
const data = JSON.parse(editorData); const data = JSON.parse(editorData);
openFavorite(data); openFavorite(data);
} catch (err) { } catch (err) {
showModal((modalState) => ( showModal(modalState => (
<ErrorMessageModal modalState={modalState} message={err.message} title="Error parsing JSON" /> <ErrorMessageModal modalState={modalState} message={err.message} title="Error parsing JSON" />
)); ));
} }
@@ -65,7 +65,7 @@ export default function FavoriteEditorTab({ tabid, tabVisible, savedFile, toolba
data, data,
}); });
} catch (err) { } catch (err) {
showModal((modalState) => ( showModal(modalState => (
<ErrorMessageModal modalState={modalState} message={err.message} title="Error parsing JSON" /> <ErrorMessageModal modalState={modalState} message={err.message} title="Error parsing JSON" />
)); ));
} }

4
packages/web/src/tabs/FreeTableTab.js
View File

@@ -21,7 +21,7 @@ export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, to
tabid, tabid,
loadFromArgs: loadFromArgs:
initialArgs && initialArgs.functionName initialArgs && initialArgs.functionName
? () => axios.post('runners/load-reader', initialArgs).then((x) => x.data) ? () => axios.post('runners/load-reader', initialArgs).then(x => x.data)
: null, : null,
}); });
@@ -36,7 +36,7 @@ export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, to
const handleSave = async (folder, file) => { const handleSave = async (folder, file) => {
await axios.post('archive/save-free-table', { folder, file, data: modelState.value }); await axios.post('archive/save-free-table', { folder, file, data: modelState.value });
changeTab(tabid, setOpenedTabs, (tab) => ({ changeTab(tabid, setOpenedTabs, tab => ({
...tab, ...tab,
title: file, title: file,
props: { archiveFile: file, archiveFolder: folder }, props: { archiveFile: file, archiveFolder: folder },

8
packages/web/src/tabs/MarkdownEditorTab.js
View File

@@ -27,16 +27,16 @@ export default function MarkdownEditorTab({ tabid, tabVisible, toolbarPortalRef,
const showPreview = async () => { const showPreview = async () => {
await saveToStorage(); await saveToStorage();
const existing = (openedTabs || []).find((x) => x.props && x.props.sourceTabId == tabid && x.closedTime == null); const existing = (openedTabs || []).find(x => x.props && x.props.sourceTabId == tabid && x.closedTime == null);
if (existing) { if (existing) {
setOpenedTabs((tabs) => setOpenedTabs(tabs =>
tabs.map((x) => ({ tabs.map(x => ({
...x, ...x,
selected: x.tabid == existing.tabid, selected: x.tabid == existing.tabid,
})) }))
); );
} else { } else {
const thisTab = (openedTabs || []).find((x) => x.tabid == tabid); const thisTab = (openedTabs || []).find(x => x.tabid == tabid);
openNewTab({ openNewTab({
title: thisTab.title, title: thisTab.title,
icon: 'img preview', icon: 'img preview',

2
packages/web/src/tabs/MarkdownPreviewTab.js
View File

@@ -8,7 +8,7 @@ export default function MarkdownPreviewTab({ sourceTabId, tabVisible }) {
const { editorData, isLoading } = useEditorData({ tabid: sourceTabId, reloadToken }); const { editorData, isLoading } = useEditorData({ tabid: sourceTabId, reloadToken });
React.useEffect(() => { React.useEffect(() => {
if (tabVisible) setReloadToken((x) => x + 1); if (tabVisible) setReloadToken(x => x + 1);
}, [tabVisible]); }, [tabVisible]);
if (isLoading) { if (isLoading) {

2
packages/web/src/tabs/MarkdownViewTab.js
View File

@@ -33,4 +33,4 @@ export default function MarkdownViewTab({ savedFile }) {
return <MarkdownExtendedView>{text || ''}</MarkdownExtendedView>; return <MarkdownExtendedView>{text || ''}</MarkdownExtendedView>;
} }
MarkdownViewTab.allowAddToFavorites = (props) => true; MarkdownViewTab.allowAddToFavorites = props => true;

6
packages/web/src/tabs/PluginTab.js
View File

@@ -18,7 +18,7 @@ const WhitePage = styled.div`
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: ${(props) => props.theme.main_background}; background-color: ${props => props.theme.main_background};
overflow: auto; overflow: auto;
padding: 10px; padding: 10px;
`; `;
@@ -30,7 +30,7 @@ const Icon = styled.img`
const Header = styled.div` const Header = styled.div`
display: flex; display: flex;
border-bottom: 1px solid ${(props) => props.theme.border}; border-bottom: 1px solid ${props => props.theme.border};
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 20px; padding-bottom: 20px;
`; `;
@@ -81,7 +81,7 @@ function PluginTabCore({ packageName }) {
return <LoadingInfo message="Loading extension detail" />; return <LoadingInfo message="Loading extension detail" />;
} }
const installedFound = installed.find((x) => x.name == packageName); const installedFound = installed.find(x => x.name == packageName);
const onlineFound = manifest; const onlineFound = manifest;
if (manifest == null) { if (manifest == null) {

10
packages/web/src/tabs/QueryDesignTab.js
View File

@@ -79,7 +79,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
dispatchModel({ dispatchModel({
type: 'compute', type: 'compute',
useMerge: skipUndoChain, useMerge: skipUndoChain,
compute: (v) => (_.isFunction(value) ? value(v) : value), compute: v => (_.isFunction(value) ? value(v) : value),
}), }),
[dispatchModel] [dispatchModel]
); );
@@ -94,14 +94,14 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
}, [sessionId, socket]); }, [sessionId, socket]);
React.useEffect(() => { React.useEffect(() => {
changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, busy })); changeTab(tabid, setOpenedTabs, tab => ({ ...tab, busy }));
}, [busy]); }, [busy]);
useUpdateDatabaseForTab(tabVisible, conid, database); useUpdateDatabaseForTab(tabVisible, conid, database);
const handleExecute = React.useCallback(async () => { const handleExecute = React.useCallback(async () => {
if (busy) return; if (busy) return;
setExecuteNumber((num) => num + 1); setExecuteNumber(num => num + 1);
setVisibleResultTabs(true); setVisibleResultTabs(true);
let sesid = sessionId; let sesid = sessionId;
@@ -129,7 +129,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
}; };
const handleKeyDown = React.useCallback( const handleKeyDown = React.useCallback(
(e) => { e => {
if (e.keyCode == keycodes.f5) { if (e.keyCode == keycodes.f5) {
e.preventDefault(); e.preventDefault();
handleExecute(); handleExecute();
@@ -212,4 +212,4 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
); );
} }
QueryDesignTab.allowAddToFavorites = (props) => true; QueryDesignTab.allowAddToFavorites = props => true;

8
packages/web/src/tabs/QueryTab.js
View File

@@ -55,7 +55,7 @@ export default function QueryTab({ tabid, conid, database, initialArgs, tabVisib
}, [sessionId, socket]); }, [sessionId, socket]);
React.useEffect(() => { React.useEffect(() => {
changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, busy })); changeTab(tabid, setOpenedTabs, tab => ({ ...tab, busy }));
}, [busy]); }, [busy]);
useUpdateDatabaseForTab(tabVisible, conid, database); useUpdateDatabaseForTab(tabVisible, conid, database);
@@ -63,7 +63,7 @@ export default function QueryTab({ tabid, conid, database, initialArgs, tabVisib
const handleExecute = async () => { const handleExecute = async () => {
if (busy) return; if (busy) return;
setExecuteNumber((num) => num + 1); setExecuteNumber(num => num + 1);
setVisibleResultTabs(true); setVisibleResultTabs(true);
const selectedText = editorRef.current.editor.getSelectedText(); const selectedText = editorRef.current.editor.getSelectedText();
@@ -104,7 +104,7 @@ export default function QueryTab({ tabid, conid, database, initialArgs, tabVisib
} }
}; };
const handleMesageClick = (message) => { const handleMesageClick = message => {
// console.log('EDITOR', editorRef.current.editor); // console.log('EDITOR', editorRef.current.editor);
if (editorRef.current && editorRef.current.editor) { if (editorRef.current && editorRef.current.editor) {
editorRef.current.editor.gotoLine(message.line); editorRef.current.editor.gotoLine(message.line);
@@ -179,4 +179,4 @@ export default function QueryTab({ tabid, conid, database, initialArgs, tabVisib
); );
} }
QueryTab.allowAddToFavorites = (props) => true; QueryTab.allowAddToFavorites = props => true;

12
packages/web/src/tabs/ShellTab.js
View File

@@ -35,7 +35,7 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
const socket = useSocket(); const socket = useSocket();
React.useEffect(() => { React.useEffect(() => {
changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, busy })); changeTab(tabid, setOpenedTabs, tab => ({ ...tab, busy }));
}, [busy]); }, [busy]);
const editorRef = React.useRef(null); const editorRef = React.useRef(null);
@@ -55,14 +55,14 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
const handleExecute = async () => { const handleExecute = async () => {
if (busy) return; if (busy) return;
setExecuteNumber((num) => num + 1); setExecuteNumber(num => num + 1);
const selectedText = editorRef.current.editor.getSelectedText(); const selectedText = editorRef.current.editor.getSelectedText();
let runid = runnerId; let runid = runnerId;
const resp = await axios.post('runners/start', { const resp = await axios.post('runners/start', {
script: selectedText script: selectedText
? [...(editorData || '').matchAll(requireRegex)].map((x) => `${x[1]}\n`).join('') + ? [...(editorData || '').matchAll(requireRegex)].map(x => `${x[1]}\n`).join('') +
[...(editorData || '').matchAll(initRegex)].map((x) => `${x[1]}\n`).join('') + [...(editorData || '').matchAll(initRegex)].map(x => `${x[1]}\n`).join('') +
selectedText selectedText
: editorData, : editorData,
}); });
@@ -87,7 +87,7 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
const handleEdit = () => { const handleEdit = () => {
const jsonTextMatch = (editorData || '').match(configRegex); const jsonTextMatch = (editorData || '').match(configRegex);
if (jsonTextMatch) { if (jsonTextMatch) {
showModal((modalState) => ( showModal(modalState => (
<ImportExportModal modalState={modalState} initialValues={JSON.parse(jsonTextMatch[1])} /> <ImportExportModal modalState={modalState} initialValues={JSON.parse(jsonTextMatch[1])} />
)); ));
} }
@@ -140,4 +140,4 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
); );
} }
ShellTab.allowAddToFavorites = (props) => true; ShellTab.allowAddToFavorites = props => true;

2
packages/web/src/tabs/TableDataTab.js
View File

@@ -28,4 +28,4 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
} }
TableDataTab.matchingProps = ['conid', 'database', 'schemaName', 'pureName']; TableDataTab.matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
TableDataTab.allowAddToFavorites = (props) => true; TableDataTab.allowAddToFavorites = props => true;

22
packages/web/src/tabs/TableStructureTab.js
View File

@@ -14,7 +14,7 @@ const WhitePage = styled.div`
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: ${(props) => props.theme.main_background}; background-color: ${props => props.theme.main_background};
overflow: auto; overflow: auto;
`; `;
@@ -54,7 +54,7 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
fieldName="notNull" fieldName="notNull"
header="Not NULL" header="Not NULL"
sortable={true} sortable={true}
formatter={(row) => (row.notNull ? 'YES' : 'NO')} formatter={row => (row.notNull ? 'YES' : 'NO')}
/> />
<TableColumn fieldName="dataType" header="Data Type" sortable={true} /> <TableColumn fieldName="dataType" header="Data Type" sortable={true} />
<TableColumn fieldName="defaultValue" header="Default value" sortable={true} /> <TableColumn fieldName="defaultValue" header="Default value" sortable={true} />
@@ -62,14 +62,14 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
fieldName="isSparse" fieldName="isSparse"
header="Is Sparse" header="Is Sparse"
sortable={true} sortable={true}
formatter={(row) => (row.isSparse ? 'YES' : 'NO')} formatter={row => (row.isSparse ? 'YES' : 'NO')}
/> />
<TableColumn fieldName="computedExpression" header="Computed Expression" sortable={true} /> <TableColumn fieldName="computedExpression" header="Computed Expression" sortable={true} />
<TableColumn <TableColumn
fieldName="isPersisted" fieldName="isPersisted"
header="Is Persisted" header="Is Persisted"
sortable={true} sortable={true}
formatter={(row) => (row.isPersisted ? 'YES' : 'NO')} formatter={row => (row.isPersisted ? 'YES' : 'NO')}
/> />
{/* {_.includes(dbCaps.columnListOptionalColumns, 'referencedTableNamesFormatted') && ( {/* {_.includes(dbCaps.columnListOptionalColumns, 'referencedTableNamesFormatted') && (
<TableColumn fieldName="referencedTableNamesFormatted" header="References" sortable={true} /> <TableColumn fieldName="referencedTableNamesFormatted" header="References" sortable={true} />
@@ -101,7 +101,7 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
<TableColumn <TableColumn
fieldName="columns" fieldName="columns"
header="Columns" header="Columns"
formatter={(row) => row.columns.map((x) => x.columnName).join(', ')} formatter={row => row.columns.map(x => x.columnName).join(', ')}
/> />
</ObjectListControl> </ObjectListControl>
@@ -109,13 +109,13 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
<TableColumn <TableColumn
fieldName="baseColumns" fieldName="baseColumns"
header="Base columns" header="Base columns"
formatter={(row) => row.columns.map((x) => x.columnName).join(', ')} formatter={row => row.columns.map(x => x.columnName).join(', ')}
/> />
<TableColumn fieldName="refTable" header="Referenced table" formatter={(row) => row.refTableName} /> <TableColumn fieldName="refTable" header="Referenced table" formatter={row => row.refTableName} />
<TableColumn <TableColumn
fieldName="refColumns" fieldName="refColumns"
header="Referenced columns" header="Referenced columns"
formatter={(row) => row.columns.map((x) => x.refColumnName).join(', ')} formatter={row => row.columns.map(x => x.refColumnName).join(', ')}
/> />
<TableColumn fieldName="updateAction" header="ON UPDATE" /> <TableColumn fieldName="updateAction" header="ON UPDATE" />
<TableColumn fieldName="deleteAction" header="ON DELETE" /> <TableColumn fieldName="deleteAction" header="ON DELETE" />
@@ -125,13 +125,13 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
<TableColumn <TableColumn
fieldName="baseColumns" fieldName="baseColumns"
header="Base columns" header="Base columns"
formatter={(row) => row.columns.map((x) => x.columnName).join(', ')} formatter={row => row.columns.map(x => x.columnName).join(', ')}
/> />
<TableColumn fieldName="baseTable" header="Base table" formatter={(row) => row.pureName} /> <TableColumn fieldName="baseTable" header="Base table" formatter={row => row.pureName} />
<TableColumn <TableColumn
fieldName="refColumns" fieldName="refColumns"
header="Referenced columns" header="Referenced columns"
formatter={(row) => row.columns.map((x) => x.refColumnName).join(', ')} formatter={row => row.columns.map(x => x.refColumnName).join(', ')}
/> />
<TableColumn fieldName="updateAction" header="ON UPDATE" /> <TableColumn fieldName="updateAction" header="ON UPDATE" />
<TableColumn fieldName="deleteAction" header="ON DELETE" /> <TableColumn fieldName="deleteAction" header="ON DELETE" />

4
packages/web/src/tabs/ViewDataTab.js
View File

@@ -15,7 +15,7 @@ export default function ViewDataTab({ conid, database, schemaName, pureName, tab
const [config, setConfig] = useGridConfig(tabid); const [config, setConfig] = useGridConfig(tabid);
const [cache, setCache] = React.useState(createGridCache()); const [cache, setCache] = React.useState(createGridCache());
const [changeSetState, dispatchChangeSet] = useUndoReducer(createChangeSet()); const [changeSetState, dispatchChangeSet] = useUndoReducer(createChangeSet());
const extensions = useExtensions() const extensions = useExtensions();
useUpdateDatabaseForTab(tabVisible, conid, database); useUpdateDatabaseForTab(tabVisible, conid, database);
const connection = useConnectionInfo({ conid }); const connection = useConnectionInfo({ conid });
@@ -56,4 +56,4 @@ export default function ViewDataTab({ conid, database, schemaName, pureName, tab
} }
ViewDataTab.matchingProps = ['conid', 'database', 'schemaName', 'pureName']; ViewDataTab.matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
ViewDataTab.allowAddToFavorites = (props) => true; ViewDataTab.allowAddToFavorites = props => true;

2
packages/web/src/theme/colorUtil.js
View File

@@ -8,7 +8,7 @@ export function hexToRgb(rgb) {
if (!rgb.match(/^#[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]$/)) { if (!rgb.match(/^#[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]$/)) {
throw new Error(`Ivalid RGB color: ${rgb}`); throw new Error(`Ivalid RGB color: ${rgb}`);
} }
return [rgb.substring(1, 3), rgb.substring(3, 5), rgb.substring(5, 7)].map((x) => parseInt(x, 16)); return [rgb.substring(1, 3), rgb.substring(3, 5), rgb.substring(5, 7)].map(x => parseInt(x, 16));
} }
function componentToHex(c) { function componentToHex(c) {

2
packages/web/src/themes/ThemeHelmet.js
View File

@@ -57,7 +57,7 @@ export default function ThemeHelmet() {
} }
${_.flatten( ${_.flatten(
_.keys(theme.main_palettes).map((color) => _.keys(theme.main_palettes).map(color =>
theme.main_palettes[color].map((code, index) => `.color-${color}-${index + 1} { color: ${code} }`) theme.main_palettes[color].map((code, index) => `.color-${color}-${index + 1} { color: ${code} }`)
) )
).join('\n')} ).join('\n')}

4
packages/web/src/utility/FormArgumentList.js
View File

@@ -17,7 +17,7 @@ function FormArgument({ arg, namePrefix }) {
if (arg.type == 'select') { if (arg.type == 'select') {
return ( return (
<FormSelectField label={arg.label} name={name}> <FormSelectField label={arg.label} name={name}>
{arg.options.map((opt) => {arg.options.map(opt =>
_.isString(opt) ? <option value={opt}>{opt}</option> : <option value={opt.value}>{opt.name}</option> _.isString(opt) ? <option value={opt}>{opt}</option> : <option value={opt.value}>{opt.name}</option>
)} )}
</FormSelectField> </FormSelectField>
@@ -34,7 +34,7 @@ export default function FormArgumentList({ args, onChangeValues = undefined, nam
return ( return (
<FormArgumentsWrapper> <FormArgumentsWrapper>
{' '} {' '}
{args.map((arg) => ( {args.map(arg => (
<FormArgument arg={arg} key={arg.name} namePrefix={namePrefix} /> <FormArgument arg={arg} key={arg.name} namePrefix={namePrefix} />
))} ))}
</FormArgumentsWrapper> </FormArgumentsWrapper>

4
packages/web/src/utility/FormProvider.js
View File

@@ -17,7 +17,7 @@ export function FormProvider({ children, initialValues = {}, template = FormFiel
export function FormProviderCore({ children, values, setValues, template = FormFieldTemplateDefault }) { export function FormProviderCore({ children, values, setValues, template = FormFieldTemplateDefault }) {
const [submitAction, setSubmitAction] = React.useState(null); const [submitAction, setSubmitAction] = React.useState(null);
const handleEnter = React.useCallback( const handleEnter = React.useCallback(
(e) => { e => {
if (e.keyCode == keycodes.enter && submitAction && submitAction.action) { if (e.keyCode == keycodes.enter && submitAction && submitAction.action) {
e.preventDefault(); e.preventDefault();
submitAction.action(values); submitAction.action(values);
@@ -33,7 +33,7 @@ export function FormProviderCore({ children, values, setValues, template = FormF
}, [handleEnter]); }, [handleEnter]);
const setFieldValue = React.useCallback( const setFieldValue = React.useCallback(
(field, value) => (field, value) =>
setValues((v) => ({ setValues(v => ({
...v, ...v,
[field]: value, [field]: value,
})), })),

4
packages/web/src/utility/ObjectListControl.js
View File

@@ -9,7 +9,7 @@ const ObjectListWrapper = styled.div`
`; `;
const ObjectListHeader = styled.div` const ObjectListHeader = styled.div`
background-color: ${(props) => props.theme.gridheader_background}; background-color: ${props => props.theme.gridheader_background};
padding: 5px; padding: 5px;
`; `;
@@ -36,7 +36,7 @@ export default function ObjectListControl({ collection = [], title, showIfEmpty
</ObjectListHeader> </ObjectListHeader>
<ObjectListBody> <ObjectListBody>
<TableControl rows={collection}> <TableControl rows={collection}>
<TableColumn fieldName="displayName" header="Name" formatter={(data) => <NameComponent data={data} />} /> <TableColumn fieldName="displayName" header="Name" formatter={data => <NameComponent data={data} />} />
{children} {children}
</TableControl> </TableControl>
</ObjectListBody> </ObjectListBody>

Some files were not shown because too many files have changed in this diff Show More