From 4f632b234f194052d5ec136222d573fcfb83c234 Mon Sep 17 00:00:00 2001 From: vaidankarswapnil Date: Thu, 29 Jul 2021 12:15:21 +0530 Subject: [PATCH] DetailsList implemented --- .../Tables/DataTable/DataTableViewModel.ts | 40 +-- .../DataTable/TableEntityListViewModel.ts | 61 ++-- .../Tables/QueryBuilder/QueryViewModel.tsx | 4 +- .../QueryTablesTabComponent.tsx | 290 ++++++++++++------ 4 files changed, 255 insertions(+), 140 deletions(-) diff --git a/src/Explorer/Tables/DataTable/DataTableViewModel.ts b/src/Explorer/Tables/DataTable/DataTableViewModel.ts index 56b34428b..2650299ee 100644 --- a/src/Explorer/Tables/DataTable/DataTableViewModel.ts +++ b/src/Explorer/Tables/DataTable/DataTableViewModel.ts @@ -25,6 +25,7 @@ abstract class DataTableViewModel { /* Observables */ public items = ko.observableArray(); + public items1: Entities.ITableEntity[]; public selected = ko.observableArray(); public table: DataTables.DataTable; @@ -54,6 +55,7 @@ abstract class DataTableViewModel { constructor() { this.items([]); + this.items1 = []; this.selected([]); // Late bound this.dataTableOperationManager = null; @@ -172,36 +174,38 @@ abstract class DataTableViewModel { } protected renderPage( - renderCallBack: any, - draw: number, + // renderCallBack: any, + // draw: number, startIndex: number, - pageSize: number, - oSettings: any, - postRenderTasks: (startIndex: number, pageSize: number) => Promise = null + pageSize: number + // oSettings: any, + // postRenderTasks: (startIndex: number, pageSize: number) => Promise = null ) { - this.updatePaginationControls(oSettings); + // this.updatePaginationControls(oSettings); // pageSize < 0 means to show all data var endIndex = pageSize < 0 ? this.cache.length : startIndex + pageSize; var renderData = this.cache.data.slice(startIndex, endIndex); this.items(renderData); + this.items1 = renderData; console.log("🚀 ~ file: DataTableViewModel.ts ~ line 191 ~ DataTableViewModel ~ renderData", renderData); console.log("🚀 ~ file: DataTableViewModel.ts ~ line 192 ~ DataTableViewModel ~ this.items", this.items()); - var render: IDataTableRenderData = { - draw: draw, - aaData: renderData, - recordsTotal: this.cache.length, - recordsFiltered: this.cache.length, - }; + console.log("🚀 ~ file: DataTableViewModel.ts ~ line 192 ~ DataTableViewModel ~ this.items1", this.items1); + // var render: IDataTableRenderData = { + // draw: draw, + // aaData: renderData, + // recordsTotal: this.cache.length, + // recordsFiltered: this.cache.length, + // }; - if (!!postRenderTasks) { - postRenderTasks(startIndex, pageSize).then(() => { - this.table.rows().invalidate(); - }); - } - renderCallBack(render); + // if (!!postRenderTasks) { + // postRenderTasks(startIndex, pageSize).then(() => { + // this.table.rows().invalidate(); + // }); + // } + // renderCallBack(render); if (this.queryTablesTab.onLoadStartKey != null && this.queryTablesTab.onLoadStartKey != undefined) { TelemetryProcessor.traceSuccess( Action.Tab, diff --git a/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts b/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts index cbacfab01..1f9bbfd39 100644 --- a/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts +++ b/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts @@ -149,10 +149,10 @@ export default class TableEntityListViewModel extends DataTableViewModel { public updateHeaders(newHeaders: string[], notifyColumnChanges: boolean = false, enablePrompt: boolean = true): void { this.headers = newHeaders; - if (notifyColumnChanges) { - this.clearSelection(); - this.notifyColumnChanges(enablePrompt, this.queryTablesTab); - } + // if (notifyColumnChanges) { + // this.clearSelection(); + // this.notifyColumnChanges(enablePrompt, this.queryTablesTab); + // } } /** @@ -162,7 +162,7 @@ export default class TableEntityListViewModel extends DataTableViewModel { * fnCallback - is the render callback with data to render. * oSetting: current settings used for table initialization. */ - public renderNextPageAndupdateCache(sSource: any, aoData: any, fnCallback: any, oSettings: any) { + public renderNextPageAndupdateCache(sSource?: any, aoData?: any, fnCallback?: any, oSettings?: any): Promise { var tablePageSize: number; var draw: number; var prefetchNeeded = true; @@ -172,21 +172,21 @@ export default class TableEntityListViewModel extends DataTableViewModel { var prefetchThreshold = 10; var tableQuery = this.tableQuery; - for (var index in aoData) { - var data = aoData[index]; - if (data.name === "length") { - tablePageSize = data.value; - } - if (data.name === "start") { - this.tablePageStartIndex = data.value; - } - if (data.name === "draw") { - draw = data.value; - } - if (data.name === "order") { - columnSortOrder = data.value; - } - } + // for (var index in aoData) { + // var data = aoData[index]; + // if (data.name === "length") { + // tablePageSize = data.value; + // } + // if (data.name === "start") { + // this.tablePageStartIndex = data.value; + // } + // if (data.name === "draw") { + // draw = data.value; + // } + // if (data.name === "order") { + // columnSortOrder = data.value; + // } + // } // Try cache if valid. if (this.isCacheValid(tableQuery)) { // Check if prefetch needed. @@ -195,7 +195,7 @@ export default class TableEntityListViewModel extends DataTableViewModel { if (columnSortOrder && (!this.cache.sortOrder || !_.isEqual(this.cache.sortOrder, columnSortOrder))) { this.sortColumns(columnSortOrder, oSettings); } - this.renderPage(fnCallback, draw, this.tablePageStartIndex, tablePageSize, oSettings); + this.renderPage(this.tablePageStartIndex, tablePageSize); if ( !this.allDownloaded && this.tablePageStartIndex > 0 && // This is a case now that we can hit this as we re-construct table when we update column @@ -218,11 +218,11 @@ export default class TableEntityListViewModel extends DataTableViewModel { tablePageSize, downloadSize, draw, - fnCallback, oSettings, columnSortOrder ); } + return undefined; } public addEntityToCache(entity: Entities.ITableEntity): Q.Promise { @@ -402,7 +402,7 @@ export default class TableEntityListViewModel extends DataTableViewModel { tablePageSize: number, downloadSize: number, draw: number, - renderCallBack: Function, + // renderCallBack: Function, oSettings: any, columnSortOrder: any ): void { @@ -432,6 +432,10 @@ export default class TableEntityListViewModel extends DataTableViewModel { userContext.apiType === "Cassandra" ); var newHeaders: string[] = _.difference(selectedHeadersUnion, this.headers); + console.log( + "🚀 ~ file: TableEntityListViewModel.ts ~ line 435 ~ TableEntityListViewModel ~ .then ~ newHeaders", + newHeaders + ); if (newHeaders.length > 0) { // Any new columns found will be added into headers array, which will trigger a re-render of the DataTable. // So there is no need to call it here. @@ -440,8 +444,9 @@ export default class TableEntityListViewModel extends DataTableViewModel { if (columnSortOrder) { this.sortColumns(columnSortOrder, oSettings); } - this.renderPage(renderCallBack, draw, tablePageStartIndex, tablePageSize, oSettings); + // this.renderPage(renderCallBack, draw, tablePageStartIndex, tablePageSize, oSettings); } + this.renderPage(0, 100); } if (result.ExceedMaximumRetries) { @@ -449,6 +454,10 @@ export default class TableEntityListViewModel extends DataTableViewModel { } }) .catch((error: any) => { + console.log( + "🚀 ~ file: TableEntityListViewModel.ts ~ line 452 ~ TableEntityListViewModel ~ //constructor ~ error", + error + ); const parsedErrors = parseError(error); var errors = parsedErrors.map((error) => { return { @@ -562,6 +571,10 @@ export default class TableEntityListViewModel extends DataTableViewModel { } else { // Create cache. this.cache.data = entities; + console.log( + "🚀 ~ file: TableEntityListViewModel.ts ~ line 569 ~ TableEntityListViewModel ~ .then ~ this.cache.data", + this.cache.data + ); } this.cache.tableQuery = tableQuery; diff --git a/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx b/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx index 33b375089..dba4f48e6 100644 --- a/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx +++ b/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx @@ -160,7 +160,7 @@ export default class QueryViewModel { notify: "always", }); - public runQuery = (): DataTables.DataTable => { + public runQuery = (): void => { let filter = this.setFilter(); if (filter && userContext.apiType !== "Cassandra") { filter = filter.replace(/"/g, "'"); @@ -175,7 +175,7 @@ export default class QueryViewModel { this._tableEntityListViewModel.sqlQuery(this.setSqlFilter()); this._tableEntityListViewModel.cqlQuery(filter); - return this._tableEntityListViewModel.reloadTable(/*useSetting*/ false, /*resetHeaders*/ false); + // return this._tableEntityListViewModel.reloadTable(/*useSetting*/ false, /*resetHeaders*/ false); }; public clearQuery = (): DataTables.DataTable => { diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx index 1c33f8a42..2f8e6677e 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx @@ -1,3 +1,4 @@ +import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "@fluentui/react"; import * as ko from "knockout"; import React, { Component } from "react"; import QueryInformation from "../../../../images//QueryBuilder/QueryInformation_16x.png"; @@ -33,7 +34,11 @@ export interface Button { enabled: boolean; isSelected?: boolean; } - +export interface IDocument { + partitionKey: string; + rowKey: string; + timeStamp: string; +} export interface IQueryTablesTabComponentProps { tabKind: ViewModels.CollectionTabKind; title: string; @@ -58,6 +63,9 @@ interface IQueryTablesTabComponentStates { editEntityButton: Button; deleteEntityButton: Button; isHelperActive: boolean; + columns: IColumn[]; + items: IDocument[]; + isExpanded: boolean; } class QueryTablesTabComponent extends Component { @@ -86,9 +94,38 @@ class QueryTablesTabComponent extends Component(); - + public allItems: IDocument[]; + // public columns: IColumn[]; constructor(props: IQueryTablesTabComponentProps) { super(props); + // this.columns = []; + const columns: IColumn[] = [ + { + key: "column1", + name: "PartitionKey", + minWidth: 100, + maxWidth: 200, + data: String, + fieldName: "partitionKey", + // onRender: this.onRenderColumnItem, + }, + { + key: "column2", + name: "RowKey", + minWidth: 100, + maxWidth: 200, + data: String, + fieldName: "rowKey", + }, + { + key: "column3", + name: "Timestamp", + minWidth: 200, + maxWidth: 200, + data: String, + fieldName: "timeStamp", + }, + ]; this.container = props.collection && props.collection.container; this.tableCommands = new TableCommands(this.container); this.tableDataClient = this.container.tableDataClient; @@ -146,6 +183,9 @@ class QueryTablesTabComponent extends Component { - console.log( - "🚀 ~ file: QueryTablesTab.tsx ~ line 54 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.tableEntityListViewModel().items().length", - this.state.tableEntityListViewModel.items() - ); - if (this.state.tableEntityListViewModel.items().length > 0 && userContext.apiType === "Tables") { - // this.state.queryViewModel.queryBuilderViewModel.setExample(); - // console.log( - // "🚀 ~ file: QueryTablesTab.tsx ~ line 55 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.queryViewModel().queryBuilderViewModel().setExample()", - // this.state.queryViewModel.queryBuilderViewModel.setExample() - // ); - } - }); - this.props.queryTablesTab.container.tableDataClient.queryDocuments( - this.props.queryTablesTab.collection, - "SELECT * FROM c", - true - ); + // this.state.tableEntityListViewModel.items.subscribe(() => { + // console.log( + // "🚀 ~ file: QueryTablesTab.tsx ~ line 54 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.tableEntityListViewModel().items().length", + // this.state.tableEntityListViewModel.items() + // ); + // if (this.state.tableEntityListViewModel.items().length > 0 && userContext.apiType === "Tables") { + // // this.state.queryViewModel.queryBuilderViewModel.setExample(); + // // console.log( + // // "🚀 ~ file: QueryTablesTab.tsx ~ line 55 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.queryViewModel().queryBuilderViewModel().setExample()", + // // this.state.queryViewModel.queryBuilderViewModel.setExample() + // // ); + // } + // }); + // this.test(); + // this.state.tableEntityListViewModel.renderNextPageAndupdateCache(); + // setTimeout(() => { + // console.log("items > ", this.state.tableEntityListViewModel.cache.data); + // console.log("items > ", this.state.tableEntityListViewModel.items()); + // console.log("items1 > ", this.state.tableEntityListViewModel.items1); + // console.log("items1 > simple > ", this.tableEntityListViewModel1.items1); + // this.allItems = this.generateDetailsList(); + // this.setState({ + // items: this.allItems, + // }); + // // this.state = { + // // items: this.generateDetailsList() + // // } + // }, 10000); + // this.props.queryTablesTab.container.tableDataClient.queryDocuments( + // this.props.queryTablesTab.collection, + // "SELECT * FROM c", + // true + // ); this.buildCommandBarOptions(); } + async componentDidMount(): Promise { + const abc = await this.state.tableEntityListViewModel.renderNextPageAndupdateCache(); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 249 ~ QueryTablesTabComponent ~ componentDidMount ~ abc", + abc + ); + setTimeout(() => { + console.log("items > ", this.state.tableEntityListViewModel.cache.data); + console.log("items > ", this.state.tableEntityListViewModel.items()); + console.log("items1 > ", this.state.tableEntityListViewModel.headers); + console.log("items1 > simple > ", this.tableEntityListViewModel1.items1); + // this.state.tableEntityListViewModel.headers.map(header => { + + // }) + this.allItems = this.generateDetailsList(); + this.setState({ + items: this.allItems, + }); + // this.state = { + // items: this.generateDetailsList() + // } + }, 10000); + } + + // public async test(): Promise { + // await this.state.tableEntityListViewModel.renderNextPageAndupdateCache().then(() => { + // console.log("inside > ", this.state.tableEntityListViewModel.items()); + // }); + // console.log("items > ", this.state.tableEntityListViewModel.items()); + // } + public onAddEntityClick = (): void => { useSidePanel .getState() @@ -315,6 +401,32 @@ class QueryTablesTabComponent extends Component { + console.log("generateDetailsList > ", item["PartitionKey"]._); + items.push({ + partitionKey: item["PartitionKey"]._, + rowKey: item["RowKey"]._, + timeStamp: item["Timestamp"]._, + }); + }); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items", + items + ); + return items; + } + + toggleAdvancedOptions(): void { + // console.log("toggleAdvancedOptions!"); + this.setState({ + isExpanded: !this.state.isExpanded, + }); + this.state.queryViewModel.toggleAdvancedOptions(); + } + render(): JSX.Element { useCommandBar.getState().setContextButtons(this.getTabsButtons()); @@ -411,96 +523,82 @@ class QueryTablesTabComponent extends Component )}
-
+
this.toggleAdvancedOptions()}> this.state.queryViewModel.ontoggleAdvancedOptionsKeyDown} // data-bind="click:toggleAdvancedOptions, event: { keydown: ontoggleAdvancedOptionsKeyDown }, attr:{ 'aria-expanded': isExpanded() ? 'true' : 'false' }" tabIndex={0} > -
- toggle -
-
- toggle -
+ {!this.state.isExpanded && ( +
+ toggle +
+ )} + {this.state.queryViewModel.isExpanded() && ( +
+ toggle +
+ )} Advanced Options
-
-
- Show top results: - -
- - -
-
-
- Select fields for query: -
- - +
+ Show top results: + + {this.state.queryViewModel.isExceedingLimit() && ( +
+ + {this.state.queryViewModel.topValueLimitMessage} +
+ )} +
+
+ Select fields for query: + {this.state.queryViewModel.isSelected() && ( +
+ + {this.state.queryViewModel.selectMessage()} +
+ )} + this.state.queryViewModel.selectQueryOptions()} + > + Choose Columns... +
- - Choose Columns... -
-
+ )}
- {this.state.tableEntityListViewModel.items().map((item, index) => ( - - ))} -
-
+ +
+
);