random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-05-03 06:53:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implemented keydown events

Browse Source
This commit is contained in:
vaidankarswapnil 2021-08-10 18:22:34 +05:30
parent e1d32bde36
commit d70dd6bc7e
7 changed files with 136 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Common/TableEntity.tsx
View File

@ -95,7 +95,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
<Stack horizontal tokens={sectionStackTokens}> <Stack horizontal tokens={sectionStackTokens}>
<TextField <TextField
label={entityPropertyLabel && entityPropertyLabel} label={entityPropertyLabel && entityPropertyLabel}
id="entityPropertyId"
autoFocus autoFocus
disabled={isPropertyTypeDisable} disabled={isPropertyTypeDisable}
placeholder={entityPropertyPlaceHolder} placeholder={entityPropertyPlaceHolder}
@ -109,7 +108,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
onChange={onEntityTypeChange} onChange={onEntityTypeChange}
options={options} options={options}
disabled={isPropertyTypeDisable} disabled={isPropertyTypeDisable}
id="entityTypeId"
styles={dropdownStyles} styles={dropdownStyles}
/> />
<EntityValue <EntityValue
@ -126,12 +124,12 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
/> />
{!isEntityValueDisable && ( {!isEntityValueDisable && (
<TooltipHost content="Edit property" id="editTooltip"> <TooltipHost content="Edit property" id="editTooltip">
<Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} /> <Image {...imageProps} src={EditIcon} alt="editEntity" onClick={onEditEntity} />
</TooltipHost> </TooltipHost>
)} )}
{isDeleteOptionVisible && userContext.apiType !== "Cassandra" && ( {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
<TooltipHost content="Delete property" id="deleteTooltip"> <TooltipHost content="Delete property" id="deleteTooltip">
<Image {...imageProps} src={DeleteIcon} alt="delete entity" id="deleteEntity" onClick={onDeleteEntity} /> <Image {...imageProps} src={DeleteIcon} alt="delete entity" onClick={onDeleteEntity} />
</TooltipHost> </TooltipHost>
)} )}
</Stack> </Stack>

37
src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
View File

@ -1,7 +1,6 @@
import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react"; import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks"; import { useBoolean } from "@fluentui/react-hooks";
import React, { FunctionComponent, useEffect, useState } from "react"; import React, { FunctionComponent, useEffect, useState } from "react";
import * as _ from "underscore";
import AddPropertyIcon from "../../../../images/Add-property.svg"; import AddPropertyIcon from "../../../../images/Add-property.svg";
import RevertBackIcon from "../../../../images/RevertBack.svg"; import RevertBackIcon from "../../../../images/RevertBack.svg";
import { TableEntity } from "../../../Common/TableEntity"; import { TableEntity } from "../../../Common/TableEntity";
@ -12,7 +11,6 @@ import * as DataTableUtilities from "../../Tables/DataTable/DataTableUtilities";
import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel"; import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
import * as Entities from "../../Tables/Entities"; import * as Entities from "../../Tables/Entities";
import { CassandraAPIDataClient, CassandraTableKey, TableDataClient } from "../../Tables/TableDataClient"; import { CassandraAPIDataClient, CassandraTableKey, TableDataClient } from "../../Tables/TableDataClient";
import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
import * as Utilities from "../../Tables/Utilities"; import * as Utilities from "../../Tables/Utilities";
import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab"; import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
// import QueryTablesTab from "../../Tabs/QueryTablesTab"; // import QueryTablesTab from "../../Tabs/QueryTablesTab";
@ -110,42 +108,11 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
const entity: Entities.ITableEntity = entityFromAttributes(entities); const entity: Entities.ITableEntity = entityFromAttributes(entities);
const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity); const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
await tableEntityListViewModel.addEntityToCache(newEntity); // await tableEntityListViewModel.addEntityToCache(newEntity);
if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) { reloadEntities();
// tableEntityListViewModel.redrawTableThrottled();
reloadEntities();
}
closeSidePanel(); closeSidePanel();
}; };
const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => {
let newHeaders: string[] = [];
const keys = Object.keys(newEntity);
keys &&
keys.forEach((key: string) => {
if (
!_.contains(viewModel.headers, key) &&
key !== TableEntityProcessor.keyProperties.attachments &&
key !== TableEntityProcessor.keyProperties.etag &&
key !== TableEntityProcessor.keyProperties.resourceId &&
key !== TableEntityProcessor.keyProperties.self &&
(!(userContext.apiType === "Cassandra") || key !== TableConstants.EntityKeyNames.RowKey)
) {
newHeaders.push(key);
}
});
let newHeadersInserted = false;
if (newHeaders.length) {
if (!DataTableUtilities.checkForDefaultHeader(viewModel.headers)) {
newHeaders = viewModel.headers.concat(newHeaders);
}
viewModel.updateHeaders(newHeaders, /* notifyColumnChanges */ true, /* enablePrompt */ false);
newHeadersInserted = true;
}
return newHeadersInserted;
};
/* Add new entity row */ /* Add new entity row */
const addNewEntity = (): void => { const addNewEntity = (): void => {
const cloneEntities: EntityRowType[] = [...entities]; const cloneEntities: EntityRowType[] = [...entities];

3
src/Explorer/Tables/DataTable/DataTableViewModel.ts
View File

@ -24,7 +24,6 @@ abstract class DataTableViewModel {
/* Observables */ /* Observables */
public items = ko.observableArray<Entities.ITableEntity>(); public items = ko.observableArray<Entities.ITableEntity>();
public items1: Entities.ITableEntity[];
public selected = ko.observableArray<Entities.ITableEntity>(); public selected = ko.observableArray<Entities.ITableEntity>();
public table: DataTables.DataTable; public table: DataTables.DataTable;
@ -53,7 +52,6 @@ abstract class DataTableViewModel {
constructor() { constructor() {
this.items([]); this.items([]);
this.items1 = [];
this.selected([]); this.selected([]);
// Late bound // Late bound
this.dataTableOperationManager = null; this.dataTableOperationManager = null;
@ -176,7 +174,6 @@ abstract class DataTableViewModel {
var renderData = this.cache.data.slice(startIndex, endIndex); var renderData = this.cache.data.slice(startIndex, endIndex);
this.items(renderData); this.items(renderData);
this.items1 = renderData;
if (this.queryTablesTab.onLoadStartKey != null && this.queryTablesTab.onLoadStartKey != undefined) { if (this.queryTablesTab.onLoadStartKey != null && this.queryTablesTab.onLoadStartKey != undefined) {
TelemetryProcessor.traceSuccess( TelemetryProcessor.traceSuccess(

36
src/Explorer/Tables/DataTable/TableEntityListViewModel.ts
View File

@ -155,11 +155,10 @@ export default class TableEntityListViewModel extends DataTableViewModel {
* fnCallback - is the render callback with data to render. * fnCallback - is the render callback with data to render.
* oSetting: current settings used for table initialization. * oSetting: current settings used for table initialization.
*/ */
public renderNextPageAndupdateCache(sSource?: any, aoData?: any, fnCallback?: any, oSettings?: any): Promise<void> { public renderNextPageAndupdateCache(sSource?: any, aoData?: any, fnCallback?: any): Promise<void> {
var tablePageSize: number; var tablePageSize: number = 100;
var draw: number;
var prefetchNeeded = true; var prefetchNeeded = true;
var columnSortOrder: any; // var columnSortOrder: any;
// Threshold(pages) for triggering cache prefetch. // Threshold(pages) for triggering cache prefetch.
// If number remaining pages in cache falls below prefetchThreshold prefetch will be triggered. // If number remaining pages in cache falls below prefetchThreshold prefetch will be triggered.
var prefetchThreshold = 10; var prefetchThreshold = 10;
@ -170,11 +169,12 @@ export default class TableEntityListViewModel extends DataTableViewModel {
// Check if prefetch needed. // Check if prefetch needed.
if (this.tablePageStartIndex + tablePageSize <= this.cache.length || this.allDownloaded) { if (this.tablePageStartIndex + tablePageSize <= this.cache.length || this.allDownloaded) {
prefetchNeeded = false; prefetchNeeded = false;
if (columnSortOrder && (!this.cache.sortOrder || !_.isEqual(this.cache.sortOrder, columnSortOrder))) { // if (columnSortOrder && (!this.cache.sortOrder || !_.isEqual(this.cache.sortOrder, columnSortOrder))) {
this.sortColumns(columnSortOrder, oSettings); // this.sortColumns(columnSortOrder, oSettings);
} // }
// this.renderPage(this.tablePageStartIndex, tablePageSize); this.tablePageStartIndex = 0;
this.renderPage(0, 100); this.renderPage(this.tablePageStartIndex, tablePageSize);
// this.renderPage(0, 100);
if ( if (
!this.allDownloaded && !this.allDownloaded &&
this.tablePageStartIndex > 0 && // This is a case now that we can hit this as we re-construct table when we update column this.tablePageStartIndex > 0 && // This is a case now that we can hit this as we re-construct table when we update column
@ -195,10 +195,10 @@ export default class TableEntityListViewModel extends DataTableViewModel {
tableQuery, tableQuery,
this.tablePageStartIndex, this.tablePageStartIndex,
tablePageSize, tablePageSize,
downloadSize, downloadSize
draw, // draw,
oSettings, // oSettings,
columnSortOrder // columnSortOrder
); );
} }
return undefined; return undefined;
@ -358,11 +358,12 @@ export default class TableEntityListViewModel extends DataTableViewModel {
tableQuery: Entities.ITableQuery, tableQuery: Entities.ITableQuery,
tablePageStartIndex: number, tablePageStartIndex: number,
tablePageSize: number, tablePageSize: number,
downloadSize: number, downloadSize: number
draw: number, // draw: number,/
oSettings: any, // oSettings: any,
columnSortOrder: any // columnSortOrder: any
): void { ): void {
console.log("🚀 ~ file: TableEntityListViewModel.ts ~ line 366 ~ TableEntityListViewModel ~ prefetchAndRender");
this.queryErrorMessage(null); this.queryErrorMessage(null);
if (this.cache.serverCallInProgress) { if (this.cache.serverCallInProgress) {
return; return;
@ -452,6 +453,7 @@ export default class TableEntityListViewModel extends DataTableViewModel {
downloadSize: number, downloadSize: number,
currentRetry: number = 0 currentRetry: number = 0
): Q.Promise<any> { ): Q.Promise<any> {
console.log("🚀 ~ file: TableEntityListViewModel.ts ~ line 456 ~ TableEntityListViewModel ~ prefetchData");
if (!this.cache.serverCallInProgress) { if (!this.cache.serverCallInProgress) {
this.cache.serverCallInProgress = true; this.cache.serverCallInProgress = true;
this.allDownloaded = false; this.allDownloaded = false;

2
src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
View File

@ -474,7 +474,7 @@ export default class QueryBuilderViewModel {
return true; return true;
}; };
public onAddNewClauseKeyDown = (source: any, event: KeyboardEvent): boolean => { public onAddNewClauseKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): boolean => {
if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) { if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
this.addClauseIndex(this.clauseArray().length - 1, null); this.addClauseIndex(this.clauseArray().length - 1, null);
event.stopPropagation(); event.stopPropagation();

26
src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx
View File

@ -38,6 +38,8 @@ export interface IQueryTableEntityClauseProps {
onQueryTableEntityCheck: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void; onQueryTableEntityCheck: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
onDropdownChange: (selectedOption: IDropdownOption, selectedOptionType: string) => void; onDropdownChange: (selectedOption: IDropdownOption, selectedOptionType: string) => void;
onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void; onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
onAddNewClauseKeyDown?: (ev: React.KeyboardEvent<HTMLImageElement>) => void;
onDeleteCaluseKeyDown?: (ev: React.KeyboardEvent<HTMLImageElement>) => void;
} }
export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClauseProps> = ({ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClauseProps> = ({
@ -61,6 +63,8 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
onDeleteClause, onDeleteClause,
onDropdownChange, onDropdownChange,
onEntityValueChange, onEntityValueChange,
onAddNewClauseKeyDown,
onDeleteCaluseKeyDown,
}: IQueryTableEntityClauseProps): JSX.Element => { }: IQueryTableEntityClauseProps): JSX.Element => {
const cancelImageProps: IImageProps = { const cancelImageProps: IImageProps = {
width: 14, width: 14,
@ -87,7 +91,15 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
<> <>
<Stack horizontal tokens={sectionStackTokens}> <Stack horizontal tokens={sectionStackTokens}>
<TooltipHost content="Add new clause" id="addNewClause"> <TooltipHost content="Add new clause" id="addNewClause">
<Image {...addImageProps} src={AddIcon} alt="Add new clause" id="addNewClause" onClick={onAddNewClause} /> <Image
{...addImageProps}
src={AddIcon}
alt="Add new clause"
id="addNewClause"
onClick={onAddNewClause}
onKeyDown={onAddNewClauseKeyDown}
tabIndex={0}
/>
</TooltipHost> </TooltipHost>
<TooltipHost content="Delete clause" id="deleteClause"> <TooltipHost content="Delete clause" id="deleteClause">
<Image <Image
@ -96,6 +108,8 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
alt="delete clause" alt="delete clause"
id="deleteClause" id="deleteClause"
onClick={onDeleteClause} onClick={onDeleteClause}
onKeyDown={onDeleteCaluseKeyDown}
tabIndex={0}
/> />
</TooltipHost> </TooltipHost>
<Checkbox checked={isQueryTableEntityChecked} onChange={onQueryTableEntityCheck} /> <Checkbox checked={isQueryTableEntityChecked} onChange={onQueryTableEntityCheck} />
@ -106,7 +120,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
onDropdownChange(selectedOption, "selectedOperation") onDropdownChange(selectedOption, "selectedOperation")
} }
options={operationOptions} options={operationOptions}
id="operatorOptionId" // id="operatorOptionId"
styles={dropdownStyles} styles={dropdownStyles}
/> />
<Dropdown <Dropdown
@ -115,7 +129,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
onDropdownChange(selectedOption, "selectedField") onDropdownChange(selectedOption, "selectedField")
} }
options={fieldOptions} options={fieldOptions}
id="fieldOptionId" // id="fieldOptionId"
styles={dropdownStyles} styles={dropdownStyles}
/> />
<Dropdown <Dropdown
@ -124,7 +138,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
onDropdownChange(selectedOption, "selectedEntityType") onDropdownChange(selectedOption, "selectedEntityType")
} }
options={entityTypeOptions} options={entityTypeOptions}
id="entityOptionId" // id="entityOptionId"
disabled={validateEntityTypeOption()} disabled={validateEntityTypeOption()}
styles={dropdownStyles} styles={dropdownStyles}
/> />
@ -134,7 +148,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
onDropdownChange(selectedOption, "selectedOperator") onDropdownChange(selectedOption, "selectedOperator")
} }
options={operatorOptions} options={operatorOptions}
id="operatorOptionId" // id="operatorOptionId"
styles={dropdownStyles} styles={dropdownStyles}
/> />
{isTimeStampSelected ? ( {isTimeStampSelected ? (
@ -144,7 +158,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
onDropdownChange(selectedOption, "selectedTimestamp") onDropdownChange(selectedOption, "selectedTimestamp")
} }
options={timestampOptions} options={timestampOptions}
id="operatorOptionId" // id="operatorOptionId"
styles={dropdownStyles} styles={dropdownStyles}
/> />
) : ( ) : (

136
src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx
View File

@ -28,6 +28,7 @@ import QueryTextIcon from "../../../../images/Query-Text.svg";
import StatusWraning from "../../../../images/QueryBuilder/StatusWarning_16x.png"; import StatusWraning from "../../../../images/QueryBuilder/StatusWarning_16x.png";
import TriangleDown from "../../../../images/Triangle-down.svg"; import TriangleDown from "../../../../images/Triangle-down.svg";
import TriangleRight from "../../../../images/Triangle-right.svg"; import TriangleRight from "../../../../images/Triangle-right.svg";
import { NormalizedEventKey } from "../../../Common/Constants";
import { queryDocuments } from "../../../Common/dataAccess/queryDocuments"; import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
import { handleError } from "../../../Common/ErrorHandlingUtils"; import { handleError } from "../../../Common/ErrorHandlingUtils";
import * as HeadersUtility from "../../../Common/HeadersUtility"; import * as HeadersUtility from "../../../Common/HeadersUtility";
@ -97,12 +98,12 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.tableDataClient = this.container.tableDataClient; this.tableDataClient = this.container.tableDataClient;
this.tableEntityListViewModel2(new TableEntityListViewModel(this.tableCommands, props.queryTablesTab)); this.tableEntityListViewModel2(new TableEntityListViewModel(this.tableCommands, props.queryTablesTab));
const tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab); const tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab);
const queryBuilderViewModel = new QueryViewModel(this.props.queryTablesTab).queryBuilderViewModel(); // const queryBuilderViewModel = new QueryViewModel(this.props.queryTablesTab).queryBuilderViewModel();
const entityTypeOptions = queryBuilderViewModel.edmTypes(); // const entityTypeOptions = queryBuilderViewModel.edmTypes();
const timestampOptions = queryBuilderViewModel.timeOptions(); // const timestampOptions = queryBuilderViewModel.timeOptions();
const operatorsOptions = queryBuilderViewModel.operators(); // const operatorsOptions = queryBuilderViewModel.operators();
const operationOptions = queryBuilderViewModel.clauseRules(); // const operationOptions = queryBuilderViewModel.clauseRules();
this.state = { this.state = {
tableEntityListViewModel, tableEntityListViewModel,
@ -161,31 +162,32 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
selection: this.createSelection(), selection: this.createSelection(),
entities: [], entities: [],
headers: [], headers: [],
queryTableRows: [ queryTableRows: [],
{ // queryTableRows: [
isQueryTableEntityChecked: false, // {
selectedOperator: "=", // isQueryTableEntityChecked: false,
id: "1", // selectedOperator: "=",
selectedField: userContext.apiType === "Cassandra" ? "email" : "PartitionKey", // id: "1",
selectedOperation: "", // selectedField: userContext.apiType === "Cassandra" ? "email" : "PartitionKey",
entityValue: "", // selectedOperation: "",
selectedEntityType: "String", // entityValue: "",
isTimeStampSelected: false, // selectedEntityType: "String",
selectedTimestamp: "Last hour", // isTimeStampSelected: false,
operatorOptions: getformattedOptions(operatorsOptions), // selectedTimestamp: "Last hour",
fieldOptions: getformattedOptions(tableEntityListViewModel.headers), // operatorOptions: getformattedOptions(operatorsOptions),
entityTypeOptions: getformattedOptions(entityTypeOptions), // fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
operationOptions: getformattedOptions(operationOptions), // entityTypeOptions: getformattedOptions(entityTypeOptions),
timestampOptions: getformattedOptions(timestampOptions), // operationOptions: getformattedOptions(operationOptions),
clauseGroup: queryBuilderViewModel.queryClauses, // timestampOptions: getformattedOptions(timestampOptions),
isValue: true, // clauseGroup: queryBuilderViewModel.queryClauses,
isLocal: false, // isValue: true,
isTimestamp: false, // isLocal: false,
isCustomRangeTimestamp: false, // isTimestamp: false,
customTimeValue: "", // isCustomRangeTimestamp: false,
timeValue: "", // customTimeValue: "",
}, // timeValue: "",
], // },
// ],
isLoading: true, isLoading: true,
queryErrorMessage: "", queryErrorMessage: "",
hasQueryError: false, hasQueryError: false,
@ -259,7 +261,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
public loadFilterExample(): void { public loadFilterExample(): void {
const { queryTableRows, headers, entities } = this.state; const { queryTableRows, headers, entities } = this.state;
const queryTableRowsClone = [...queryTableRows]; const queryTableRowsClone = [...queryTableRows];
queryTableRowsClone[0].fieldOptions = getformattedOptions(headers); // queryTableRowsClone[0].fieldOptions = getformattedOptions(headers);
this.setState({ this.setState({
operators: this.state.queryViewModel.queryBuilderViewModel().operators(), operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
queryTableRows: queryTableRowsClone, queryTableRows: queryTableRowsClone,
@ -304,7 +306,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
public async loadEntities(isInitialLoad: boolean): Promise<void> { public async loadEntities(isInitialLoad: boolean): Promise<void> {
const { tableEntityListViewModel, selectedQueryText } = this.state; const { tableEntityListViewModel, selectedQueryText } = this.state;
tableEntityListViewModel.renderNextPageAndupdateCache(); // tableEntityListViewModel.renderNextPageAndupdateCache();
let headers: string[] = []; let headers: string[] = [];
//eslint-disable-next-line //eslint-disable-next-line
let documents: any = {}; let documents: any = {};
@ -362,6 +364,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
}); });
const documentItems = this.generateDetailsList(entities); const documentItems = this.generateDetailsList(entities);
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 367 ~ QueryTablesTabComponent ~ documentItems",
documentItems
);
this.setState( this.setState(
{ {
@ -373,9 +379,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
entities: entities, entities: entities,
originalItems: documentItems, originalItems: documentItems,
queryText: this.state.queryViewModel.queryText(), queryText: this.state.queryViewModel.queryText(),
// queryTableRows: headers.length === 0 ? [] : this.state.queryTableRows,
}, },
() => { () => {
if (isInitialLoad) { if (isInitialLoad && headers.length > 0) {
this.loadFilterExample(); this.loadFilterExample();
this.onItemsSelectionChanged(true); this.onItemsSelectionChanged(true);
} }
@ -628,6 +635,22 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.state.queryViewModel.toggleAdvancedOptions(); this.state.queryViewModel.toggleAdvancedOptions();
} }
public toggleAdvancedOptionsKeyDown(event: React.KeyboardEvent<HTMLDivElement>): void {
if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
this.toggleAdvancedOptions();
event.stopPropagation();
}
}
public selectQueryOptionsKeyDown(event: React.KeyboardEvent<HTMLAnchorElement>): void {
if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
this.state.queryViewModel.selectQueryOptions(this.state.headers, (selectMessage: string) =>
this.getSelectMessage(selectMessage)
);
event.stopPropagation();
}
}
public selectEditor(): void { public selectEditor(): void {
this.setState({ this.setState({
isEditorActive: true, isEditorActive: true,
@ -684,6 +707,13 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.setState({ queryTableRows: cloneQueryTableRows }); this.setState({ queryTableRows: cloneQueryTableRows });
}; };
public onDeleteClauseKeyDown(event: React.KeyboardEvent<HTMLDivElement>, indexToRemove: number): void {
if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
this.onDeleteClause(indexToRemove);
event.stopPropagation();
}
}
onAddNewClause = (): void => { onAddNewClause = (): void => {
const { queryTableRows, queryViewModel, headers } = this.state; const { queryTableRows, queryViewModel, headers } = this.state;
this.state.queryViewModel.queryBuilderViewModel().addNewClause(); this.state.queryViewModel.queryBuilderViewModel().addNewClause();
@ -717,6 +747,15 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.setState({ queryTableRows: cloneQueryTableRows }); this.setState({ queryTableRows: cloneQueryTableRows });
}; };
public onAddNewClauseKeyDown(event: React.KeyboardEvent<HTMLDivElement>): void {
console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 723 ~ QueryTablesTabComponent ~ event", event);
if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
this.state.queryViewModel.queryBuilderViewModel().onAddNewClauseKeyDown(event);
this.onAddNewClause();
event.stopPropagation();
}
}
private onEntityValueChange = (newInput: string, index: number) => { private onEntityValueChange = (newInput: string, index: number) => {
const { queryTableRows } = this.state; const { queryTableRows } = this.state;
const cloneQueryTableRows: IQueryTableRowsType[] = [...queryTableRows]; const cloneQueryTableRows: IQueryTableRowsType[] = [...queryTableRows];
@ -816,10 +855,22 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
onDropdownChange={(selectedOption: IDropdownOption, selectedOptionType: string) => onDropdownChange={(selectedOption: IDropdownOption, selectedOptionType: string) =>
this.onDropdownChange(selectedOption, selectedOptionType, index) this.onDropdownChange(selectedOption, selectedOptionType, index)
} }
onAddNewClauseKeyDown={(event: React.KeyboardEvent<HTMLImageElement>) =>
this.onAddNewClauseKeyDown(event)
}
onDeleteCaluseKeyDown={(event: React.KeyboardEvent<HTMLImageElement>) =>
this.onDeleteClauseKeyDown(event, index)
}
/> />
))} ))}
</> </>
<div className="addClause" role="button" onClick={this.onAddNewClause} tabIndex={0}> <div
className="addClause"
role="button"
onClick={this.onAddNewClause}
onKeyDown={(ev: React.KeyboardEvent<HTMLDivElement>) => this.onAddNewClauseKeyDown(ev)}
tabIndex={0}
>
<div className="addClause-heading"> <div className="addClause-heading">
<span className="clause-table addClause-title"> <span className="clause-table addClause-title">
<img <img
@ -838,15 +889,12 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
</div> </div>
)} )}
<div className="advanced-options-panel"> <div className="advanced-options-panel">
<div className="advanced-heading" onClick={() => this.toggleAdvancedOptions()}> <div
<span className="advanced-heading"
className="advanced-title" onClick={() => this.toggleAdvancedOptions()}
role="button" onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.toggleAdvancedOptionsKeyDown(event)}
aria-expanded={this.state.isExpanded} >
// onKeyDown = {() => this.state.queryViewModel.ontoggleAdvancedOptionsKeyDown} <span className="advanced-title" role="button" aria-expanded={this.state.isExpanded} tabIndex={0}>
// data-bind="click:toggleAdvancedOptions, event: { keydown: ontoggleAdvancedOptionsKeyDown }, attr:{ 'aria-expanded': isExpanded() ? 'true' : 'false' }"
tabIndex={0}
>
{!this.state.isExpanded && ( {!this.state.isExpanded && (
<div className="themed-images" id="ExpandChevronRight"> <div className="themed-images" id="ExpandChevronRight">
<img <img
@ -890,7 +938,6 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
</div> </div>
<a <a
className="select-options-link" className="select-options-link"
// data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
tabIndex={0} tabIndex={0}
role="link" role="link"
onClick={() => onClick={() =>
@ -898,6 +945,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.getSelectMessage(selectMessage) this.getSelectMessage(selectMessage)
) )
} }
onKeyDown={(event: React.KeyboardEvent<HTMLAnchorElement>) => this.selectQueryOptionsKeyDown(event)}
> >
<span>Choose Columns... </span> <span>Choose Columns... </span>
</a> </a>