diff --git a/src/Common/EntityValue.tsx b/src/Common/EntityValue.tsx index 788e08f85..3b9c7bef0 100644 --- a/src/Common/EntityValue.tsx +++ b/src/Common/EntityValue.tsx @@ -54,7 +54,7 @@ export const EntityValue: FunctionComponent = ({ = const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity); console.log("🚀 ~ file: AddTableEntityPanel.tsx ~ line 113 ~ submit ~ newEntity", newEntity); await tableEntityListViewModel.addEntityToCache(newEntity); + console.log( + "🚀 ~ file: AddTableEntityPanel.tsx ~ line 116 ~ submit ~ !tryInsertNewHeaders(tableEntityListViewModel, newEntity)", + !tryInsertNewHeaders(tableEntityListViewModel, newEntity) + ); if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) { // tableEntityListViewModel.redrawTableThrottled(); reloadEntities(); diff --git a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts index 4040cacbc..94cc3f0bd 100644 --- a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts +++ b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts @@ -1,6 +1,7 @@ import * as ko from "knockout"; import { KeyCodes } from "../../../Common/Constants"; import { userContext } from "../../../UserContext"; +import { IQueryTableRowsType } from "../../Tabs/QueryTablesTab/QueryTableTabUtils"; import * as Constants from "../Constants"; import { getQuotedCqlIdentifier } from "../CqlUtilities"; import * as DataTableUtilities from "../DataTable/DataTableUtilities"; @@ -141,35 +142,37 @@ export default class QueryBuilderViewModel { this.addClauseImpl(example2, 1); } - public getODataFilterFromClauses = (): string => { + public getODataFilterFromClauses = (queryClauses: IQueryTableRowsType[]): string => { var filterString: string = ""; - var treeTraversal = (group: ClauseGroup): void => { - for (var i = 0; i < group.children.length; i++) { - var currentItem = group.children[i]; + // var treeTraversal = (queryClauses: IQueryTableRowsType[]): void => { + if (queryClauses != undefined) { + for (var i = 0; i < queryClauses.length; i++) { + var currentItem = queryClauses[i]; - if (currentItem instanceof QueryClauseViewModel) { - var clause = currentItem; - this.timestampToValue(clause); - filterString = filterString.concat( - this.constructODataClause( - filterString === "" ? "" : clause.and_or(), - this.generateLeftParentheses(clause), - clause.field(), - clause.type(), - clause.operator(), - clause.value(), - this.generateRightParentheses(clause) - ) - ); - } + // if (currentItem instanceof QueryClauseViewModel) { + // var clause = currentItem; + this.timestampToValue(currentItem); + filterString = filterString.concat( + this.constructODataClause( + filterString === "" ? "" : currentItem.selectedOperation, + this.generateLeftParentheses(currentItem), + currentItem.selectedField, + currentItem.selectedEntityType, + currentItem.selectedOperator, + currentItem.entityValue, + this.generateRightParentheses(currentItem) + ) + ); + // } - if (currentItem instanceof ClauseGroup) { - treeTraversal(currentItem); - } + // if (currentItem instanceof ClauseGroup) { + // treeTraversal(currentItem); + // } } - }; + } + // }; - treeTraversal(this.queryClauses); + // treeTraversal(this.queryClauses); return filterString.trim(); }; @@ -238,7 +241,7 @@ export default class QueryBuilderViewModel { return filterString.trim(); }; - public getCqlFilterFromClauses = (): string => { + public getCqlFilterFromClauses = (queryTableRows: IQueryTableRowsType[]): string => { const databaseId = this._queryViewModel.queryTablesTab.collection.databaseId; const collectionId = this._queryViewModel.queryTablesTab.collection.id(); const tableToQuery = `${getQuotedCqlIdentifier(databaseId)}.${getQuotedCqlIdentifier(collectionId)}`; @@ -300,7 +303,7 @@ export default class QueryBuilderViewModel { this.columnOptions(newHeaders.sort(DataTableUtilities.compareTableColumns)); }; - private generateLeftParentheses(clause: QueryClauseViewModel): string { + private generateLeftParentheses(clause: IQueryTableRowsType): string { var result = ""; if (clause.clauseGroup.isRootGroup || clause.clauseGroup.children.indexOf(clause) !== 0) { @@ -323,7 +326,7 @@ export default class QueryBuilderViewModel { return result; } - private generateRightParentheses(clause: QueryClauseViewModel): string { + private generateRightParentheses(clause: IQueryTableRowsType): string { var result = ""; if ( @@ -495,6 +498,7 @@ export default class QueryBuilderViewModel { // adds a new clause to the end of the array public addNewClause = (): void => { this.addClauseIndex(this.clauseArray().length, null); + // this.addClauseIndex(queryTableRows.length, null); }; public onAddClauseKeyDown = (index: number, data: any, event: KeyboardEvent, source: any): boolean => { @@ -715,18 +719,18 @@ export default class QueryBuilderViewModel { //DataTableUtilities.forceRecalculateTableSize(); } - private timestampToValue(clause: QueryClauseViewModel): void { - if (clause.isValue()) { + private timestampToValue(clause: IQueryTableRowsType): void { + if (clause.isValue) { return; - } else if (clause.isTimestamp()) { + } else if (clause.isTimestamp) { this.getTimeStampToQuery(clause); // } else if (clause.isCustomLastTimestamp()) { // clause.value(`datetime'${CustomTimestampHelper._queryLastTime(clause.customLastTimestamp().lastNumber, clause.customLastTimestamp().lastTimeUnit)}'`); - } else if (clause.isCustomRangeTimestamp()) { - if (clause.isLocal()) { - clause.value(`datetime'${DateTimeUtilities.getUTCDateTime(clause.customTimeValue())}'`); + } else if (clause.isCustomRangeTimestamp) { + if (clause.isLocal) { + clause.entityValue = `datetime'${DateTimeUtilities.getUTCDateTime(clause.customTimeValue)}'`; } else { - clause.value(`datetime'${clause.customTimeValue()}Z'`); + clause.entityValue = `datetime'${clause.customTimeValue}Z'`; } } } @@ -748,28 +752,28 @@ export default class QueryBuilderViewModel { return null; } - private getTimeStampToQuery(clause: QueryClauseViewModel): void { - switch (clause.timeValue()) { + private getTimeStampToQuery(clause: IQueryTableRowsType): void { + switch (clause.timeValue) { case Constants.timeOptions.lastHour: - clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(0, 1)}'`); + clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(0, 1)}'`; break; case Constants.timeOptions.last24Hours: - clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(0, 24)}'`); + clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(0, 24)}'`; break; case Constants.timeOptions.last7Days: - clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(7, 0)}'`); + clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(7, 0)}'`; break; case Constants.timeOptions.last31Days: - clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(31, 0)}'`); + clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(31, 0)}'`; break; case Constants.timeOptions.last365Days: - clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(365, 0)}'`); + clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(365, 0)}'`; break; case Constants.timeOptions.currentMonth: - clause.value(`datetime'${CustomTimestampHelper._queryCurrentMonthLocal()}'`); + clause.entityValue = `datetime'${CustomTimestampHelper._queryCurrentMonthLocal()}'`; break; case Constants.timeOptions.currentYear: - clause.value(`datetime'${CustomTimestampHelper._queryCurrentYearLocal()}'`); + clause.entityValue = `datetime'${CustomTimestampHelper._queryCurrentYearLocal()}'`; break; } } diff --git a/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx b/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx index e24efc170..9a68c9d33 100644 --- a/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx +++ b/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx @@ -6,6 +6,7 @@ import { useSidePanel } from "../../../hooks/useSidePanel"; import { userContext } from "../../../UserContext"; import { TableQuerySelectPanel } from "../../Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel"; import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab"; +import { IQueryTableRowsType } from "../../Tabs/QueryTablesTab/QueryTableTabUtils"; import { getQuotedCqlIdentifier } from "../CqlUtilities"; import * as DataTableUtilities from "../DataTable/DataTableUtilities"; import TableEntityListViewModel from "../DataTable/TableEntityListViewModel"; @@ -133,12 +134,12 @@ export default class QueryViewModel { return this.selectText(); }; - private setFilter = (): string => { + private setFilter = (queryTableRows: IQueryTableRowsType[]): string => { const queryString = this.isEditorActive() ? this.queryText() : userContext.apiType === "Cassandra" - ? this.queryBuilderViewModel().getCqlFilterFromClauses() - : this.queryBuilderViewModel().getODataFilterFromClauses(); + ? this.queryBuilderViewModel().getCqlFilterFromClauses(queryTableRows) + : this.queryBuilderViewModel().getODataFilterFromClauses(queryTableRows); const filter = queryString; this.queryText(filter); return this.queryText(); @@ -165,8 +166,12 @@ export default class QueryViewModel { notify: "always", }); - public runQuery = (): void => { - let filter = this.setFilter(); + public runQuery = (queryTableRows: IQueryTableRowsType[]): void => { + console.log( + "🚀 ~ file: QueryViewModel.tsx ~ line 169 ~ QueryViewModel ~ //constructor ~ queryTableRows", + queryTableRows + ); + let filter = this.setFilter(queryTableRows); if (filter && userContext.apiType !== "Cassandra") { filter = filter.replace(/"/g, "'"); } diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx index f958cae77..144229f96 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx @@ -17,6 +17,7 @@ import { IOption } from "./QueryTableTabUtils"; const dropdownStyles: Partial = { dropdown: { width: 100 } }; export interface IQueryTableEntityClauseProps { + index: number; entityValue: string; entityValuePlaceHolder?: string; selectedOperator: string; @@ -39,6 +40,7 @@ export interface IQueryTableEntityClauseProps { } export const QueryTableEntityClause: FunctionComponent = ({ + index, entityValue, entityValuePlaceHolder, selectedOperator, @@ -88,6 +90,7 @@ export const QueryTableEntityClause: FunctionComponent 0 ? "visible" : "hidden" }} selectedKey={selectedOperation} onChange={(_event: React.FormEvent, selectedOption: IDropdownOption) => onDropdownChange(selectedOption, "selectedOperation") diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx index af59909f7..db1dceea9 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx @@ -1,12 +1,12 @@ -import { IColumn } from "@fluentui/react"; +import { IColumn, Selection } from "@fluentui/react"; import * as ViewModels from "../../../Contracts/ViewModels"; import Explorer from "../../Explorer"; import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel"; import * as Entities from "../../Tables/Entities"; +import ClauseGroup from "../../Tables/QueryBuilder/ClauseGroup"; import QueryViewModel from "../../Tables/QueryBuilder/QueryViewModel"; import TabsBase from "../TabsBase"; import NewQueryTablesTab from "./QueryTablesTab"; - export interface Button { visible: boolean; enabled: boolean; @@ -58,6 +58,9 @@ export interface IQueryTablesTabComponentStates { operators: string[]; selectMessage: string; queryTableRows: IQueryTableRowsType[]; + originalItems: IDocument[]; + rowSelected: boolean; + selection: Selection; } export interface IQueryTableRowsType { @@ -75,6 +78,13 @@ export interface IQueryTableRowsType { operationOptions: IOption[]; timestampOptions: IOption[]; id: string; + clauseGroup: ClauseGroup; + isLocal: boolean; + isTimestamp: boolean; + isValue: boolean; + isCustomRangeTimestamp: boolean; + customTimeValue: string; + timeValue: string; } export const getformattedOptions = (options: Array): IOption[] => { diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx index 97a6a707c..7082c5201 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx @@ -161,19 +161,7 @@ class QueryTablesTabComponent extends Component { - // 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(); @@ -219,6 +207,7 @@ class QueryTablesTabComponent extends Component { - // console.log("items > ", this.state.tableEntityListViewModel.cache.data); - // console.log("items > ", this.state.tableEntityListViewModel.items()); - // console.log("items1 > ", this.state.tableEntityListViewModel.headers); - this.columns = []; - tableEntityListViewModel.headers.map((header) => { - this.columns.push({ - key: header, - name: header, - minWidth: 100, - maxWidth: 200, - data: "string", - fieldName: header, - isResizable: true, - isSorted: true, - isSortedDescending: false, - sortAscendingAriaLabel: "Sorted A to Z", - 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", - // this.state.columns - // ); - }, 1000); - this.allItems = this.generateDetailsList(); - this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.map((clause) => { - // clause._id - this.allQueryTableRows.push({ - id: clause._id, - isQueryTableEntityChecked: false, - selectedOperator: clause.operator(), - selectedField: clause.field(), - selectedEntityType: clause.type(), - selectedOperation: clause.and_or(), - entityValue: clause.value(), - isTimeStampSelected: false, - 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", - clause, - ", ", - clause._id - ); - }); - console.log( - "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 319 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ this.allQueryTableRows", - this.allQueryTableRows - ); - this.setState({ - items: this.allItems, - queryTableRows: this.allQueryTableRows, - }); + this.loadFilterExample(); + // this.setDefaultItemSelection(); }, 7000); } + public createSelection = (): Selection => { + return new Selection({ + onSelectionChanged: () => this.onItemsSelectionChanged(), + // onSelectionChanged: () => { + // this.setState({ selectedItems: this.onItemsSelectionChanged() }); + // }, + getKey: (item: any) => item.key, + }); + }; + + public setDefaultItemSelection(): void { + const newSelection = this.createSelection(); + const items: any = this.state.items; + + newSelection.setItems(items); + for (let i = 1; i <= 3; i++) { + newSelection.setKeySelected(`${i}`, true, false); + console.log(" yooo > ", newSelection.setKeySelected(`${i}`, true, false)); + } + this.setState({ + selection: newSelection, + // selectedItems: this.onItemsSelectionChanged(), + }); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 342 ~ QueryTablesTabComponent ~ setDefaultItemSelection ~ selection", + this.state.selection, + ", ", + this.state.selectedItems + ); + } + + //NOT USED. Backup only + public originalDidMount(): void { + // const { tableEntityListViewModel, queryTableRows } = this.state; + // // tableEntityListViewModel.renderNextPageAndupdateCache(); + // setTimeout(() => { + // // console.log( + // // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 296 ~ QueryTablesTabComponent ~ componentDidMount ~ componentDidMount", + // // this.state.tableEntityListViewModel.items() + // // ); + // // // console.log("items > ", this.state.tableEntityListViewModel.cache.data); + // // // console.log("items > ", this.state.tableEntityListViewModel.items()); + // // // console.log("items1 > ", this.state.tableEntityListViewModel.headers); + // // this.columns = []; + // // tableEntityListViewModel.headers.map((header) => { + // // this.columns.push({ + // // key: header, + // // name: header, + // // minWidth: 100, + // // maxWidth: 200, + // // data: "string", + // // fieldName: header, + // // isResizable: true, + // // isSorted: true, + // // isSortedDescending: false, + // // sortAscendingAriaLabel: "Sorted A to Z", + // // 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: + // }); + // // this.allItems = this.generateDetailsList(); + // this.state.queryViewModel + // .queryBuilderViewModel() + // .setExample( + // this.state.tableEntityListViewModel.items()[0].PartitionKey._, + // this.state.tableEntityListViewModel.items()[0].RowKey._ + // ); + // this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.map((clause) => { + // // clause._id + // this.allQueryTableRows.push({ + // id: clause._id, + // isQueryTableEntityChecked: false, + // selectedOperator: clause.operator(), + // selectedField: clause.field(), + // selectedEntityType: clause.type(), + // selectedOperation: clause.and_or(), + // entityValue: clause.value(), + // isTimeStampSelected: false, + // 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()), + // clauseGroup: clause.clauseGroup, + // isValue: clause.isValue(), + // isLocal: clause.isLocal(), + // isCustomRangeTimestamp: clause.isCustomRangeTimestamp(), + // isTimestamp: clause.isTimestamp(), + // customTimeValue: clause.customTimeValue(), + // timeValue: clause.timeValue(), + // }); + // console.log( + // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 336 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ clause._id", + // clause, + // ", ", + // clause._id + // ); + // }); + // console.log( + // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 319 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ this.allQueryTableRows", + // this.allQueryTableRows + // ); + // this.setState({ + // // items: this.allItems, + // // originalItems: this.allItems, + // queryTableRows: this.allQueryTableRows, + // // queryText: this.state.queryViewModel.queryText(), + // }); + // }, 7000); + } // public async test(): Promise { // await this.state.tableEntityListViewModel.renderNextPageAndupdateCache().then(() => { // console.log("inside > ", this.state.tableEntityListViewModel.items()); @@ -390,32 +437,179 @@ class QueryTablesTabComponent extends Component { + private onItemsSelectionChanged = (): Entities.ITableEntity[] => { // console.log( // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 280 ~ QueryTablesTabComponent ~ onItemsSelectionChanged", // Object.values(this.selection.getSelection()[0])[2], // ", ", // this.selection.getSelection()[0]["Timestamp"] // ); - // console.log( - // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 338 ~ QueryTablesTabComponent ~ this.selection.getSelection().length", - // this.selection.getSelection().length - // ); - if (this.selection.getSelection().length > 0) { - const a = this.state.tableEntityListViewModel + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 338 ~ QueryTablesTabComponent ~ this.selection.getSelection().length", + this.state.selection.getSelection().length, + ", ", + this.state.selection.getSelection() + ); + let selectedItems: Entities.ITableEntity[]; + if (this.state.selection.getSelection().length > 0) { + selectedItems = this.state.tableEntityListViewModel .items() - .filter((item) => item["Timestamp"]._ === Object.values(this.selection.getSelection()[0])[2]); - // console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ a", a); + .filter((item) => item["Timestamp"]._ === Object.values(this.state.selection.getSelection()[0])[2]); + // console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ selectedItems", selectedItems); this.setState({ // selectionCount: this._selection.getSelectedCount(), - selectedItems: a, + selectedItems: selectedItems, + rowSelected: true, }); } + return selectedItems; }; + public loadFilterExample(): void { + const { tableEntityListViewModel, queryTableRows } = this.state; + const queryTableRowsClone = [...queryTableRows]; + queryTableRowsClone[0].fieldOptions = getformattedOptions(tableEntityListViewModel.headers); + this.setState({ + operators: this.state.queryViewModel.queryBuilderViewModel().operators(), + queryTableRows: queryTableRowsClone, + }); + + this.state.queryViewModel + .queryBuilderViewModel() + .setExample(tableEntityListViewModel.items()[0].PartitionKey._, tableEntityListViewModel.items()[0].RowKey._); + this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.map((clause, index) => { + this.allQueryTableRows.push({ + id: clause._id, + isQueryTableEntityChecked: false, + selectedOperator: clause.operator(), + selectedField: clause.field(), + selectedEntityType: clause.type(), + selectedOperation: index === 0 ? "" : clause.and_or(), + entityValue: clause.value(), + isTimeStampSelected: false, + 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()), + clauseGroup: clause.clauseGroup, + isValue: clause.isValue(), + isLocal: clause.isLocal(), + isCustomRangeTimestamp: clause.isCustomRangeTimestamp(), + isTimestamp: clause.isTimestamp(), + customTimeValue: clause.customTimeValue(), + timeValue: clause.timeValue(), + }); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 336 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ clause._id", + clause, + ", ", + clause._id + ); + }); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 319 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ this.allQueryTableRows", + this.allQueryTableRows + ); + this.setState({ + queryTableRows: this.allQueryTableRows, + }); + } + + public loadEntities(): void { + const { tableEntityListViewModel } = this.state; + tableEntityListViewModel.renderNextPageAndupdateCache(); + + setTimeout(() => { + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 296 ~ QueryTablesTabComponent ~ componentDidMount ~ componentDidMount", + this.state.tableEntityListViewModel.items() + ); + + this.columns = []; + tableEntityListViewModel.headers.map((header) => { + this.columns.push({ + key: header, + name: header, + minWidth: 100, + maxWidth: 200, + data: "string", + fieldName: header, + isResizable: true, + isSorted: true, + isSortedDescending: false, + sortAscendingAriaLabel: "Sorted A to Z", + sortDescendingAriaLabel: "Sorted Z to A", + }); + }); + + this.setState({ + columns: this.columns, + }); + + this.allItems = this.generateDetailsList(); + + this.setState({ + items: this.allItems, + originalItems: this.allItems, + queryText: this.state.queryViewModel.queryText(), + }); + }, 7000); + } + + public generateDetailsList(): IDocument[] { + // const items: IDocument[] = []; + //eslint-disable-next-line + const items: any[] = []; + //eslint-disable-next-line + let obj: any = undefined; + // const newColumns = []; + // const compare = ["PartitionKey", "RowKey", "Timestamp", "_rid", "_self", "_etag", "_attachments"]; + + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 582 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ this.state.tableEntityListViewModel.items()", + this.state.tableEntityListViewModel.items() + ); + this.state.tableEntityListViewModel.items().map((item) => { + // console.log("generateDetailsList > ", item["PartitionKey"]._); + this.columns.map((col) => { + // console.log( + // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 403 ~ QueryTablesTabComponent ~ this.columns.map ~ col.name", + // col.name + // ); + if (item[col.name]) { + // console.log("Data > ", item[col.name]._); + obj = { ...obj, ...{ [col.name]: item[col.name]._ } }; + } + }); + items.push(obj); + }); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 814 ~ QueryTablesTabComponent ~ generateDetailsList ~ items", + items + ); + // this.state.queryViewModel + // .queryBuilderViewModel() + // .setExample( + // this.state.tableEntityListViewModel.items()[0].PartitionKey._, + // this.state.tableEntityListViewModel.items()[0].RowKey._ + // ); + + // console.log( + // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items", + // this.state.queryViewModel.queryBuilderViewModel().queryClauses.children + // ); + return items; + } + public reloadEntities(): void { - this.componentDidMount(); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 423 ~ QueryTablesTabComponent ~ reloadEntities ~ reloadEntities" + ); + // this.componentDidMount(); + this.loadEntities(); // console.log( // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 349 ~ QueryTablesTabComponent ~ addEntity ~ addedEntity", // addedEntity, @@ -498,6 +692,72 @@ class QueryTablesTabComponent extends Component { + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 508 ~ QueryTablesTabComponent ~ runQuery ~ row", + row + ); + const operation = row.selectedOperation === "And" ? " && " : " || "; + const operator = this.getOperator(row.selectedOperator); + if (index === 0) { + exp = "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'"; + } else { + exp = exp + operation + "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'"; + } + }); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 519 ~ QueryTablesTabComponent ~ queryTableRows.map ~ exp", + exp + ); + const filteredItems = this.state.originalItems.filter((row) => eval(exp)); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 526 ~ QueryTablesTabComponent ~ runQuery ~ newRows", + filteredItems + ); + this.setState({ + queryText: this.state.queryViewModel.queryText(), + items: filteredItems, + }); + } else { + this.setState({ + queryText: this.state.queryViewModel.queryText(), + items: this.state.originalItems, + }); + } + } + + public getOperator(operator: string): string { + let result = ""; + switch (operator) { + case "=": + result = " === "; + break; + case ">": + result = " > "; + break; + case "<": + result = " < "; + break; + case ">=": + result = " >= "; + break; + case "<=": + result = " <= "; + break; + default: + result = " === "; + } + return result; + } + protected getTabsButtons(): CommandButtonComponentProps[] { const buttons: CommandButtonComponentProps[] = []; if (this.state.queryBuilderButton.visible) { @@ -533,7 +793,7 @@ class QueryTablesTabComponent extends Component this.state.queryViewModel.runQuery(), + onCommandClick: () => this.runQuery(this.state.queryTableRows), commandButtonLabel: label, ariaLabel: label, hasPopup: false, @@ -586,7 +846,8 @@ class QueryTablesTabComponent extends Component { // console.log("generateDetailsList > ", item["PartitionKey"]._); this.columns.map((col) => { - // console.log( - // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 403 ~ QueryTablesTabComponent ~ this.columns.map ~ col.name", - // col.name - // ); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 403 ~ QueryTablesTabComponent ~ this.columns.map ~ col.name", + col.name + ); if (item[col.name]) { // console.log("Data > ", item[col.name]._); obj = { ...obj, ...{ [col.name]: item[col.name]._ } }; @@ -613,6 +874,10 @@ class QueryTablesTabComponent extends Component { const { queryTableRows } = this.state; const cloneQueryTableRows: IQueryTableRowsType[] = [...queryTableRows]; @@ -682,24 +948,49 @@ class QueryTablesTabComponent extends Component { - const { queryTableRows } = this.state; + const { queryTableRows, queryViewModel, tableEntityListViewModel } = this.state; + this.state.queryViewModel.queryBuilderViewModel().addNewClause(); + console.log( + "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 696 ~ QueryTablesTabComponent ~ this.state ~ onAddNewClause", + this.state.queryViewModel.queryBuilderViewModel().queryClauses.children[ + this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.length - 1 + ], + ", ", + this.state.queryViewModel.queryBuilderViewModel().queryClauses.children, + ", ", + this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.length + ); + const newClause = this.state.queryViewModel.queryBuilderViewModel().queryClauses.children[ + this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.length - 1 + ]; const cloneQueryTableRows: IQueryTableRowsType[] = [...queryTableRows]; cloneQueryTableRows.splice(cloneQueryTableRows.length, 0, { isQueryTableEntityChecked: false, selectedOperator: "=", - operatorOptions: queryTableRows[0].operatorOptions, + operatorOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().operators()), // id: cloneQueryTableRows.length + 1, - id: "newRow", + id: newClause._id, selectedField: "PartitionKey", - fieldOptions: queryTableRows[0].fieldOptions, - entityTypeOptions: queryTableRows[0].entityTypeOptions, + fieldOptions: getformattedOptions(tableEntityListViewModel.headers), + + entityTypeOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().edmTypes()), + selectedEntityType: "String", - operationOptions: queryTableRows[0].operationOptions, + operationOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().clauseRules()), + // operationOptions: queryTableRows[0].operationOptions, selectedOperation: "And", entityValue: "", isTimeStampSelected: false, - timestampOptions: queryTableRows[0].timestampOptions, + timestampOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().timeOptions()), + // timestampOptions: queryTableRows[0].timestampOptions, selectedTimestamp: "Last hour", + clauseGroup: newClause.clauseGroup, + isValue: newClause.isValue(), + isLocal: newClause.isLocal(), + isCustomRangeTimestamp: newClause.isCustomRangeTimestamp(), + isTimestamp: newClause.isTimestamp(), + customTimeValue: newClause.customTimeValue(), + timeValue: newClause.timeValue(), }); this.setState({ queryTableRows: cloneQueryTableRows }); }; @@ -782,6 +1073,7 @@ class QueryTablesTabComponent extends Component {queryTableRows.map((queryTableRow, index) => (