DetailsList implemented

src/Explorer/Tables/DataTable/DataTableViewModel.ts

@@ -25,6 +25,7 @@ abstract class DataTableViewModel {
 
   /* Observables */
   public items = ko.observableArray<Entities.ITableEntity>();
+  public items1: Entities.ITableEntity[];
   public selected = ko.observableArray<Entities.ITableEntity>();
 
   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,
+    // renderCallBack: any,
-    draw: number,
+    // draw: number,
     startIndex: number,
-    pageSize: number,
+    pageSize: number
-    oSettings: any,
+    // oSettings: any,
-    postRenderTasks: (startIndex: number, pageSize: number) => Promise<void> = null
+    // postRenderTasks: (startIndex: number, pageSize: number) => Promise<void> = 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 = {
+    console.log("🚀 ~ file: DataTableViewModel.ts ~ line 192 ~ DataTableViewModel ~ this.items1", this.items1);
-      draw: draw,
+    // var render: IDataTableRenderData = {
-      aaData: renderData,
+    //   draw: draw,
-      recordsTotal: this.cache.length,
+    //   aaData: renderData,
-      recordsFiltered: this.cache.length,
+    //   recordsTotal: this.cache.length,
-    };
+    //   recordsFiltered: this.cache.length,
+    // };
 
-    if (!!postRenderTasks) {
+    // if (!!postRenderTasks) {
-      postRenderTasks(startIndex, pageSize).then(() => {
+    //   postRenderTasks(startIndex, pageSize).then(() => {
-        this.table.rows().invalidate();
+    //     this.table.rows().invalidate();
-      });
+    //   });
-    }
+    // }
-    renderCallBack(render);
+    // renderCallBack(render);
     if (this.queryTablesTab.onLoadStartKey != null && this.queryTablesTab.onLoadStartKey != undefined) {
       TelemetryProcessor.traceSuccess(
         Action.Tab,

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) {
+    // if (notifyColumnChanges) {
-      this.clearSelection();
+    //   this.clearSelection();
-      this.notifyColumnChanges(enablePrompt, this.queryTablesTab);
+    //   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<void> {
     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) {
+    // for (var index in aoData) {
-      var data = aoData[index];
+    //   var data = aoData[index];
-      if (data.name === "length") {
+    //   if (data.name === "length") {
-        tablePageSize = data.value;
+    //     tablePageSize = data.value;
-      }
+    //   }
-      if (data.name === "start") {
+    //   if (data.name === "start") {
-        this.tablePageStartIndex = data.value;
+    //     this.tablePageStartIndex = data.value;
-      }
+    //   }
-      if (data.name === "draw") {
+    //   if (data.name === "draw") {
-        draw = data.value;
+    //     draw = data.value;
-      }
+    //   }
-      if (data.name === "order") {
+    //   if (data.name === "order") {
-        columnSortOrder = data.value;
+    //     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<any> {
@@ -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 <ViewModels.QueryError>{
@@ -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;

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 => {

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<IQueryTablesTabComponentProps, IQueryTablesTabComponentStates> {
@@ -86,9 +94,38 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
   public valueLabel: string;
   public tableEntityListViewModel1: TableEntityListViewModel;
   public tableEntityListViewModel2 = ko.observable<TableEntityListViewModel>();
-
+  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<IQueryTablesTabComponentProps, I
         visible: true,
         isSelected: false,
       },
+      columns: columns,
+      items: [],
+      isExpanded: false,
     };
     this.state.tableEntityListViewModel.queryTablesTab = this.props.queryTablesTab;
     // console.log(
@@ -174,27 +214,73 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     this.valueLabel = this.state.queryViewModel.queryBuilderViewModel().valueLabel;
 
     useCommandBar.getState().setContextButtons(this.getTabsButtons());
-    this.state.tableEntityListViewModel.items.subscribe(() => {
+    // 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()",
+    //     "🚀 ~ file: QueryTablesTab.tsx ~ line 54 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.tableEntityListViewModel().items().length",
-        //   this.state.queryViewModel.queryBuilderViewModel.setExample()
+    //     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.props.queryTablesTab.container.tableDataClient.queryDocuments(
-      this.props.queryTablesTab.collection,
-      "SELECT * FROM c",
-      true
-    );
     this.buildCommandBarOptions();
   }
 
+  async componentDidMount(): Promise<void> {
+    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<void> {
+  //   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<IQueryTablesTabComponentProps, I
     this.props.tabsBaseInstance.updateNavbarWithTabsButtons();
   }
 
+  public generateDetailsList(): IDocument[] {
+    const items: IDocument[] = [];
+
+    this.state.tableEntityListViewModel.items().map((item) => {
+      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<IQueryTablesTabComponentProps, I
             </div>
           )}
           <div className="advanced-options-panel">
-            <div className="advanced-heading">
+            <div className="advanced-heading" onClick={() => this.toggleAdvancedOptions()}>
               <span
                 className="advanced-title"
                 role="button"
+                aria-expanded={this.state.isExpanded}
+                // onKeyDown = {() => this.state.queryViewModel.ontoggleAdvancedOptionsKeyDown}
                 // data-bind="click:toggleAdvancedOptions, event: { keydown: ontoggleAdvancedOptionsKeyDown }, attr:{ 'aria-expanded': isExpanded() ? 'true' : 'false' }"
                 tabIndex={0}
               >
-                <div
+                {!this.state.isExpanded && (
-                  className="themed-images"
+                  <div className="themed-images" id="ExpandChevronRight">
-                  //   type="text/html"
-                  id="ExpandChevronRight"
-                  //   data-bind="hasFocus: focusExpandIcon"
-                >
                     <img
                       className="imgiconwidth expand-triangle expand-triangle-right"
                       src={TriangleRight}
                       alt="toggle"
                     />
                   </div>
-                <div
+                )}
-                  className="themed-images"
+                {this.state.queryViewModel.isExpanded() && (
-                  // type="text/html"
+                  <div className="themed-images" id="ExpandChevronDown">
-                  id="ExpandChevronDown"
-                >
                     <img className="imgiconwidth expand-triangle" src={TriangleDown} alt="toggle" />
                   </div>
+                )}
                 <span>Advanced Options</span>
               </span>
             </div>
-            <div
+            {this.state.isExpanded && (
-              className="advanced-options"
+              <div className="advanced-options">
-              // data-bind="visible: isExpanded"
-            >
                 <div className="top">
                   <span>Show top results:</span>
                   <input
                     className="top-input"
                     type="number"
+                    title={this.state.queryViewModel.topValueLimitMessage}
                     //   data-bind="hasFocus: focusTopResult, textInput: topValue, attr: { title: topValueLimitMessage }"
                     role="textbox"
                     aria-label="Show top results"
                   />
-                <div
+                  {this.state.queryViewModel.isExceedingLimit() && (
-                  role="alert"
+                    <div role="alert" aria-atomic="true" className="inline-div">
-                  aria-atomic="true"
-                  className="inline-div"
-                  // data-bind="visible: isExceedingLimit"
-                >
                       <img className="advanced-options-icon" src={StatusWraning} />
-                  <span data-bind="text: topValueLimitMessage"></span>
+                      <span>{this.state.queryViewModel.topValueLimitMessage}</span>
                     </div>
+                  )}
                 </div>
                 <div className="select">
                   <span> Select fields for query: </span>
-                <div
+                  {this.state.queryViewModel.isSelected() && (
-                // data-bind="visible: isSelected"
+                    <div>
-                >
                       <img className="advanced-options-icon" src={QueryInformation} />
-                  <span
+                      <span className="select-options-text">{this.state.queryViewModel.selectMessage()}</span>
-                    className="select-options-text"
-                    //   data-bind="text: selectMessage"
-                  />
                     </div>
+                  )}
                   <a
                     className="select-options-link"
                     //   data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
                     tabIndex={0}
                     role="link"
+                    onClick={() => this.state.queryViewModel.selectQueryOptions()}
                   >
                     <span>Choose Columns... </span>
                   </a>
                 </div>
               </div>
+            )}
           </div>
         </div>
-        {this.state.tableEntityListViewModel.items().map((item, index) => (
+
-          <label key={index}>{item}</label>
+        <div className="tablesQueryTab tableContainer">
-        ))}
+          <DetailsList
-        <div
+            items={this.state.items}
-          className="tablesQueryTab tableContainer"
+            columns={this.state.columns}
-          data-bind="with: tableEntityListViewModel, attr: {
+            selectionMode={SelectionMode.none}
-                                                  id: tableEntityListViewModel.id
+            layoutMode={DetailsListLayoutMode.justified}
-                                              }"
+            compact={true}
-        >
+          />
-          <table
-            id="storageTable"
-            className="storage azure-table show-gridlines"
-            tabIndex={0}
-            data-bind="tableSource: items, tableSelection: selected"
-          ></table>
         </div>
       </div>
     );