diff --git a/src/components/assets/missing-location/MissingLocationAssets.tsx b/src/components/assets/missing-location/MissingLocationAssets.tsx index 6f55085..e5545e4 100644 --- a/src/components/assets/missing-location/MissingLocationAssets.tsx +++ b/src/components/assets/missing-location/MissingLocationAssets.tsx @@ -19,7 +19,7 @@ interface IProps { export default function MissingLocationAssets({ groupBy }: IProps) { const { exImmichUrl } = useConfig(); - const { startDate, albumId, selectedIds, assets, updateContext } = + const { startDate, albumId, selectedIds, sortOrder, sort, assets, updateContext } = useMissingLocationContext(); const [loading, setLoading] = useState(false); @@ -42,26 +42,34 @@ export default function MissingLocationAssets({ groupBy }: IProps) { }; 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), - orientation: 1, - tags: [ - { - title: "Immich Link", - value: ( - - Open in Immich - - ), - }, - ], - })); - }, [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), + orientation: 1, + tags: [ + { + title: "Immich Link", + value: ( + + Open in Immich + + ), + }, + ], + })); + }, [assets, selectedIds, sortOrder]); const slides = useMemo( () => diff --git a/src/contexts/MissingLocationContext.tsx b/src/contexts/MissingLocationContext.tsx index 445d3f7..2e77eb2 100644 --- a/src/contexts/MissingLocationContext.tsx +++ b/src/contexts/MissingLocationContext.tsx @@ -6,6 +6,8 @@ export interface IMissingLocationConfig { albumId?: string; selectedIds: string[]; assets: IAsset[]; + sort: "fileOriginalDate"; + sortOrder: "asc"|"desc"; } export interface MissingLocationContext extends IMissingLocationConfig { @@ -17,6 +19,8 @@ const MissingLocationContext = createContext({ 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 70d15a1..cbdc167 100644 --- a/src/pages/assets/missing-locations.tsx +++ b/src/pages/assets/missing-locations.tsx @@ -12,6 +12,7 @@ import MissingLocationContext, { import { deleteAssets, 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"; import FloatingBar from "@/components/shared/FloatingBar"; @@ -26,6 +27,8 @@ 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]); @@ -59,6 +62,9 @@ export default function MissingLocations() { selectedIds: [], }); } + const handleChange = (e: { sortOrder: "asc" | "desc" }) => { + setConfig({ ...config, sortOrder: e.sortOrder }); + } return ( @@ -85,7 +91,11 @@ export default function MissingLocations() { Date - + + handleChange({ sortOrder: config.sortOrder === "asc" ? "desc" : "asc" })}> + {config.sortOrder === "asc" ? : } + + } /> @@ -139,8 +149,8 @@ export default function MissingLocations() {