Added dynamic data of clause entity

src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx

@@ -8,7 +8,7 @@ import {
   IStackTokens,
   Stack,
   TextField,
-  TooltipHost
+  TooltipHost,
 } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
 import AddIcon from "../../../../images/Add.svg";
@@ -21,8 +21,8 @@ export interface IQueryTableEntityClauseProps {
   entityValuePlaceHolder?: string;
   selectedOperator: string;
   selectedOperation: string;
-  opertorOptions: IOption[];
+  operatorOptions: IOption[];
-  opertationOptions: IOption[];
+  operationOptions: IOption[];
   isQueryTableEntityChecked: boolean;
   selectedField: string;
   fieldOptions: IOption[];
@@ -42,14 +42,14 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
   entityValue,
   entityValuePlaceHolder,
   selectedOperator,
-  opertorOptions,
+  operatorOptions,
   selectedField,
   isQueryTableEntityChecked,
   fieldOptions,
   entityTypeOptions,
   selectedEntityType,
   selectedOperation,
-  opertationOptions,
+  operationOptions,
   isTimeStampSelected,
   selectedTimestamp,
   timestampOptions,
@@ -92,7 +92,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
           onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
             onDropdownChange(selectedOption, "selectedOperation")
           }
-          options={opertationOptions}
+          options={operationOptions}
           id="operatorOptionId"
           styles={dropdownStyles}
         />
@@ -120,7 +120,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
           onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
             onDropdownChange(selectedOption, "selectedOperator")
           }
-          options={opertorOptions}
+          options={operatorOptions}
           id="operatorOptionId"
           styles={dropdownStyles}
         />

src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx

@@ -70,50 +70,15 @@ export interface IQueryTableRowsType {
   selectedOperation: string;
   selectedTimestamp: string;
   fieldOptions: IOption[];
-  opertorOptions: IOption[];
+  operatorOptions: IOption[];
   entityTypeOptions: IOption[];
-  opertionOptions: IOption[];
+  operationOptions: IOption[];
   timestampOptions: IOption[];
   id: number;
 }
 
-export const opertionOptions = [
+export const getformattedOptions = (options: Array<string>): IOption[] => {
-  { key: "And", text: "And" },
+  return options.map((option) => {
-  { key: "Or", text: "Or" },
+    return { key: option, text: option };
-];
+  });
-export const opertorOptions = [
+};
-  { key: "=", text: "=" },
-  { key: ">", text: ">" },
-  { key: ">=", text: ">=" },
-  { key: "<", text: "<" },
-  { key: "<=", text: "<=" },
-  { key: "<>", text: "<>" },
-];
-
-export const fieldOptions = [
-  { key: "PartitionKey", text: "PartitionKey" },
-  { key: "RowKey", text: "RowKey" },
-  { key: "Timestamp", text: "Timestamp" },
-  { key: "t3PN", text: "t3PN" },
-];
-
-export const entityTypeOptions = [
-  { key: "String", text: "String" },
-  { key: "Boolean", text: "Boolean" },
-  { key: "Binary", text: "Binary" },
-  { key: "DateTime", text: "DateTime" },
-  { key: "Double", text: "Double" },
-  { key: "Guid", text: "Guid" },
-  { key: "Int32", text: "Int32" },
-  { key: "Int64", text: "Int64" },
-];
-
-export const timestampOptions = [
-  { key: "Last hour", text: "Last hour" },
-  { key: "Last 24 hours", text: "Last 24 hours" },
-  { key: "Last 7 days", text: "Last 7 days" },
-  { key: "Last 31 days", text: "Last 31 days" },
-  { key: "Last 365 days", text: "Last 365 days" },
-  { key: "Current month", text: "Current month" },
-  { key: "Current year", text: "Current year" },
-];

src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx

@@ -5,7 +5,7 @@ import {
   IDropdownOption,
   IDropdownStyles,
   Selection,
-  SelectionMode,
+  SelectionMode
 } from "@fluentui/react";
 import * as ko from "knockout";
 import React, { Component } from "react";
@@ -39,21 +39,18 @@ import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataC
 // import NewQueryTablesTab from "./QueryTablesTab";
 import { QueryTableEntityClause } from "./QueryTableEntityClause";
 import {
-  entityTypeOptions,
+  getformattedOptions,
-  fieldOptions,
   IDocument,
   IQueryTableRowsType,
   IQueryTablesTabComponentProps,
-  IQueryTablesTabComponentStates,
+  IQueryTablesTabComponentStates
-  opertionOptions,
-  opertorOptions,
-  timestampOptions,
 } from "./QueryTableTabUtils";
 export interface Button {
   visible: boolean;
   enabled: boolean;
   isSelected?: boolean;
 }
+
 // export interface IDocument {
 //   partitionKey: string;
 //   rowKey: string;
@@ -175,12 +172,17 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     //   sampleQuerySubscription.dispose();
     // });
 
-    this.tableEntityListViewModel1 = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab);
+    const tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab);
     // this._queryViewModel = new QueryViewModel(this.props.queryTablesTab);
-    this.state = {
+    const queryBuilderViewModel = new QueryViewModel(this.props.queryTablesTab).queryBuilderViewModel();
-      tableEntityListViewModel: new TableEntityListViewModel(this.tableCommands, props.queryTablesTab),
 
-      // tableEntityListViewModel.queryTablesTab : this.props.queryTablesTab
+    const entityTypeOptions = queryBuilderViewModel.edmTypes();
+    const timestampOptions = queryBuilderViewModel.timeOptions();
+    const operatorsOptions = queryBuilderViewModel.operators();
+    const operationOptions = queryBuilderViewModel.clauseRules();
+
+    this.state = {
+      tableEntityListViewModel,
       queryViewModel: new QueryViewModel(this.props.queryTablesTab),
       queryText: "PartitionKey eq 'partionKey1'",
       selectedQueryText: "",
@@ -230,21 +232,22 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
         {
           isQueryTableEntityChecked: false,
           selectedOperator: "=",
-          opertorOptions,
-          selectedField: "PartitionKey",
-          fieldOptions,
           id: 1,
-          entityTypeOptions,
+          selectedField: "PartitionKey",
-          selectedEntityType: "String",
-          opertionOptions,
           selectedOperation: "And",
           entityValue: "",
+          selectedEntityType: "String",
           isTimeStampSelected: false,
-          timestampOptions,
           selectedTimestamp: "Last hour",
+          operatorOptions: getformattedOptions(operatorsOptions),
+          fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
+          entityTypeOptions: getformattedOptions(entityTypeOptions),
+          operationOptions: getformattedOptions(operationOptions),
+          timestampOptions: getformattedOptions(timestampOptions),
         },
       ],
     };
+
     this.state.tableEntityListViewModel.queryTablesTab = this.props.queryTablesTab;
     console.log(
       "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 24 ~ QueryTablesTabComponent ~ constructor ~ props",
@@ -314,7 +317,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
   /****************** Constructor Ends */
 
   componentDidMount(): void {
-    this.state.tableEntityListViewModel.renderNextPageAndupdateCache();
+    const { tableEntityListViewModel, queryTableRows } = this.state;
+    tableEntityListViewModel.renderNextPageAndupdateCache();
 
     setTimeout(() => {
       // console.log("items > ", this.state.tableEntityListViewModel.cache.data);
@@ -322,7 +326,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       // console.log("items1 > ", this.state.tableEntityListViewModel.headers);
       // console.log("items1 > simple > ", this.tableEntityListViewModel1.items1);
       this.columns = [];
-      this.state.tableEntityListViewModel.headers.map((header) => {
+      tableEntityListViewModel.headers.map((header) => {
         this.columns.push({
           key: header,
           name: header,
@@ -337,11 +341,16 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
           sortDescendingAriaLabel: "Sorted Z to A",
         });
       });
+
+      const queryTableRowsClone = [...queryTableRows];
+      queryTableRowsClone[0].fieldOptions = getformattedOptions(tableEntityListViewModel.headers);
       this.setState({
         columns: this.columns,
         operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
+        queryTableRows: queryTableRowsClone,
         // isValue:
       });
+
       setTimeout(() => {
         // console.log(
         //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 248 ~ QueryTablesTabComponent ~ setTimeout ~ columns",
@@ -352,7 +361,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       this.setState({
         items: this.allItems,
       });
-    }, 5000);
+    }, 7000);
   }
 
   // public async test(): Promise<void> {
@@ -632,6 +641,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
     cloneQueryTableRows[index][selectedOptionType] = selectedOption.text;
+    if (selectedOptionType !== "selectedOperation" && selectedOptionType !== "selectedOperator") {
+      cloneQueryTableRows[index].selectedEntityType = "String";
       const { text } = selectedOption;
       if (text === "DateTime" || text === "Timestamp") {
         cloneQueryTableRows[index].isTimeStampSelected = true;
@@ -639,6 +650,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       } else if (selectedOptionType !== "selectedTimestamp") {
         cloneQueryTableRows[index].isTimeStampSelected = false;
       }
+    }
     this.setState({ queryTableRows: cloneQueryTableRows });
   };
 
@@ -655,17 +667,17 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     cloneQueryTableRows.splice(cloneQueryTableRows.length, 0, {
       isQueryTableEntityChecked: false,
       selectedOperator: "=",
-      opertorOptions,
+      operatorOptions: queryTableRows[0].operatorOptions,
       id: cloneQueryTableRows.length + 1,
       selectedField: "PartitionKey",
-      fieldOptions,
+      fieldOptions: queryTableRows[0].fieldOptions,
-      entityTypeOptions,
+      entityTypeOptions: queryTableRows[0].entityTypeOptions,
       selectedEntityType: "String",
-      opertionOptions,
+      operationOptions: queryTableRows[0].operationOptions,
       selectedOperation: "And",
       entityValue: "",
       isTimeStampSelected: false,
-      timestampOptions,
+      timestampOptions: queryTableRows[0].timestampOptions,
       selectedTimestamp: "Last hour",
     });
     this.setState({ queryTableRows: cloneQueryTableRows });
@@ -682,6 +694,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     useCommandBar.getState().setContextButtons(this.getTabsButtons());
     const { queryTableRows } = this.state;
 
+
     return (
       <div className="tab-pane tableContainer" id={this.props.tabsBaseInstance.tabId} role="tabpanel">
         <div className="query-builder">
@@ -699,8 +712,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
             <div className="query-editor-panel">
               <div>
                 <textarea
-                  className={`query-editor-text ${
+                  className={`query-editor-text ${this.state.queryViewModel.hasQueryError() ? "query-editor-text-invalid" : ""
-                    this.state.queryViewModel.hasQueryError() ? "query-editor-text-invalid" : ""
                     } `}
                   value={this.state.queryText}
                   readOnly={true}
@@ -754,14 +766,14 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
                       selectedOperator={queryTableRow.selectedOperator}
                       selectedField={queryTableRow.selectedField}
                       selectedOperation={queryTableRow.selectedOperation}
-                      opertationOptions={queryTableRow.opertionOptions}
+                      operationOptions={queryTableRow.operationOptions}
                       entityValue={queryTableRow.entityValue}
                       selectedEntityType={queryTableRow.selectedEntityType}
                       entityTypeOptions={queryTableRow.entityTypeOptions}
                       fieldOptions={queryTableRow.fieldOptions}
                       selectedTimestamp={queryTableRow.selectedTimestamp}
                       timestampOptions={queryTableRow.timestampOptions}
-                      opertorOptions={queryTableRow.opertorOptions}
+                      operatorOptions={queryTableRow.operatorOptions}
                       isTimeStampSelected={queryTableRow.isTimeStampSelected}
                       onAddNewClause={this.onAddNewClause}
                       onDeleteClause={() => this.onDeleteClause(index)}