From ef602b578f055639fd179ee123366fc8e20b8480 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Tue, 6 Oct 2020 17:07:58 +0300 Subject: [PATCH] Web: Files: fixed selected tree node on click in row --- .../src/components/Article/Body/index.js | 42 +++--- .../Client/src/store/files/reducers.js | 139 ++++++++++-------- 2 files changed, 94 insertions(+), 87 deletions(-) diff --git a/products/ASC.Files/Client/src/components/Article/Body/index.js b/products/ASC.Files/Client/src/components/Article/Body/index.js index 1e0685d333..f979c8e593 100644 --- a/products/ASC.Files/Client/src/components/Article/Body/index.js +++ b/products/ASC.Files/Client/src/components/Article/Body/index.js @@ -12,7 +12,7 @@ import { setDragging, setNewTreeFilesBadge, setIsLoading, - setSelectedNode + setSelectedNode, } from "../../../store/files/actions"; import store from "../../../store/store"; import isEqual from "lodash/isEqual"; @@ -21,7 +21,6 @@ import { setDocumentTitle } from "../../../helpers/utils"; const { getCurrentModule } = initStore.auth.selectors; - class ArticleBodyContent extends React.Component { constructor(props) { super(props); @@ -35,7 +34,7 @@ class ArticleBodyContent extends React.Component { this.state = { expandedKeys: this.props.filter.treeFolders, data: this.props.data, - showNewFilesPanel: false + showNewFilesPanel: false, }; } @@ -77,7 +76,7 @@ class ArticleBodyContent extends React.Component { selectedTreeNode, setSelectedNode, currentModuleName, - organizationName + organizationName, } = this.props; if (selectedTreeNode[0] !== data[0]) { @@ -95,22 +94,22 @@ class ArticleBodyContent extends React.Component { : setDocumentTitle(); fetchFiles(data[0], newFilter, store.dispatch) - .catch(err => toastr.error(err)) + .catch((err) => toastr.error(err)) .finally(() => setIsLoading(false)); } }; - onShowNewFilesPanel = folderId => { + onShowNewFilesPanel = (folderId) => { const { showNewFilesPanel } = this.state; this.setState({ showNewFilesPanel: !showNewFilesPanel, - newFolderId: [folderId] + newFolderId: [folderId], }); }; setNewFilesCount = (folderPath, filesCount) => { const data = this.state.data; - const dataItem = data.find(x => x.id === folderPath[0]); + const dataItem = data.find((x) => x.id === folderPath[0]); dataItem.newItems = filesCount ? filesCount : dataItem.newItems - 1; this.setState({ data }); }; @@ -133,7 +132,7 @@ class ArticleBodyContent extends React.Component { setDragging, onTreeDrop, selectedTreeNode, - setIsLoading + setIsLoading, } = this.props; const { showNewFilesPanel, expandedKeys, newFolderId } = this.state; @@ -193,7 +192,7 @@ function mapStateToProps(state) { selection, dragging, updateTreeNew, - selectedTreeNode + selectedTreeNode, } = state.files; const currentFolderId = selectedFolder.id.toString(); @@ -241,19 +240,16 @@ function mapStateToProps(state) { updateTreeNew, selectedTreeNode: selected, currentModuleName: (currentModule && currentModule.title) || "", - selectedFolderTitle: (selectedFolder && selectedFolder.title) || "" + selectedFolderTitle: (selectedFolder && selectedFolder.title) || "", }; } -export default connect( - mapStateToProps, - { - setFilter, - setTreeFolders, - setDragItem, - setDragging, - setNewTreeFilesBadge, - setIsLoading, - setSelectedNode - } -)(ArticleBodyContent); +export default connect(mapStateToProps, { + setFilter, + setTreeFolders, + setDragItem, + setDragging, + setNewTreeFilesBadge, + setIsLoading, + setSelectedNode, +})(ArticleBodyContent); diff --git a/products/ASC.Files/Client/src/store/files/reducers.js b/products/ASC.Files/Client/src/store/files/reducers.js index 1d33df73df..ed1f6c6808 100644 --- a/products/ASC.Files/Client/src/store/files/reducers.js +++ b/products/ASC.Files/Client/src/store/files/reducers.js @@ -26,7 +26,7 @@ import { SET_THIRD_PARTY, SET_FILES_SETTINGS, SET_FILES_SETTING, - SET_IS_ERROR_SETTINGS + SET_IS_ERROR_SETTINGS, } from "./actions"; import { api } from "asc-web-common"; import { isFileSelected, skipFile, getFilesBySelected } from "./selectors"; @@ -34,7 +34,7 @@ const { FilesFilter } = api; const initialState = { fileAction: { - type: null + type: null, }, files: null, filter: FilesFilter.getDefault(), @@ -61,160 +61,171 @@ const initialState = { forceSave: false, storeForceSave: false, enableThirdParty: false, - isErrorSettings: false - } - + isErrorSettings: false, + }, }; const filesReducer = (state = initialState, action) => { switch (action.type) { case SET_FOLDER: return Object.assign({}, state, { - folders: state.folders.map(folder => + folders: state.folders.map((folder) => folder.id === action.folder.id ? action.folder : folder - ) + ), }); case SET_FOLDERS: return Object.assign({}, state, { - folders: action.folders + folders: action.folders, }); case SET_FILES: return Object.assign({}, state, { - files: action.files + files: action.files, }); case SET_FILE: return Object.assign({}, state, { - files: state.files.map(file => + files: state.files.map((file) => file.id === action.file.id ? action.file : file - ) + ), }); case SET_SELECTION: return Object.assign({}, state, { - selection: action.selection + selection: action.selection, }); case SET_SELECTED: return Object.assign({}, state, { selected: action.selected, - selection: getFilesBySelected(state.files.concat(state.folders), action.selected) + selection: getFilesBySelected( + state.files.concat(state.folders), + action.selected + ), }); case SET_SELECTED_FOLDER: return Object.assign({}, state, { - selectedFolder: action.selectedFolder + selectedFolder: action.selectedFolder, + selectedTreeNode: [action.selectedFolder.id.toString()], }); case SET_TREE_FOLDERS: return Object.assign({}, state, { - treeFolders: action.treeFolders + treeFolders: action.treeFolders, }); case SET_FILTER: return Object.assign({}, state, { - filter: action.filter + filter: action.filter, }); case SET_VIEW_AS: return Object.assign({}, state, { - viewAs: action.viewAs + viewAs: action.viewAs, }); case SET_FILES_FILTER: return Object.assign({}, state, { - filter: action.filter + filter: action.filter, }); case SELECT_FILE: - if (!isFileSelected(state.selection, action.file.id, action.file.parentId)) { + if ( + !isFileSelected(state.selection, action.file.id, action.file.parentId) + ) { return Object.assign({}, state, { - selection: [...state.selection, action.file] + selection: [...state.selection, action.file], }); } else return state; case DESELECT_FILE: - if (isFileSelected(state.selection, action.file.id, action.file.parentId)) { + if ( + isFileSelected(state.selection, action.file.id, action.file.parentId) + ) { return Object.assign({}, state, { - selection: skipFile(state.selection, action.file.id) + selection: skipFile(state.selection, action.file.id), }); } else return state; case SET_ACTION: return Object.assign({}, state, { - fileAction: action.fileAction - }) - case SET_DRAGGING: - return Object.assign({}, state, { - dragging: action.dragging + fileAction: action.fileAction, }); - case SET_DRAG_ITEM: + case SET_DRAGGING: return Object.assign({}, state, { - dragItem: action.dragItem + dragging: action.dragging, }); - case SET_MEDIA_VIEWER_VISIBLE: + case SET_DRAG_ITEM: return Object.assign({}, state, { - mediaViewerData: action.mediaViewerData + dragItem: action.dragItem, }); - case SET_PROGRESS_BAR_DATA: + case SET_MEDIA_VIEWER_VISIBLE: return Object.assign({}, state, { - progressData: action.progressData + mediaViewerData: action.mediaViewerData, }); - case SET_CONVERT_DIALOG_VISIBLE: + case SET_PROGRESS_BAR_DATA: return Object.assign({}, state, { - convertDialogVisible: action.convertDialogVisible + progressData: action.progressData, }); - case SET_NEW_TREE_FILES: + case SET_CONVERT_DIALOG_VISIBLE: return Object.assign({}, state, { - updateTreeNew: action.updateTreeNew + convertDialogVisible: action.convertDialogVisible, }); - case SET_NEW_ROW_ITEMS: + case SET_NEW_TREE_FILES: return Object.assign({}, state, { - newRowItems: action.newRowItems + updateTreeNew: action.updateTreeNew, }); - case SET_SELECTED_NODE: - if ( action.node[0] ) { + case SET_NEW_ROW_ITEMS: + return Object.assign({}, state, { + newRowItems: action.newRowItems, + }); + case SET_SELECTED_NODE: + if (action.node[0]) { return Object.assign({}, state, { - selectedTreeNode: action.node - }) + selectedTreeNode: action.node, + }); } else { return state; } case SET_EXPAND_SETTINGS_TREE: return Object.assign({}, state, { - settingsTree: { ...state.settingsTree , expandedSetting: action.setting } - }) + settingsTree: { + ...state.settingsTree, + expandedSetting: action.setting, + }, + }); case SET_IS_LOADING: return Object.assign({}, state, { - isLoading: action.isLoading - }) + isLoading: action.isLoading, + }); case SET_THIRD_PARTY: return Object.assign({}, state, { - settingsTree: { ...state.settingsTree, thirdParty: action.data } - }) + settingsTree: { ...state.settingsTree, thirdParty: action.data }, + }); case SET_FILES_SETTINGS: - const { + const { storeOriginalFiles, confirmDelete, updateIfExist, forcesave, storeForcesave, - enableThirdParty - } = action.settings + enableThirdParty, + } = action.settings; return Object.assign({}, state, { - settingsTree: { ...state.settingsTree, + settingsTree: { + ...state.settingsTree, storeOriginalFiles, confirmDelete, updateIfExist, forceSave: forcesave, storeForceSave: storeForcesave, - enableThirdParty - } - }) + enableThirdParty, + }, + }); case SET_FILES_SETTING: const { setting, val } = action; return Object.assign({}, state, { - settingsTree: { - ...state.settingsTree, - [setting]: val - } - }) + settingsTree: { + ...state.settingsTree, + [setting]: val, + }, + }); case SET_IS_ERROR_SETTINGS: return Object.assign({}, state, { settingsTree: { ...state.settingsTree, - isErrorSettings: action.isError - } - }) + isErrorSettings: action.isError, + }, + }); default: return state; }