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

Editing content updates buttons state

Browse Source
This commit is contained in:
Laurent Nguyen 2024-03-25 16:17:04 +01:00
parent be3f234932
commit 821904d3b3
1 changed files with 56 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -113,7 +113,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
const [isExecutionError, setIsExecutionError] = useState<boolean>(false); const [isExecutionError, setIsExecutionError] = useState<boolean>(false);
const [onLoadStartKey, setOnLoadStartKey] = useState<number>(props.onLoadStartKey); const [onLoadStartKey, setOnLoadStartKey] = useState<number>(props.onLoadStartKey);
const [selectedDocumentContent, setSelectedDocumentContent] = useState<unknown>(undefined); const [selectedDocumentContent, setSelectedDocumentContent] = useState<string>(undefined);
const [selectedDocumentContentBaseline, setSelectedDocumentContentBaseline] = useState<unknown>(undefined); const [selectedDocumentContentBaseline, setSelectedDocumentContentBaseline] = useState<unknown>(undefined);
// Command buttons // Command buttons
@ -787,7 +787,6 @@ const DocumentsTabComponent: React.FunctionComponent<{
(_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(props.collection, documentId)).then( (_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(props.collection, documentId)).then(
(content) => { (content) => {
initDocumentEditor(documentId, content); initDocumentEditor(documentId, content);
setSelectedDocumentContent(content);
}, },
); );
@ -795,7 +794,8 @@ const DocumentsTabComponent: React.FunctionComponent<{
if (documentId) { if (documentId) {
const content: string = renderObjectForEditor(documentContent, null, 4); const content: string = renderObjectForEditor(documentContent, null, 4);
setSelectedDocumentContentBaseline(content); setSelectedDocumentContentBaseline(content);
setInitialDocumentContent(content); setInitialDocumentContent(content); // TODO Remove this?
setSelectedDocumentContent(content);
const newState = documentId const newState = documentId
? ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ? ViewModels.DocumentExplorerState.exisitingDocumentNoEdits
: ViewModels.DocumentExplorerState.newDocumentValid; : ViewModels.DocumentExplorerState.newDocumentValid;
@ -803,6 +803,48 @@ const DocumentsTabComponent: React.FunctionComponent<{
} }
}; };
const _onEditorContentChange = (newContent: string): void => {
setSelectedDocumentContent(newContent);
try {
JSON.parse(newContent);
onValidDocumentEdit();
} catch (e) {
onInvalidDocumentEdit();
}
};
const onValidDocumentEdit = (): void => {
if (
editorState === ViewModels.DocumentExplorerState.newDocumentInvalid ||
editorState === ViewModels.DocumentExplorerState.newDocumentValid
) {
setEditorState(ViewModels.DocumentExplorerState.newDocumentValid);
return;
}
setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid);
}
const onInvalidDocumentEdit = (): void => {
if (
editorState === ViewModels.DocumentExplorerState.newDocumentInvalid ||
editorState === ViewModels.DocumentExplorerState.newDocumentValid
) {
setEditorState(ViewModels.DocumentExplorerState.newDocumentInvalid);
return;
}
if (
editorState === ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ||
editorState === ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid
) {
setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid);
return;
}
}
const tableContainerRef = useRef(null); const tableContainerRef = useRef(null);
const [tableContainerSizePx, setTableContainerSizePx] = useState<{ height: number; width: number }>(undefined); const [tableContainerSizePx, setTableContainerSizePx] = useState<{ height: number; width: number }>(undefined);
useEffect(() => { useEffect(() => {
@ -851,7 +893,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
<button <button
className="filterbtnstyle queryButton" className="filterbtnstyle queryButton"
onClick={onShowFilterClick} onClick={onShowFilterClick}
/*data-bind="click: onShowFilterClick"*/ /*data-bind="click: onShowFilterClick"*/
> >
Edit Filter Edit Filter
</button> </button>
@ -901,14 +943,14 @@ const DocumentsTabComponent: React.FunctionComponent<{
} }
value={filterContent} value={filterContent}
onChange={(e) => setFilterContent(e.target.value)} onChange={(e) => setFilterContent(e.target.value)}
/* /*
data-bind=" data-bind="
W attr:{ W attr:{
placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.' placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
}, },
css: { placeholderVisible: filterContent().length === 0 }, css: { placeholderVisible: filterContent().length === 0 },
textInput: filterContent" textInput: filterContent"
*/ */
/> />
<datalist id="filtersList" /*data-bind="foreach: lastFilterContents"*/> <datalist id="filtersList" /*data-bind="foreach: lastFilterContents"*/>
@ -954,7 +996,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
tabIndex={0} tabIndex={0}
onClick={() => onHideFilterClick()} onClick={() => onHideFilterClick()}
onKeyDown={onCloseButtonKeyDown} onKeyDown={onCloseButtonKeyDown}
/*data-bind="click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"*/ /*data-bind="click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"*/
> >
<img src={CloseIcon} style={{ height: 14, width: 14 }} alt="Hide filter" /> <img src={CloseIcon} style={{ height: 14, width: 14 }} alt="Hide filter" />
</span> </span>
@ -992,7 +1034,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
ariaLabel={"Document editor"} ariaLabel={"Document editor"}
lineNumbers={"on"} lineNumbers={"on"}
theme={"_theme"} theme={"_theme"}
onContentChanged={(newContent: string) => {}} onContentChanged={_onEditorContentChange}
/> />
)} )}
</div> </div>