From c4f1d9c31969088be8d39aa3939076210561f46e Mon Sep 17 00:00:00 2001
From: knom <m.knor@gmx.net>
Date: Wed, 1 Jan 2025 15:54:12 +0000
Subject: [PATCH] Added button to sort assets in missing locations view

---
 .../MissingLocationAssets.tsx                 | 48 +++++++++++--------
 src/contexts/MissingLocationContext.tsx       |  4 ++
 src/pages/assets/missing-locations.tsx        | 16 ++++++-
 3 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/components/assets/missing-location/MissingLocationAssets.tsx b/src/components/assets/missing-location/MissingLocationAssets.tsx
index 2971187..56bc251 100644
--- a/src/components/assets/missing-location/MissingLocationAssets.tsx
+++ b/src/components/assets/missing-location/MissingLocationAssets.tsx
@@ -23,7 +23,7 @@ import LazyGridImage from "@/components/ui/lazy-grid-image";
 export default function MissingLocationAssets() {
   const { exImmichUrl } = useConfig();
 
-  const { startDate, selectedIds, assets, updateContext } =
+  const { startDate, selectedIds, assets, sortOrder, sort, updateContext } =
     useMissingLocationContext();
 
   const [loading, setLoading] = useState(false);
@@ -44,25 +44,33 @@ export default function MissingLocationAssets() {
   };
 
   const images = useMemo(() => {
-    return assets.map((p) => ({
-      ...p,
-      src: p.url as string,
-      original: p.previewUrl as string,
-      width: p.exifImageWidth as number,
-      height: p.exifImageHeight as number,
-      isSelected: selectedIds.includes(p.id),
-      tags: [
-        {
-          title: "Immich Link",
-          value: (
-            <a href={exImmichUrl + "/photos/" + p.id} target="_blank">
-              Open in Immich
-            </a>
-          ),
-        },
-      ],
-    }));
-  }, [assets, selectedIds]);
+    let sortedAssets: IAsset[];
+
+    if (sortOrder === "desc")
+      sortedAssets = assets.sort((a, b) => new Date(b.dateTimeOriginal).getTime() - new Date(a.dateTimeOriginal).getTime())
+    else
+      sortedAssets = assets.sort((a, b) => new Date(a.dateTimeOriginal).getTime() - new Date(b.dateTimeOriginal).getTime());
+
+    return sortedAssets.
+      map((p) => ({
+        ...p,
+        src: p.url as string,
+        original: p.previewUrl as string,
+        width: p.exifImageWidth as number,
+        height: p.exifImageHeight as number,
+        isSelected: selectedIds.includes(p.id),
+        tags: [
+          {
+            title: "Immich Link",
+            value: (
+              <a href={exImmichUrl + "/photos/" + p.id} target="_blank">
+                Open in Immich
+              </a>
+            ),
+          },
+        ],
+      }));
+  }, [assets, selectedIds, sortOrder]);
 
   const slides = useMemo(
     () =>
diff --git a/src/contexts/MissingLocationContext.tsx b/src/contexts/MissingLocationContext.tsx
index 5044a12..a439831 100644
--- a/src/contexts/MissingLocationContext.tsx
+++ b/src/contexts/MissingLocationContext.tsx
@@ -5,6 +5,8 @@ export interface IMissingLocationConfig {
   startDate?: string;
   selectedIds: string[];
   assets: IAsset[];
+  sort: "fileOriginalDate";
+  sortOrder: "asc"|"desc";
 }
 
 export interface MissingLocationContext extends IMissingLocationConfig {
@@ -15,6 +17,8 @@ const MissingLocationContext = createContext<MissingLocationContext>({
   selectedIds: [],
   assets: [],
   updateContext: () => { },
+  sort:"fileOriginalDate",
+  sortOrder: "asc"
 });
 
 export default MissingLocationContext;
diff --git a/src/pages/assets/missing-locations.tsx b/src/pages/assets/missing-locations.tsx
index 7a3b30e..03ec36e 100644
--- a/src/pages/assets/missing-locations.tsx
+++ b/src/pages/assets/missing-locations.tsx
@@ -13,6 +13,7 @@ import MissingLocationContext, {
 import { updateAssets } from "@/handlers/api/asset.handler";
 
 import { IPlace } from "@/types/common";
+import { SortDesc, SortAsc } from "lucide-react";
 import { useRouter } from "next/router";
 import React, { useMemo } from "react";
 
@@ -25,9 +26,11 @@ export default function MissingLocations() {
     startDate: startDate || undefined,
     selectedIds: [],
     assets: [],
+    sort: "fileOriginalDate",
+    sortOrder: "asc",
   });
 
-  const selectedAssets = useMemo(() => config.assets.filter((a) => config.selectedIds.includes(a.id)), [config.assets, config.selectedIds]) ;
+  const selectedAssets = useMemo(() => config.assets.filter((a) => config.selectedIds.includes(a.id)), [config.assets, config.selectedIds]);
 
   const handleSubmit = (place: IPlace) => {
     return updateAssets({
@@ -42,6 +45,10 @@ export default function MissingLocations() {
     })
   };
 
+  const handleChange = (e: {sortOrder: "asc"|"desc"}) => {
+    setConfig({ ...config, sortOrder:e.sortOrder });
+  }
+
   return (
     <PageLayout className="!p-0 !mb-0">
       <Header
@@ -77,6 +84,13 @@ export default function MissingLocations() {
               </Button>
             )}
             <TagMissingLocationDialog onSubmit={handleSubmit} />
+
+            <div>
+              <Button variant="default" size="sm" onClick={() => handleChange({ sortOrder: config.sortOrder === "asc" ? "desc" : "asc" })}>
+                {config.sortOrder === "asc" ? <SortAsc size={16} /> : <SortDesc size={16} />}
+              </Button>
+            </div>
+
             <AssetsOptions assets={selectedAssets} onAdd={() => { }} />
           </>
         }