Merged dynamic filter implementation

src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx

@@ -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: string;
 }
 
-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

@@ -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,
-  opertionOptions,
-  opertorOptions,
-  timestampOptions,
 } from "./QueryTableTabUtils";
 export interface Button {
   visible: boolean;
   enabled: boolean;
   isSelected?: boolean;
 }
+
 // export interface IDocument {
 //   partitionKey: string;
 //   rowKey: string;
@@ -164,9 +161,28 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     this.tableCommands = new TableCommands(this.container);
     this.tableDataClient = this.container.tableDataClient;
     this.tableEntityListViewModel2(new TableEntityListViewModel(this.tableCommands, props.queryTablesTab));
-    this.tableEntityListViewModel1 = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab);
+    // const sampleQuerySubscription = this.tableEntityListViewModel2().items.subscribe(() => {
+    //   if (this.tableEntityListViewModel2().items().length > 0 && userContext.apiType === "Tables") {
+    //     // this.queryViewModel().queryBuilderViewModel().setExample();
+    //     console.log(
+    //       "🚀 ~ file: QueryTablesTab.tsx ~ line 55 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.queryViewModel().queryBuilderViewModel().setExample()"
+    //       // this.queryViewModel().queryBuilderViewModel().setExample()
+    //     );
+    //   }
+    //   sampleQuerySubscription.dispose();
+    // });
+
+    const tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab);
+    // this._queryViewModel = new QueryViewModel(this.props.queryTablesTab);
+    const queryBuilderViewModel = new QueryViewModel(this.props.queryTablesTab).queryBuilderViewModel();
+
+    const entityTypeOptions = queryBuilderViewModel.edmTypes();
+    const timestampOptions = queryBuilderViewModel.timeOptions();
+    const operatorsOptions = queryBuilderViewModel.operators();
+    const operationOptions = queryBuilderViewModel.clauseRules();
+
     this.state = {
-      tableEntityListViewModel: new TableEntityListViewModel(this.tableCommands, props.queryTablesTab),
+      tableEntityListViewModel,
       queryViewModel: new QueryViewModel(this.props.queryTablesTab),
       queryText: "PartitionKey eq 'partionKey1'",
       selectedQueryText: "",
@@ -216,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",
@@ -280,14 +297,15 @@ 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);
       // console.log("items > ", this.state.tableEntityListViewModel.items());
       // console.log("items1 > ", this.state.tableEntityListViewModel.headers);
       this.columns = [];
-      this.state.tableEntityListViewModel.headers.map((header) => {
+      tableEntityListViewModel.headers.map((header) => {
         this.columns.push({
           key: header,
           name: header,
@@ -302,11 +320,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",
@@ -320,17 +343,17 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
           id: clause._id,
           isQueryTableEntityChecked: false,
           selectedOperator: clause.operator(),
-          opertorOptions,
           selectedField: clause.field(),
-          fieldOptions,
-          entityTypeOptions,
           selectedEntityType: clause.type(),
-          opertionOptions,
           selectedOperation: clause.and_or(),
           entityValue: clause.value(),
           isTimeStampSelected: false,
-          timestampOptions,
           selectedTimestamp: "Last hour",
+          operatorOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().operators()),
+          fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
+          entityTypeOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().edmTypes()),
+          operationOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().clauseRules()),
+          timestampOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().timeOptions()),
         });
         console.log(
           "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 336 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ clause._id",
@@ -347,8 +370,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
         items: this.allItems,
         queryTableRows: this.allQueryTableRows,
       });
-      // this.state.queryViewModel.queryBuilderViewModel().setExample();
+    }, 7000);
-    }, 5000);
   }
 
   // public async test(): Promise<void> {
@@ -639,6 +661,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;
@@ -646,6 +670,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       } else if (selectedOptionType !== "selectedTimestamp") {
         cloneQueryTableRows[index].isTimeStampSelected = false;
       }
+    }
     this.setState({ queryTableRows: cloneQueryTableRows });
   };
 
@@ -662,18 +687,18 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     cloneQueryTableRows.splice(cloneQueryTableRows.length, 0, {
       isQueryTableEntityChecked: false,
       selectedOperator: "=",
-      opertorOptions,
+      operatorOptions: queryTableRows[0].operatorOptions,
       // id: cloneQueryTableRows.length + 1,
       id: "newRow",
       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 });
@@ -762,14 +787,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)}