Feature/gallery group by capture time (#6869)

* gallery group by capture date * feat: optimize code * feat: optimize code --------- Co-authored-by: zhouwenxuan <[email protected]> Co-authored-by: 杨国璇 <[email protected]>
haiwen · Oct 11, 2024 · 4ee7f04 · 4ee7f04
1 parent d052564
commit 4ee7f04
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 17 deletions.
diff --git a/frontend/src/metadata/components/popover/sort-popover/index.js b/frontend/src/metadata/components/popover/sort-popover/index.js
@@ -7,7 +7,7 @@ import { gettext } from '../../../../utils/constants';
 import { getColumnByKey } from '../../../utils/column';
 import { getEventClassName } from '../../../utils/common';
 import {
-  EVENT_BUS_TYPE, COLUMNS_ICON_CONFIG, VIEW_SORT_COLUMN_OPTIONS, VIEW_FIRST_SORT_COLUMN_OPTIONS, SORT_TYPE, VIEW_TYPE,
+  EVENT_BUS_TYPE, COLUMNS_ICON_CONFIG, VIEW_SORT_COLUMN_RULES, VIEW_FIRST_SORT_COLUMN_RULES, SORT_TYPE, VIEW_TYPE,
 } from '../../../constants';
 import { execSortsOperation, getDisplaySorts, isSortsEmpty, SORT_OPERATION } from './utils';
 
@@ -45,8 +45,8 @@ class SortPopover extends Component {
     super(props);
     const { sorts, columns, type } = this.props;
     this.sortTypeOptions = this.createSortTypeOptions();
-    this.supportFirstSortColumnOptions = VIEW_FIRST_SORT_COLUMN_OPTIONS[type || VIEW_TYPE.TABLE];
-    this.supportSortColumnOptions = VIEW_SORT_COLUMN_OPTIONS[type || VIEW_TYPE.TABLE];
+    this.checkColumnEnableFirstSortRule = VIEW_FIRST_SORT_COLUMN_RULES[type || VIEW_TYPE.TABLE];
+    this.checkColumnEnableSortRule = VIEW_SORT_COLUMN_RULES[type || VIEW_TYPE.TABLE];
     this.columnsOptions = this.createColumnsOptions(columns);
     this.state = {
       sorts: getDisplaySorts(sorts, columns),
@@ -155,7 +155,7 @@ class SortPopover extends Component {
   };
 
   createColumnsOptions = (columns = []) => {
-    const sortableColumns = columns.filter(column => this.supportSortColumnOptions.includes(column.type));
+    const sortableColumns = columns.filter(column => this.checkColumnEnableSortRule(column));
     return sortableColumns.map((column) => {
       const { type, name } = column;
       return {
@@ -208,7 +208,7 @@ class SortPopover extends Component {
 
     let columnsOptions = this.columnsOptions;
     if (index === 0) {
-      columnsOptions = columnsOptions.filter(o => this.supportFirstSortColumnOptions.includes(o.value.column.type));
+      columnsOptions = columnsOptions.filter(o => this.checkColumnEnableFirstSortRule(o.value.column));
     }
 
     return (

diff --git a/frontend/src/metadata/constants/sort.js b/frontend/src/metadata/constants/sort.js
@@ -1,4 +1,4 @@
-import { CellType } from './column';
+import { CellType, PRIVATE_COLUMN_KEY } from './column';
 
 const SORT_TYPE = {
   UP: 'up',
@@ -39,6 +39,19 @@ const GALLERY_FIRST_SORT_COLUMN_OPTIONS = [
   CellType.MTIME,
 ];
 
+const GALLERY_SORT_PRIVATE_COLUMN_KEYS = [
+  PRIVATE_COLUMN_KEY.CAPTURE_TIME,
+  PRIVATE_COLUMN_KEY.CTIME,
+  PRIVATE_COLUMN_KEY.MTIME,
+  PRIVATE_COLUMN_KEY.FILE_NAME,
+];
+
+const GALLERY_FIRST_SORT_PRIVATE_COLUMN_KEYS = [
+  PRIVATE_COLUMN_KEY.CAPTURE_TIME,
+  PRIVATE_COLUMN_KEY.CTIME,
+  PRIVATE_COLUMN_KEY.MTIME,
+];
+
 const TEXT_SORTER_COLUMN_TYPES = [CellType.TEXT];
 const NUMBER_SORTER_COLUMN_TYPES = [CellType.NUMBER, CellType.RATE];
 
@@ -48,6 +61,8 @@ export {
   SHOW_DISABLED_SORT_COLUMNS,
   GALLERY_SORT_COLUMN_OPTIONS,
   GALLERY_FIRST_SORT_COLUMN_OPTIONS,
+  GALLERY_SORT_PRIVATE_COLUMN_KEYS,
+  GALLERY_FIRST_SORT_PRIVATE_COLUMN_KEYS,
   TEXT_SORTER_COLUMN_TYPES,
   NUMBER_SORTER_COLUMN_TYPES,
 };
diff --git a/frontend/src/metadata/constants/view.js b/frontend/src/metadata/constants/view.js
@@ -1,6 +1,8 @@
 import { PRIVATE_COLUMN_KEY } from './column';
 import { FILTER_PREDICATE_TYPE } from './filter';
-import { SORT_COLUMN_OPTIONS, GALLERY_SORT_COLUMN_OPTIONS, GALLERY_FIRST_SORT_COLUMN_OPTIONS, SORT_TYPE } from './sort';
+import { SORT_COLUMN_OPTIONS, GALLERY_SORT_COLUMN_OPTIONS, GALLERY_FIRST_SORT_COLUMN_OPTIONS, SORT_TYPE,
+  GALLERY_SORT_PRIVATE_COLUMN_KEYS, GALLERY_FIRST_SORT_PRIVATE_COLUMN_KEYS,
+} from './sort';
 
 export const VIEW_TYPE = {
   TABLE: 'table',
@@ -39,12 +41,12 @@ export const VIEW_TYPE_DEFAULT_SORTS = {
   [VIEW_TYPE.GALLERY]: [{ column_key: PRIVATE_COLUMN_KEY.FILE_CTIME, sort_type: SORT_TYPE.DOWN }],
 };
 
-export const VIEW_SORT_COLUMN_OPTIONS = {
-  [VIEW_TYPE.TABLE]: SORT_COLUMN_OPTIONS,
-  [VIEW_TYPE.GALLERY]: GALLERY_SORT_COLUMN_OPTIONS,
+export const VIEW_SORT_COLUMN_RULES = {
+  [VIEW_TYPE.TABLE]: (column) => SORT_COLUMN_OPTIONS.includes(column.type),
+  [VIEW_TYPE.GALLERY]: (column) => GALLERY_SORT_COLUMN_OPTIONS.includes(column.type) || GALLERY_SORT_PRIVATE_COLUMN_KEYS.includes(column.key),
 };
 
-export const VIEW_FIRST_SORT_COLUMN_OPTIONS = {
-  [VIEW_TYPE.TABLE]: SORT_COLUMN_OPTIONS,
-  [VIEW_TYPE.GALLERY]: GALLERY_FIRST_SORT_COLUMN_OPTIONS,
+export const VIEW_FIRST_SORT_COLUMN_RULES = {
+  [VIEW_TYPE.TABLE]: (column) => SORT_COLUMN_OPTIONS.includes(column.type),
+  [VIEW_TYPE.GALLERY]: (column) => GALLERY_FIRST_SORT_COLUMN_OPTIONS.includes(column.type) || GALLERY_FIRST_SORT_PRIVATE_COLUMN_KEYS.includes(column.key),
 };
diff --git a/frontend/src/metadata/views/gallery/gallery-main.js b/frontend/src/metadata/views/gallery/gallery-main.js
@@ -3,13 +3,15 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import EmptyTip from '../../../components/empty-tip';
 import { gettext } from '../../../utils/constants';
+import { GALLERY_DATE_MODE } from '../../constants';
 
 const GalleryMain = ({
   groups,
   overScan,
   columns,
   size,
   gap,
+  mode,
   selectedImages,
   setSelectedImages,
   onImageClick,
@@ -113,7 +115,9 @@ const GalleryMain = ({
         style={{ height, paddingTop }}
 
       >
-        {childrenStartIndex === 0 && (<div className="metadata-gallery-date-tag">{name}</div>)}
+        {mode !== GALLERY_DATE_MODE.ALL && childrenStartIndex === 0 && (
+          <div className="metadata-gallery-date-tag">{name || gettext('Empty')}</div>
+        )}
         <div
           ref={imageRef}
           className="metadata-gallery-image-list"
@@ -147,7 +151,7 @@ const GalleryMain = ({
         </div>
       </div>
     );
-  }, [overScan, columns, size, imageHeight, selectedImages, onImageClick, onImageDoubleClick, onImageRightClick]);
+  }, [overScan, columns, size, imageHeight, mode, selectedImages, onImageClick, onImageDoubleClick, onImageRightClick]);
 
   if (!Array.isArray(groups) || groups.length === 0) {
     return <EmptyTip text={gettext('No record')}/>;
@@ -189,6 +193,7 @@ GalleryMain.propTypes = {
   columns: PropTypes.number.isRequired,
   size: PropTypes.number.isRequired,
   gap: PropTypes.number.isRequired,
+  mode: PropTypes.string,
   selectedImages: PropTypes.array.isRequired,
   onImageClick: PropTypes.func.isRequired,
   onImageDoubleClick: PropTypes.func.isRequired,

diff --git a/frontend/src/metadata/views/gallery/index.css b/frontend/src/metadata/views/gallery/index.css
@@ -10,6 +10,10 @@
   overflow-y: auto;
 }
 
+.sf-metadata-gallery-container-all {
+  padding-top: 4px;
+}
+
 .metadata-gallery-date-group {
   width: 100%;
   position: relative;

diff --git a/frontend/src/metadata/views/gallery/index.js b/frontend/src/metadata/views/gallery/index.js
@@ -246,7 +246,6 @@ const Gallery = () => {
     setImageIndex((prevState) => (prevState + 1) % imageItemsLength);
   };
 
-
   const closeImagePopup = () => {
     setIsImagePopupOpen(false);
   };
@@ -311,7 +310,7 @@ const Gallery = () => {
 
   return (
     <div className="sf-metadata-container">
-      <div className="sf-metadata-gallery-container" ref={containerRef} onScroll={handleScroll} >
+      <div className={`sf-metadata-gallery-container sf-metadata-gallery-container-${mode}`} ref={containerRef} onScroll={handleScroll} >
         {!isFirstLoading && (
           <>
             <GalleryMain
@@ -320,6 +319,7 @@ const Gallery = () => {
               columns={columns}
               overScan={overScan}
               gap={GALLERY_IMAGE_GAP}
+              mode={mode}
               selectedImages={selectedImages}
               setSelectedImages={setSelectedImages}
               onImageClick={handleClick}