add load, create, update and delete Document
This commit is contained in:
parent
b4443ac89f
commit
4559496640
|
@ -3088,4 +3088,64 @@ settings-pane {
|
||||||
.hiddenMain {
|
.hiddenMain {
|
||||||
display: none;
|
display: none;
|
||||||
height: 0px;
|
height: 0px;
|
||||||
|
}
|
||||||
|
.react-editor {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
.documentTabSearchBar{
|
||||||
|
width: 80%;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
.documentTabFiltetButton{
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.filterSuggestions {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 133px;
|
||||||
|
padding: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||||
|
transition: 0.3s;
|
||||||
|
width: 20%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.documentTabSuggestions {
|
||||||
|
padding: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.documentTabNoFilterView {
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
.noFilterText {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.documentTabWatermark{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 10%;
|
||||||
|
margin-right: 12%;
|
||||||
|
}
|
||||||
|
.documentCreateText {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.documentLoadMore {
|
||||||
|
color: #0078D4;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.leftSplitter {
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.documentIdItem{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.splitterWrapper .splitter-layout .layout-pane.layout-pane-primary{
|
||||||
|
max-height: 60%;
|
||||||
}
|
}
|
|
@ -201,6 +201,3 @@
|
||||||
.migration:disabled {
|
.migration:disabled {
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
}
|
}
|
||||||
.react-editor {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
|
@ -10,6 +10,7 @@ export interface EditorReactProps {
|
||||||
onContentChanged?: (newContent: string) => void; // Called when text is changed
|
onContentChanged?: (newContent: string) => void; // Called when text is changed
|
||||||
lineNumbers?: monaco.editor.IEditorOptions["lineNumbers"];
|
lineNumbers?: monaco.editor.IEditorOptions["lineNumbers"];
|
||||||
theme?: string; // Monaco editor theme
|
theme?: string; // Monaco editor theme
|
||||||
|
editorKey?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class EditorReact extends React.Component<EditorReactProps> {
|
export class EditorReact extends React.Component<EditorReactProps> {
|
||||||
|
@ -27,13 +28,19 @@ export class EditorReact extends React.Component<EditorReactProps> {
|
||||||
|
|
||||||
public shouldComponentUpdate(): boolean {
|
public shouldComponentUpdate(): boolean {
|
||||||
// Prevents component re-rendering
|
// Prevents component re-rendering
|
||||||
return false;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
public componentWillUnmount(): void {
|
public componentWillUnmount(): void {
|
||||||
this.selectionListener && this.selectionListener.dispose();
|
this.selectionListener && this.selectionListener.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public componentDidUpdate(prevProps: EditorReactProps): void {
|
||||||
|
if (prevProps.editorKey !== this.props.editorKey) {
|
||||||
|
this.createEditor(this.configureEditor.bind(this));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public render(): JSX.Element {
|
public render(): JSX.Element {
|
||||||
return <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />;
|
return <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
|
|
||||||
import CloseIcon from "../../../../images/close-black.svg";
|
import CloseIcon from "../../../../images/close-black.svg";
|
||||||
|
import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
|
||||||
|
|
||||||
export interface QueryContainerComponentProps {
|
export interface QueryContainerComponentProps {
|
||||||
initialQuery: string;
|
initialQuery: string;
|
||||||
|
|
|
@ -0,0 +1,51 @@
|
||||||
|
import { extractPartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
|
||||||
|
import * as DataModels from "../../Contracts/DataModels";
|
||||||
|
import DocumentId from "../Tree/DocumentId";
|
||||||
|
|
||||||
|
export function hasShardKeySpecified(
|
||||||
|
document: string,
|
||||||
|
partitionKey: DataModels.PartitionKey,
|
||||||
|
partitionKeyProperty: string
|
||||||
|
): boolean {
|
||||||
|
return Boolean(
|
||||||
|
extractPartitionKey(
|
||||||
|
document,
|
||||||
|
getPartitionKeyDefinition(partitionKey, partitionKeyProperty) as PartitionKeyDefinition
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getPartitionKeyDefinition(
|
||||||
|
partitionKey: DataModels.PartitionKey,
|
||||||
|
partitionKeyProperty: string
|
||||||
|
): DataModels.PartitionKey {
|
||||||
|
if (
|
||||||
|
partitionKey &&
|
||||||
|
partitionKey.paths &&
|
||||||
|
partitionKey.paths.length &&
|
||||||
|
partitionKey.paths.length > 0 &&
|
||||||
|
partitionKey.paths[0].indexOf("$v") > -1
|
||||||
|
) {
|
||||||
|
// Convert BsonSchema2 to /path format
|
||||||
|
partitionKey = {
|
||||||
|
kind: partitionKey.kind,
|
||||||
|
paths: ["/" + partitionKeyProperty.replace(/\./g, "/")],
|
||||||
|
version: partitionKey.version,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return partitionKey;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDocumentContent(row: DocumentId): string {
|
||||||
|
const { partitionKeyProperty, partitionKeyValue, rid, self, stringPartitionKeyValue, ts } = row;
|
||||||
|
const documentContent = JSON.stringify({
|
||||||
|
partitionKeyProperty: partitionKeyProperty || "",
|
||||||
|
partitionKeyValue: partitionKeyValue || "",
|
||||||
|
rid: rid || "",
|
||||||
|
self: self || "",
|
||||||
|
stringPartitionKeyValue: stringPartitionKeyValue || "",
|
||||||
|
ts: ts || "",
|
||||||
|
});
|
||||||
|
const formattedDocumentContent = documentContent.replace(/,/g, ",\n").replace("{", "{\n").replace("}", "\n}");
|
||||||
|
return formattedDocumentContent;
|
||||||
|
}
|
|
@ -2,11 +2,7 @@ import { extractPartitionKey, ItemDefinition, PartitionKeyDefinition, QueryItera
|
||||||
import * as ko from "knockout";
|
import * as ko from "knockout";
|
||||||
import Q from "q";
|
import Q from "q";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import 'react-splitter-layout/lib/index.css';
|
import "react-splitter-layout/lib/index.css";
|
||||||
import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
|
|
||||||
import DiscardIcon from "../../../images/discard.svg";
|
|
||||||
import NewDocumentIcon from "../../../images/NewDocument.svg";
|
|
||||||
import SaveIcon from "../../../images/save-cosmos.svg";
|
|
||||||
import UploadIcon from "../../../images/Upload_16x16.svg";
|
import UploadIcon from "../../../images/Upload_16x16.svg";
|
||||||
import * as Constants from "../../Common/Constants";
|
import * as Constants from "../../Common/Constants";
|
||||||
import { DocumentsGridMetrics, KeyCodes } from "../../Common/Constants";
|
import { DocumentsGridMetrics, KeyCodes } from "../../Common/Constants";
|
||||||
|
@ -75,6 +71,7 @@ export default class DocumentsTab extends TabsBase {
|
||||||
|
|
||||||
constructor(options: ViewModels.DocumentsTabOptions) {
|
constructor(options: ViewModels.DocumentsTabOptions) {
|
||||||
super(options);
|
super(options);
|
||||||
|
|
||||||
this.isPreferredApiMongoDB = userContext.apiType === "Mongo" || options.isPreferredApiMongoDB;
|
this.isPreferredApiMongoDB = userContext.apiType === "Mongo" || options.isPreferredApiMongoDB;
|
||||||
|
|
||||||
this.idHeader = this.isPreferredApiMongoDB ? "_id" : "id";
|
this.idHeader = this.isPreferredApiMongoDB ? "_id" : "id";
|
||||||
|
@ -791,92 +788,92 @@ export default class DocumentsTab extends TabsBase {
|
||||||
return QueryUtils.buildDocumentsQuery(filter, this.partitionKeyProperty, this.partitionKey);
|
return QueryUtils.buildDocumentsQuery(filter, this.partitionKeyProperty, this.partitionKey);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected getTabsButtons(): CommandButtonComponentProps[] {
|
// protected getTabsButtons(): CommandButtonComponentProps[] {
|
||||||
const buttons: CommandButtonComponentProps[] = [];
|
// const buttons: CommandButtonComponentProps[] = [];
|
||||||
const label = !this.isPreferredApiMongoDB ? "New Item" : "New Document";
|
// const label = !this.isPreferredApiMongoDB ? "New Item" : "New Document";
|
||||||
if (this.newDocumentButton.visible()) {
|
// if (this.newDocumentButton.visible()) {
|
||||||
buttons.push({
|
// buttons.push({
|
||||||
iconSrc: NewDocumentIcon,
|
// iconSrc: NewDocumentIcon,
|
||||||
iconAlt: label,
|
// iconAlt: label,
|
||||||
onCommandClick: this.onNewDocumentClick,
|
// onCommandClick: this.onNewDocumentClick,
|
||||||
commandButtonLabel: label,
|
// commandButtonLabel: label,
|
||||||
ariaLabel: label,
|
// ariaLabel: label,
|
||||||
hasPopup: false,
|
// hasPopup: false,
|
||||||
disabled: !this.newDocumentButton.enabled(),
|
// disabled: !this.newDocumentButton.enabled(),
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (this.saveNewDocumentButton.visible()) {
|
// if (this.saveNewDocumentButton.visible()) {
|
||||||
const label = "Save";
|
// const label = "Save";
|
||||||
buttons.push({
|
// buttons.push({
|
||||||
iconSrc: SaveIcon,
|
// iconSrc: SaveIcon,
|
||||||
iconAlt: label,
|
// iconAlt: label,
|
||||||
onCommandClick: this.onSaveNewDocumentClick,
|
// onCommandClick: this.onSaveNewDocumentClick,
|
||||||
commandButtonLabel: label,
|
// commandButtonLabel: label,
|
||||||
ariaLabel: label,
|
// ariaLabel: label,
|
||||||
hasPopup: false,
|
// hasPopup: false,
|
||||||
disabled: !this.saveNewDocumentButton.enabled(),
|
// disabled: !this.saveNewDocumentButton.enabled(),
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (this.discardNewDocumentChangesButton.visible()) {
|
// if (this.discardNewDocumentChangesButton.visible()) {
|
||||||
const label = "Discard";
|
// const label = "Discard";
|
||||||
buttons.push({
|
// buttons.push({
|
||||||
iconSrc: DiscardIcon,
|
// iconSrc: DiscardIcon,
|
||||||
iconAlt: label,
|
// iconAlt: label,
|
||||||
onCommandClick: this.onRevertNewDocumentClick,
|
// onCommandClick: this.onRevertNewDocumentClick,
|
||||||
commandButtonLabel: label,
|
// commandButtonLabel: label,
|
||||||
ariaLabel: label,
|
// ariaLabel: label,
|
||||||
hasPopup: false,
|
// hasPopup: false,
|
||||||
disabled: !this.discardNewDocumentChangesButton.enabled(),
|
// disabled: !this.discardNewDocumentChangesButton.enabled(),
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (this.saveExisitingDocumentButton.visible()) {
|
// if (this.saveExisitingDocumentButton.visible()) {
|
||||||
const label = "Update";
|
// const label = "Update";
|
||||||
buttons.push({
|
// buttons.push({
|
||||||
iconSrc: SaveIcon,
|
// iconSrc: SaveIcon,
|
||||||
iconAlt: label,
|
// iconAlt: label,
|
||||||
onCommandClick: this.onSaveExisitingDocumentClick,
|
// onCommandClick: this.onSaveExisitingDocumentClick,
|
||||||
commandButtonLabel: label,
|
// commandButtonLabel: label,
|
||||||
ariaLabel: label,
|
// ariaLabel: label,
|
||||||
hasPopup: false,
|
// hasPopup: false,
|
||||||
disabled: !this.saveExisitingDocumentButton.enabled(),
|
// disabled: !this.saveExisitingDocumentButton.enabled(),
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (this.discardExisitingDocumentChangesButton.visible()) {
|
// if (this.discardExisitingDocumentChangesButton.visible()) {
|
||||||
const label = "Discard";
|
// const label = "Discard";
|
||||||
buttons.push({
|
// buttons.push({
|
||||||
iconSrc: DiscardIcon,
|
// iconSrc: DiscardIcon,
|
||||||
iconAlt: label,
|
// iconAlt: label,
|
||||||
onCommandClick: this.onRevertExisitingDocumentClick,
|
// onCommandClick: this.onRevertExisitingDocumentClick,
|
||||||
commandButtonLabel: label,
|
// commandButtonLabel: label,
|
||||||
ariaLabel: label,
|
// ariaLabel: label,
|
||||||
hasPopup: false,
|
// hasPopup: false,
|
||||||
disabled: !this.discardExisitingDocumentChangesButton.enabled(),
|
// disabled: !this.discardExisitingDocumentChangesButton.enabled(),
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (this.deleteExisitingDocumentButton.visible()) {
|
// if (this.deleteExisitingDocumentButton.visible()) {
|
||||||
const label = "Delete";
|
// const label = "Delete";
|
||||||
buttons.push({
|
// buttons.push({
|
||||||
iconSrc: DeleteDocumentIcon,
|
// iconSrc: DeleteDocumentIcon,
|
||||||
iconAlt: label,
|
// iconAlt: label,
|
||||||
onCommandClick: this.onDeleteExisitingDocumentClick,
|
// onCommandClick: this.onDeleteExisitingDocumentClick,
|
||||||
commandButtonLabel: label,
|
// commandButtonLabel: label,
|
||||||
ariaLabel: label,
|
// ariaLabel: label,
|
||||||
hasPopup: false,
|
// hasPopup: false,
|
||||||
disabled: !this.deleteExisitingDocumentButton.enabled(),
|
// disabled: !this.deleteExisitingDocumentButton.enabled(),
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (!this.isPreferredApiMongoDB) {
|
// if (!this.isPreferredApiMongoDB) {
|
||||||
buttons.push(DocumentsTab._createUploadButton(this.collection.container));
|
// buttons.push(DocumentsTab._createUploadButton(this.collection.container));
|
||||||
}
|
// }
|
||||||
|
|
||||||
return buttons;
|
// return buttons;
|
||||||
}
|
// }
|
||||||
|
|
||||||
protected buildCommandBarOptions(): void {
|
protected buildCommandBarOptions(): void {
|
||||||
ko.computed(() =>
|
ko.computed(() =>
|
||||||
|
@ -925,8 +922,6 @@ export default class DocumentsTab extends TabsBase {
|
||||||
}
|
}
|
||||||
|
|
||||||
render(): JSX.Element {
|
render(): JSX.Element {
|
||||||
return (
|
return <DocumentsTabContent {...this} />;
|
||||||
<DocumentsTabContent />
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,155 +1,704 @@
|
||||||
import { DetailsList, DetailsListLayoutMode, IColumn, Selection, SelectionMode } from '@fluentui/react/lib/DetailsList';
|
import { extractPartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
|
||||||
import * as React from 'react';
|
import {
|
||||||
import SplitterLayout from 'react-splitter-layout';
|
DetailsList,
|
||||||
|
DetailsListLayoutMode,
|
||||||
|
IColumn,
|
||||||
|
IIconProps,
|
||||||
|
IImageProps,
|
||||||
|
Image,
|
||||||
|
ImageFit,
|
||||||
|
List,
|
||||||
|
PrimaryButton,
|
||||||
|
SelectionMode,
|
||||||
|
Stack,
|
||||||
|
Text,
|
||||||
|
TextField,
|
||||||
|
} from "@fluentui/react";
|
||||||
|
import {} from "@fluentui/react/lib/Image";
|
||||||
|
import * as React from "react";
|
||||||
|
import SplitterLayout from "react-splitter-layout";
|
||||||
|
import CloseIcon from "../../../images/close-black.svg";
|
||||||
|
import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
|
||||||
|
import DiscardIcon from "../../../images/discard.svg";
|
||||||
|
import DocumentWaterMark from "../../../images/DocumentWaterMark.svg";
|
||||||
|
import NewDocumentIcon from "../../../images/NewDocument.svg";
|
||||||
|
import SaveIcon from "../../../images/save-cosmos.svg";
|
||||||
|
import { Areas } from "../../Common/Constants";
|
||||||
|
// import { createDocument } from "../../Common/dataAccess/createDocument";
|
||||||
|
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||||
|
import { logError } from "../../Common/Logger";
|
||||||
|
import { createDocument, deleteDocument, queryDocuments, updateDocument } from "../../Common/MongoProxyClient";
|
||||||
|
import { Action } from "../../Shared/Telemetry/TelemetryConstants";
|
||||||
|
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||||
|
import { userContext } from "../../UserContext";
|
||||||
|
import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
|
||||||
import { EditorReact } from "../Controls/Editor/EditorReact";
|
import { EditorReact } from "../Controls/Editor/EditorReact";
|
||||||
|
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
|
||||||
|
import DocumentId from "../Tree/DocumentId";
|
||||||
|
import ObjectId from "../Tree/ObjectId";
|
||||||
|
import DocumentsTab from "./DocumentsTab";
|
||||||
|
import { formatDocumentContent, getPartitionKeyDefinition, hasShardKeySpecified } from "./DocumentTabUtils";
|
||||||
|
|
||||||
|
const filterIcon: IIconProps = { iconName: "Filter" };
|
||||||
|
|
||||||
export interface IDetailsListDocumentsExampleState {
|
export interface IDocumentsTabContentState {
|
||||||
columns: IColumn[];
|
columns: IColumn[];
|
||||||
items: any;
|
|
||||||
selectionDetails: string;
|
|
||||||
isModalSelection: boolean;
|
isModalSelection: boolean;
|
||||||
isCompactMode: boolean;
|
isCompactMode: boolean;
|
||||||
announcedMessage?: string;
|
announcedMessage?: string;
|
||||||
|
isSuggestionVisible: boolean;
|
||||||
|
filter: string;
|
||||||
|
isFilterOptionVisible: boolean;
|
||||||
|
isEditorVisible: boolean;
|
||||||
|
documentContent: string;
|
||||||
|
documentIds: Array<DocumentId>;
|
||||||
|
editorKey: string;
|
||||||
|
selectedDocumentId?: DocumentId;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IDocument {
|
export interface IDocument {
|
||||||
key: string;
|
|
||||||
name: string;
|
|
||||||
value: string;
|
value: string;
|
||||||
iconName: string;
|
id: string;
|
||||||
fileType: string;
|
|
||||||
modifiedBy: string;
|
|
||||||
dateModified: string;
|
|
||||||
dateModifiedValue: number;
|
|
||||||
fileSize: string;
|
|
||||||
fileSizeRaw: number;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class DocumentsTabContent extends React.Component<{}, IDetailsListDocumentsExampleState> {
|
interface IButton {
|
||||||
private _selection: Selection;
|
visible: boolean;
|
||||||
|
enabled: boolean;
|
||||||
|
isSelected?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
constructor(props: {}) {
|
const imageProps: Partial<IImageProps> = {
|
||||||
|
imageFit: ImageFit.centerContain,
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
style: { marginTop: "15px" },
|
||||||
|
};
|
||||||
|
|
||||||
|
const filterSuggestions = [{ value: `{"id": "foo"}` }, { value: "{ qty: { $gte: 20 } }" }];
|
||||||
|
const intitalDocumentContent = `{ \n "id": "replace_with_new_document_id" \n }`;
|
||||||
|
export default class DocumentsTabContent extends React.Component<DocumentsTab, IDocumentsTabContentState> {
|
||||||
|
public newDocumentButton: IButton;
|
||||||
|
public saveNewDocumentButton: IButton;
|
||||||
|
public discardNewDocumentChangesButton: IButton;
|
||||||
|
public saveExisitingDocumentButton: IButton;
|
||||||
|
public discardExisitingDocumentChangesButton: IButton;
|
||||||
|
public deleteExisitingDocumentButton: IButton;
|
||||||
|
|
||||||
|
constructor(props: DocumentsTab) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
|
this.newDocumentButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: true,
|
||||||
|
};
|
||||||
|
this.saveNewDocumentButton = {
|
||||||
|
visible: false,
|
||||||
|
enabled: true,
|
||||||
|
};
|
||||||
|
this.discardNewDocumentChangesButton = {
|
||||||
|
visible: false,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
this.saveExisitingDocumentButton = {
|
||||||
|
visible: false,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
this.discardExisitingDocumentChangesButton = {
|
||||||
|
visible: false,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
this.deleteExisitingDocumentButton = {
|
||||||
|
visible: false,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
|
||||||
const columns: IColumn[] = [
|
const columns: IColumn[] = [
|
||||||
{
|
{
|
||||||
key: 'column4',
|
key: "_id",
|
||||||
name: 'Modified By',
|
name: props.idHeader,
|
||||||
fieldName: 'modifiedBy',
|
minWidth: 90,
|
||||||
minWidth: 70,
|
maxWidth: 140,
|
||||||
maxWidth: 90,
|
|
||||||
isResizable: true,
|
isResizable: true,
|
||||||
isCollapsible: true,
|
isCollapsible: true,
|
||||||
data: 'string',
|
data: "string",
|
||||||
onColumnClick: this._onColumnClick,
|
onRender: (item: DocumentId) => {
|
||||||
onRender: (item: IDocument) => {
|
return (
|
||||||
return <span>{item.modifiedBy}</span>;
|
<div onClick={() => this.handleRow(item)} className="documentIdItem">
|
||||||
|
{item.rid}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
},
|
},
|
||||||
isPadded: true,
|
isPadded: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'column5',
|
key: "column2",
|
||||||
name: 'File Size',
|
name: props.partitionKeyPropertyHeader,
|
||||||
fieldName: 'fileSizeRaw',
|
minWidth: 50,
|
||||||
minWidth: 70,
|
maxWidth: 60,
|
||||||
maxWidth: 90,
|
|
||||||
isResizable: true,
|
isResizable: true,
|
||||||
isCollapsible: true,
|
isCollapsible: true,
|
||||||
data: 'number',
|
data: "number",
|
||||||
onColumnClick: this._onColumnClick,
|
|
||||||
onRender: (item: IDocument) => {
|
|
||||||
return <span>{item.fileSize}</span>;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
this._selection = new Selection({
|
|
||||||
onSelectionChanged: () => {
|
|
||||||
this.setState({
|
|
||||||
selectionDetails: this._getSelectionDetails(),
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
fileSize: "44 KB",
|
|
||||||
modifiedBy: "Dolor Sit",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fileSize: "44 KB",
|
|
||||||
modifiedBy: "Dolor Sit",
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
items: items,
|
|
||||||
columns: columns,
|
columns: columns,
|
||||||
selectionDetails: this._getSelectionDetails(),
|
|
||||||
isModalSelection: false,
|
isModalSelection: false,
|
||||||
isCompactMode: false,
|
isCompactMode: false,
|
||||||
announcedMessage: undefined,
|
announcedMessage: undefined,
|
||||||
|
isSuggestionVisible: false,
|
||||||
|
filter: "",
|
||||||
|
isFilterOptionVisible: true,
|
||||||
|
isEditorVisible: false,
|
||||||
|
documentContent: intitalDocumentContent,
|
||||||
|
documentIds: [],
|
||||||
|
editorKey: "",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): JSX.Element {
|
async componentDidMount(): void {
|
||||||
const { columns, isCompactMode, items } = this.state;
|
this.updateTabButton();
|
||||||
|
if (userContext.apiType === "Mongo") {
|
||||||
return (
|
this.queryDocumentsData();
|
||||||
<div>
|
|
||||||
<SplitterLayout primaryIndex={0} secondaryInitialSize={1000}>
|
|
||||||
<DetailsList
|
|
||||||
items={items}
|
|
||||||
compact={isCompactMode}
|
|
||||||
columns={columns}
|
|
||||||
selectionMode={SelectionMode.none}
|
|
||||||
getKey={this._getKey}
|
|
||||||
setKey="none"
|
|
||||||
layoutMode={DetailsListLayoutMode.justified}
|
|
||||||
isHeaderVisible={true}
|
|
||||||
onItemInvoked={this._onItemInvoked}
|
|
||||||
/>
|
|
||||||
<div className="react-editor">
|
|
||||||
<EditorReact
|
|
||||||
language={"json"}
|
|
||||||
content={`{
|
|
||||||
name: "bosy"
|
|
||||||
}`}
|
|
||||||
isReadOnly={false}
|
|
||||||
ariaLabel={"Graph JSON"}
|
|
||||||
// onContentChanged={this.handleTriggerBodyChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</SplitterLayout>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private _getKey(item: any, index?: number): string {
|
|
||||||
return item.key;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
private _onItemInvoked(item: any): void {
|
|
||||||
alert(`Item invoked: ${item.name}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
private _getSelectionDetails(): string {
|
|
||||||
const selectionCount = this._selection.getSelectedCount();
|
|
||||||
|
|
||||||
switch (selectionCount) {
|
|
||||||
case 0:
|
|
||||||
return 'No items selected';
|
|
||||||
case 1:
|
|
||||||
return '1 item selected: ' + (this._selection.getSelection()[0] as IDocument).name;
|
|
||||||
default:
|
|
||||||
return `${selectionCount} items selected`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private _onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn): void => {
|
queryDocumentsData = async (): Promise<void> => {
|
||||||
console.log("====>", column)
|
this.props.isExecuting(true);
|
||||||
|
this.props.isExecutionError(false);
|
||||||
|
try {
|
||||||
|
const { filter } = this.state;
|
||||||
|
const query: string = filter || "{}";
|
||||||
|
const queryDocumentsData = await queryDocuments(
|
||||||
|
this.props.collection.databaseId,
|
||||||
|
this.props.collection,
|
||||||
|
true,
|
||||||
|
query,
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
if (queryDocumentsData) {
|
||||||
|
const nextDocumentIds = queryDocumentsData.documents.map((rawDocument: any) => {
|
||||||
|
const partitionKeyValue = rawDocument._partitionKeyValue;
|
||||||
|
return new DocumentId(this.props, rawDocument, partitionKeyValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setState({ documentIds: nextDocumentIds });
|
||||||
|
}
|
||||||
|
if (this.props.onLoadStartKey !== undefined) {
|
||||||
|
TelemetryProcessor.traceSuccess(
|
||||||
|
Action.Tab,
|
||||||
|
{
|
||||||
|
databaseName: this.props.collection.databaseId,
|
||||||
|
collectionName: this.props.collection.id(),
|
||||||
|
|
||||||
|
dataExplorerArea: Areas.Tab,
|
||||||
|
tabTitle: this.props.tabTitle(),
|
||||||
|
},
|
||||||
|
this.props.onLoadStartKey
|
||||||
|
);
|
||||||
|
}
|
||||||
|
this.props.isExecuting(false);
|
||||||
|
} catch (error) {
|
||||||
|
if (this.props.onLoadStartKey !== undefined) {
|
||||||
|
TelemetryProcessor.traceFailure(
|
||||||
|
Action.Tab,
|
||||||
|
{
|
||||||
|
databaseName: this.props.collection.databaseId,
|
||||||
|
collectionName: this.props.collection.id(),
|
||||||
|
|
||||||
|
dataExplorerArea: Areas.Tab,
|
||||||
|
tabTitle: this.props.tabTitle(),
|
||||||
|
error: getErrorMessage(error),
|
||||||
|
errorStack: getErrorStack(error),
|
||||||
|
},
|
||||||
|
this.props.onLoadStartKey
|
||||||
|
);
|
||||||
|
}
|
||||||
|
this.props.isExecuting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
handleRow = (row: DocumentId): void => {
|
||||||
|
const formattedDocumentContent = formatDocumentContent(row);
|
||||||
|
this.newDocumentButton = {
|
||||||
|
visible: false,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
this.saveNewDocumentButton = {
|
||||||
|
visible: false,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
this.discardNewDocumentChangesButton = {
|
||||||
|
visible: false,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
this.saveExisitingDocumentButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
this.discardExisitingDocumentChangesButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
this.deleteExisitingDocumentButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: true,
|
||||||
|
};
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
documentContent: formattedDocumentContent,
|
||||||
|
isEditorVisible: true,
|
||||||
|
editorKey: row.rid,
|
||||||
|
selectedDocumentId: row,
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
this.updateTabButton();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
formatDocumentContent = (row: DocumentId): string => {
|
||||||
|
const { partitionKeyProperty, partitionKeyValue, rid, self, stringPartitionKeyValue, ts } = row;
|
||||||
|
const documentContent = JSON.stringify({
|
||||||
|
partitionKeyProperty: partitionKeyProperty || "",
|
||||||
|
partitionKeyValue: partitionKeyValue || "",
|
||||||
|
rid: rid || "",
|
||||||
|
self: self || "",
|
||||||
|
stringPartitionKeyValue: stringPartitionKeyValue || "",
|
||||||
|
ts: ts || "",
|
||||||
|
});
|
||||||
|
const formattedDocumentContent = documentContent.replace(/,/g, ",\n").replace("{", "{\n").replace("}", "\n}");
|
||||||
|
return formattedDocumentContent;
|
||||||
|
};
|
||||||
|
|
||||||
|
handleFilter = (): void => {
|
||||||
|
this.queryDocumentsData();
|
||||||
|
this.setState({
|
||||||
|
isSuggestionVisible: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
private async updateMongoDocument(): Promise<void> {
|
||||||
|
const { selectedDocumentId, documentContent, documentIds } = this.state;
|
||||||
|
const { isExecutionError, isExecuting, tabTitle, collection, partitionKey, partitionKeyProperty } = this.props;
|
||||||
|
isExecutionError(false);
|
||||||
|
isExecuting(true);
|
||||||
|
const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
|
||||||
|
dataExplorerArea: Areas.Tab,
|
||||||
|
tabTitle: tabTitle(),
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
const updatedDocument = await updateDocument(
|
||||||
|
collection.databaseId,
|
||||||
|
collection,
|
||||||
|
selectedDocumentId,
|
||||||
|
documentContent
|
||||||
|
);
|
||||||
|
documentIds.forEach((documentId: DocumentId) => {
|
||||||
|
if (documentId.rid === updatedDocument._rid) {
|
||||||
|
const partitionKeyArray = extractPartitionKey(
|
||||||
|
updatedDocument,
|
||||||
|
getPartitionKeyDefinition(partitionKey, partitionKeyProperty) as PartitionKeyDefinition
|
||||||
|
);
|
||||||
|
|
||||||
|
const partitionKeyValue = partitionKeyArray && partitionKeyArray[0];
|
||||||
|
|
||||||
|
const id = new ObjectId(this.props, updatedDocument, partitionKeyValue);
|
||||||
|
documentId.id(id.id());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
TelemetryProcessor.traceSuccess(
|
||||||
|
Action.UpdateDocument,
|
||||||
|
{
|
||||||
|
dataExplorerArea: Areas.Tab,
|
||||||
|
tabTitle: tabTitle(),
|
||||||
|
},
|
||||||
|
startKey
|
||||||
|
);
|
||||||
|
isExecuting(false);
|
||||||
|
} catch (error) {
|
||||||
|
isExecutionError(true);
|
||||||
|
const errorMessage = getErrorMessage(error);
|
||||||
|
window.alert(errorMessage);
|
||||||
|
TelemetryProcessor.traceFailure(
|
||||||
|
Action.UpdateDocument,
|
||||||
|
{
|
||||||
|
dataExplorerArea: Areas.Tab,
|
||||||
|
tabTitle: tabTitle(),
|
||||||
|
error: errorMessage,
|
||||||
|
errorStack: getErrorStack(error),
|
||||||
|
},
|
||||||
|
startKey
|
||||||
|
);
|
||||||
|
isExecuting(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected getTabsButtons(): CommandButtonComponentProps[] {
|
||||||
|
const buttons: CommandButtonComponentProps[] = [];
|
||||||
|
const label = "New Document";
|
||||||
|
if (this.newDocumentButton.visible) {
|
||||||
|
buttons.push({
|
||||||
|
iconSrc: NewDocumentIcon,
|
||||||
|
iconAlt: label,
|
||||||
|
onCommandClick: this.onNewDocumentClick,
|
||||||
|
commandButtonLabel: label,
|
||||||
|
ariaLabel: label,
|
||||||
|
hasPopup: false,
|
||||||
|
disabled: !this.newDocumentButton.enabled,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.saveNewDocumentButton.visible) {
|
||||||
|
const label = "Save";
|
||||||
|
buttons.push({
|
||||||
|
iconSrc: SaveIcon,
|
||||||
|
iconAlt: label,
|
||||||
|
onCommandClick: this.onSaveNewDocumentClick,
|
||||||
|
commandButtonLabel: label,
|
||||||
|
ariaLabel: label,
|
||||||
|
hasPopup: false,
|
||||||
|
disabled: !this.saveNewDocumentButton.enabled,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.discardNewDocumentChangesButton.visible) {
|
||||||
|
const label = "Discard";
|
||||||
|
buttons.push({
|
||||||
|
iconSrc: DiscardIcon,
|
||||||
|
iconAlt: label,
|
||||||
|
onCommandClick: this.onRevertNewDocumentClick,
|
||||||
|
commandButtonLabel: label,
|
||||||
|
ariaLabel: label,
|
||||||
|
hasPopup: false,
|
||||||
|
disabled: !this.discardNewDocumentChangesButton.enabled,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.saveExisitingDocumentButton.visible) {
|
||||||
|
const label = "Update";
|
||||||
|
buttons.push({
|
||||||
|
...this,
|
||||||
|
updateMongoDocument: this.updateMongoDocument,
|
||||||
|
iconSrc: SaveIcon,
|
||||||
|
iconAlt: label,
|
||||||
|
onCommandClick: this.onSaveExisitingDocumentClick,
|
||||||
|
commandButtonLabel: label,
|
||||||
|
ariaLabel: label,
|
||||||
|
hasPopup: false,
|
||||||
|
disabled: !this.saveExisitingDocumentButton.enabled,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.discardExisitingDocumentChangesButton.visible) {
|
||||||
|
const label = "Discard";
|
||||||
|
buttons.push({
|
||||||
|
...this,
|
||||||
|
setState: this.setState,
|
||||||
|
iconSrc: DiscardIcon,
|
||||||
|
iconAlt: label,
|
||||||
|
onCommandClick: this.onRevertExisitingDocumentClick,
|
||||||
|
commandButtonLabel: label,
|
||||||
|
ariaLabel: label,
|
||||||
|
hasPopup: false,
|
||||||
|
disabled: !this.discardExisitingDocumentChangesButton.enabled,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.deleteExisitingDocumentButton.visible) {
|
||||||
|
const label = "Delete";
|
||||||
|
buttons.push({
|
||||||
|
...this,
|
||||||
|
iconSrc: DeleteDocumentIcon,
|
||||||
|
iconAlt: label,
|
||||||
|
onCommandClick: this.onDeleteExisitingDocumentClick,
|
||||||
|
commandButtonLabel: label,
|
||||||
|
ariaLabel: label,
|
||||||
|
hasPopup: false,
|
||||||
|
disabled: !this.deleteExisitingDocumentButton.enabled,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return buttons;
|
||||||
|
}
|
||||||
|
|
||||||
|
private onSaveExisitingDocumentClick(): void {
|
||||||
|
this.updateMongoDocument();
|
||||||
|
}
|
||||||
|
|
||||||
|
private onDeleteExisitingDocumentClick(): Promise<void> {
|
||||||
|
const { collection } = this.props;
|
||||||
|
return deleteDocument(collection.databaseId, collection, this.state.selectedDocumentId);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onRevertExisitingDocumentClick(): void {
|
||||||
|
this.setState({
|
||||||
|
documentContent: formatDocumentContent(this.state.selectedDocumentId),
|
||||||
|
editorKey: Math.random().toString(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private onNewDocumentClick = () => {
|
||||||
|
this.newDocumentButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
this.saveNewDocumentButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.discardNewDocumentChangesButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: true,
|
||||||
|
};
|
||||||
|
this.updateTabButton();
|
||||||
|
this.setState({
|
||||||
|
documentContent: intitalDocumentContent,
|
||||||
|
isEditorVisible: true,
|
||||||
|
editorKey: intitalDocumentContent,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
private onSaveNewDocumentClick = () => {
|
||||||
|
if (userContext.apiType === "Mongo") {
|
||||||
|
this.onSaveNewMongoDocumentClick();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
public onSaveNewMongoDocumentClick = async (): Promise<void> => {
|
||||||
|
const parsedDocumentContent = JSON.parse(this.state.documentContent);
|
||||||
|
const {
|
||||||
|
partitionKey,
|
||||||
|
partitionKeyProperty,
|
||||||
|
displayedError,
|
||||||
|
tabTitle,
|
||||||
|
isExecutionError,
|
||||||
|
isExecuting,
|
||||||
|
collection,
|
||||||
|
} = this.props;
|
||||||
|
displayedError("");
|
||||||
|
|
||||||
|
const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
|
||||||
|
dataExplorerArea: Areas.Tab,
|
||||||
|
tabTitle: tabTitle(),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (
|
||||||
|
partitionKeyProperty &&
|
||||||
|
partitionKeyProperty !== "_id" &&
|
||||||
|
!hasShardKeySpecified(parsedDocumentContent, partitionKey, partitionKeyProperty)
|
||||||
|
) {
|
||||||
|
const message = `The document is lacking the shard property: ${partitionKeyProperty}`;
|
||||||
|
displayedError(message);
|
||||||
|
TelemetryProcessor.traceFailure(
|
||||||
|
Action.CreateDocument,
|
||||||
|
{
|
||||||
|
dataExplorerArea: Areas.Tab,
|
||||||
|
tabTitle: tabTitle(),
|
||||||
|
error: message,
|
||||||
|
},
|
||||||
|
startKey
|
||||||
|
);
|
||||||
|
logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
|
||||||
|
throw new Error("Document without shard key");
|
||||||
|
}
|
||||||
|
|
||||||
|
isExecutionError(false);
|
||||||
|
isExecuting(true);
|
||||||
|
try {
|
||||||
|
const savedDocument = await createDocument(
|
||||||
|
collection.databaseId,
|
||||||
|
collection,
|
||||||
|
partitionKeyProperty,
|
||||||
|
parsedDocumentContent
|
||||||
|
);
|
||||||
|
if (savedDocument) {
|
||||||
|
this.handleLoadMoreDocument();
|
||||||
|
TelemetryProcessor.traceSuccess(
|
||||||
|
Action.CreateDocument,
|
||||||
|
{
|
||||||
|
dataExplorerArea: Areas.Tab,
|
||||||
|
tabTitle: tabTitle(),
|
||||||
|
},
|
||||||
|
startKey
|
||||||
|
);
|
||||||
|
}
|
||||||
|
this.queryDocumentsData();
|
||||||
|
isExecuting(false);
|
||||||
|
} catch (error) {
|
||||||
|
isExecutionError(true);
|
||||||
|
const errorMessage = getErrorMessage(error);
|
||||||
|
window.alert(errorMessage);
|
||||||
|
TelemetryProcessor.traceFailure(
|
||||||
|
Action.CreateDocument,
|
||||||
|
{
|
||||||
|
dataExplorerArea: Areas.Tab,
|
||||||
|
tabTitle: tabTitle(),
|
||||||
|
error: errorMessage,
|
||||||
|
errorStack: getErrorStack(error),
|
||||||
|
},
|
||||||
|
startKey
|
||||||
|
);
|
||||||
|
isExecuting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private onRevertNewDocumentClick = () => {
|
||||||
|
this.newDocumentButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: true,
|
||||||
|
};
|
||||||
|
this.saveNewDocumentButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.discardNewDocumentChangesButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.updateTabButton();
|
||||||
|
this.setState({ isEditorVisible: false });
|
||||||
|
};
|
||||||
|
|
||||||
|
onRenderCell = (item: { value: string }): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="documentTabSuggestions"
|
||||||
|
onClick={() =>
|
||||||
|
this.setState({
|
||||||
|
filter: item.value,
|
||||||
|
isSuggestionVisible: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text>{item.value}</Text>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleLoadMoreDocument = (): void => {
|
||||||
|
this.queryDocumentsData();
|
||||||
|
this.setState({ isSuggestionVisible: false });
|
||||||
|
};
|
||||||
|
|
||||||
|
private updateTabButton = (): void => {
|
||||||
|
useCommandBar.getState().setContextButtons(this.getTabsButtons());
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleDocumentContentChange = (newContent: string): void => {
|
||||||
|
if (this.saveExisitingDocumentButton.visible) {
|
||||||
|
this.saveExisitingDocumentButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: true,
|
||||||
|
};
|
||||||
|
this.discardExisitingDocumentChangesButton = {
|
||||||
|
visible: true,
|
||||||
|
enabled: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.updateTabButton();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({ documentContent: newContent });
|
||||||
|
};
|
||||||
|
|
||||||
|
public render(): JSX.Element {
|
||||||
|
const {
|
||||||
|
columns,
|
||||||
|
isCompactMode,
|
||||||
|
isSuggestionVisible,
|
||||||
|
filter,
|
||||||
|
isFilterOptionVisible,
|
||||||
|
isEditorVisible,
|
||||||
|
documentContent,
|
||||||
|
documentIds,
|
||||||
|
editorKey,
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{isFilterOptionVisible && (
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<Stack horizontal verticalFill wrap>
|
||||||
|
<TextField
|
||||||
|
iconProps={filterIcon}
|
||||||
|
placeholder="Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents."
|
||||||
|
className="documentTabSearchBar"
|
||||||
|
onFocus={() => this.setState({ isSuggestionVisible: true })}
|
||||||
|
onChange={(_event, newInput?: string) => {
|
||||||
|
this.setState({ filter: newInput });
|
||||||
|
}}
|
||||||
|
value={filter}
|
||||||
|
/>
|
||||||
|
<PrimaryButton text="Apply Filter" onClick={this.handleFilter} className="documentTabFiltetButton" />
|
||||||
|
<Image
|
||||||
|
src={CloseIcon}
|
||||||
|
alt="Close icon"
|
||||||
|
{...imageProps}
|
||||||
|
onClick={() => this.setState({ isFilterOptionVisible: false })}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</div>
|
||||||
|
{isSuggestionVisible && (
|
||||||
|
<div className="filterSuggestions">
|
||||||
|
<List items={filterSuggestions} onRenderCell={this.onRenderCell} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!isFilterOptionVisible && (
|
||||||
|
<Stack horizontal verticalFill wrap className="documentTabNoFilterView">
|
||||||
|
<Text className="noFilterText">No filter applied</Text>
|
||||||
|
<PrimaryButton text="Edit Filter" onClick={() => this.setState({ isFilterOptionVisible: true })} />
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
<div className="splitterWrapper" onClick={() => this.setState({ isSuggestionVisible: false })}>
|
||||||
|
<SplitterLayout primaryIndex={0} secondaryInitialSize={1000}>
|
||||||
|
<div className="leftSplitter">
|
||||||
|
<DetailsList
|
||||||
|
items={documentIds}
|
||||||
|
compact={isCompactMode}
|
||||||
|
columns={columns}
|
||||||
|
selectionMode={SelectionMode.none}
|
||||||
|
getKey={this.getKey}
|
||||||
|
setKey="none"
|
||||||
|
layoutMode={DetailsListLayoutMode.justified}
|
||||||
|
isHeaderVisible={true}
|
||||||
|
/>
|
||||||
|
<Text onClick={this.handleLoadMoreDocument} className="documentLoadMore" block={true}>
|
||||||
|
Load More
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
{isEditorVisible ? (
|
||||||
|
<div className="react-editor">
|
||||||
|
<EditorReact
|
||||||
|
language={"json"}
|
||||||
|
content={documentContent}
|
||||||
|
isReadOnly={false}
|
||||||
|
ariaLabel={"Document json"}
|
||||||
|
onContentChanged={this.handleDocumentContentChange}
|
||||||
|
lineNumbers="on"
|
||||||
|
editorKey={editorKey}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="documentTabWatermark">
|
||||||
|
<Image src={DocumentWaterMark} alt="Document watermark" />
|
||||||
|
<Text className="documentCreateText">Create new or work with existing document(s).</Text>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</SplitterLayout>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private getKey(item: DocumentId): string {
|
||||||
|
return item.rid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import {
|
||||||
deleteDocument,
|
deleteDocument,
|
||||||
queryDocuments,
|
queryDocuments,
|
||||||
readDocument,
|
readDocument,
|
||||||
updateDocument
|
updateDocument,
|
||||||
} from "../../Common/MongoProxyClient";
|
} from "../../Common/MongoProxyClient";
|
||||||
import MongoUtility from "../../Common/MongoUtility";
|
import MongoUtility from "../../Common/MongoUtility";
|
||||||
import * as DataModels from "../../Contracts/DataModels";
|
import * as DataModels from "../../Contracts/DataModels";
|
||||||
|
|
Loading…
Reference in New Issue