Added button to sort assets in missing locations view

Author: knom

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(
     () =>

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;

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={() => { }} />
           </>
         }