haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-09 10:50:24 +00:00
Code Issues Releases Wiki Activity

fix: metadata editor bug (#6377)

Browse Source 
* fix: metadata editor bug

* feat: optimize code

* feat: optimize code

* feat: optimize code

---------

Co-authored-by: 杨国璇 <ygx@192.168.1.8>
This commit is contained in:
杨国璇
2024-07-18 20:49:02 +08:00
committed by GitHub
parent a4ffa253f5
commit 1a00cc6c54
8 changed files with 73 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/package-lock.json generated
View File

@@ -19,7 +19,7 @@
"@seafile/sdoc-editor": "1.0.29",
"@seafile/seafile-calendar": "0.0.12",
"@seafile/seafile-editor": "1.0.105",
"@seafile/sf-metadata-ui-component": "0.0.11",
"@seafile/sf-metadata-ui-component": "0.0.12",
"@uiw/codemirror-extensions-langs": "^4.19.4",
"@uiw/react-codemirror": "^4.19.4",
"chart.js": "2.9.4",
@@ -4971,9 +4971,9 @@
}
},
"node_modules/@seafile/sf-metadata-ui-component": {
"version": "0.0.11",
"resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.11.tgz",
"integrity": "sha512-9mZEusTyIuUiLkkQVRCdIt9/SIZSIUqU64WHgWz31kKgFjEi59Q5pgRGYCxynq1D8/G3SAZ4/pYULoj9A3MbLQ==",
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.12.tgz",
"integrity": "sha512-GJrOSBNWJyimy/Kj/H35hwAPh2FmiJ0nsCEuqDFPtih8lbp65DrRjYx/FE/RzIyCdqIVk3xtnubprNoT9PKEiw==",
"dependencies": {
"@seafile/seafile-calendar": "0.0.24",
"classnames": "2.3.2",
@@ -32200,9 +32200,9 @@
}
},
"@seafile/sf-metadata-ui-component": {
"version": "0.0.11",
"resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.11.tgz",
"integrity": "sha512-9mZEusTyIuUiLkkQVRCdIt9/SIZSIUqU64WHgWz31kKgFjEi59Q5pgRGYCxynq1D8/G3SAZ4/pYULoj9A3MbLQ==",
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.12.tgz",
"integrity": "sha512-GJrOSBNWJyimy/Kj/H35hwAPh2FmiJ0nsCEuqDFPtih8lbp65DrRjYx/FE/RzIyCdqIVk3xtnubprNoT9PKEiw==",
"requires": {
"@seafile/seafile-calendar": "0.0.24",
"classnames": "2.3.2",

2
frontend/package.json
View File

@@ -14,7 +14,7 @@
"@seafile/sdoc-editor": "1.0.29",
"@seafile/seafile-calendar": "0.0.12",
"@seafile/seafile-editor": "1.0.105",
"@seafile/sf-metadata-ui-component": "0.0.11",
"@seafile/sf-metadata-ui-component": "0.0.12",
"@uiw/codemirror-extensions-langs": "^4.19.4",
"@uiw/react-codemirror": "^4.19.4",
"chart.js": "2.9.4",

9
frontend/src/metadata/metadata-view/components/cell-editor/editor-container/index.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import NormalEditorContainer from './normal';
import PopupEditorContainer from './popup';
import PreviewEditorContainer from './preview';
import { CellType } from '../../../_basic';
const POPUP_EDITOR_COLUMN_TYPES = [
@@ -11,12 +12,20 @@ const POPUP_EDITOR_COLUMN_TYPES = [
CellType.LONG_TEXT,
];
const PREVIEW_EDITOR_COLUMN_TYPES = [
CellType.FILE_NAME,
];
const EditorContainer = (props) => {
const { column } = props;
if (!column) return null;
if (POPUP_EDITOR_COLUMN_TYPES.includes(column.type)) {
return (<PopupEditorContainer { ...props } />);
}
if (PREVIEW_EDITOR_COLUMN_TYPES.includes(column.type)) {
return (<PreviewEditorContainer { ...props } />);
}
return (<NormalEditorContainer { ...props } />);
};

8
frontend/src/metadata/metadata-view/components/cell-editor/editor-container/preview.js Normal file
View File

@@ -0,0 +1,8 @@
import React from 'react';
import Editor from '../editor';
const PreviewEditorContainer = (props) => {
return (<Editor { ...props } />);
};
export default PreviewEditorContainer;

8
frontend/src/metadata/metadata-view/components/cell-editor/editor.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Calendar } from '@seafile/sf-metadata-ui-component';
import { SfCalendar } from '@seafile/sf-metadata-ui-component';
import { CellType } from '../../_basic';
import FileNameEditor from './file-name-editor';
import TextEditor from './text-editor';
@@ -15,8 +15,12 @@ const Editor = React.forwardRef((props, ref) => {
case CellType.TEXT: {
return (<TextEditor ref={ref} {...props} />);
}
case CellType.DATE: {
const lang = window.sfMetadataContext.getSetting('lang');
return (<SfCalendar ref={ref} {...props} lang={lang} />);
}
default: {
return (<Calendar ref={ref} {...props} />);
return null;
}
}
});

5
frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-calendar.js
View File

@@ -1,18 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Calendar } from '@seafile/sf-metadata-ui-component';
import { SfFilterCalendar } from '@seafile/sf-metadata-ui-component';
import { getDateColumnFormat } from '../../../../utils/column-utils';
const FilterCalendar = ({ value, filterColumn, isReadOnly, onChange }) => {
const format = getDateColumnFormat(filterColumn).trim();
const lang = window.sfMetadataContext.getSetting('lang');
return (
<Calendar
<SfFilterCalendar
isReadOnly={isReadOnly}
format={format}
lang={lang}
value={value}
onChange={onChange}
zIndex={1061}
/>
);
};

4
frontend/src/metadata/metadata-view/store/index.js
View File

@@ -7,7 +7,7 @@ import { Operation, LOCAL_APPLY_OPERATION_TYPE, NEED_APPLY_AFTER_SERVER_OPERATIO
import { EVENT_BUS_TYPE, PER_LOAD_NUMBER } from '../constants';
import DataProcessor from './data-processor';
import ServerOperator from './server-operator';
import { getColumns } from '../utils/column-utils';
import { normalizeColumns } from '../utils/column-utils';
import { Metadata, User } from '../model';
class Store {
@@ -41,7 +41,7 @@ class Store {
const res = await this.context.getMetadata({ start: this.startIndex, limit });
const view = this.context.localStorage.getItem('view');
const rows = res?.data?.results || [];
const columns = getColumns(res?.data?.metadata);
const columns = normalizeColumns(res?.data?.metadata);
let data = new Metadata({ rows, columns, view });
data.view.rows = data.row_ids;
const loadedCount = rows.length;

42
frontend/src/metadata/metadata-view/utils/column-utils.js
View File

@@ -3,6 +3,7 @@ import {
DEFAULT_DATE_FORMAT,
PRIVATE_COLUMN_KEY,
NOT_DISPLAY_COLUMN_KEYS,
PRIVATE_COLUMN_KEYS,
} from '../_basic';
import {
SEQUENCE_COLUMN_WIDTH
@@ -240,7 +241,8 @@ const getColumnType = (key, type) => {
}
};
const getFileTypeColumnData = (data) => {
const getFileTypeColumnData = (column) => {
const { data } = column;
const _OPTIONS = {
'_picture': { name: gettext('Picture'), color: '#FFFCB5', textColor: '#202428', id: '_picture' },
'_document': { name: gettext('Document'), color: '#B7CEF9', textColor: '#202428', id: '_document' },
@@ -251,15 +253,45 @@ const getFileTypeColumnData = (data) => {
let newData = { ...data };
newData.options = Array.isArray(newData.options) ? newData.options.map(o => {
return { ..._OPTIONS[o.name] };
}) : [];
}) : Object.keys(_OPTIONS);
return newData;
};
export const getColumns = (columns) => {
const getFileStatusColumnData = (column) => {
const { data } = column;
const _OPTIONS = {
'_draft': { name: gettext('Draft'), color: '#EED5FF', textColor: '#202428', id: '_draft' },
'_in_review': { name: gettext('In review'), color: '#FFFDCF', textColor: '#202428', id: '_in_review' },
'_done': { name: gettext('Done'), color: '#59CB74', textColor: '#FFFFFF', borderColor: '#844BD2', id: '_done' },
};
let newData = { ...data };
newData.options = Array.isArray(newData.options) ? newData.options.map(o => {
return { ..._OPTIONS[o.name] };
}) : Object.keys(_OPTIONS);
return newData;
};
const normalizeColumnData = (column) => {
const { key, data } = column;
if (PRIVATE_COLUMN_KEYS.includes(key)) {
if (key === PRIVATE_COLUMN_KEY.FILE_TYPE) return getFileTypeColumnData(column);
if (key === PRIVATE_COLUMN_KEY.FILE_STATUS) return getFileStatusColumnData(column);
}
if (column.type === CellType.SINGLE_SELECT) {
return { ...data, options: data?.options || [] };
}
if (column.type === CellType.DATE) {
return { ...data, format: data?.format || DEFAULT_DATE_FORMAT };
}
return data;
};
export const normalizeColumns = (columns) => {
if (!Array.isArray(columns) || columns.length === 0) return [];
const columnsWidth = window.sfMetadataContext.localStorage.getItem('columns_width') || {};
const validColumns = columns.map((column) => {
const { type, key, name, data, ...params } = column;
const { type, key, name, ...params } = column;
return {
...params,
key,
@@ -267,7 +299,7 @@ export const getColumns = (columns) => {
name: getColumnName(key, name),
width: columnsWidth[key] || 200,
editable: !key.startsWith('_'),
data: key === PRIVATE_COLUMN_KEY.FILE_TYPE ? getFileTypeColumnData(data) : data,
data: normalizeColumnData(column)
};
}).filter(column => !NOT_DISPLAY_COLUMN_KEYS.includes(column.key));
let displayColumns = [];