random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-05-22 16:24:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

Converted HTMLs

Browse Source
This commit is contained in:
vaidankarswapnil 2021-07-22 11:08:41 +05:30
parent bb5aecac1b
commit 27cc1337ef
1 changed files with 80 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,6 +55,7 @@ interface IQueryTablesTabComponentStates {
addEntityButton: Button; addEntityButton: Button;
editEntityButton: Button; editEntityButton: Button;
deleteEntityButton: Button; deleteEntityButton: Button;
isHelperActive: boolean;
} }
class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, IQueryTablesTabComponentStates> { class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, IQueryTablesTabComponentStates> {
@ -75,6 +76,13 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
public queryBuilderButton: ViewModels.Button; public queryBuilderButton: ViewModels.Button;
public queryTextButton: ViewModels.Button; public queryTextButton: ViewModels.Button;
public container: Explorer; public container: Explorer;
public andLabel: string;
public actionLabel: string;
public fieldLabel: string;
public dataTypeLabel: string;
public operatorLabel: string;
public valueLabel: string;
constructor(props: IQueryTablesTabComponentProps) { constructor(props: IQueryTablesTabComponentProps) {
super(props); super(props);
this.container = props.collection && props.collection.container; this.container = props.collection && props.collection.container;
@ -87,6 +95,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
queryViewModel: new QueryViewModel(this.props.queryTablesTab), queryViewModel: new QueryViewModel(this.props.queryTablesTab),
queryText: "PartitionKey eq 'partionKey1'", queryText: "PartitionKey eq 'partionKey1'",
selectedQueryText: "", selectedQueryText: "",
isHelperActive: true,
executeQueryButton: { executeQueryButton: {
enabled: true, enabled: true,
visible: true, visible: true,
@ -122,6 +131,20 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 24 ~ QueryTablesTabComponent ~ constructor ~ props", // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 24 ~ QueryTablesTabComponent ~ constructor ~ props",
// props // props
// ); // );
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 85 ~ QueryTablesTabComponent ~ constructor ~ this.state",
this.state,
", ",
this.state.queryViewModel.queryBuilderViewModel().andLabel
);
this.andLabel = this.state.queryViewModel.queryBuilderViewModel().andLabel;
this.actionLabel = this.state.queryViewModel.queryBuilderViewModel().actionLabel;
this.fieldLabel = this.state.queryViewModel.queryBuilderViewModel().fieldLabel;
this.dataTypeLabel = this.state.queryViewModel.queryBuilderViewModel().dataTypeLabel;
this.operatorLabel = this.state.queryViewModel.queryBuilderViewModel().operatorLabel;
this.valueLabel = this.state.queryViewModel.queryBuilderViewModel().valueLabel;
useCommandBar.getState().setContextButtons(this.getTabsButtons()); useCommandBar.getState().setContextButtons(this.getTabsButtons());
this.buildCommandBarOptions(); this.buildCommandBarOptions();
@ -274,6 +297,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
></textarea> ></textarea>
</div> </div>
</div> </div>
{this.state.queryViewModel.isHelperActive() && (
<div style={{ paddingLeft: "13px" }}> <div style={{ paddingLeft: "13px" }}>
<div className="clause-table"> <div className="clause-table">
<div className="scroll-box scrollable" id="scroll"> <div className="scroll-box scrollable" id="scroll">
@ -281,7 +305,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
<thead> <thead>
<tr className="clause-table-row"> <tr className="clause-table-row">
<th className="clause-table-cell header-background action-header"> <th className="clause-table-cell header-background action-header">
<span></span> <span>{this.actionLabel}</span>
</th> </th>
<th className="clause-table-cell header-background group-control-header"> <th className="clause-table-cell header-background group-control-header">
<button type="button"> <button type="button">
@ -290,19 +314,19 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
</th> </th>
<th className="clause-table-cell header-background"></th> <th className="clause-table-cell header-background"></th>
<th className="clause-table-cell header-background and-or-header"> <th className="clause-table-cell header-background and-or-header">
<span></span> <span>{this.andLabel}</span>
</th> </th>
<th className="clause-table-cell header-background field-header"> <th className="clause-table-cell header-background field-header">
<span></span> <span>{this.fieldLabel}</span>
</th> </th>
<th className="clause-table-cell header-background type-header"> <th className="clause-table-cell header-background type-header">
<span></span> <span>{this.dataTypeLabel}</span>
</th> </th>
<th className="clause-table-cell header-background operator-header"> <th className="clause-table-cell header-background operator-header">
<span></span> <span>{this.operatorLabel}</span>
</th> </th>
<th className="clause-table-cell header-background value-header"> <th className="clause-table-cell header-background value-header">
<span></span> <span>{this.valueLabel}</span>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -332,6 +356,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
</div> </div>
</div> </div>
</div> </div>
)}
<div className="advanced-options-panel"> <div className="advanced-options-panel">
<div className="advanced-heading"> <div className="advanced-heading">
<span <span