mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-20 10:58:33 +00:00
fix: metadata status toggle (#6530)
* fix: metadata status toggle * feat: optimize code --------- Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇
GitHub
@@ -6,7 +6,6 @@ import CurDirPath from '../../components/cur-dir-path';
|
||||
import Detail from '../../components/dirent-detail';
|
||||
import DirColumnView from '../../components/dir-view-mode/dir-column-view';
|
||||
import ToolbarForSelectedDirents from '../../components/toolbar/selected-dirents-toolbar';
|
||||
import { MetadataStatusProvider } from '../../metadata/hooks';
|
||||
|
||||
import '../../css/lib-content-view.css';
|
||||
|
||||
@@ -40,7 +39,7 @@ const propTypes = {
|
||||
isFileLoading: PropTypes.bool.isRequired,
|
||||
filePermission: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
metadataViewId: PropTypes.string,
|
||||
viewId: PropTypes.string,
|
||||
lastModified: PropTypes.string,
|
||||
latestContributor: PropTypes.string,
|
||||
onLinkClick: PropTypes.func.isRequired,
|
||||
@@ -183,160 +182,158 @@ class LibContentContainer extends React.Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<MetadataStatusProvider repoID={repoID}>
|
||||
<div className="cur-view-container">
|
||||
{this.props.currentRepoInfo.status === 'read-only' &&
|
||||
<div className="readonly-tip-message">
|
||||
{gettext('This library has been set to read-only by admin and cannot be updated.')}
|
||||
</div>
|
||||
}
|
||||
<div className="cur-view-path d-block" style={curViewPathStyle}>
|
||||
<CurDirPath
|
||||
currentRepoInfo={this.props.currentRepoInfo}
|
||||
<div className="cur-view-container">
|
||||
{this.props.currentRepoInfo.status === 'read-only' &&
|
||||
<div className="readonly-tip-message">
|
||||
{gettext('This library has been set to read-only by admin and cannot be updated.')}
|
||||
</div>
|
||||
}
|
||||
<div className="cur-view-path d-block" style={curViewPathStyle}>
|
||||
<CurDirPath
|
||||
currentRepoInfo={this.props.currentRepoInfo}
|
||||
repoID={repoID}
|
||||
repoName={this.props.currentRepoInfo.repo_name}
|
||||
repoEncrypted={this.props.repoEncrypted}
|
||||
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
|
||||
pathPrefix={this.props.pathPrefix}
|
||||
currentPath={this.props.path}
|
||||
userPerm={this.props.userPerm}
|
||||
isViewFile={this.props.isViewFile}
|
||||
onTabNavClick={this.props.onTabNavClick}
|
||||
onPathClick={this.onPathClick}
|
||||
updateUsedRepoTags={this.props.updateUsedRepoTags}
|
||||
fileTags={this.props.fileTags}
|
||||
onDeleteRepoTag={this.props.onDeleteRepoTag}
|
||||
direntList={this.props.direntList}
|
||||
sortBy={this.props.sortBy}
|
||||
sortOrder={this.props.sortOrder}
|
||||
sortItems={this.props.sortItems}
|
||||
toggleTreePanel={this.props.toggleTreePanel}
|
||||
currentMode={this.props.currentMode}
|
||||
switchViewMode={this.props.switchViewMode}
|
||||
isCustomPermission={this.props.isCustomPermission}
|
||||
enableDirPrivateShare={this.props.enableDirPrivateShare}
|
||||
showShareBtn={this.props.showShareBtn}
|
||||
onAddFolder={this.props.onAddFolder}
|
||||
onAddFile={this.props.onAddFile}
|
||||
onUploadFile={this.props.onUploadFile}
|
||||
onUploadFolder={this.props.onUploadFolder}
|
||||
fullDirentList={this.props.fullDirentList}
|
||||
filePermission={this.props.filePermission}
|
||||
onFileTagChanged={this.props.onToolbarFileTagChanged}
|
||||
repoTags={this.props.repoTags}
|
||||
viewId={this.props.viewId}
|
||||
onItemMove={this.props.onItemMove}
|
||||
/>
|
||||
<ToolbarForSelectedDirents
|
||||
repoID={this.props.repoID}
|
||||
path={this.props.path}
|
||||
userPerm={this.props.userPerm}
|
||||
repoEncrypted={this.props.repoEncrypted}
|
||||
repoTags={this.props.repoTags}
|
||||
selectedDirentList={this.props.selectedDirentList}
|
||||
direntList={this.props.direntList}
|
||||
onItemsMove={this.props.onItemsMove}
|
||||
onItemsCopy={this.props.onItemsCopy}
|
||||
onItemsDelete={this.props.onItemsDelete}
|
||||
onItemRename={this.props.onItemRename}
|
||||
isRepoOwner={this.props.isRepoOwner}
|
||||
currentRepoInfo={this.props.currentRepoInfo}
|
||||
enableDirPrivateShare={this.props.enableDirPrivateShare}
|
||||
updateDirent={this.props.updateDirent}
|
||||
unSelectDirent={this.props.unSelectDirent}
|
||||
onFilesTagChanged={this.props.onFilesTagChanged}
|
||||
showShareBtn={this.props.showShareBtn}
|
||||
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
|
||||
showDirentDetail={this.props.showDirentDetail}
|
||||
currentMode={this.props.currentMode}
|
||||
switchViewMode={this.props.switchViewMode}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`}
|
||||
onScroll={this.onItemsScroll}
|
||||
>
|
||||
{!this.props.pathExist && this.errMessage}
|
||||
{this.props.pathExist && (
|
||||
<DirColumnView
|
||||
isSidePanelFolded={this.props.isSidePanelFolded}
|
||||
isTreePanelShown={this.props.isTreePanelShown}
|
||||
currentMode={this.props.currentMode}
|
||||
path={this.props.path}
|
||||
repoID={repoID}
|
||||
repoName={this.props.currentRepoInfo.repo_name}
|
||||
repoEncrypted={this.props.repoEncrypted}
|
||||
currentRepoInfo={this.props.currentRepoInfo}
|
||||
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
|
||||
pathPrefix={this.props.pathPrefix}
|
||||
currentPath={this.props.path}
|
||||
userPerm={this.props.userPerm}
|
||||
enableDirPrivateShare={this.props.enableDirPrivateShare}
|
||||
isTreeDataLoading={this.props.isTreeDataLoading}
|
||||
treeData={this.props.treeData}
|
||||
currentNode={this.props.currentNode}
|
||||
onNodeClick={this.props.onNodeClick}
|
||||
onNodeCollapse={this.props.onNodeCollapse}
|
||||
onNodeExpanded={this.props.onNodeExpanded}
|
||||
onAddFolderNode={this.props.onAddFolder}
|
||||
onAddFileNode={this.props.onAddFile}
|
||||
onRenameNode={this.props.onRenameNode}
|
||||
onDeleteNode={this.props.onDeleteNode}
|
||||
isViewFile={this.props.isViewFile}
|
||||
onTabNavClick={this.props.onTabNavClick}
|
||||
onPathClick={this.onPathClick}
|
||||
isFileLoading={this.props.isFileLoading}
|
||||
isFileLoadedErr={this.props.isFileLoadedErr}
|
||||
hash={this.props.hash}
|
||||
filePermission={this.props.filePermission}
|
||||
content={this.props.content}
|
||||
viewId={this.props.viewId}
|
||||
lastModified={this.props.lastModified}
|
||||
latestContributor={this.props.latestContributor}
|
||||
onLinkClick={this.props.onLinkClick}
|
||||
isRepoInfoBarShow={isRepoInfoBarShow}
|
||||
repoTags={this.props.repoTags}
|
||||
usedRepoTags={this.props.usedRepoTags}
|
||||
updateUsedRepoTags={this.props.updateUsedRepoTags}
|
||||
fileTags={this.props.fileTags}
|
||||
onDeleteRepoTag={this.props.onDeleteRepoTag}
|
||||
isDirentListLoading={this.props.isDirentListLoading}
|
||||
direntList={this.props.direntList}
|
||||
fullDirentList={this.props.fullDirentList}
|
||||
sortBy={this.props.sortBy}
|
||||
sortOrder={this.props.sortOrder}
|
||||
sortItems={this.props.sortItems}
|
||||
toggleTreePanel={this.props.toggleTreePanel}
|
||||
currentMode={this.props.currentMode}
|
||||
switchViewMode={this.props.switchViewMode}
|
||||
isCustomPermission={this.props.isCustomPermission}
|
||||
enableDirPrivateShare={this.props.enableDirPrivateShare}
|
||||
showShareBtn={this.props.showShareBtn}
|
||||
onAddFolder={this.props.onAddFolder}
|
||||
onAddFile={this.props.onAddFile}
|
||||
onUploadFile={this.props.onUploadFile}
|
||||
onUploadFolder={this.props.onUploadFolder}
|
||||
fullDirentList={this.props.fullDirentList}
|
||||
filePermission={this.props.filePermission}
|
||||
onFileTagChanged={this.props.onToolbarFileTagChanged}
|
||||
repoTags={this.props.repoTags}
|
||||
metadataViewId={this.props.metadataViewId}
|
||||
onItemMove={this.props.onItemMove}
|
||||
/>
|
||||
<ToolbarForSelectedDirents
|
||||
repoID={this.props.repoID}
|
||||
path={this.props.path}
|
||||
userPerm={this.props.userPerm}
|
||||
repoEncrypted={this.props.repoEncrypted}
|
||||
repoTags={this.props.repoTags}
|
||||
onItemClick={this.onItemClick}
|
||||
onItemSelected={this.onItemSelected}
|
||||
onItemDelete={this.onItemDelete}
|
||||
onItemRename={this.props.onItemRename}
|
||||
onItemMove={this.onItemMove}
|
||||
onItemCopy={this.props.onItemCopy}
|
||||
onItemConvert={this.props.onItemConvert}
|
||||
onDirentClick={this.onDirentClick}
|
||||
updateDirent={this.props.updateDirent}
|
||||
isAllItemSelected={this.props.isAllDirentSelected}
|
||||
onAllItemSelected={this.props.onAllDirentSelected}
|
||||
selectedDirentList={this.props.selectedDirentList}
|
||||
direntList={this.props.direntList}
|
||||
onSelectedDirentListUpdate={this.props.onSelectedDirentListUpdate}
|
||||
onItemsMove={this.props.onItemsMove}
|
||||
onItemsCopy={this.props.onItemsCopy}
|
||||
onItemsDelete={this.props.onItemsDelete}
|
||||
onItemRename={this.props.onItemRename}
|
||||
isRepoOwner={this.props.isRepoOwner}
|
||||
currentRepoInfo={this.props.currentRepoInfo}
|
||||
enableDirPrivateShare={this.props.enableDirPrivateShare}
|
||||
updateDirent={this.props.updateDirent}
|
||||
unSelectDirent={this.props.unSelectDirent}
|
||||
onFilesTagChanged={this.props.onFilesTagChanged}
|
||||
showShareBtn={this.props.showShareBtn}
|
||||
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
|
||||
onFileTagChanged={this.props.onFileTagChanged}
|
||||
showDirentDetail={this.props.showDirentDetail}
|
||||
currentMode={this.props.currentMode}
|
||||
switchViewMode={this.props.switchViewMode}
|
||||
onItemsScroll={this.onItemsScroll}
|
||||
isDirentDetailShow={this.props.isDirentDetailShow}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`}
|
||||
onScroll={this.onItemsScroll}
|
||||
>
|
||||
{!this.props.pathExist && this.errMessage}
|
||||
{this.props.pathExist && (
|
||||
<DirColumnView
|
||||
isSidePanelFolded={this.props.isSidePanelFolded}
|
||||
isTreePanelShown={this.props.isTreePanelShown}
|
||||
currentMode={this.props.currentMode}
|
||||
path={this.props.path}
|
||||
repoID={repoID}
|
||||
currentRepoInfo={this.props.currentRepoInfo}
|
||||
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
|
||||
userPerm={this.props.userPerm}
|
||||
enableDirPrivateShare={this.props.enableDirPrivateShare}
|
||||
isTreeDataLoading={this.props.isTreeDataLoading}
|
||||
treeData={this.props.treeData}
|
||||
currentNode={this.props.currentNode}
|
||||
onNodeClick={this.props.onNodeClick}
|
||||
onNodeCollapse={this.props.onNodeCollapse}
|
||||
onNodeExpanded={this.props.onNodeExpanded}
|
||||
onAddFolderNode={this.props.onAddFolder}
|
||||
onAddFileNode={this.props.onAddFile}
|
||||
onRenameNode={this.props.onRenameNode}
|
||||
onDeleteNode={this.props.onDeleteNode}
|
||||
isViewFile={this.props.isViewFile}
|
||||
isFileLoading={this.props.isFileLoading}
|
||||
isFileLoadedErr={this.props.isFileLoadedErr}
|
||||
hash={this.props.hash}
|
||||
filePermission={this.props.filePermission}
|
||||
content={this.props.content}
|
||||
metadataViewId={this.props.metadataViewId}
|
||||
lastModified={this.props.lastModified}
|
||||
latestContributor={this.props.latestContributor}
|
||||
onLinkClick={this.props.onLinkClick}
|
||||
isRepoInfoBarShow={isRepoInfoBarShow}
|
||||
repoTags={this.props.repoTags}
|
||||
usedRepoTags={this.props.usedRepoTags}
|
||||
updateUsedRepoTags={this.props.updateUsedRepoTags}
|
||||
isDirentListLoading={this.props.isDirentListLoading}
|
||||
direntList={this.props.direntList}
|
||||
fullDirentList={this.props.fullDirentList}
|
||||
sortBy={this.props.sortBy}
|
||||
sortOrder={this.props.sortOrder}
|
||||
sortItems={this.props.sortItems}
|
||||
onAddFolder={this.props.onAddFolder}
|
||||
onAddFile={this.props.onAddFile}
|
||||
onItemClick={this.onItemClick}
|
||||
onItemSelected={this.onItemSelected}
|
||||
onItemDelete={this.onItemDelete}
|
||||
onItemRename={this.props.onItemRename}
|
||||
onItemMove={this.onItemMove}
|
||||
onItemCopy={this.props.onItemCopy}
|
||||
onItemConvert={this.props.onItemConvert}
|
||||
onDirentClick={this.onDirentClick}
|
||||
updateDirent={this.props.updateDirent}
|
||||
isAllItemSelected={this.props.isAllDirentSelected}
|
||||
onAllItemSelected={this.props.onAllDirentSelected}
|
||||
selectedDirentList={this.props.selectedDirentList}
|
||||
onSelectedDirentListUpdate={this.props.onSelectedDirentListUpdate}
|
||||
onItemsMove={this.props.onItemsMove}
|
||||
onItemsCopy={this.props.onItemsCopy}
|
||||
onItemsDelete={this.props.onItemsDelete}
|
||||
onFileTagChanged={this.props.onFileTagChanged}
|
||||
showDirentDetail={this.props.showDirentDetail}
|
||||
onItemsScroll={this.onItemsScroll}
|
||||
isDirentDetailShow={this.props.isDirentDetailShow}
|
||||
/>
|
||||
)}
|
||||
{this.props.isDirentDetailShow && (
|
||||
<Detail
|
||||
path={path}
|
||||
repoID={repoID}
|
||||
currentRepoInfo={this.props.currentRepoInfo}
|
||||
dirent={this.state.currentDirent}
|
||||
repoTags={this.props.repoTags}
|
||||
fileTags={this.props.isViewFile ? this.props.fileTags : []}
|
||||
onFileTagChanged={this.props.onFileTagChanged}
|
||||
onClose={this.props.closeDirentDetail}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{this.props.isDirentDetailShow && (
|
||||
<Detail
|
||||
path={path}
|
||||
repoID={repoID}
|
||||
currentRepoInfo={this.props.currentRepoInfo}
|
||||
dirent={this.state.currentDirent}
|
||||
repoTags={this.props.repoTags}
|
||||
fileTags={this.props.isViewFile ? this.props.fileTags : []}
|
||||
onFileTagChanged={this.props.onFileTagChanged}
|
||||
onClose={this.props.closeDirentDetail}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</MetadataStatusProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,6 +24,7 @@ import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dire
|
||||
import DeleteFolderDialog from '../../components/dialog/delete-folder-dialog';
|
||||
import { EVENT_BUS_TYPE } from '../../components/common/event-bus-type';
|
||||
import { PRIVATE_FILE_TYPE } from '../../constants';
|
||||
import { MetadataProvider } from '../../metadata/hooks';
|
||||
|
||||
const propTypes = {
|
||||
eventBus: PropTypes.object,
|
||||
@@ -89,7 +90,7 @@ class LibContentView extends React.Component {
|
||||
asyncOperationType: 'move',
|
||||
asyncOperationProgress: 0,
|
||||
asyncOperatedFilesLength: 0,
|
||||
metadataViewId: '0000',
|
||||
viewId: '0000',
|
||||
};
|
||||
|
||||
this.oldonpopstate = window.onpopstate;
|
||||
@@ -148,12 +149,7 @@ class LibContentView extends React.Component {
|
||||
const { repoID, eventBus } = props;
|
||||
this.unsubscribeEvent = eventBus.subscribe(EVENT_BUS_TYPE.SEARCH_LIBRARY_CONTENT, this.onSearchedClick);
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const viewID = urlParams.get('view');
|
||||
const viewName = JSON.parse(localStorage.getItem('last_visited_view'))?.viewName;
|
||||
const path = viewID
|
||||
? `/${PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES}/${viewName}`
|
||||
: this.getPathFromLocation(repoID);
|
||||
const path = this.getPathFromLocation(repoID);
|
||||
|
||||
try {
|
||||
const repoInfo = await this.fetchRepoInfo(repoID);
|
||||
@@ -410,19 +406,11 @@ class LibContentView extends React.Component {
|
||||
this.loadSidePanel(path);
|
||||
}
|
||||
|
||||
if (path.includes(PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) {
|
||||
this.handleFileExtendedProperties(path);
|
||||
} else {
|
||||
if (!path.includes(PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) {
|
||||
this.showDir(path);
|
||||
}
|
||||
};
|
||||
|
||||
handleFileExtendedProperties = (path) => {
|
||||
const lastVisitedView = localStorage.getItem('last_visited_view');
|
||||
const { viewID, viewName } = lastVisitedView ? JSON.parse(lastVisitedView) : {};
|
||||
this.showFileMetadata(path, viewID, viewName);
|
||||
};
|
||||
|
||||
loadSidePanel = (path) => {
|
||||
let repoID = this.props.repoID;
|
||||
if (path === '/' || path.includes(PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) {
|
||||
@@ -523,7 +511,7 @@ class LibContentView extends React.Component {
|
||||
window.history.pushState({ url: url, path: filePath }, filePath, url);
|
||||
};
|
||||
|
||||
showFileMetadata = (filePath, viewId, viewName) => {
|
||||
showFileMetadata = (filePath, viewId) => {
|
||||
const repoID = this.props.repoID;
|
||||
const repoInfo = this.state.currentRepoInfo;
|
||||
|
||||
@@ -533,16 +521,33 @@ class LibContentView extends React.Component {
|
||||
isFileLoading: false,
|
||||
isFileLoadedErr: false,
|
||||
content: '__sf-metadata',
|
||||
metadataViewId: viewId,
|
||||
viewId: viewId,
|
||||
isDirentDetailShow: false
|
||||
});
|
||||
|
||||
const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}?view=${encodeURIComponent(viewId)}`;
|
||||
|
||||
localStorage.setItem('last_visited_view', JSON.stringify({ viewID: viewId, viewName: viewName }));
|
||||
window.history.pushState({ url: url, path: '' }, '', url);
|
||||
};
|
||||
|
||||
hideFileMetadata = () => {
|
||||
this.setState({
|
||||
path: '',
|
||||
isViewFile: false,
|
||||
isFileLoading: false,
|
||||
isFileLoadedErr: false,
|
||||
content: '',
|
||||
viewId: '',
|
||||
isDirentDetailShow: false
|
||||
});
|
||||
};
|
||||
|
||||
renameMetadataView = (renamedViewId, newPath) => {
|
||||
const { viewId, content } = this.state;
|
||||
if (content !== '__sf-metadata') return;
|
||||
if (viewId !== renamedViewId) return;
|
||||
this.setState({ path: newPath });
|
||||
};
|
||||
|
||||
loadDirentList = (path) => {
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.listDir(repoID, path, { 'with_thumbnail': true }).then(res => {
|
||||
@@ -1827,7 +1832,7 @@ class LibContentView extends React.Component {
|
||||
}
|
||||
} else if (Utils.isFileMetadata(node?.object?.type)) {
|
||||
if (node.path !== this.state.path) {
|
||||
this.showFileMetadata(node.path, node.view_id || '0000', node.view_name);
|
||||
this.showFileMetadata(node.path, node.view_id || '0000');
|
||||
}
|
||||
} else {
|
||||
let url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(node.path);
|
||||
@@ -2163,7 +2168,12 @@ class LibContentView extends React.Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<MetadataProvider
|
||||
repoID={this.props.repoID}
|
||||
selectMetadataView={this.onTreeNodeClick}
|
||||
renameMetadataView={this.renameMetadataView}
|
||||
hideMetadataView={this.hideFileMetadata}
|
||||
>
|
||||
<div className="main-panel-center flex-row">
|
||||
<LibContentContainer
|
||||
isSidePanelFolded={this.props.isSidePanelFolded}
|
||||
@@ -2193,7 +2203,7 @@ class LibContentView extends React.Component {
|
||||
isFileLoadedErr={this.state.isFileLoadedErr}
|
||||
filePermission={this.state.filePermission}
|
||||
content={this.state.content}
|
||||
metadataViewId={this.state.metadataViewId}
|
||||
viewId={this.state.viewId}
|
||||
lastModified={this.state.lastModified}
|
||||
latestContributor={this.state.latestContributor}
|
||||
onLinkClick={this.onLinkClick}
|
||||
@@ -2281,7 +2291,7 @@ class LibContentView extends React.Component {
|
||||
<MediaQuery query="(max-width: 767.8px)">
|
||||
<Modal zIndex="1030" isOpen={!Utils.isDesktop() && this.state.isTreePanelShown} toggle={this.toggleTreePanel} contentClassName="d-none"></Modal>
|
||||
</MediaQuery>
|
||||
</Fragment>
|
||||
</MetadataProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user