diff --git a/less/TableStyles/queryBuilder.less b/less/TableStyles/queryBuilder.less index 90553e7b9..61f9d6b75 100644 --- a/less/TableStyles/queryBuilder.less +++ b/less/TableStyles/queryBuilder.less @@ -99,7 +99,7 @@ .tablesQueryTab { padding-left: @MediumSpace; width: 100%; - margin-bottom: @LargeSpace; + margin-bottom: 100px; position: relative; height: 100%; } @@ -534,6 +534,44 @@ input::-webkit-inner-spin-button { margin-bottom: 5px; } +.query-document-detail-list { + overflow-x: hidden; + height: 100%; +} +.query-table-clause-container { + max-height: 80px; + overflow: scroll; + overflow-x: hidden; +} +.query-tab-document-pagination { + display: flex; + flex-direction: column; + position: absolute; + bottom: 0; + padding-left: @MediumSpace; + padding-bottom: 45px; +} +.pagination { + margin: 15px 0 !important; + li > .item-link { + position: relative; + float: left; + padding: 6px 12px; + margin-left: -1px; + line-height: 1.42857143; + text-decoration: none; + background-color: #fff; + border: 1px solid #ddd; + cursor: pointer; + &:hover { + font-weight: bold; + background: #eef7ff; + } + } +} +// .pagination > li > div { +// } + /* @media only screen and (max-width: 1200px) { .clause-table { diff --git a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx index 49d0424f4..20dbd8fa2 100644 --- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx +++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx @@ -107,7 +107,7 @@ export const AddTableEntityPanel: FunctionComponent = event.preventDefault(); const entity: Entities.ITableEntity = entityFromAttributes(entities); - const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity); + await tableDataClient.createDocument(queryTablesTab.collection, entity); // await tableEntityListViewModel.addEntityToCache(newEntity); reloadEntities(); closeSidePanel(); diff --git a/src/Explorer/Panes/Tables/EditTableEntityPanel.tsx b/src/Explorer/Panes/Tables/EditTableEntityPanel.tsx index 7adb9e9ca..8eb24773e 100644 --- a/src/Explorer/Panes/Tables/EditTableEntityPanel.tsx +++ b/src/Explorer/Panes/Tables/EditTableEntityPanel.tsx @@ -8,7 +8,7 @@ import { TableEntity } from "../../../Common/TableEntity"; import { useSidePanel } from "../../../hooks/useSidePanel"; import { userContext } from "../../../UserContext"; import * as TableConstants from "../../Tables/Constants"; -import * as DataTableUtilities from "../../Tables/DataTable/DataTableUtilities"; +// import * as DataTableUtilities from "../../Tables/DataTable/DataTableUtilities"; import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel"; import * as Entities from "../../Tables/Entities"; import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataClient"; @@ -204,48 +204,44 @@ export const EditTableEntityPanel: FunctionComponent const entity: Entities.ITableEntity = entityFromAttributes(entities); const newTableDataClient = userContext.apiType === "Cassandra" ? cassandraApiClient : tableDataClient; const originalDocumentData = userContext.apiType === "Cassandra" ? originalDocument[0] : originalDocument; - const newEntity: Entities.ITableEntity = await newTableDataClient.updateDocument( - queryTablesTab.collection, - originalDocumentData, - entity - ); - await tableEntityListViewModel.updateCachedEntity(newEntity); - if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) { - // tableEntityListViewModel.redrawTableThrottled(); - reloadEntities(); - } - tableEntityListViewModel.selected.removeAll(); - tableEntityListViewModel.selected.push(newEntity); + await newTableDataClient.updateDocument(queryTablesTab.collection, originalDocumentData, entity); + // await tableEntityListViewModel.updateCachedEntity(newEntity); + // if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) { + // tableEntityListViewModel.redrawTableThrottled(); + reloadEntities(); + // } + // tableEntityListViewModel.selected.removeAll(); + // tableEntityListViewModel.selected.push(newEntity); closeSidePanel(); }; - const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => { - let newHeaders: string[] = []; - const keys = Object.keys(newEntity); - keys && - keys.forEach((key: string) => { - if ( - !_.contains(viewModel.headers, key) && - key !== TableEntityProcessor.keyProperties.attachments && - key !== TableEntityProcessor.keyProperties.etag && - key !== TableEntityProcessor.keyProperties.resourceId && - key !== TableEntityProcessor.keyProperties.self && - (!(userContext.apiType === "Cassandra") || key !== TableConstants.EntityKeyNames.RowKey) - ) { - newHeaders.push(key); - } - }); + // const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => { + // let newHeaders: string[] = []; + // const keys = Object.keys(newEntity); + // keys && + // keys.forEach((key: string) => { + // if ( + // !_.contains(viewModel.headers, key) && + // key !== TableEntityProcessor.keyProperties.attachments && + // key !== TableEntityProcessor.keyProperties.etag && + // key !== TableEntityProcessor.keyProperties.resourceId && + // key !== TableEntityProcessor.keyProperties.self && + // (!(userContext.apiType === "Cassandra") || key !== TableConstants.EntityKeyNames.RowKey) + // ) { + // newHeaders.push(key); + // } + // }); - let newHeadersInserted = false; - if (newHeaders.length) { - if (!DataTableUtilities.checkForDefaultHeader(viewModel.headers)) { - newHeaders = viewModel.headers.concat(newHeaders); - } - viewModel.updateHeaders(newHeaders, /* notifyColumnChanges */ true, /* enablePrompt */ false); - newHeadersInserted = true; - } - return newHeadersInserted; - }; + // let newHeadersInserted = false; + // if (newHeaders.length) { + // if (!DataTableUtilities.checkForDefaultHeader(viewModel.headers)) { + // newHeaders = viewModel.headers.concat(newHeaders); + // } + // viewModel.updateHeaders(newHeaders, /* notifyColumnChanges */ true, /* enablePrompt */ false); + // newHeadersInserted = true; + // } + // return newHeadersInserted; + // }; // Add new entity row const addNewEntity = (): void => { diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx index 39c13f556..08671d394 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx @@ -66,6 +66,10 @@ export interface IQueryTablesTabComponentStates { isLoading: boolean; queryErrorMessage: string; hasQueryError: boolean; + currentPage: number; + currentStartIndex: number; + fromDocument: number; + toDocument: number; } export interface IQueryTableRowsType { diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx index 79c934789..7ddb46530 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx @@ -63,6 +63,8 @@ export interface Button { isSelected?: boolean; } +const PAGESIZE = 10; + class QueryTablesTabComponent extends Component { public collection: ViewModels.Collection; public _queryViewModel: QueryViewModel; @@ -163,34 +165,13 @@ class QueryTablesTabComponent extends Component 0) { Object.keys(this.state.selection.getSelection()[0]).map((key, index) => { if (key === documentKey) { @@ -254,6 +239,11 @@ class QueryTablesTabComponent extends Component { if (isInitialLoad && headers.length > 0) { @@ -488,6 +477,10 @@ class QueryTablesTabComponent extends Component { + if (!this.state.rowSelected) { + window.alert("Please select entity to edit"); + return undefined; + } useSidePanel .getState() .openSidePanel( @@ -504,7 +497,8 @@ class QueryTablesTabComponent extends Component { - if (!this.state.selectedItems) { + if (!this.state.rowSelected) { + window.alert("Please select entity to delete"); return undefined; } const entitiesToDelete: Entities.ITableEntity[] = this.state.selectedItems; @@ -517,12 +511,10 @@ class QueryTablesTabComponent extends Component { - return this.state.tableEntityListViewModel.removeEntitiesFromCache(entitiesToDelete).then(() => { - this.setState({ - isLoading: true, - }); - this.loadEntities(false); + this.setState({ + isLoading: true, }); + this.loadEntities(false); }); } }; @@ -748,7 +740,6 @@ class QueryTablesTabComponent extends Component): void { - console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 723 ~ QueryTablesTabComponent ~ event", event); if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) { this.state.queryViewModel.queryBuilderViewModel().onAddNewClauseKeyDown(event); this.onAddNewClause(); @@ -763,6 +754,65 @@ class QueryTablesTabComponent extends Component { + let currentStartIndex: number; + let fromDocument: number; + let toDocument: number; + let filteredItems: IDocument[]; + // eslint-disable-next-line no-console + switch (action) { + case "NEXT": + fromDocument = this.state.currentStartIndex; + toDocument = fromDocument + pageSize; + currentStartIndex = toDocument; + if (toDocument <= items.length) { + filteredItems = items.slice(fromDocument, toDocument); + } else { + filteredItems = items.slice(fromDocument, items.length); + toDocument = items.length; + } + break; + + case "PREVIOUS": + fromDocument = this.state.currentStartIndex - pageSize * 2; + toDocument = fromDocument + pageSize; + currentStartIndex = toDocument; + if (fromDocument >= 0) { + filteredItems = items.slice(fromDocument, toDocument); + } else { + filteredItems = items.slice(0, toDocument); + fromDocument = 0; + } + break; + + case "FIRST": + fromDocument = 0; + toDocument = fromDocument + pageSize; + currentStartIndex = toDocument; + filteredItems = items.slice(fromDocument, toDocument); + break; + + case "LAST": + if (items.length % pageSize === 0) { + fromDocument = items.length - pageSize; + } else { + fromDocument = items.length - (items.length % pageSize); + } + toDocument = items.length; + currentStartIndex = fromDocument + pageSize; + filteredItems = items.slice(fromDocument, toDocument); + break; + } + if (filteredItems.length > 0) { + this.setState({ + currentStartIndex: currentStartIndex, + fromDocument: fromDocument, + toDocument: toDocument, + items: filteredItems, + }); + } + }; + render(): JSX.Element { useCommandBar.getState().setContextButtons(this.getTabsButtons()); const { queryTableRows } = this.state; @@ -830,7 +880,7 @@ class QueryTablesTabComponent extends Component - <> +
{queryTableRows.map((queryTableRow, index) => ( ))} - +
} {this.state.items.length > 0 && !this.state.isLoading && ( No data available in table )}
+
+ {this.state.items.length > 0 && !this.state.isLoading && ( + <> +
    +
  • +
    + this.handlePagination("FIRST", this.state.originalItems, this.state.currentStartIndex, PAGESIZE) + } + > + First +
    +
    • +
  • +
    + this.handlePagination( + "PREVIOUS", + this.state.originalItems, + this.state.currentStartIndex, + PAGESIZE + ) + } + > + Previous +
    +
    • +
  • +
    + this.handlePagination("NEXT", this.state.originalItems, this.state.currentStartIndex, PAGESIZE) + } + > + Next +
    +
    • +
  • +
    + this.handlePagination("LAST", this.state.originalItems, this.state.currentStartIndex, PAGESIZE) + } + > + Last +
    +
    • +
+ + Results {this.state.fromDocument + 1} -{" "} + {this.state.originalItems.length >= this.state.toDocument + ? this.state.toDocument + : this.state.items.length}{" "} + of {this.state.originalItems.length} + + + )} +
); }