random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-05-22 00:03:37 +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

135
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,64 +297,66 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
></textarea> ></textarea>
</div> </div>
</div> </div>
<div style={{ paddingLeft: "13px" }}> {this.state.queryViewModel.isHelperActive() && (
<div className="clause-table"> <div style={{ paddingLeft: "13px" }}>
<div className="scroll-box scrollable" id="scroll"> <div className="clause-table">
<table className="clause-table"> <div className="scroll-box scrollable" id="scroll">
<thead> <table className="clause-table">
<tr className="clause-table-row"> <thead>
<th className="clause-table-cell header-background action-header"> <tr className="clause-table-row">
<span></span> <th className="clause-table-cell header-background action-header">
</th> <span>{this.actionLabel}</span>
<th className="clause-table-cell header-background group-control-header"> </th>
<button type="button"> <th className="clause-table-cell header-background group-control-header">
<img className="and-or-svg" src={AndOr} alt="Group selected clauses" /> <button type="button">
</button> <img className="and-or-svg" src={AndOr} alt="Group selected clauses" />
</th> </button>
<th className="clause-table-cell header-background"></th> </th>
<th className="clause-table-cell header-background and-or-header"> <th className="clause-table-cell header-background"></th>
<span></span> <th className="clause-table-cell header-background and-or-header">
</th> <span>{this.andLabel}</span>
<th className="clause-table-cell header-background field-header"> </th>
<span></span> <th className="clause-table-cell header-background field-header">
</th> <span>{this.fieldLabel}</span>
<th className="clause-table-cell header-background type-header"> </th>
<span></span> <th className="clause-table-cell header-background type-header">
</th> <span>{this.dataTypeLabel}</span>
<th className="clause-table-cell header-background operator-header"> </th>
<span></span> <th className="clause-table-cell header-background operator-header">
</th> <span>{this.operatorLabel}</span>
<th className="clause-table-cell header-background value-header"> </th>
<span></span> <th className="clause-table-cell header-background value-header">
</th> <span>{this.valueLabel}</span>
</tr> </th>
</thead> </tr>
<tbody></tbody> </thead>
</table> <tbody></tbody>
</div> </table>
<div </div>
className="addClause" <div
role="button" className="addClause"
// data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }, attr: { title: addNewClauseLine }" role="button"
tabIndex={0} // data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }, attr: { title: addNewClauseLine }"
> tabIndex={0}
<div className="addClause-heading"> >
<span className="clause-table addClause-title"> <div className="addClause-heading">
<img <span className="clause-table addClause-title">
className="addclauseProperty-Img" <img
style={{ marginBottom: "5px" }} className="addclauseProperty-Img"
src={AddProperty} style={{ marginBottom: "5px" }}
alt="Add new clause" src={AddProperty}
/> alt="Add new clause"
<span />
style={{ marginLeft: "5px" }} <span
// data-bind="text: addNewClauseLine" style={{ marginLeft: "5px" }}
></span> // data-bind="text: addNewClauseLine"
</span> ></span>
</span>
</div>
</div> </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