feat: sf metadata display (#6249)

* feat: sf metadata display

* feat: update code

* feat: update code

* feat: lock react version

* feat: bug

* feat: optimize code

* feat: update transalte

* feat: update transalte

* feat: rebase code

* Feat: update code

* Feat: update code

---------

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

frontend/src/metadata/metadata-view/components/table/container.js

@@ -0,0 +1,187 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { toaster } from '@seafile/sf-metadata-ui-component';
+import { EVENT_BUS_TYPE } from '../../constants';
+import { CommonlyUsedHotkey, getErrorMsg } from '../../_basic';
+import { gettext } from '../../utils';
+import { useMetadata } from '../../hooks';
+import TableTool from './table-tool';
+import TableMain from  './table-main';
+import RecordDetailsDialog from '../record-details-dialog';
+
+import './index.css';
+
+const Container = () => {
+  const [isLoadingMore, setLoadingMore] = useState(false);
+  const { metadata, errorMsg, extendMetadataRows } = useMetadata();
+  const containerRef = useRef(null);
+
+  const onKeyDown = useCallback((event) => {
+    if (event.target.className.includes('editor-main')) return;
+    if (CommonlyUsedHotkey.isModF(event)) {
+      event.preventDefault();
+      window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SEARCH_CELLS);
+      return;
+    }
+  }, []);
+
+  const isGroupView = useCallback(() => {
+    // todo
+    return false;
+  }, []);
+
+  const onSelectCell = useCallback(() => {
+    // todo
+  }, []);
+
+  const tableChanged = useCallback(() => {
+    // todo
+  }, []);
+
+  const handleTableError = useCallback((error) => {
+    const errorMsg = getErrorMsg(error);
+    toaster.danger(gettext(errorMsg));
+  }, []);
+
+  const updateMetadata = useCallback(() => {
+    // todo
+  }, []);
+
+  const loadMore = useCallback(() => {
+    if (!metadata.hasMore) return;
+    setLoadingMore(true);
+    extendMetadataRows((flag) => {
+      setLoadingMore(false);
+    });
+  }, [metadata, extendMetadataRows]);
+
+  const modifyRecords = useCallback((rowIds, idRowUpdates, idOriginalRowUpdates, idOldRowData, idOriginalOldRowData, isCopyPaste = false) => {
+    // todo: store op
+  }, []);
+
+  const modifyRecord = useCallback((rowId, updates, oldRowData, originalUpdates, originalOldRowData) => {
+    const rowIds = [rowId];
+    const idRowUpdates = { [rowId]: updates };
+    const idOriginalRowUpdates = { [rowId]: originalUpdates };
+    const idOldRowData = { [rowId]: oldRowData };
+    const idOriginalOldRowData = { [rowId]: originalOldRowData };
+    modifyRecords(rowIds, idRowUpdates, idOriginalRowUpdates, idOldRowData, idOriginalOldRowData);
+  }, [modifyRecords]);
+
+  const getAdjacentRowsIds = useCallback((rowIds) => {
+    const rowIdsLen = metadata.row_ids.length;
+    let rowIdsInOrder = [];
+    let upperRowIds = [];
+    let belowRowIds = [];
+    let rowIdMap = {};
+    rowIds.forEach(rowId => rowIdMap[rowId] = rowId);
+    metadata.row_ids.forEach((rowId, index) => {
+      if (!rowIdMap[rowId]) {
+        return;
+      }
+      const upperRowId = index === 0 ? null : metadata.row_ids[index - 1];
+      const belowRowId = index === rowIdsLen - 1 ? null : metadata.row_ids[index + 1];
+      rowIdsInOrder.push(rowId);
+      upperRowIds.push(upperRowId);
+      belowRowIds.push(belowRowId);
+    });
+    return { rowIdsInOrder, upperRowIds, belowRowIds };
+  }, [metadata]);
+
+  const modifyFilters = useCallback((filters, filterConjunction) => {
+    // modifyFilters
+  }, []);
+
+  const modifySorts = useCallback((sorts) => {
+    // modifySorts
+  }, []);
+
+  const modifyGroupbys = useCallback(() => {
+    // modifyGroupbys
+  }, []);
+
+  const modifyHiddenColumns = useCallback(() => {
+    // modifyHiddenColumns
+  }, []);
+
+  const recordGetterById = useCallback((recordId) => {
+    return metadata.id_row_map[recordId];
+  }, [metadata]);
+
+  const recordGetter = useCallback((recordIndex) => {
+    const recordId = metadata.row_ids[recordIndex];
+    return recordId && recordGetterById(recordId);
+  }, [metadata, recordGetterById]);
+
+  const groupRecordGetter = useCallback((groupRecordIndex) => {
+    if (!window.sfMetadataBody || !window.sfMetadataBody.getGroupRecordByIndex) {
+      return null;
+    }
+    const groupRecord = window.sfMetadataBody.getGroupRecordByIndex(groupRecordIndex);
+    const recordId = groupRecord.rowId;
+    return recordId && recordGetterById(recordId);
+  }, [recordGetterById]);
+
+  const recordGetterByIndex = useCallback(({ isGroupView, groupRecordIndex, recordIndex }) => {
+    if (isGroupView) groupRecordGetter(groupRecordIndex);
+    return recordGetter(recordIndex);
+  }, [groupRecordGetter, recordGetter]);
+
+  const getTableContentWidth = useCallback(() => {
+    return containerRef?.current?.offsetWidth || 0;
+  }, [containerRef]);
+
+  const getTableContentLeft = useCallback(() => {
+    return containerRef?.current?.getBoundingClientRect()?.left || 0;
+  }, [containerRef]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', onKeyDown);
+    const unsubscribeSelectCell = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.SELECT_CELL, onSelectCell);
+    const unsubscribeServerTableChanged = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.SERVER_TABLE_CHANGED, tableChanged);
+    const unsubscribeTableChanged = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.LOCAL_TABLE_CHANGED, tableChanged);
+    const unsubscribeHandleTableError = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.TABLE_ERROR, handleTableError);
+    const unsubscribeUpdateRows = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.UPDATE_TABLE_ROWS, updateMetadata);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      unsubscribeSelectCell();
+      unsubscribeServerTableChanged();
+      unsubscribeTableChanged();
+      unsubscribeHandleTableError();
+      unsubscribeUpdateRows();
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <div className="sf-metadata-wrapper">
+        <TableTool modifyFilters={modifyFilters} modifySorts={modifySorts} modifyGroupbys={modifyGroupbys} modifyHiddenColumns={modifyHiddenColumns} />
+        <div className="sf-metadata-main">
+          {errorMsg && (<div className="d-center-middle error">{gettext(errorMsg)}</div>)}
+          {!errorMsg && (
+            <div className="sf-metadata-container" ref={containerRef}>
+              <TableMain
+                isGroupView={isGroupView()}
+                isLoadingMore={isLoadingMore}
+                loadMore={loadMore}
+                metadata={metadata}
+                modifyRecord={modifyRecord}
+                modifyRecords={modifyRecords}
+                recordGetterById={recordGetterById}
+                recordGetterByIndex={recordGetterByIndex}
+                getTableContentWidth={getTableContentWidth}
+                getTableContentLeft={getTableContentLeft}
+                getAdjacentRowsIds={getAdjacentRowsIds}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <RecordDetailsDialog />
+    </>
+
+  );
+
+};
+
+export default Container;