ALBUM Feature Added

docs/backend/backend_python/openapi.json

@@ -1117,9 +1117,14 @@
             "in": "query",
             "required": false,
             "schema": {
-              "$ref": "#/components/schemas/InputType",
+              "allOf": [
+                {
+                  "$ref": "#/components/schemas/InputType"
+                }
+              ],
               "description": "Choose input type: 'path' or 'base64'",
-              "default": "path"
+              "default": "path",
+              "title": "Input Type"
             },
             "description": "Choose input type: 'path' or 'base64'"
           }
@@ -2199,7 +2204,6 @@
           "metadata": {
             "anyOf": [
               {
-                "additionalProperties": true,
                 "type": "object"
               },
               {

frontend/src/api/api-functions/albums.ts

@@ -0,0 +1,123 @@
+import { albumsEndpoints } from '../apiEndpoints';
+import { apiClient } from '../axiosConfig';
+
+interface CreateAlbumPayload {
+  name: string;
+  description?: string;
+  is_hidden?: boolean;
+  password?: string;
+}
+
+export interface Album {
+  album_id: string;
+  album_name: string;
+  description: string;
+  is_hidden: boolean;
+}
+
+interface GetAlbumsResponse {
+  success: boolean;
+  albums: Album[];
+}
+
+export const createAlbum = async (payload: CreateAlbumPayload) => {
+  try {
+    const response = await apiClient.post(albumsEndpoints.createAlbum, payload);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const getAlbums = async (): Promise<GetAlbumsResponse> => {
+  try {
+    const response = await apiClient.get(albumsEndpoints.getAlbums);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const addImagesToAlbum = async (albumId: string, imageIds: string[]) => {
+  try {
+    const response = await apiClient.post(
+      albumsEndpoints.addImagesToAlbum(albumId),
+      {
+        image_ids: imageIds,
+      },
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+interface GetAlbumImagesResponse {
+  success: boolean;
+  image_ids: string[];
+}
+
+export const getAlbumImages = async (
+  albumId: string,
+  password?: string,
+): Promise<GetAlbumImagesResponse> => {
+  try {
+    const response = await apiClient.post(
+      albumsEndpoints.getAlbumImages(albumId),
+      {
+        password,
+      },
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const removeImageFromAlbum = async (
+  albumId: string,
+  imageId: string,
+) => {
+  try {
+    const response = await apiClient.delete(
+      albumsEndpoints.removeImageFromAlbum(albumId, imageId),
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const deleteAlbum = async (albumId: string) => {
+  try {
+    const response = await apiClient.delete(
+      albumsEndpoints.deleteAlbum(albumId),
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+interface UpdateAlbumRequest {
+  name: string;
+  description?: string;
+  is_hidden: boolean;
+  current_password?: string;
+  password?: string;
+}
+
+export const updateAlbum = async (
+  albumId: string,
+  payload: UpdateAlbumRequest,
+) => {
+  try {
+    const response = await apiClient.put(
+      albumsEndpoints.updateAlbum(albumId),
+      payload,
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};

frontend/src/api/api-functions/index.ts

@@ -3,4 +3,5 @@ export * from './face_clusters';
 export * from './images';
 export * from './folders';
 export * from './user_preferences';
+export * from './albums';
 export * from './health';

frontend/src/api/apiEndpoints.ts

@@ -30,3 +30,14 @@ export const userPreferencesEndpoints = {
 export const healthEndpoints = {
   healthCheck: '/health',
 };
+
+export const albumsEndpoints = {
+  createAlbum: '/albums/',
+  getAlbums: '/albums/',
+  addImagesToAlbum: (albumId: string) => `/albums/${albumId}/images`,
+  getAlbumImages: (albumId: string) => `/albums/${albumId}/images/get`,
+  updateAlbum: (albumId: string) => `/albums/${albumId}`,
+  removeImageFromAlbum: (albumId: string, imageId: string) =>
+    `/albums/${albumId}/images/${imageId}`,
+  deleteAlbum: (albumId: string) => `/albums/${albumId}`,
+};

frontend/src/components/Dialog/AddToAlbumDialog.tsx

@@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { getAlbums, addImagesToAlbum, Album } from '@/api/api-functions';
+
+interface AddToAlbumDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  imageIds: string[];
+}
+
+export function AddToAlbumDialog({
+  isOpen,
+  onClose,
+  imageIds,
+}: AddToAlbumDialogProps) {
+  const [albums, setAlbums] = useState<Album[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchAlbums();
+    }
+  }, [isOpen]);
+
+  const fetchAlbums = async () => {
+    try {
+      const response = await getAlbums();
+      if (response.success) {
+        setAlbums(response.albums);
+      }
+    } catch (error) {
+      console.error('Failed to fetch albums:', error);
+    }
+  };
+
+  const handleAddToAlbum = async (albumId: string) => {
+    try {
+      setLoading(true);
+      await addImagesToAlbum(albumId, imageIds);
+      // alert('Images added to album successfully!');
+      onClose();
+    } catch (error) {
+      console.error('Failed to add images to album:', error);
+      alert('Failed to add images to album');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Add to Album</DialogTitle>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          {albums.length === 0 ? (
+            <p className="text-muted-foreground text-center">
+              No albums found.
+            </p>
+          ) : (
+            <div className="grid gap-2">
+              {albums.map((album) => (
+                <Button
+                  key={album.album_id}
+                  variant="outline"
+                  className="justify-start text-left"
+                  onClick={() => handleAddToAlbum(album.album_id)}
+                  disabled={loading}
+                >
+                  <div className="flex flex-col items-start gap-1">
+                    <span className="font-semibold">{album.album_name}</span>
+                    {album.description && (
+                      <span className="text-muted-foreground text-xs">
+                        {album.description}
+                      </span>
+                    )}
+                  </div>
+                </Button>
+              ))}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}