feat: sdoc metadata (#6687)

* feat: sdoc metadata

* feat: update code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/components/dirent-detail/embedded-file-details/file-details.js

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Formatter } from '@seafile/sf-metadata-ui-component';
+import DetailItem from '../detail-item';
+import { CellType } from '../../../metadata/metadata-view/_basic';
+import { gettext } from '../../../utils/constants';
+import { Utils } from '../../../utils/utils';
+import { MetadataDetails, useEnableMetadata } from '../../../metadata';
+
+const FileDetails = ({ repoID, repoInfo, path, direntDetail }) => {
+  const { enableMetadata } = useEnableMetadata();
+
+  const sizeField = useMemo(() => ({ type: 'size', name: gettext('Size') }), []);
+  const lastModifierField = useMemo(() => ({ type: CellType.LAST_MODIFIER, name: gettext('Last modifier') }), []);
+  const lastModifiedTimeField = useMemo(() => ({ type: CellType.MTIME, name: gettext('Last modified time') }), []);
+
+  return (
+    <>
+      <DetailItem field={sizeField} className="sf-metadata-property-detail-formatter">
+        <Formatter field={sizeField} value={Utils.bytesToSize(direntDetail.size)} />
+      </DetailItem>
+      <DetailItem field={lastModifierField} className="sf-metadata-property-detail-formatter">
+        <Formatter
+          field={lastModifierField}
+          value={direntDetail.last_modifier_email}
+          collaborators={[{
+            name: direntDetail.last_modifier_name,
+            contact_email: direntDetail.last_modifier_contact_email,
+            email: direntDetail.last_modifier_email,
+            avatar_url: direntDetail.last_modifier_avatar,
+          }]}
+        />
+      </DetailItem >
+      <DetailItem field={lastModifiedTimeField} className="sf-metadata-property-detail-formatter">
+        <Formatter field={lastModifiedTimeField} value={direntDetail.last_modified}/>
+      </DetailItem>
+      {window.app.pageOptions.enableMetadataManagement && enableMetadata && (
+        <MetadataDetails repoID={repoID} filePath={path} repoInfo={repoInfo} direntType="file" />
+      )}
+    </>
+  );
+};
+
+FileDetails.propTypes = {
+  repoID: PropTypes.string,
+  repoInfo: PropTypes.object,
+  path: PropTypes.string,
+  direntDetail: PropTypes.object,
+};
+
+export default FileDetails;

frontend/src/components/dirent-detail/embedded-file-details/index.css

@@ -0,0 +1,3 @@
+.detail-body .empty-tip-text {
+  color: #666;
+}

frontend/src/components/dirent-detail/embedded-file-details/index.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { Utils } from '../../../utils/utils';
+import toaster from '../../toast';
+import { Header, Body } from '../detail';
+import FileDetails from './file-details';
+import { MetadataContext } from '../../../metadata';
+
+import './index.css';
+
+const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className }) => {
+
+  const [direntDetail, setDirentDetail] = useState('');
+
+  useEffect(() => {
+    // init context
+    const context = new MetadataContext();
+    window.sfMetadataContext = context;
+    window.sfMetadataContext.init({ repoID, repoInfo });
+    seafileAPI.getFileInfo(repoID, path).then(res => {
+      setDirentDetail(res.data);
+    }).catch(error => {
+      const errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+
+    return () => {
+      window.sfMetadataContext.destroy();
+      delete window['sfMetadataContext'];
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const direntName = dirent?.name || '';
+  const smallIconUrl = Utils.getDirentIcon(dirent);
+
+  return (
+    <div
+      className={classnames('cur-view-detail', className, {
+        'cur-view-detail-small': width < 400,
+        'cur-view-detail-large': width > 400
+      })}
+      style={{ width }}
+    >
+      <Header title={direntName} icon={smallIconUrl} onClose={onClose} />
+      <Body>
+        {dirent && direntDetail && (
+          <div className="detail-content">
+            <FileDetails
+              repoID={repoID}
+              repoInfo={repoInfo}
+              path={path}
+              direntDetail={direntDetail}
+            />
+          </div>
+        )}
+      </Body>
+    </div>
+  );
+};
+
+EmbeddedFileDetails.propTypes = {
+  repoID: PropTypes.string.isRequired,
+  dirent: PropTypes.object,
+  path: PropTypes.string.isRequired,
+  repoInfo: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default EmbeddedFileDetails;

frontend/src/components/file-view/file-view.js

@@ -7,7 +7,7 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import FileInfo from './file-info';
 import FileToolbar from './file-toolbar';
-import FileDetails from '../dirent-detail/file-details';
+import FileDetails from '../dirent-detail/old-file-details';
 
 import '../../css/file-view.css';