feat: metadata ui bug (#6713)

* feat: metadata ui bug

* feat: update code

* feat: update code

---------

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

frontend/src/metadata/metadata-tree-view/index.js

@@ -8,6 +8,7 @@ import { PRIVATE_FILE_TYPE } from '../../constants';
 import ViewItem from './view-item';
 import { useMetadata } from '../hooks';
 import { AddView } from '../metadata-view/components/popover/view-popover';
+import { VIEW_TYPE_ICON } from '../metadata-view/_basic';
 
 import './index.css';
 
@@ -132,7 +133,7 @@ const MetadataTreeView = ({ userPerm, currentPath }) => {
             {showInput && (
               <Form onSubmit={handleInputSubmit} className='tree-view-inner sf-metadata-view-form'>
                 <div className="left-icon">
-                  <Icon symbol={newView.type} className="metadata-views-icon" />
+                  <Icon symbol={VIEW_TYPE_ICON[newView.type] || 'table'} className="metadata-views-icon" />
                 </div>
                 <Input
                   className='sf-metadata-view-input'

frontend/src/metadata/metadata-view/components/cell-editor/file-name-editor.js

@@ -108,7 +108,11 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
   if (!fileType || fileType === 'sdoc') {
     window.open(url);
   } else {
-    window.open(window.location.origin + window.location.pathname + Utils.encodePath(Utils.joinPath(parentDir, fileName)));
+    let pathname = window.location.pathname;
+    if (pathname.endsWith('/')) {
+      pathname = pathname.slice(0, -1);
+    }
+    window.open(window.location.origin + pathname + Utils.encodePath(Utils.joinPath(parentDir, fileName)));
   }
   return null;
 };

frontend/src/metadata/metadata-view/components/popover/sort-popover/index.js

@@ -49,6 +49,7 @@ class SortPopover extends Component {
     this.columnsOptions = this.createColumnsOptions(columns);
     this.state = {
       sorts: getDisplaySorts(sorts, columns),
+      isSubmitDisabled: true,
     };
     this.isSelectOpen = false;
   }
@@ -187,9 +188,9 @@ class SortPopover extends Component {
   };
 
   renderSortItem = (column, sort, index) => {
-    let { name, type } = column;
+    const { name, type } = column;
     const { readOnly } = this.props;
-    let selectedColumn = {
+    const selectedColumn = {
       label: (
         <Fragment>
           <span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
@@ -198,9 +199,10 @@ class SortPopover extends Component {
       )
     };
 
-    let selectedTypeShow = sort.sort_type;
+    const selectedType = sort.sort_type;
-    let selectedSortType = selectedTypeShow && {
+    const selectedTypeOption = SORT_TYPES.find(sortType => sortType.value === selectedType);
-      label: <span className="select-option-name">{gettext(selectedTypeShow)}</span>
+    const selectedSortType = selectedType && {
+      label: <span className="select-option-name">{selectedTypeOption?.name || gettext('Up')}</span>
     };
 
     return (

frontend/src/metadata/metadata-view/components/view/table/table-main/records/group-body/index.js

@@ -870,6 +870,7 @@ class GroupBody extends Component {
           <InteractionMasks
             isGroupView
             ref={this.setInteractionMaskRef}
+            contextMenu={this.props.contextMenu}
             table={this.props.table}
             columns={this.props.columns}
             recordsCount={this.props.recordsCount}

frontend/src/metadata/metadata-view/components/view/table/table-main/records/records-header/cell/index.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { UncontrolledTooltip } from 'reactstrap';
 import { DragSource, DropTarget } from 'react-dnd';
 import { Icon } from '@seafile/sf-metadata-ui-component';
-import { COLUMNS_ICON_CONFIG, COLUMNS_ICON_NAME, PRIVATE_COLUMN_KEY } from '../../../../../../../_basic';
+import { COLUMNS_ICON_CONFIG, COLUMNS_ICON_NAME } from '../../../../../../../_basic';
 import ResizeColumnHandle from './resize-column-handle';
 import { EVENT_BUS_TYPE } from '../../../../../../../constants';
 import DropdownMenu from './dropdown-menu';
@@ -36,11 +36,14 @@ const dropTarget = {
   hover(props, monitor, component) {
     // This is fired very often and lets you perform side effects.
     if (!window.sfMetadataBody) return;
-    const defaultColumnWidth = 200;
+    let defaultColumnWidth = 200;
     const offsetX = monitor.getClientOffset().x;
     const width = document.querySelector('.sf-metadata-wrapper')?.clientWidth;
     const left = window.innerWidth - width;
-    if (offsetX > width - defaultColumnWidth) {
+    if (width <= 800) {
+      defaultColumnWidth = 20;
+    }
+    if (offsetX > window.innerWidth - defaultColumnWidth) {
       window.sfMetadataBody.scrollToRight();
     } else if (offsetX < props.frozenColumnsWidth + defaultColumnWidth + left) {
       window.sfMetadataBody.scrollToLeft();
@@ -175,7 +178,7 @@ const Cell = ({
     </div>
   );
 
-  if (!canModifyColumnOrder || column.key === PRIVATE_COLUMN_KEY.FILE_NAME) {
+  if (!canModifyColumnOrder) {
     return (
       <div key={key} className="sf-metadata-record-header-cell">
         {cell}

frontend/src/metadata/metadata-view/components/view/table/table-main/records/records-header/index.js

@@ -11,7 +11,7 @@ import ActionsCell from './actions-cell';
 import { isMobile } from '../../../../../../utils';
 import { getFrozenColumns } from '../../../../../../utils/table-utils';
 import { isFrozen, recalculateColumnMetricsByResizeColumn } from '../../../../../../utils/column-utils';
-import { GRID_HEADER_DEFAULT_HEIGHT, GRID_HEADER_DOUBLE_HEIGHT } from '../../../../../../constants';
+import { GRID_HEADER_DEFAULT_HEIGHT, GRID_HEADER_DOUBLE_HEIGHT, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
 import InsertColumn from './insert-column';
 import html5DragDropContext from '../../../../../../../../pages/wiki2/wiki-nav/html5DragDropContext';
 
@@ -83,7 +83,7 @@ const RecordsHeader = ({
 
   const frozenColumns = getFrozenColumns(columnMetrics.columns);
   const displayColumns = columnMetrics.columns.slice(colOverScanStartIdx, colOverScanEndIdx);
-  const frozenColumnsWidth = frozenColumns.reduce((total, c) => total + c.width, 0);
+  const frozenColumnsWidth = frozenColumns.reduce((total, c) => total + c.width, groupOffsetLeft + SEQUENCE_COLUMN_WIDTH);
 
   return (
     <div className="static-sf-metadata-result-content grid-header" style={{ height: height + 1 }}>