From 07cec873e6b65e69c59f7d4341465113c267690b Mon Sep 17 00:00:00 2001
From: Aries <urchinzhou@gmail.com>
Date: Fri, 17 Jan 2025 16:09:38 +0800
Subject: [PATCH] make gallery year tag clickable (#7381)

Co-authored-by: zhouwenxuan <aries@Mac.local>
---
 frontend/src/metadata/views/gallery/content.js |  6 ++++--
 frontend/src/metadata/views/gallery/main.js    | 12 +++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/metadata/views/gallery/content.js b/frontend/src/metadata/views/gallery/content.js
index 4bbb879b9fd..5865f71b393 100644
--- a/frontend/src/metadata/views/gallery/content.js
+++ b/frontend/src/metadata/views/gallery/content.js
@@ -136,6 +136,8 @@ const Content = ({
       'onContextMenu': onContextMenu,
     };
 
+    const isDateTagClickable = mode === GALLERY_DATE_MODE.MONTH || mode === GALLERY_DATE_MODE.YEAR;
+
     return (
       <div
         key={name}
@@ -144,12 +146,12 @@ const Content = ({
       >
         {mode !== GALLERY_DATE_MODE.ALL && childrenStartIndex === 0 && (
           <div
-            className={classNames('metadata-gallery-date-tag', { 'hover': mode === GALLERY_DATE_MODE.MONTH })}
+            className={classNames('metadata-gallery-date-tag', { 'hover': isDateTagClickable })}
             style={{ height: paddingTop }}
             onClick={(event) => onDateTagClick(event, name)}
           >
             {name || gettext('Empty')}
-            {mode === GALLERY_DATE_MODE.MONTH && <i className="metadata-gallery-date-tag-arrow sf3-font-down sf3-font rotate-270" />}
+            {isDateTagClickable && <i className="metadata-gallery-date-tag-arrow sf3-font-down sf3-font rotate-270" />}
           </div>
         )}
         <div
diff --git a/frontend/src/metadata/views/gallery/main.js b/frontend/src/metadata/views/gallery/main.js
index f9401d7b2e8..d62ab28ff6f 100644
--- a/frontend/src/metadata/views/gallery/main.js
+++ b/frontend/src/metadata/views/gallery/main.js
@@ -286,11 +286,13 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
 
   const handleDateTagClick = useCallback((event, groupName) => {
     event.preventDefault();
-    if (mode === GALLERY_DATE_MODE.MONTH) {
-      const image = groups.find(group => group.name === groupName)?.children[0]?.children[0];
-      if (image) {
-        lastState.current = { ...lastState.current, targetGroupFirstImageId: image.id };
-      }
+    const image = groups.find(group => group.name === groupName)?.children[0]?.children[0];
+    if (image) {
+      lastState.current = { ...lastState.current, targetGroupFirstImageId: image.id };
+    }
+    if (mode === GALLERY_DATE_MODE.YEAR) {
+      window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SWITCH_GALLERY_GROUP_BY, GALLERY_DATE_MODE.MONTH);
+    } else if (mode === GALLERY_DATE_MODE.MONTH) {
       window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SWITCH_GALLERY_GROUP_BY, GALLERY_DATE_MODE.DAY);
     }
   }, [mode, groups]);