1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-17 07:41:26 +00:00

feat: metadata file name display (#6279)

* feat: metadata file name display

* feat: optimize code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇
2024-07-02 09:55:06 +08:00
committed by GitHub
parent cc159f5e87
commit cc13489fdf
16 changed files with 187 additions and 53 deletions

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719816737147" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4110" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M448 224H160c-16 0-32 9.6-32 32v512c0 16 16 32 32 32h704c16 0 32-16 32-32V368c0-16-16-28.8-32-28.8h-304c-9.6 0-16-6.4-19.2-9.6L448 224z m144 22.4H896c54.4 0 96 41.6 96 96V800c0 54.4-41.6 96-96 96H128c-54.4 0-96-41.6-96-96V224c0-54.4 41.6-96 96-96h345.6c9.6 0 16 6.4 22.4 9.6l96 108.8z" p-id="4111"></path></svg>

After

Width:  |  Height:  |  Size: 644 B

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719816786766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4538" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 256v512c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V256c0-19.2 12.8-32 32-32h704c19.2 0 32 12.8 32 32zM32 224v576c0 54.4 41.6 96 96 96h768c54.4 0 96-41.6 96-96V224c0-54.4-41.6-96-96-96H128C73.6 128 32 169.6 32 224z m563.2 224c12.8 0 25.6 6.4 32 16L864 736H160l140.8-172.8c6.4-9.6 19.2-16 32-16s25.6 6.4 32 16l51.2 67.2 144-169.6c9.6-6.4 22.4-12.8 35.2-12.8zM300.8 275.2c32 0 60.8 16 76.8 44.8 16 28.8 16 60.8 0 89.6-16 28.8-44.8 44.8-76.8 44.8-51.2 0-89.6-41.6-89.6-89.6s41.6-89.6 89.6-89.6z" p-id="4539"></path></svg>

After

Width:  |  Height:  |  Size: 859 B

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719816754372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4252" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M768 992H256c-73.6 0-128-57.6-128-131.2V163.2C128 89.6 182.4 32 256 32h297.6c12.8 0 22.4 3.2 28.8 12.8l297.6 304c9.6 9.6 12.8 16 12.8 32v480C896 934.4 841.6 992 768 992zM265.6 128C240 128 224 144 224 169.6v681.6c0 28.8 16 44.8 41.6 44.8h492.8c25.6 0 41.6-16 41.6-41.6V400L537.6 128H265.6z" p-id="4253"></path><path d="M822.4 448h-297.6c-25.6 0-41.6-16-41.6-41.6V105.6c-3.2-25.6 12.8-41.6 38.4-41.6s41.6 16 41.6 41.6v256h256c25.6 0 41.6 16 41.6 41.6s-12.8 44.8-38.4 44.8zM368 544h288c25.6 0 48 22.4 48 48s-22.4 48-48 48h-288c-25.6 0-48-22.4-48-48s22.4-48 48-48zM368 704h288c25.6 0 48 22.4 48 48s-22.4 48-48 48h-288c-25.6 0-48-22.4-48-48s22.4-48 48-48z" p-id="4254"></path></svg>

After

Width:  |  Height:  |  Size: 1010 B

View File

@@ -0,0 +1,10 @@
import { PRIVATE_COLUMN_KEY } from './private';
export const NOT_DISPLAY_COLUMN_KEYS = [
PRIVATE_COLUMN_KEY.ID,
PRIVATE_COLUMN_KEY.CTIME,
PRIVATE_COLUMN_KEY.MTIME,
PRIVATE_COLUMN_KEY.CREATOR,
PRIVATE_COLUMN_KEY.LAST_MODIFIER,
PRIVATE_COLUMN_KEY.IS_DIR,
];

View File

@@ -7,6 +7,7 @@ const COLUMNS_ICON_CONFIG = {
[CellType.MTIME]: 'creation-time',
[CellType.DEFAULT]: 'text',
[CellType.TEXT]: 'text',
[CellType.FILE_NAME]: 'text',
};
const COLUMNS_ICON_NAME = {
@@ -16,6 +17,7 @@ const COLUMNS_ICON_NAME = {
[CellType.MTIME]: 'Last modified time',
[CellType.DEFAULT]: 'Text',
[CellType.TEXT]: 'Text',
[CellType.FILE_NAME]: 'File name',
};
export {

View File

@@ -20,8 +20,16 @@ export {
SINGLE_CELL_VALUE_COLUMN_TYPE_MAP,
} from './format';
export {
PRIVATE_COLUMN_KEY
} from './private';
export {
CellType,
COLUMNS_ICON_CONFIG,
COLUMNS_ICON_NAME,
};
export {
NOT_DISPLAY_COLUMN_KEYS
} from './common';

View File

@@ -0,0 +1,17 @@
export const PRIVATE_COLUMN_KEY = {
ID: '_id',
// base key
CTIME: '_ctime',
MTIME: '_mtime',
CREATOR: '_creator',
LAST_MODIFIER: '_last_modifier',
IS_DIR: '_is_dir',
PARENT_DIR: '_parent_dir',
FILE_CTIME: '_file_ctime',
FILE_MTIME: '_file_mtime',
FILE_CREATOR: '_file_creator',
FILE_MODIFIER: '_file_modifier',
FILE_NAME: '_name',
};

View File

@@ -5,6 +5,7 @@ const CellType = {
CTIME: 'ctime',
LAST_MODIFIER: 'last-modifier',
MTIME: 'mtime',
FILE_NAME: 'file-name',
};
export default CellType;

View File

@@ -18,6 +18,8 @@ export {
NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP,
MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP,
SINGLE_CELL_VALUE_COLUMN_TYPE_MAP,
PRIVATE_COLUMN_KEY,
NOT_DISPLAY_COLUMN_KEYS,
} from './column';
export {
FILTER_CONJUNCTION_TYPE,

View File

@@ -45,6 +45,8 @@ export {
Z_INDEX,
GROUPBY_DATE_GRANULARITY_LIST,
HEADER_HEIGHT_TYPE,
PRIVATE_COLUMN_KEY,
NOT_DISPLAY_COLUMN_KEYS,
} from './constants';
export {

View File

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Formatter } from '@seafile/sf-metadata-ui-component';
import { useCollaborators } from '../../hooks';
const CellFormatter = ({ readonly, value, field, }) => {
const CellFormatter = ({ readonly, value, field, ...params }) => {
const { collaborators, collaboratorsCache, updateCollaboratorsCache } = useCollaborators();
return (
<Formatter
@@ -14,6 +14,7 @@ const CellFormatter = ({ readonly, value, field, }) => {
collaboratorsCache={collaboratorsCache}
updateCollaboratorsCache={updateCollaboratorsCache}
queryUserAPI={window.sfMetadataContext.userService.queryUser}
{ ...params }
/>
);
};

View File

@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { toaster } from '@seafile/sf-metadata-ui-component';
import { isFunction } from '../../../../_basic';
import { isNameColumn } from '../../../../utils/column-utils';
@@ -42,28 +43,16 @@ class RecordCell extends React.Component {
const { column, highlightClassName, isLastCell, isLastFrozenCell, isCellSelected } = this.props;
const { isFileTipShow } = this.state;
const { type } = column;
let className = `sf-metadata-result-table-cell sf-metadata-result-table-${type}-cell `;
const canEditable = window.sfMetadataContext.canModifyCell(column);
className = `${className}${(canEditable || !TABLE_SUPPORT_EDIT_TYPE_MAP[type]) ? '' : 'table-cell-uneditable '}`;
if (highlightClassName) {
className += `${highlightClassName} `;
}
if (isLastCell) {
className += 'last-cell ';
}
if (isLastFrozenCell) {
className += 'table-last--frozen ';
}
if (isCellSelected) {
className += 'cell-selected ';
}
if (isFileTipShow) {
className += 'draging-file-to-cell ';
}
if (hasComment) {
className += 'row-comment-cell';
}
return className;
return classnames('sf-metadata-result-table-cell', `sf-metadata-result-table-${type}-cell`, {
'table-cell-uneditable': !canEditable && TABLE_SUPPORT_EDIT_TYPE_MAP[type],
[highlightClassName]: highlightClassName,
'last-cell': isLastCell,
'table-last--frozen': isLastFrozenCell,
'cell-selected': isCellSelected,
'draging-file-to-cell': isFileTipShow,
'row-comment-cell': hasComment,
});
};
onCellClick = (e) => {
@@ -170,7 +159,7 @@ class RecordCell extends React.Component {
...cellEvents,
};
const cellContent = (
<CellFormatter readonly={readonly} value={cellValue} field={column} />
<CellFormatter readonly={readonly} value={cellValue} field={column} isDir={record['_is_dir'] === 'True'} />
);
return (

View File

@@ -37,6 +37,7 @@ export const TABLE_NOT_SUPPORT_EDIT_TYPE_MAP = {
export const TABLE_SUPPORT_EDIT_TYPE_MAP = {
[CellType.TEXT]: true,
[CellType.FILE_NAME]: true,
};
export const TABLE_MOBILE_SUPPORT_EDIT_CELL_TYPE_MAP = {

View File

@@ -3,7 +3,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
import { toaster } from '@seafile/sf-metadata-ui-component';
import { Metadata } from '../model';
import { gettext } from '../../../utils/constants';
import { getErrorMsg, CellType } from '../_basic';
import { getErrorMsg, CellType, PRIVATE_COLUMN_KEY, NOT_DISPLAY_COLUMN_KEYS } from '../_basic';
import Context from '../context';
const MetadataContext = React.createContext(null);
@@ -17,27 +17,27 @@ export const MetadataProvider = ({
const getColumnName = useCallback((key, name) => {
switch (key) {
case '_ctime':
case PRIVATE_COLUMN_KEY.CTIME:
return gettext('Created time');
case '_mtime':
case PRIVATE_COLUMN_KEY.MTIME:
return gettext('Last modified time');
case '_creator':
case PRIVATE_COLUMN_KEY.CREATOR:
return gettext('Creator');
case '_last_modifier':
case PRIVATE_COLUMN_KEY.LAST_MODIFIER:
return gettext('Last modifier');
case '_file_creator':
case PRIVATE_COLUMN_KEY.FILE_CREATOR:
return gettext('File creator');
case '_file_modifier':
case PRIVATE_COLUMN_KEY.FILE_MODIFIER:
return gettext('File modifier');
case '_file_ctime':
case PRIVATE_COLUMN_KEY.FILE_CTIME:
return gettext('File created time');
case '_file_mtime':
case PRIVATE_COLUMN_KEY.FILE_MTIME:
return gettext('File last modified time');
case '_is_dir':
case PRIVATE_COLUMN_KEY.IS_DIR:
return gettext('Is dir');
case '_parent_dir':
case PRIVATE_COLUMN_KEY.PARENT_DIR:
return gettext('Parent dir');
case '_name':
case PRIVATE_COLUMN_KEY.FILE_NAME:
return gettext('File name');
default:
return name;
@@ -46,18 +46,20 @@ export const MetadataProvider = ({
const getColumnType = useCallback((key, type) => {
switch (key) {
case '_ctime':
case '_file_ctime':
case PRIVATE_COLUMN_KEY.CTIME:
case PRIVATE_COLUMN_KEY.FILE_CTIME:
return CellType.CTIME;
case '_mtime':
case '_file_mtime':
case PRIVATE_COLUMN_KEY.MTIME:
case PRIVATE_COLUMN_KEY.FILE_MTIME:
return CellType.MTIME;
case '_creator':
case '_file_creator':
case PRIVATE_COLUMN_KEY.CREATOR:
case PRIVATE_COLUMN_KEY.FILE_CREATOR:
return CellType.CREATOR;
case '_last_modifier':
case '_file_modifier':
case PRIVATE_COLUMN_KEY.LAST_MODIFIER:
case PRIVATE_COLUMN_KEY.FILE_MODIFIER:
return CellType.LAST_MODIFIER;
case PRIVATE_COLUMN_KEY.FILE_NAME:
return CellType.FILE_NAME;
default:
return type;
}
@@ -65,7 +67,7 @@ export const MetadataProvider = ({
const getColumns = useCallback((columns) => {
if (!Array.isArray(columns) || columns.length === 0) return [];
return columns.map((column) => {
const validColumns = columns.map((column) => {
const { type, key, name, ...params } = column;
return {
key,
@@ -74,7 +76,23 @@ export const MetadataProvider = ({
...params,
width: 200,
};
}).filter(column => !['_id', '_ctime', '_mtime', '_creator', '_last_modifier'].includes(column.key));
}).filter(column => !NOT_DISPLAY_COLUMN_KEYS.includes(column.key));
let displayColumns = [];
validColumns.forEach(column => {
if (column.key === '_name') {
displayColumns.unshift(column);
} else if (column.key === PRIVATE_COLUMN_KEY.PARENT_DIR) {
const nameColumnIndex = displayColumns.findIndex(column => column.key === PRIVATE_COLUMN_KEY.PARENT_DIR);
if (nameColumnIndex === -1) {
displayColumns.unshift(column);
} else {
displayColumns.splice(nameColumnIndex, 0, column);
}
} else {
displayColumns.push(column);
}
});
return displayColumns;
}, [getColumnType, getColumnName]);
// init