diff options
author | Sunil Shetye | 2025-04-03 16:43:02 +0530 |
---|---|---|
committer | Sunil Shetye | 2025-04-07 15:38:16 +0530 |
commit | ee5f5939ec755901b056bb39a3afa481861c8906 (patch) | |
tree | ac6d95c302c772252d8c109b09f84113f01fa2fd | |
parent | 5180ed9cb4da5cb555aa8822abb681aea0d6a3d7 (diff) | |
download | Common-Interface-Project-ee5f5939ec755901b056bb39a3afa481861c8906.tar.gz Common-Interface-Project-ee5f5939ec755901b056bb39a3afa481861c8906.tar.bz2 Common-Interface-Project-ee5f5939ec755901b056bb39a3afa481861c8906.zip |
convert componentProperties action/reducer to slice
11 files changed, 139 insertions, 185 deletions
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js index a8d24ff0..d598f51f 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js @@ -5,7 +5,7 @@ import mxGraphFactory from 'mxgraph' import { ListItem, ListItemText, Button, TextField } from '@material-ui/core' import { TailSpin } from 'react-loader-spinner' -import { setCompProperties } from '../../redux/actions/index' +import { setCompProperties } from '../../redux/componentPropertiesSlice' import { graph } from './Helper/ComponentDrag' import { portSize } from './Helper/SvgParser' @@ -146,16 +146,16 @@ const getErrorText = (compType) => { export default function ComponentProperties () { // compProperties that are displayed on the right side bar when user clicks on a component on the grid. - const compProperties = useSelector(state => state.componentPropertiesReducer.compProperties) - const isOpen = useSelector(state => state.componentPropertiesReducer.isPropertiesWindowOpen) - const block = useSelector(state => state.componentPropertiesReducer.block) - const name = useSelector(state => state.componentPropertiesReducer.name) - const parameterValues = useSelector(state => state.componentPropertiesReducer.parameter_values) + const compProperties = useSelector(state => state.componentProperties.compProperties) + const isOpen = useSelector(state => state.componentProperties.isPropertiesWindowOpen) + const block = useSelector(state => state.componentProperties.block) + const name = useSelector(state => state.componentProperties.name) + const parameterValues = useSelector(state => state.componentProperties.parameter_values) const [val, setVal] = useState(parameterValues) - const displayProperties = useSelector(state => state.componentPropertiesReducer.displayProperties) - const isLoading = useSelector(state => state.componentPropertiesReducer.isLoading) + const displayProperties = useSelector(state => state.componentProperties.displayProperties) + const isLoading = useSelector(state => state.componentProperties.isLoading) const dispatch = useDispatch() - const errorFields1 = useSelector(state => state.componentPropertiesReducer.errorFields) + const errorFields1 = useSelector(state => state.componentProperties.errorFields) const [errorFields, setErrorFields] = useState(errorFields1) useEffect(() => { @@ -260,7 +260,7 @@ export default function ComponentProperties () { } const setProps = () => { - dispatch(setCompProperties(block, val, errorFields)) + dispatch(setCompProperties({ block, parameterValues: val, errorFields })) } const link1 = name + ' Parameters' diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js index 81f2f7fe..dd3d513b 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js @@ -5,10 +5,10 @@ import mxGraphFactory from 'mxgraph' import store from '../../../redux/store' import dot from '../../../static/dot.gif' import blockstyle from '../../../static/style.json' -import { getCompProperties, closeCompProperties } from '../../../redux/actions/index' +import { getCompProperties, closeCompProperties } from '../../../redux/componentPropertiesSlice' import { styleToObject } from '../../../utils/GalleryUtils' -import toolbarTools from './ToolbarTools' +import toolbarTools, { editorZoomAct } from './ToolbarTools' import keyboardShortcuts from './KeyboardShortcuts' import { sideBar } from './SideBar' @@ -137,6 +137,7 @@ export default function LoadGrid (container, sidebar, outline) { store.dispatch(getCompProperties(cell)) } else { store.dispatch(closeCompProperties()) + editorZoomAct() } evt.consume() }) @@ -411,9 +412,9 @@ export default function LoadGrid (container, sidebar, outline) { toolbarTools(graph) store.subscribe(() => { - const id = store.getState().componentPropertiesReducer.id - const parameterValues = store.getState().componentPropertiesReducer.parameter_values - const displayProperties = store.getState().componentPropertiesReducer.displayProperties + const id = store.getState().componentProperties.id + const parameterValues = store.getState().componentProperties.parameter_values + const displayProperties = store.getState().componentProperties.displayProperties const cellList = graph.getModel().cells const c = cellList[id] if (c !== undefined) { diff --git a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js index 2752d38a..86d528a5 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js @@ -118,7 +118,7 @@ GridProperties.propTypes = { export default function PropertiesSidebar ({ gridRef, outlineRef }) { const classes = useStyles() - const isOpen = useSelector(state => state.componentPropertiesReducer.isPropertiesWindowOpen) + const isOpen = useSelector(state => state.componentProperties.isPropertiesWindowOpen) const description1 = useSelector(state => state.saveSchematic.description) const [description, setDescription] = useState(description1) diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js index fabd47c3..c2386016 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js @@ -33,7 +33,8 @@ import mxGraphFactory from 'mxgraph' import { NetlistModal, HelpScreen, ImageExportDialog, OpenSchDialog, ScriptScreen } from './ToolbarExtension' import { editorZoomIn, editorZoomOut, editorZoomAct, deleteComp, PrintPreview, Rotate, editorUndo, editorRedo, saveXml, ClearGrid, renderGalleryXML } from './Helper/ToolbarTools' import { useSelector, useDispatch } from 'react-redux' -import { toggleSimulate, closeCompProperties } from '../../redux/actions/index' +import { toggleSimulate } from '../../redux/actions/index' +import { closeCompProperties } from '../../redux/componentPropertiesSlice' import { setSchXmlData, saveSchematic, openLocalSch, setLoadingDiagram } from '../../redux/saveSchematicSlice' import api from '../../utils/Api' import { transformXcos, saveToFile } from '../../utils/GalleryUtils' diff --git a/blocks/eda-frontend/src/redux/actions/actions.js b/blocks/eda-frontend/src/redux/actions/actions.js index 56d69b00..c40b1b6d 100644 --- a/blocks/eda-frontend/src/redux/actions/actions.js +++ b/blocks/eda-frontend/src/redux/actions/actions.js @@ -5,13 +5,6 @@ export const TOGGLE_COLLAPSE = 'TOGGLE_COLLAPSE' export const FETCH_COMPONENTS = 'FETCH_COMPONENTS' export const TOGGLE_SIMULATE = 'TOGGLE_SIMULATE' -// Actions for handling compProperties -export const LOADING_GET_COMP_PROPERTIES = 'LOADING_GET_COMP_PROPERTIES' -export const GET_COMP_PROPERTIES = 'GET_COMP_PROPERTIES' -export const LOADING_SET_COMP_PROPERTIES = 'LOADING_SET_COMP_PROPERTIES' -export const SET_COMP_PROPERTIES = 'SET_COMP_PROPERTIES' -export const CLOSE_COMP_PROPERTIES = 'CLOSE_COMP_PROPERTIES' - // Actions for handling and generating netlist export const SET_NETLIST = 'SET_NETLIST' export const SET_TITLE = 'SET_TITLE' diff --git a/blocks/eda-frontend/src/redux/actions/componentPropertiesActions.js b/blocks/eda-frontend/src/redux/actions/componentPropertiesActions.js deleted file mode 100644 index 2ddedb63..00000000 --- a/blocks/eda-frontend/src/redux/actions/componentPropertiesActions.js +++ /dev/null @@ -1,86 +0,0 @@ -import api from '../../utils/Api' -import { styleToObject } from '../../utils/GalleryUtils' -import * as actions from './actions' - -// Actions for setting isLoading -const loadingGetCompProperties = (style, isLoading) => (dispatch) => { - dispatch({ - type: actions.LOADING_GET_COMP_PROPERTIES, - payload: { - name: style, - isLoading - } - }) -} - -const loadingSetCompProperties = (isLoading) => (dispatch) => { - dispatch({ - type: actions.LOADING_SET_COMP_PROPERTIES, - payload: { - isLoading - } - }) -} - -// Actions for listing stored component properites on double click on component -export const getCompProperties = (block) => (dispatch) => { - const style = styleToObject(block.style).default - dispatch(loadingGetCompProperties(style, true)) - const url = 'newblockparameters/?block__name=' + style - api.get(url) - .then( - (res) => { - dispatch({ - type: actions.GET_COMP_PROPERTIES, - payload: { - block, - name: style, - parameter_values: block.parameter_values, - errorFields: block.errorFields, - displayProperties: block.displayProperties, - compProperties: res.data - } - }) - } - ) - .catch((err) => { - console.error(err) - dispatch(loadingGetCompProperties(style, false)) - }) -} - -// Actions for updating entered component properites on clicking set parameters -export const setCompProperties = (block, parameterValues, errorFields) => (dispatch) => { - const style = styleToObject(block.style).default - dispatch(loadingSetCompProperties(true)) - const url = 'setblockparameter' - const parameters = Object.values(parameterValues) - const data = { block: style, parameters } - api.post(url, data) - .then( - (res) => { - block.parameter_values = parameterValues - block.errorFields = errorFields - dispatch({ - type: actions.SET_COMP_PROPERTIES, - payload: { - block, - parameter_values: parameterValues, - errorFields, - displayProperties: res.data - } - }) - } - ) - .catch((err) => { - console.error(err) - dispatch(loadingSetCompProperties(false)) - }) -} - -// Handling hiding of compProperties sidebar -export const closeCompProperties = () => (dispatch) => { - dispatch({ - type: actions.CLOSE_COMP_PROPERTIES - }) -} diff --git a/blocks/eda-frontend/src/redux/actions/index.js b/blocks/eda-frontend/src/redux/actions/index.js index dcfac0f0..65375ec5 100644 --- a/blocks/eda-frontend/src/redux/actions/index.js +++ b/blocks/eda-frontend/src/redux/actions/index.js @@ -1,4 +1,3 @@ // Actions dispatch to change state variables inside store export * from './schematicEditorActions' -export * from './componentPropertiesActions' export * from './netlistActions' diff --git a/blocks/eda-frontend/src/redux/componentPropertiesSlice.js b/blocks/eda-frontend/src/redux/componentPropertiesSlice.js new file mode 100644 index 00000000..3f74674f --- /dev/null +++ b/blocks/eda-frontend/src/redux/componentPropertiesSlice.js @@ -0,0 +1,118 @@ +import { createSlice, createAsyncThunk } from '@reduxjs/toolkit' + +import api from '../utils/Api' +import { styleToObject } from '../utils/GalleryUtils' + +const initialState = { + block: null, + name: '', + parameter_values: {}, + errorFields: {}, + isPropertiesWindowOpen: false, + compProperties: [], + displayProperties: {}, + isLoading: false +} + +// Actions for listing stored component properites on double click on component +export const getCompProperties = createAsyncThunk( + 'componentProperties/getCompProperties', + async (block, { rejectWithValue }) => { + const style = styleToObject(block.style).default + const url = 'newblockparameters/?block__name=' + style + try { + const res = await api.get(url) + if (res.status === 200) { + return res.data + } + return rejectWithValue(res.data || 'Failed to get component properties') + } catch (err) { + console.error(err) + const res = err.response + return rejectWithValue(res.data || 'Failed to get component properties') + } + }) + +// Actions for updating entered component properites on clicking set parameters +export const setCompProperties = createAsyncThunk( + 'componentProperties/setCompProperties', + async ({ block, parameterValues, errorFields }, { rejectWithValue }) => { + const style = styleToObject(block.style).default + const url = 'setblockparameter' + const parameters = Object.values(parameterValues) + const data = { block: style, parameters } + try { + const res = await api.post(url, data) + if (res.status === 200) { + block.parameter_values = parameterValues + block.errorFields = errorFields + return { + block, + parameter_values: parameterValues, + errorFields, + displayProperties: res.data + } + } + return rejectWithValue(res.data || 'Failed to set component properties') + } catch (err) { + console.error(err) + const res = err.response + return rejectWithValue(res.data || 'Failed to set component properties') + } + }) + +const componentPropertiesSlice = createSlice({ + name: 'componentProperties', + initialState, + reducers: { + closeCompProperties: (state) => { + state.isPropertiesWindowOpen = false + } + }, + extraReducers: (builder) => { + builder + .addCase(getCompProperties.pending, (state, action) => { + state.isLoading = true + state.isPropertiesWindowOpen = true + state.compProperties = undefined + const block = action.meta.arg + state.name = styleToObject(block.style).default + }) + .addCase(getCompProperties.fulfilled, (state, action) => { + state.isLoading = false + state.isPropertiesWindowOpen = true + state.name = action.payload.name + state.block = action.payload.block + state.parameter_values = action.payload.parameter_values + state.errorFields = action.payload.errorFields + state.displayProperties = action.payload.displayProperties + state.compProperties = action.payload.compProperties + }) + .addCase(getCompProperties.rejected, (state) => { + state.isLoading = false + state.isPropertiesWindowOpen = false + }) + .addCase(setCompProperties.pending, (state) => { + state.isLoading = true + state.isPropertiesWindowOpen = true + }) + .addCase(setCompProperties.fulfilled, (state, action) => { + state.isLoading = false + state.isPropertiesWindowOpen = false + state.block = action.payload.block + state.parameter_values = action.payload.parameter_values + state.errorFields = action.payload.errorFields + state.displayProperties = action.payload.displayProperties + }) + .addCase(setCompProperties.rejected, (state) => { + state.isLoading = false + state.isPropertiesWindowOpen = true + }) + } +}) + +export const { + closeCompProperties +} = componentPropertiesSlice.actions + +export default componentPropertiesSlice.reducer diff --git a/blocks/eda-frontend/src/redux/reducers/componentPropertiesReducer.js b/blocks/eda-frontend/src/redux/reducers/componentPropertiesReducer.js deleted file mode 100644 index 5b3815d0..00000000 --- a/blocks/eda-frontend/src/redux/reducers/componentPropertiesReducer.js +++ /dev/null @@ -1,72 +0,0 @@ -import * as actions from '../actions/actions' -import { editorZoomAct } from '../../components/SchematicEditor/Helper/ToolbarTools' - -const InitialState = { - block: null, - name: '', - parameter_values: {}, - errorFields: {}, - isPropertiesWindowOpen: false, - compProperties: [], - displayProperties: {}, - isLoading: false -} - -export default function componentPropertiesReducer (state = InitialState, action) { - switch (action.type) { - case actions.LOADING_GET_COMP_PROPERTIES: { - return { - ...state, - name: action.payload.name, - isPropertiesWindowOpen: true, - compProperties: undefined, - isLoading: action.payload.isLoading - } - } - - case actions.GET_COMP_PROPERTIES: { - return { - ...state, - block: action.payload.block, - name: action.payload.name, - parameter_values: action.payload.parameter_values, - errorFields: action.payload.errorFields, - isPropertiesWindowOpen: true, - displayProperties: action.payload.displayProperties, - compProperties: action.payload.compProperties, - isLoading: false - } - } - - case actions.LOADING_SET_COMP_PROPERTIES: { - return { - ...state, - isPropertiesWindowOpen: true, - isLoading: action.payload.isLoading - } - } - - case actions.SET_COMP_PROPERTIES: { - return { - ...state, - block: action.payload.block, - parameter_values: action.payload.parameter_values, - errorFields: action.payload.errorFields, - isPropertiesWindowOpen: false, - displayProperties: action.payload.displayProperties, - isLoading: false - } - } - - case actions.CLOSE_COMP_PROPERTIES: { - editorZoomAct() - return { - ...state, - isPropertiesWindowOpen: false - } - } - - default: - return state - } -} diff --git a/blocks/eda-frontend/src/redux/reducers/index.js b/blocks/eda-frontend/src/redux/reducers/index.js index bb3fc882..f0c87843 100644 --- a/blocks/eda-frontend/src/redux/reducers/index.js +++ b/blocks/eda-frontend/src/redux/reducers/index.js @@ -1,9 +1,7 @@ import { combineReducers } from 'redux' import schematicEditorReducer from './schematicEditorReducer' -import componentPropertiesReducer from './componentPropertiesReducer' import netlistReducer from './netlistReducer' export default combineReducers({ schematicEditorReducer, - componentPropertiesReducer, netlistReducer }) diff --git a/blocks/eda-frontend/src/redux/store.js b/blocks/eda-frontend/src/redux/store.js index c504f79d..c13ac5a6 100644 --- a/blocks/eda-frontend/src/redux/store.js +++ b/blocks/eda-frontend/src/redux/store.js @@ -1,5 +1,6 @@ import { configureStore } from '@reduxjs/toolkit' import authReducer from './authSlice' +import componentPropertiesReducer from './componentPropertiesSlice' import dashboardReducer from './dashboardSlice' import saveSchematicReducer from './saveSchematicSlice' import simulationReducer from './simulationSlice' @@ -7,6 +8,7 @@ import simulationReducer from './simulationSlice' const store = configureStore({ reducer: { auth: authReducer, + componentProperties: componentPropertiesReducer, dashboard: dashboardReducer, saveSchematic: saveSchematicReducer, simulation: simulationReducer |