From d3111b889164f899cb32a0c0e5e9c8c5b6a95f9e Mon Sep 17 00:00:00 2001 From: Bangarraju-Microsoft Date: Wed, 23 Apr 2025 18:58:28 +0530 Subject: [PATCH] UI - Bug and Observations fixed --- .../DocumentViewer/DocumentViewer.styles.scss | 2 +- .../JSONEditor/JSONEditor.styles.scss | 16 +++ .../src/Components/JSONEditor/JSONEditor.tsx | 110 ++++++++++-------- .../ProcessQueueGrid/ProcessQueueGrid.tsx | 6 +- .../SchemaDropdown/SchemaDropdown.tsx | 3 +- .../src/Pages/DefaultPage/PanelCenter.tsx | 5 +- .../src/store/slices/centerPanelSlice.ts | 2 +- 7 files changed, 89 insertions(+), 55 deletions(-) diff --git a/src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss b/src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss index f79409b6..425ad74e 100644 --- a/src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss +++ b/src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss @@ -48,7 +48,7 @@ justify-content: center; height: 100%; border: 1px solid var(--colorNeutralBackground2Pressed); - background: var(--colorNeutralBackground4) + background: var(--colorNeutralBackground1Hover) } diff --git a/src/ContentProcessorWeb/src/Components/JSONEditor/JSONEditor.styles.scss b/src/ContentProcessorWeb/src/Components/JSONEditor/JSONEditor.styles.scss index 872683fe..e2f1533c 100644 --- a/src/ContentProcessorWeb/src/Components/JSONEditor/JSONEditor.styles.scss +++ b/src/ContentProcessorWeb/src/Components/JSONEditor/JSONEditor.styles.scss @@ -14,4 +14,20 @@ textarea { justify-content: center; align-items: center; height: 100%; +} + +.JSONEditor-container { + display: flex; + flex-direction: column; + height: 100%; + + .JSONEditor-searchDiv { + flex: 0 0 auto; + padding: 5px 10px; + } + + .JSONEditor-contentDiv { + flex: 1 1 auto; + overflow-y: auto; + } } \ No newline at end of file diff --git a/src/ContentProcessorWeb/src/Components/JSONEditor/JSONEditor.tsx b/src/ContentProcessorWeb/src/Components/JSONEditor/JSONEditor.tsx index cc61e2da..dcb39a93 100644 --- a/src/ContentProcessorWeb/src/Components/JSONEditor/JSONEditor.tsx +++ b/src/ContentProcessorWeb/src/Components/JSONEditor/JSONEditor.tsx @@ -17,6 +17,7 @@ const JSONEditor: React.FC = () => { const [isFocused, setIsFocused] = useState(false); const dispatch = useDispatch(); const [searchText, setSearchText] = useState(''); + const searchBoxRef = React.useRef(null); const store = useSelector((state: RootState) => ({ processId: state.leftPanel.processId, @@ -32,9 +33,7 @@ const JSONEditor: React.FC = () => { if (Object.keys(store.contentData).length > 0) { const formattedJson = store.contentData.result; const data = { - extracted_result: { - ...formattedJson - } + ...formattedJson } setJsonData(data); } else { @@ -49,58 +48,71 @@ const JSONEditor: React.FC = () => { } const handleFocus = () => setIsFocused(true); - const handleBlur = () => setIsFocused(false); + const handleBlur = (e: React.FocusEvent) => { + const newFocusTarget = e.relatedTarget as HTMLElement | null; + if ( + searchBoxRef.current && + newFocusTarget && + searchBoxRef.current.contains(newFocusTarget) + ) { + return; + } + + setIsFocused(false); + }; return ( <>{ store.cLoader ?

Loading...

: Object.keys(jsonData).length == 0 ?

No data available

: - <> +
{store.isJSONEditorSearchEnabled && -
- { setSearchText(data.value) }} - style={{ - width: isFocused ? '200px' : '100px', - transition: 'width 0.3s ease', - }} - /> -
} - { - onUpdateHandle(newData) - }} - //setData={ setJsonData } // optional - restrictEdit={({ key, path, level, index, value, size, parentData, fullData, collapsed }) => { - return !path.includes('extracted_result') - } - } - restrictDelete={true} - /> - +
+
+ { setIsFocused(true); setSearchText(data.value) }} + style={{ + width: isFocused ? '200px' : '100px', + transition: 'width 0.3s ease', + }} + /> +
} +
+ { + onUpdateHandle(newData) + }} + //setData={ setJsonData } // optional + // restrictEdit={({ key, path, level, index, value, size, parentData, fullData, collapsed }) => { + // return !path.includes('extracted_result') + // } + // } + restrictDelete={true} + /> +
+
} ) } diff --git a/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGrid.tsx b/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGrid.tsx index 05858ec9..bef346ff 100644 --- a/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGrid.tsx +++ b/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGrid.tsx @@ -134,6 +134,7 @@ const ProcessQueueGrid: React.FC = () => { setItems(items); } else { setItems([]) + dispatch(setSelectedGridRow({ processId: '', item: {}})); } } @@ -327,6 +328,7 @@ const ProcessQueueGrid: React.FC = () => {
+ {rows.length > 0? {({ height, width }) => ( = () => { {RenderRow} )} - + : +

No data available

+ }
diff --git a/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/SchemaDropdown/SchemaDropdown.tsx b/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/SchemaDropdown/SchemaDropdown.tsx index 3ba64164..925a73c5 100644 --- a/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/SchemaDropdown/SchemaDropdown.tsx +++ b/src/ContentProcessorWeb/src/Pages/DefaultPage/Components/SchemaDropdown/SchemaDropdown.tsx @@ -44,7 +44,8 @@ const ComboboxComponent = (props: Partial) => { }, [store.schemaData]); const handleChange: (typeof props)["onOptionSelect"] = (ev, data) => { - dispatch(setSchemaSelectedOption(data)); + const selectedItem = data.optionValue !=undefined ? data : {} + dispatch(setSchemaSelectedOption(selectedItem)); }; return ( diff --git a/src/ContentProcessorWeb/src/Pages/DefaultPage/PanelCenter.tsx b/src/ContentProcessorWeb/src/Pages/DefaultPage/PanelCenter.tsx index 3464ea51..df1cc942 100644 --- a/src/ContentProcessorWeb/src/Pages/DefaultPage/PanelCenter.tsx +++ b/src/ContentProcessorWeb/src/Pages/DefaultPage/PanelCenter.tsx @@ -53,7 +53,7 @@ const useStyles = makeStyles({ border: '1px solid #DBDBDB', overflow: 'auto', background: '#f6f6f6', - padding: '10px 5px', + padding: '5px 5px', boxSizing: 'border-box' }, @@ -166,7 +166,7 @@ const PanelCenter: React.FC = ({ togglePanel }) => { try { dispatch(startLoader("1")); dispatch(setUpdateComments(comment)) - const result = await dispatch(saveContentJson({ 'processId': store.activeProcessId, 'contentJson': store.modified_result.extracted_result, 'comments': comment, 'savedComments': store.comments })) + const result = await dispatch(saveContentJson({ 'processId': store.activeProcessId, 'contentJson': store.modified_result, 'comments': comment, 'savedComments': store.comments })) if (result?.type === 'SaveContentJSON-Comments/fulfilled') { dispatch(setRefreshGrid(true)); } @@ -178,6 +178,7 @@ const PanelCenter: React.FC = ({ togglePanel }) => { } const IsButtonSaveDisalbedCheck = () => { + if(!store.activeProcessId) return true; if (status.includes(store.selectedItem.status)) return true; if (Object.keys(store.modified_result).length > 0) return false; if (comment.trim() !== store.comments && comment.trim() !== '') return false; diff --git a/src/ContentProcessorWeb/src/store/slices/centerPanelSlice.ts b/src/ContentProcessorWeb/src/store/slices/centerPanelSlice.ts index f3710d27..376f2bf6 100644 --- a/src/ContentProcessorWeb/src/store/slices/centerPanelSlice.ts +++ b/src/ContentProcessorWeb/src/store/slices/centerPanelSlice.ts @@ -149,7 +149,7 @@ const centerPanelSlice = createSlice({ .addCase(fetchContentJsonData.rejected, (state, action: any) => { state.cError = action.error.message || 'An error occurred'; state.cLoader = false; - state.contentData = []; + state.contentData = {}; state.comments = ""; toast.error(getDisplayMessage(action.payload)) });