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

50
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(() => {
@ -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>