From 39ac4445670b9626a57b0d42a540900c14aba0cd Mon Sep 17 00:00:00 2001
From: Reinis Ivanovs <dabas@untu.ms>
Date: Tue, 24 Dec 2024 00:31:24 +0200
Subject: [PATCH] add browse filtering

---
 apps/api/src/trpc/routers/media.ts           |  7 ++++
 apps/web/src/features/browse/browse-page.tsx | 42 +++++++++++++++++++-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/apps/api/src/trpc/routers/media.ts b/apps/api/src/trpc/routers/media.ts
index 7140552..d127b76 100644
--- a/apps/api/src/trpc/routers/media.ts
+++ b/apps/api/src/trpc/routers/media.ts
@@ -87,6 +87,13 @@ export const mediaRouter = router({
             mimeType: true,
             fileSize: true,
             checksum: true,
+            createdAt: true,
+            createdBy: {
+              select: {
+                name: true,
+                email: true,
+              },
+            },
             mediaVersions: {
               select: {
                 processedMedia: {
diff --git a/apps/web/src/features/browse/browse-page.tsx b/apps/web/src/features/browse/browse-page.tsx
index 9bbd545..81bda3c 100644
--- a/apps/web/src/features/browse/browse-page.tsx
+++ b/apps/web/src/features/browse/browse-page.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, Dialog } from '@mui/material';
 import {
   DataGrid,
   GridFilterModel,
@@ -11,6 +11,7 @@ import { trpc } from '../../trpc';
 
 const MEDIA_URL = process.env.MEDIA_URL;
 export const BrowsePage = () => {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
   const [paginationModel, setPaginationModel] = useState({
     pageSize: 10,
     page: 0,
@@ -48,7 +49,9 @@ export const BrowsePage = () => {
             height: 'auto',
             maxHeight: '60px',
             objectFit: 'contain',
+            cursor: 'pointer',
           }}
+          onClick={() => setSelectedImage(params.value)}
         />
       ),
     },
@@ -72,6 +75,24 @@ export const BrowsePage = () => {
         return tags.join(', ');
       },
     },
+
+    {
+      field: 'createdAt',
+      headerName: 'Created At',
+      width: 180,
+
+      valueFormatter: (date: string) => new Date(date).toLocaleString(),
+      type: 'dateTime',
+    },
+
+    {
+      field: 'createdBy',
+      headerName: 'Created By',
+      width: 150,
+
+      valueGetter: (params: GridRenderCellParams) =>
+        params.value?.name || params.value?.email,
+    },
   ];
 
   const rows =
@@ -83,6 +104,8 @@ export const BrowsePage = () => {
       fileSize: item.fileSize,
       checksum: item.checksum,
       tags: item.mediaVersions[0]?.mediaTags?.map((mt) => mt.tag.value),
+      createdAt: item.createdAt,
+      createdBy: item.createdBy,
     })) || [];
 
   return (
@@ -104,6 +127,23 @@ export const BrowsePage = () => {
           onFilterModelChange={setFilterModel}
         />
       </Box>
+
+      <Dialog
+        open={!!selectedImage}
+        onClose={() => setSelectedImage(null)}
+        maxWidth="lg"
+      >
+        {selectedImage && (
+          <img
+            src={`${MEDIA_URL}/${selectedImage}`}
+            alt="Full size preview"
+            style={{
+              maxWidth: '100%',
+              maxHeight: '90vh',
+            }}
+          />
+        )}
+      </Dialog>
     </Page>
   );
 };