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:
1
frontend/src/assets/icons/folder.svg
Normal file
1
frontend/src/assets/icons/folder.svg
Normal 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 |
1
frontend/src/assets/icons/image.svg
Normal file
1
frontend/src/assets/icons/image.svg
Normal 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 |
1
frontend/src/assets/icons/markdown.svg
Normal file
1
frontend/src/assets/icons/markdown.svg
Normal 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 |
@@ -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,
|
||||
];
|
@@ -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 {
|
||||
|
@@ -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';
|
||||
|
@@ -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',
|
||||
};
|
@@ -5,6 +5,7 @@ const CellType = {
|
||||
CTIME: 'ctime',
|
||||
LAST_MODIFIER: 'last-modifier',
|
||||
MTIME: 'mtime',
|
||||
FILE_NAME: 'file-name',
|
||||
};
|
||||
|
||||
export default CellType;
|
||||
|
@@ -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,
|
||||
|
@@ -45,6 +45,8 @@ export {
|
||||
Z_INDEX,
|
||||
GROUPBY_DATE_GRANULARITY_LIST,
|
||||
HEADER_HEIGHT_TYPE,
|
||||
PRIVATE_COLUMN_KEY,
|
||||
NOT_DISPLAY_COLUMN_KEYS,
|
||||
} from './constants';
|
||||
|
||||
export {
|
||||
|
@@ -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 }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@@ -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 (
|
||||
|
@@ -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 = {
|
||||
|
@@ -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
|
||||
|
Reference in New Issue
Block a user