feat: details (#6484)

Co-authored-by: 杨国璇 <[email protected]>

frontend/src/components/dirent-detail/detail-item/index.css

@@ -0,0 +1,51 @@
+.dirent-detail-item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.dirent-detail-item .dirent-detail-item-name-container {
+  width: 160px;
+  padding: 7px 6px;
+  min-height: 34px;
+  height: fit-content;
+  color: #666;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.dirent-detail-item .dirent-detail-item-name-container .sf-metadata-icon {
+  margin-right: 6px;
+  font-size: 14px;
+  fill: #999;
+}
+
+.dirent-detail-item .dirent-detail-item-value {
+  width: 200px;
+  display: flex;
+  padding: 7px 6px;
+  min-height: 34px;
+  height: fit-content;
+}
+
+.dirent-detail-item .dirent-detail-item-value.editable:hover {
+  cursor: pointer;
+}
+
+.dirent-detail-item .dirent-detail-item-name-container:hover,
+.dirent-detail-item .dirent-detail-item-value:hover {
+  background-color: #F5F5F5;
+  border-radius: 3px;
+  cursor: default;
+}
+
+.dirent-detail-item .dirent-detail-item-value .text-formatter,
+.dirent-detail-item .dirent-detail-item-value .ctime-formatter {
+  line-height: 1.5;
+}
+
+.dirent-detail-item-value .creator-formatter {
+  height: 20px;
+}

frontend/src/components/dirent-detail/detail-item/index.js

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Formatter, Icon } from '@seafile/sf-metadata-ui-component';
+import classnames from 'classnames';
+import { CellType, COLUMNS_ICON_CONFIG } from '../../../metadata/metadata-view/_basic';
+
+import './index.css';
+
+const DetailItem = ({ field, value, valueId, valueClick, children, ...params }) => {
+  const icon = useMemo(() => {
+    if (field.type === 'size') return COLUMNS_ICON_CONFIG[CellType.NUMBER];
+    return COLUMNS_ICON_CONFIG[field.type];
+  }, [field]);
+
+  return (
+    <div className="dirent-detail-item">
+      <div className="dirent-detail-item-name-container">
+        <Icon iconName={icon} />
+        <span className="dirent-detail-item-name">{field.name}</span>
+      </div>
+      <div className={classnames('dirent-detail-item-value', { 'editable': valueClick })} id={valueId} onClick={valueClick}>
+        {children ? children : (<Formatter { ...params } field={field} value={value}/>)}
+      </div>
+    </div>
+  );
+};
+
+DetailItem.propTypes = {
+  field: PropTypes.object.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
+  children: PropTypes.any,
+  valueId: PropTypes.string,
+};
+
+export default DetailItem;
+

frontend/src/components/dirent-detail/detail-list-view.js

@@ -44,6 +44,14 @@ class DetailListView extends React.Component {
     return position;
   };
 
+  getDirentPath = () => {
+    if (Utils.isMarkdownFile(this.props.path)) {
+      return this.props.path; // column mode: view file
+    }
+    let { dirent, path } = this.props;
+    return Utils.joinPath(path, dirent.name);
+  };
+
   onEditFileTagToggle = () => {
     this.setState({
       isEditFileTagShow: !this.state.isEditFileTagShow
@@ -55,14 +63,6 @@ class DetailListView extends React.Component {
     this.props.onFileTagChanged(this.props.dirent, direntPath);
   };
 
-  getDirentPath = () => {
-    if (Utils.isMarkdownFile(this.props.path)) {
-      return this.props.path; // column mode: view file
-    }
-    let { dirent, path } = this.props;
-    return Utils.joinPath(path, dirent.name);
-  };
-
   toggleExtraMetadataPropertiesDialog = () => {
     this.setState({ isShowMetadataExtraProperties: !this.state.isShowMetadataExtraProperties });
   };

frontend/src/components/dirent-detail/dirent-details/dir-details.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { getDirentPath, getDirentPosition } from './utils';
+import DetailItem from '../detail-item';
+import { CellType } from '../../../metadata/metadata-view/_basic';
+import { gettext } from '../../../utils/constants';
+import EditMetadata from './edit-metadata';
+
+const DirDetails = ({ repoID, repoInfo, dirent, direntType, path, direntDetail }) => {
+  const position = useMemo(() => getDirentPosition(repoInfo, dirent, path), [repoInfo, dirent, path]);
+  const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
+
+  return (
+    <>
+      <DetailItem field={{ type: CellType.TEXT, name: gettext('File location') }} value={position} />
+      <DetailItem field={{ type: 'size', name: gettext('Size') }} value={repoInfo.size} />
+      <DetailItem field={{ type: CellType.CREATOR, name: gettext('Creator') }} value={repoInfo.owner_email} collaborators={[{
+        name: repoInfo.owner_name,
+        contact_email: repoInfo.owner_contact_email,
+        email: repoInfo.owner_email,
+        avatar_url: repoInfo.owner_avatar,
+      }]} />
+      <DetailItem field={{ type: CellType.MTIME, name: gettext('Last modified time') }} value={direntDetail.mtime} />
+      {direntDetail.permission === 'rw' && window.app.pageOptions.enableMetadataManagement && (
+        <EditMetadata repoID={repoID} direntPath={direntPath} direntType={direntType} direntDetail={direntDetail} />
+      )}
+    </>
+  );
+};
+
+DirDetails.propTypes = {
+  repoID: PropTypes.string,
+  repoInfo: PropTypes.object,
+  dirent: PropTypes.object,
+  direntType: PropTypes.string,
+  path: PropTypes.string,
+  direntDetail: PropTypes.object,
+};
+
+export default DirDetails;

frontend/src/components/dirent-detail/dirent-details/edit-metadata/index.css

@@ -0,0 +1,31 @@
+.detail-edit-metadata-btn {
+  height: 34px;
+  width: fit-content;
+  max-width: 100%;
+  padding: 0 6px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.detail-edit-metadata-btn .seafile-multicolor-icon {
+  margin-right: 6px;
+  flex-shrink: 0;
+  font-size: 14px;
+  fill: #999;
+}
+
+.detail-edit-metadata-btn:hover {
+  background-color: #F5F5F5;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.detail-edit-metadata-btn .detail-edit-metadata-btn-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #666;
+  font-size: 14px;
+}

frontend/src/components/dirent-detail/dirent-details/edit-metadata/index.js

@@ -0,0 +1,41 @@
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import ExtraMetadataAttributesDialog from '../../../dialog/extra-metadata-attributes-dialog';
+import { gettext } from '../../../../utils/constants';
+import Icon from '../../../icon';
+
+import './index.css';
+
+const EditMetadata = ({ repoID, direntPath, direntType, direntDetail }) => {
+  const [isShowDialog, setShowDialog] = useState(false);
+  const onToggle = useCallback(() => {
+    setShowDialog(!isShowDialog);
+  }, [isShowDialog]);
+
+  return (
+    <>
+      <div className="detail-edit-metadata-btn" onClick={onToggle}>
+        <Icon symbol="add-table" />
+        <span className="detail-edit-metadata-btn-title">{gettext('Edit metadata properties')}</span>
+      </div>
+      {isShowDialog && (
+        <ExtraMetadataAttributesDialog
+          repoID={repoID}
+          filePath={direntPath}
+          direntType={direntType}
+          direntDetail={direntDetail}
+          onToggle={onToggle}
+        />
+      )}
+    </>
+  );
+};
+
+EditMetadata.propTypes = {
+  repoID: PropTypes.string,
+  direntPath: PropTypes.string,
+  direntType: PropTypes.string,
+  direntDetail: PropTypes.object,
+};
+
+export default EditMetadata;