diff --git a/frontend/src/metadata/components/view-toolbar/card-view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/card-view-toolbar/index.js index 38a3594d94..5d07deaea7 100644 --- a/frontend/src/metadata/components/view-toolbar/card-view-toolbar/index.js +++ b/frontend/src/metadata/components/view-toolbar/card-view-toolbar/index.js @@ -63,7 +63,7 @@ const CardViewToolbar = ({ {!readOnly && ( + {displayColumns.map((column) => { + const value = getCellValueByColumn(record, column); + if (!displayEmptyValue && !isValidCellValue(value)) { + if (displayColumnName) { + return ( +
+ {column.name} +
+ ); + } + return null; + } + + return ( +
+ {displayColumnName && ( + {column.name} + )} + +
+ ); + })} ); diff --git a/frontend/src/metadata/views/card/card-items/index.css b/frontend/src/metadata/views/card/card-items/index.css index 77b5be12d8..060ca5f2e5 100644 --- a/frontend/src/metadata/views/card/card-items/index.css +++ b/frontend/src/metadata/views/card/card-items/index.css @@ -1,3 +1,4 @@ .sf-metadata-view-card-items-container { + padding: 20px; grid-gap: 20px; } diff --git a/frontend/src/metadata/views/card/card-items/index.js b/frontend/src/metadata/views/card/card-items/index.js index c831fb2be1..158e7374e2 100644 --- a/frontend/src/metadata/views/card/card-items/index.js +++ b/frontend/src/metadata/views/card/card-items/index.js @@ -2,6 +2,7 @@ import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react' import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useMetadataView } from '../../../hooks/metadata-view'; +import { CARD_SETTINGS_KEYS } from '../../../constants'; import { gettext } from '../../../../utils/constants'; import { getRecordIdFromRecord, getFileNameFromRecord, getParentDirFromRecord } from '../../../utils/cell'; import { openFile } from '../../../utils/file'; @@ -36,6 +37,18 @@ const CardItems = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSetti return metadata.key_column_map['_file_mtime']; }, [metadata.key_column_map]); + const displayColumns = useMemo(() => { + const displayColumnsConfig = metadata.view.settings[CARD_SETTINGS_KEYS.COLUMNS]; + if (!displayColumnsConfig) return []; + return displayColumnsConfig + .filter(config => config.shown) + .map(config => metadata.key_column_map[config.key]); + }, [metadata.key_column_map, metadata.view.settings]); + + const displayEmptyValue = useMemo(() => !metadata.view.settings[CARD_SETTINGS_KEYS.HIDE_EMPTY_VALUE], [metadata.view.settings]); + const displayColumnName = useMemo(() => metadata.view.settings[CARD_SETTINGS_KEYS.SHOW_COLUMN_NAME], [metadata.view.settings]); + const textWrap = useMemo(() => metadata.view.settings[CARD_SETTINGS_KEYS.TEXT_WRAP], [metadata.view.settings]); + const records = useMemo(() => { const { rows } = metadata; return rows || []; @@ -126,7 +139,8 @@ const CardItems = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSetti <>
@@ -140,6 +154,9 @@ const CardItems = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSetti tagsData={tagsData} fileNameColumn={fileNameColumn} mtimeColumn={mtimeColumn} + displayColumns={displayColumns} + displayEmptyValue={displayEmptyValue} + displayColumnName={displayColumnName} onOpenFile={onOpenFile} onSelectCard={onSelectCard} onContextMenu={(e) => onContextMenu(e, record._id)} diff --git a/frontend/src/metadata/views/card/index.css b/frontend/src/metadata/views/card/index.css deleted file mode 100644 index 642e6acb88..0000000000 --- a/frontend/src/metadata/views/card/index.css +++ /dev/null @@ -1,3 +0,0 @@ -.sf-metadata-view-card { - padding: 20px; -} diff --git a/frontend/src/metadata/views/card/index.js b/frontend/src/metadata/views/card/index.js index 0eb69ed196..b9c5faa36b 100644 --- a/frontend/src/metadata/views/card/index.js +++ b/frontend/src/metadata/views/card/index.js @@ -4,12 +4,7 @@ import { EVENT_BUS_TYPE } from '../../constants'; import CardItems from './card-items'; import Settings from './settings'; -import './index.css'; - const Card = () => { - - // Thu Sep 11 18:29:51 CST 2025 - // 'Settings' will be implemented later const [isShowSettings, setShowSettings] = useState(false); const { @@ -46,7 +41,7 @@ const Card = () => { return (
-
+
{ onCloseSettings={closeSettings} /> {isShowSettings && ( -
+
{ const { globalHiddenColumns } = useMetadataStatus(); const validColumns = useMemo(() => columns.filter(column => !globalHiddenColumns.includes(column.key)), [columns, globalHiddenColumns]); - const groupByColumnOptions = useMemo(() => { - return validColumns - .filter(col => col.type === CellType.SINGLE_SELECT || col.type === CellType.COLLABORATOR) - .map(col => ({ - value: col.key, - label: ( - <> - - {col.name} - - ) - })); - }, [validColumns]); - const titleColumnOptions = useMemo(() => { - return validColumns - .map(col => ({ - value: col.key, - label: ( - <> - - {col.name} - - ) - })); - }, [validColumns]); const displayColumns = useMemo(() => { - const displayColumnsConfig = settings[KANBAN_SETTINGS_KEYS.COLUMNS].filter(column => !globalHiddenColumns.includes(column.key)); - const titleColumnKey = settings[KANBAN_SETTINGS_KEYS.TITLE_COLUMN_KEY]; - const filteredColumns = validColumns.filter(item => item.key !== titleColumnKey); - if (!displayColumnsConfig) return filteredColumns.map(column => ({ ...column, shown: false })); + const displayColumnsConfig = settings[CARD_SETTINGS_KEYS.COLUMNS].filter(column => !globalHiddenColumns.includes(column.key)); + const nameColumnKey = '_name'; + const mtimeColumnKey = '_file_mtime'; + const filteredColumns = validColumns.filter(item => item.key !== nameColumnKey && item.key !== mtimeColumnKey); + + if (!displayColumnsConfig) { + return filteredColumns.map(column => ({ ...column, shown: false })); + } + const validDisplayColumnsConfig = displayColumnsConfig.map(columnConfig => { const column = columnsMap[columnConfig.key]; if (column) return { ...column, shown: columnConfig.shown }; return null; - }).filter(column => column && column.key !== titleColumnKey); + }).filter(column => column && column.key !== nameColumnKey && column.key !== mtimeColumnKey); const addedColumns = filteredColumns .filter(column => !getColumnByKey(validDisplayColumnsConfig, column.key)) .map(column => ({ ...column, shown: false })); + return [...validDisplayColumnsConfig, ...addedColumns]; }, [validColumns, columnsMap, settings, globalHiddenColumns]); @@ -74,7 +53,7 @@ const Settings = ({ if (columnConfig.key === key) return { ...columnConfig, shown }; return columnConfig; }); - handleUpdateSettings(KANBAN_SETTINGS_KEYS.COLUMNS, newDisplayColumnsConfig); + handleUpdateSettings(CARD_SETTINGS_KEYS.COLUMNS, newDisplayColumnsConfig); }, [displayColumnsConfig, handleUpdateSettings]); const onMoveField = useCallback((sourceKey, targetKey) => { @@ -84,63 +63,42 @@ const Settings = ({ if (sourceIndex === -1 || targetIndex === -1) return; newDisplayColumnsConfig.splice(sourceIndex, 1, displayColumnsConfig[targetIndex]); newDisplayColumnsConfig.splice(targetIndex, 1, displayColumnsConfig[sourceIndex]); - handleUpdateSettings(KANBAN_SETTINGS_KEYS.COLUMNS, newDisplayColumnsConfig); + handleUpdateSettings(CARD_SETTINGS_KEYS.COLUMNS, newDisplayColumnsConfig); }, [displayColumnsConfig, handleUpdateSettings]); const onToggleFieldsVisibility = useCallback((visibility) => { const newDisplayColumnsConfig = displayColumnsConfig.map(columnConfig => ({ ...columnConfig, shown: visibility })); - handleUpdateSettings(KANBAN_SETTINGS_KEYS.COLUMNS, newDisplayColumnsConfig); + handleUpdateSettings(CARD_SETTINGS_KEYS.COLUMNS, newDisplayColumnsConfig); }, [displayColumnsConfig, handleUpdateSettings]); return ( -
+
{gettext('Settings')}
-
- {gettext('Group by')} - -
-
-
- {gettext('Title property')} - -
-
handleUpdateSettings(KANBAN_SETTINGS_KEYS.HIDE_EMPTY_VALUE, !settings[KANBAN_SETTINGS_KEYS.HIDE_EMPTY_VALUE])} + checked={settings[CARD_SETTINGS_KEYS.HIDE_EMPTY_VALUE] || false} + onChange={() => handleUpdateSettings(CARD_SETTINGS_KEYS.HIDE_EMPTY_VALUE, !settings[CARD_SETTINGS_KEYS.HIDE_EMPTY_VALUE])} />
handleUpdateSettings(KANBAN_SETTINGS_KEYS.SHOW_COLUMN_NAME, !settings[KANBAN_SETTINGS_KEYS.SHOW_COLUMN_NAME])} + checked={settings[CARD_SETTINGS_KEYS.SHOW_COLUMN_NAME] || false} + onChange={() => handleUpdateSettings(CARD_SETTINGS_KEYS.SHOW_COLUMN_NAME, !settings[CARD_SETTINGS_KEYS.SHOW_COLUMN_NAME])} />
handleUpdateSettings(KANBAN_SETTINGS_KEYS.TEXT_WRAP, !settings[KANBAN_SETTINGS_KEYS.TEXT_WRAP])} + checked={settings[CARD_SETTINGS_KEYS.TEXT_WRAP] || false} + onChange={() => handleUpdateSettings(CARD_SETTINGS_KEYS.TEXT_WRAP, !settings[CARD_SETTINGS_KEYS.TEXT_WRAP])} />