add table page

src/browser/components/themed-ui/input/editable-text.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface EditableTextProps {
+  editing: boolean
+  onEditingChange?: (value: boolean) => void
+  renderInput: () => React.ReactElement
+  renderText: () => React.ReactElement
+}
+
+export const EditableText: React.FC<EditableTextProps> = (props: EditableTextProps) => {
+  const {
+    editing,
+    renderInput,
+    renderText,
+  } = props;
+  if (editing) {
+    return renderInput();
+  } else {
+    return renderText();
+  }
+};

src/browser/pages/main/main-menu.tsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+import ColorId from '../../styles/ColorId';
+import React from 'react';
+
+const MainMenu = styled.ul`
+  height: 100%;
+  background-color: ${props => props.theme[ColorId.tab_inactiveBackground]};
+  color: ${props => props.theme[ColorId.tab_inactiveForeground]};
+  margin: 0;
+  padding: 0;
+`;
+
+interface MenuItemProps {
+  className?: string
+  active?: boolean
+  onClick?: () => void
+}
+
+const defaultMenuItemProps: MenuItemProps = {
+  active: true,
+  onClick: () => {
+  },
+};
+
+const MenuItem: React.FC<MenuItemProps> = (props) => {
+  let { className, children, active, onClick } = props;
+  className += active ? ' active' : '';
+  return (
+    <li className={className} onClick={onClick}>{children}</li>
+  );
+};
+
+MenuItem.defaultProps = defaultMenuItemProps;
+
+const MainMenuItem = styled(MenuItem)`
+  padding: 10px;
+  cursor: pointer;
+  color:${props => props.theme[ColorId.tab_inactiveForeground]};
+  background-color: ${props => props.theme[ColorId.tab_inactiveBackground]};
+  border-left: 2px solid ${props => props.theme[ColorId.tab_inactiveBackground]};
+  &.active {
+    color:${props => props.theme[ColorId.tab_activeForeground]};
+    border-left: 2px solid ${props => props.theme[ColorId.tab_activeForeground]};
+  }
+  &:hover {
+    color:${props => props.theme[ColorId.tab_activeForeground]};
+  }
+`;
+
+export {
+  MainMenu,
+  MainMenuItem,
+};
+

src/browser/pages/main/main.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Route, Switch, useLocation, useRouteMatch } from 'react-router-dom';
+import SearchPage from '../search/search-page';
+import App from '../app/App';
+import styled from 'styled-components';
+import { MainMenu, MainMenuItem } from './main-menu';
+import { Icon } from 'antd';
+import { useDispatch } from 'react-redux';
+import { push } from 'connected-react-router';
+import { TablePage } from '../table/table';
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+`;
+
+const SideBar = styled.div`
+  height: 100vh;
+`;
+
+const Content = styled.div`
+  flex: 1;
+`;
+
+const StyledIcon = styled(Icon)`
+  font-size: 2em;
+`;
+
+const MainPage: React.FC = () => {
+  // @ts-ignore
+  const { path, url } = useRouteMatch();
+  const location = useLocation();
+  const dispatch = useDispatch();
+
+  function goto(routeName: string) {
+    dispatch(push(`${url}/${routeName}`));
+  }
+
+  return (
+    <>
+      <Container>
+        <SideBar>
+          <MainMenu>
+            <MainMenuItem
+              key={'search'}
+              active={location.pathname.includes('search')}
+              onClick={() => goto('search')}
+            >
+              {/*<Link to={`${url}/search`}>search</Link>*/}
+              <StyledIcon type={'search'}/>
+            </MainMenuItem>
+            <MainMenuItem
+              key={'table'}
+              active={location.pathname.includes('table')}
+              onClick={() => goto('table')}
+            >
+              {/*<Link to={`${url}/table`}>table</Link>*/}
+              <StyledIcon type={'table'}/>
+            </MainMenuItem>
+            {/*<MainMenuItem*/}
+            {/*  key={'chart'}*/}
+            {/*  active={location.pathname.includes('chart')}*/}
+            {/*  onClick={() => goto('chart')}*/}
+            {/*>*/}
+            {/*  /!*<Link to={`${url}/chart`}>chart</Link>*!/*/}
+            {/*  <StyledIcon type={'pie-chart'}/>*/}
+            {/*</MainMenuItem>*/}
+          </MainMenu>
+        </SideBar>
+        <Content>
+          <Switch>
+            <Route path={`${path}/search`} component={SearchPage}/>
+            <Route path={`${path}/table`} component={TablePage}/>
+            <Route path={`${path}/chart`} component={App}/>
+            <Route component={SearchPage}/>
+          </Switch>
+        </Content>
+      </Container>
+    </>
+  );
+};
+
+export { MainPage };

src/browser/pages/models.ts

@@ -9,6 +9,7 @@ import searchToolBar from './search/tool-bar/search-tool-bar-model';
 import transientModel from './transient-model';
 import overview from './search/views/overview/overview-model';
 import developer from './developer/developer-model';
+import { tableModel } from './table/table-model';
 
 export {
   root,
@@ -22,5 +23,6 @@ export {
   searchToolBar,
   overview,
   developer,
+  tableModel,
 };
 

src/browser/pages/page-router.tsx

@@ -1,26 +1,26 @@
 import React from 'react';
 import App from './app/App';
 import { Route, Switch } from 'react-router-dom';
-import SearchPage from './search/search-page';
 import SettingPage from './setting/setting-page';
 import PopupPage from './popup/popup-page';
 import LoginPage from './login/login-page';
 import DeveloperPage from './developer/developer-page';
+import { MainPage } from './main/main';
 
 const PageRouter = () => {
   return (
     <>
       <Switch>
         <Route path="/app" component={App}/>
-        <Route path="/search" component={SearchPage}/>
+        <Route path="/main" component={MainPage}/>
         <Route path="/setting" component={SettingPage}/>
         <Route path="/popup" component={PopupPage}/>
         <Route path="/login" component={LoginPage}/>
         <Route path="/developer" component={DeveloperPage}/>
-        <Route component={SearchPage}/>
+        <Route component={MainPage}/>
       </Switch>
     </>
   );
 };
 
-export default PageRouter;
+export default PageRouter;

src/browser/pages/search/note/inline-edit-text.tsx

@@ -4,10 +4,11 @@ import ColorId from '../../../styles/ColorId';
 import { Select, Spin } from 'antd';
 import styles from './inline-edit-text.module.scss';
 import { ThemedInput } from '../../../components/themed-ui/input/input';
-import { DataWrapper, SearchNoteState } from './search-note-model';
+import { SearchNoteState } from './search-note-model';
 import { ISearchHistory } from '../../../../common/model/history';
 import { SelectValue } from 'antd/es/select';
 import { useDispatch, useSelector } from 'react-redux';
+import { DataWrapper } from '../../../../common/model/data-wrapper';
 
 const Suggestion = styled.div`
   width: 100%;

src/browser/pages/search/note/search-note-model.ts

@@ -1,27 +1,17 @@
 import { rendererContainer } from '../../../../common/container/renderer-container';
 import { INote } from '../../../../common/model/note';
 import { Model } from '../../../redux/common/redux-model';
-import { all, call, cancel, delay, fork, put, select, take } from '@redux-saga/core/effects';
+import { call, cancel, delay, fork, put, select, take } from '@redux-saga/core/effects';
 import { NoteService, NoteServiceToken } from '../../../../common/services/db/note-service';
 import { ISearchHistory } from '../../../../common/model/history';
 import { HistoryService, HistoryServiceToken } from '../../../../common/services/db/history-service';
 import _ from 'lodash';
 import { RootState } from '../../root-model';
+import { DataWrapper } from '../../../../common/model/data-wrapper';
 
 const noteService = rendererContainer.get<NoteService>(NoteServiceToken);
 const historyService = rendererContainer.get<HistoryService>(HistoryServiceToken);
 
-export interface DataWrapper<T> {
-  id: number,
-  editing: boolean,
-  typing: boolean,
-  dirty: boolean,
-  syncing: boolean,
-  showSpinner: boolean,
-  oldData: T,
-  newData: T,
-}
-
 export interface SearchNoteState {
   noteInDb: Maybe<INote>,
   suggests: string[],

src/browser/pages/search/panel/search-panel-menu.tsx

@@ -3,7 +3,7 @@ import { Link, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 import ColorId from '../../../styles/ColorId';
 
-const Menu = styled.ul`
+const SearchPanelMenu = styled.ul`
   background-color: ${props => props.theme[ColorId.tab_inactiveBackground]};
   color: ${props => props.theme[ColorId.tab_inactiveForeground]};
   margin: 0;
@@ -22,7 +22,7 @@ const MenuItemElement: React.FC<any> = (props) => {
   );
 };
 
-const MenuItem = styled(MenuItemElement)`
+const SearchPanelMenuItem = styled(MenuItemElement)`
     display: inline-block;
     //border-bottom: none;
     //position: relative;
@@ -54,7 +54,7 @@ const MenuItem = styled(MenuItemElement)`
 `;
 
 export {
-  Menu,
-  MenuItem
+  SearchPanelMenu,
+  SearchPanelMenuItem
 };
 

src/browser/pages/search/search-page.tsx

@@ -5,7 +5,7 @@ import SearchToolBar from './tool-bar/search-tool-bar';
 import ColorId from '../../styles/ColorId';
 import { SearchPanelState } from './panel/search-panel-model';
 import { useDispatch, useSelector } from 'react-redux';
-import { Menu, MenuItem } from './panel/search-panel-menu';
+import { SearchPanelMenu, SearchPanelMenuItem } from './panel/search-panel-menu';
 import { ThemedContent } from '../../components/themed-ui/content/content';
 import styled from 'styled-components';
 import SearchNote from './note/search-note';
@@ -77,7 +77,7 @@ export default () => {
 
   const engineMenuItems = Object.keys(searchPanelState.searchResultMap)
     .filter(e => !!e)
-    .map(e => <MenuItem key={e} to={`/search/engine_view/${e}`}>{e}</MenuItem>);
+    .map(e => <SearchPanelMenuItem key={e} to={`/search/engine_view/${e}`}>{e}</SearchPanelMenuItem>);
   return (
     <SearchPage>
       <Header>
@@ -86,13 +86,13 @@ export default () => {
       </Header>
       <Content>
         <nav>
-          <Menu>
+          <SearchPanelMenu>
             {/*<MenuItem to={'/search/overview'}>OVERVIEW</MenuItem>*/}
             {engineMenuItems}
             {/*{histories.length ? <MenuItem to={'/search/history'}></MenuItem> : null}*/}
             {/*<MenuItem to={'/search/tab1'}>tab1</MenuItem>*/}
             {/*<MenuItem to={'/search/tab2'}>tab2</MenuItem>*/}
-          </Menu>
+          </SearchPanelMenu>
         </nav>
         <ThemedContent>
           {showSearchNote ?