show dirent detail

frontend/src/components/cur-dir-path/dir-tool.js

@@ -25,6 +25,7 @@ const propTypes = {
   sortOrder: PropTypes.string,
   sortItems: PropTypes.func,
   viewId: PropTypes.string,
+  onCloseDetail: PropTypes.func,
 };
 
 class DirTool extends React.Component {
@@ -119,7 +120,7 @@ class DirTool extends React.Component {
     if (isFileExtended) {
       return (
         <div className="dir-tool">
-          <MetadataViewToolBar viewId={viewId} isCustomPermission={isCustomPermission} showDetail={this.showDirentDetail} />
+          <MetadataViewToolBar viewId={viewId} isCustomPermission={isCustomPermission} showDetail={this.showDirentDetail} closeDetail={this.props.onCloseDetail} />
         </div>
       );
     }

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -205,6 +205,7 @@ class DirColumnView extends React.Component {
               renameFileCallback={this.props.renameFileCallback}
               updateCurrentDirent={this.props.updateCurrentDirent}
               closeDirentDetail={this.props.closeDirentDetail}
+              showDirentDetail={this.props.showDirentDetail}
             />
           )}
           {currentMode === LIST_MODE &&

frontend/src/metadata/components/view-toolbar/index.js

@@ -8,7 +8,7 @@ import KanbanViewToolBar from './kanban-view-toolbar';
 
 import './index.css';
 
-const ViewToolBar = ({ viewId, isCustomPermission, showDetail }) => {
+const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) => {
   const [view, setView] = useState(null);
   const [collaborators, setCollaborators] = useState([]);
 
@@ -105,6 +105,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail }) => {
           collaborators={collaborators}
           modifyFilters={modifyFilters}
           modifySorts={modifySorts}
+          closeDetail={closeDetail}
         />
       )}
     </div>
@@ -114,7 +115,8 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail }) => {
 ViewToolBar.propTypes = {
   viewId: PropTypes.string,
   isCustomPermission: PropTypes.bool,
-  switchViewMode: PropTypes.func,
+  showDetail: PropTypes.func,
+  closeDetail: PropTypes.func,
 };
 
 export default ViewToolBar;

frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js

@@ -9,7 +9,8 @@ const KanbanViewToolBar = ({
   view,
   collaborators,
   modifyFilters,
-  modifySorts
+  modifySorts,
+  closeDetail,
 }) => {
   const viewType = useMemo(() => view.type, [view]);
   const viewColumns = useMemo(() => {
@@ -22,6 +23,7 @@ const KanbanViewToolBar = ({
   }, [viewColumns]);
 
   const onToggleKanbanSetting = () => {
+    closeDetail();
     window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTINGS);
   };
 

frontend/src/metadata/hooks/metadata-view.js

@@ -134,6 +134,7 @@ export const MetadataViewProvider = ({
         renameFileCallback: params.renameFileCallback,
         updateCurrentDirent: params.updateCurrentDirent,
         closeDirentDetail: params.closeDirentDetail,
+        showDirentDetail: params.showDirentDetail,
       }}
     >
       {children}

frontend/src/metadata/views/kanban/boards/board/card/index.css

@@ -34,6 +34,10 @@
   margin-bottom: 0;
 }
 
+.sf-metadata-kanban-card .sf-metadata-kanban-card-record .file-name-formatter-wrapper {
+  width: fit-content;
+}
+
 .sf-metadata-kanban-card .sf-metadata-kanban-card-record .sf-metadata-kanban-card-record-name {
   margin-bottom: 4px;
   color: #666;
@@ -68,7 +72,7 @@
 }
 
 .sf-metadata-kanban-card .file-name-formatter:not(.sf-metadata-image-file-formatter) {
-  margin-left: -4px;
+  transform: translateX(-4px);
 }
 
 .sf-metadata-kanban-card .sf-metadata-special-file-name-formatter:not(.sf-metadata-image-file-formatter) {
@@ -79,6 +83,16 @@
   transform: translateY(-1px);
 }
 
+.sf-metadata-kanban-card .sf-metadata-ui.file-name-formatter .sf-metadata-file-name {
+  text-decoration: none;
+  flex: none;
+}
+
+.sf-metadata-kanban-card .sf-metadata-ui.file-name-formatter .sf-metadata-file-name:hover {
+  text-decoration: underline;
+  text-decoration-color: #212529;
+}
+
 .sf-metadata-kanban-card .sf-metadata-kanban-card-record .collaborators-formatter {
   display: flex;
   flex-wrap: wrap;

frontend/src/metadata/views/kanban/boards/board/card/index.js

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getCellValueByColumn, isValidCellValue } from '../../../../../utils/cell';
 import Formatter from '../formatter';
+import { PRIVATE_COLUMN_KEY } from '../../../../../constants';
+import { useMetadataView } from '../../../../../hooks/metadata-view';
 
 import './index.css';
 
@@ -13,12 +15,39 @@ const Card = ({
   record,
   titleColumn,
   displayColumns,
+  onCloseSettings,
 }) => {
+  const { updateCurrentDirent, showDirentDetail } = useMetadataView();
 
   const titleValue = getCellValueByColumn(record, titleColumn);
 
+  const handleClick = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const name = record[PRIVATE_COLUMN_KEY.FILE_NAME];
+    const path = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
+    updateCurrentDirent({
+      type: 'file',
+      name,
+      path,
+      file_tags: []
+    });
+    onCloseSettings();
+    showDirentDetail();
+  }, [record, updateCurrentDirent, showDirentDetail, onCloseSettings]);
+
+  const handleClickFilename = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('click filename');
+  }, []);
+
   return (
-    <article data-id={record._id} className={classnames('sf-metadata-kanban-card', { 'readonly': readonly })}>
+    <article
+      data-id={record._id}
+      className={classnames('sf-metadata-kanban-card', { 'readonly': readonly })}
+      onClick={handleClick}
+    >
       {titleColumn && (
         <div className="sf-metadata-kanban-card-header">
           <Formatter value={titleValue} column={titleColumn} record={record}/>
@@ -41,7 +70,9 @@ const Card = ({
           return (
             <div className="sf-metadata-kanban-card-record" key={column.key}>
               {displayColumnName && (<div className="sf-metadata-kanban-card-record-name">{column.name}</div>)}
-              <Formatter value={value} column={column} record={record}/>
+              <div className='file-name-formatter-wrapper' onClick={handleClickFilename}>
+                <Formatter value={value} column={column} record={record}/>
+              </div>
             </div>
           );
         })}
@@ -57,6 +88,7 @@ Card.propTypes = {
   record: PropTypes.object,
   titleColumn: PropTypes.object,
   displayColumns: PropTypes.array,
+  onCloseSettings: PropTypes.func.isRequired,
 };
 
 export default Card;

frontend/src/metadata/views/kanban/boards/board/index.js

@@ -23,6 +23,7 @@ const Board = ({
   deleteOption,
   onFreezed,
   onUnFreezed,
+  onCloseSettings,
 }) => {
   const [isDraggingOver, setDraggingOver] = useState(false);
   const boardName = useMemo(() => `sf_metadata_kanban_board_${board.key}`, [board]);
@@ -82,6 +83,7 @@ const Board = ({
               record={record}
               titleColumn={titleColumn}
               displayColumns={displayColumns}
+              onCloseSettings={onCloseSettings}
             />
           );
           if (readonly) return CardElement;
@@ -110,6 +112,7 @@ Board.propTypes = {
   deleteOption: PropTypes.func,
   onFreezed: PropTypes.func,
   onUnFreezed: PropTypes.func,
+  onCloseSettings: PropTypes.func.isRequired,
 };
 
 export default Board;

frontend/src/metadata/views/kanban/boards/index.js

@@ -14,7 +14,7 @@ import Board from './board';
 
 import './index.css';
 
-const Boards = ({ modifyRecord, modifyColumnData }) => {
+const Boards = ({ modifyRecord, modifyColumnData, onCloseSettings }) => {
   const [haveFreezed, setHaveFreezed] = useState(false);
 
   const { metadata, store } = useMetadataView();
@@ -193,6 +193,7 @@ const Boards = ({ modifyRecord, modifyColumnData }) => {
                   deleteOption={deleteOption}
                   onFreezed={onFreezed}
                   onUnFreezed={onUnFreezed}
+                  onCloseSettings={onCloseSettings}
                 />
               );
             })}
@@ -207,6 +208,7 @@ const Boards = ({ modifyRecord, modifyColumnData }) => {
 Boards.propTypes = {
   modifyRecord: PropTypes.func.isRequired,
   modifyColumnData: PropTypes.func.isRequired,
+  onCloseSettings: PropTypes.func.isRequired,
 };
 
 export default Boards;

frontend/src/metadata/views/kanban/index.js

@@ -52,7 +52,7 @@ const Kanban = () => {
 
   return (
     <div className="sf-metadata-view-kanban">
-      <Boards modifyRecord={modifyRecord} modifyColumnData={modifyColumnData} />
+      <Boards modifyRecord={modifyRecord} modifyColumnData={modifyColumnData} onCloseSettings={closeSettings} />
       <div className="sf-metadata-view-setting-panel sf-metadata-view-kanban-setting h-100">
         {isShowSettings && (
           <Settings

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -2348,6 +2348,7 @@ class LibContentView extends React.Component {
                       sortItems={this.sortItems}
                       viewId={this.state.viewId}
                       viewType={this.props.viewType}
+                      onCloseDetail={this.closeDirentDetail}
                     />
                   </div>
                 }