add album editing and start working on file picker component for picking thumbnail

2026-05-01 06:32:44 -05:00 · 2025-11-25 13:46:06 -06:00
parent a484633bf5
commit 4cee1a965f
5 changed files with 312 additions and 4 deletions
@@ -0,0 +1,53 @@
+import Modal from '../../components/Modal'
+import { getServerUrl } from '../../hooks/getConstants'
+import { useAccount } from '../../contexts/useAccount'
+import { useState, useEffect } from 'react'
+import { useNotifier } from '../../contexts/useNotifier'
+import FilePicker from './FilePicker'
+export default function AlbumEditModal({ open, onOpenChange, trigger, id, startTitle, startDescription, currentAlbum }) {
+    const { getAccessToken } = useAccount()
+    const [title, setTitle] = useState(startTitle || '')
+    const [description, setDescription] = useState(startDescription || '')
+    const { showError } = useNotifier()
+    const handleEditAlbum = async () => {
+        const response = await fetch(`${getServerUrl()}/api/albums/editAlbum`, {
+            method: 'POST',
+            headers: {
+                'Authorization': getAccessToken(),
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                id: id,
+                properties: {
+                    title: title,
+                    description: description,
+                }
+            })
+        })
+        const data = await response.json()
+        if (data.error) {
+            showError(data.error)
+        } else {
+            onOpenChange(false)
+        }
+    }
+    useEffect(() => {
+        if (open) {
+            setTitle(startTitle || '')
+            setDescription(startDescription || '')
+        }
+    }, [open])
+    return (
+        <Modal open={open} onOpenChange={onOpenChange} trigger={trigger} title="Edit Album">
+            <div className="flex flex-col gap-2">
+                <p className="text-white red-hat-mono">Name</p>
+                <input type="text" placeholder="Name" className="w-full px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text" value={title} onChange={(e) => setTitle(e.target.value)} />
+                <p className="text-white red-hat-mono">Description</p>
+                <textarea type="text" placeholder="Description" className="w-full h-[20vh] px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text resize-none" value={description} onChange={(e) => setDescription(e.target.value)} />
+                <p className="text-white red-hat-mono">Thumbnail</p>
+                <FilePicker currentAlbum={currentAlbum} />
+                <button className="w-full py-2.5 bg-[#2B2B2B] hover:bg-[#3B3B3B] text-white rounded-md font-medium transition-colors red-hat-mono cursor-pointer mt-2" onClick={handleEditAlbum}>Save Changes</button>
+            </div>
+        </Modal>
+    )
+}
@@ -1,13 +1,16 @@
-import { PlusIcon } from 'lucide-react'
+import { PlusIcon, EllipsisVertical } from 'lucide-react'
 import AlbumCreateModal from './AlbumCreateModal'
 import { useState, useEffect } from 'react'
 import { getServerUrl } from '../../hooks/getConstants'
 import { useAccount } from '../../contexts/useAccount'
 import { useNavigate } from 'react-router-dom'
 import { useNotifier } from '../../contexts/useNotifier'
+import AlbumEditModal from './AlbumEditModal'
 export default function AlbumList({ currentAlbumName }) {
    const { getAccessToken } = useAccount()
    const [open, setOpen] = useState(false)
+    const [openEdit, setOpenEdit] = useState(false)
+    const [editingAlbum, setEditingAlbum] = useState(null)
    const [albums, setAlbums] = useState([])
    const navigate = useNavigate()
    const { showError } = useNotifier()
@@ -43,11 +46,11 @@ export default function AlbumList({ currentAlbumName }) {
            }
        }

-        if (!open && currentAlbumName !== null) {
+        if (!open && !openEdit && currentAlbumName !== null) {
            getAlbums()
        }
        return () => { ignore = true; }
-    }, [currentAlbumName, open])
+    }, [currentAlbumName, open, openEdit])
    return (
        <div className="flex flex-col items-center justify-start h-min w-full bg-[#141414]">
            <div className="flex flex-row items-center justify-between gap-2 w-full px-6 py-4">
@@ -57,6 +60,7 @@ export default function AlbumList({ currentAlbumName }) {
            <div className="flex flex-row items-center justify-start gap-2 w-full px-6 flex-wrap">
                {albums.map((album) => (
                    <div
+                        key={album.ID}
                        className="flex flex-row items-center justify-start gap-2 w-1/8 aspect-square border border-[#2B2B2B] rounded-md px-6 py-4 cursor-pointer"
                        onClick={() => {
                            // Get current path and append the album's title
@@ -72,10 +76,25 @@ export default function AlbumList({ currentAlbumName }) {
                        }}
                    >
                        <p className="text-white red-hat-mono">{album.Title}</p>
+                        <EllipsisVertical className="w-6 h-6 cursor-pointer" color="white" onClick={(e) => {
+                            e.stopPropagation()
+                            setEditingAlbum(album)
+                            setOpenEdit(true)
+                        }} />
                    </div>
                ))}
            </div>
            <AlbumCreateModal open={open} onOpenChange={setOpen} parentId={currentAlbumName === 'gallery' ? '' : currentAlbumName} />
+            {editingAlbum && (
+                <AlbumEditModal
+                    open={openEdit}
+                    onOpenChange={setOpenEdit}
+                    id={editingAlbum.ID}
+                    startTitle={editingAlbum.Title}
+                    startDescription={editingAlbum.Description}
+                    currentAlbum={editingAlbum}
+                />
+            )}
        </div>
    )
 }
@@ -0,0 +1,143 @@
+import { File, Folder } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import Modal from '../../components/Modal'
+import { useAccount } from '../../contexts/useAccount'
+import { getServerUrl } from '../../hooks/getConstants'
+import { useNotifier } from '../../contexts/useNotifier'
+import { ArrowLeft } from 'lucide-react'
+export default function FilePicker({ currentAlbum }) {
+    const [selectedFile, setSelectedFile] = useState(null)
+    const [selectedAlbum, setSelectedAlbum] = useState(currentAlbum)
+    const [currentPath, setCurrentPath] = useState([])
+    const [albums, setAlbums] = useState([])
+    const [media, setMedia] = useState([])
+    const [filePickerOpen, setFilePickerOpen] = useState(false)
+    const { getAccessToken } = useAccount()
+    const { showError } = useNotifier()
+    useEffect(() => {
+        const getAlbum = async () => {
+            const response = await fetch(`${getServerUrl()}/api/albums/getAlbumsInParent`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': getAccessToken(),
+                },
+                body: JSON.stringify({
+                    parentId: selectedAlbum.ID,
+                }),
+            })
+            const data = await response.json()
+            if (data.error) {
+                showError(data.error)
+            } else {
+                setAlbums(data)
+            }
+        }
+        const getAlbumInfo = async () => {
+            const response = await fetch(`${getServerUrl()}/api/albums/getAlbum`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': getAccessToken(),
+                },
+                body: JSON.stringify({
+                    id: selectedAlbum.ID,
+                }),
+            })
+            const data = await response.json()
+            if (data.error) {
+                showError(data.error)
+            } else {
+                setSelectedAlbum(data)
+            }
+        }
+        const reconstructPath = async () => {
+            if (!selectedAlbum?.ID) {
+                setCurrentPath(['gallery'])
+                return
+            }
+
+            const pathSegments = []
+            let albumTemp = selectedAlbum
+
+            while (albumTemp) {
+                if (albumTemp.Title) {
+                    pathSegments.unshift(albumTemp.Title)
+                }
+
+                const parentId = albumTemp.ParentID ?? albumTemp.parentID ?? ''
+                if (!parentId) {
+                    break
+                }
+
+                const response = await fetch(`${getServerUrl()}/api/albums/getAlbum`, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': getAccessToken(),
+                    },
+                    body: JSON.stringify({
+                        id: parentId,
+                    }),
+                })
+
+                const data = await response.json()
+                if (data.error) {
+                    showError(data.error)
+                    break
+                }
+
+                if (!data?.ID || data.ID === albumTemp.ID) {
+                    break
+                }
+
+                albumTemp = data
+            }
+            pathSegments.unshift("gallery")
+
+            setCurrentPath(pathSegments)
+        }
+        if (selectedAlbum && selectedAlbum.fetchinfo) {
+            getAlbumInfo()
+        }
+        getAlbum()
+        reconstructPath()
+    }, [selectedAlbum])
+    return (
+        <div className="flex flex-row gap-2 border border-[#2B2B2B] rounded-lg p-2 cursor-pointer" onClick={() => {
+            setFilePickerOpen(true)
+        }}>
+            <File className="w-6 h-6" />
+            <p className="text-white red-hat-mono">{selectedFile?.name || 'No image selected'}</p>
+            <Modal open={filePickerOpen} onOpenChange={setFilePickerOpen} title="Select File">
+                <div className="flex flex-col gap-2">
+                    <div className="flex flex-row gap-2 items-center justify-start">
+                        <ArrowLeft className="w-6 h-6 cursor-pointer" onClick={() => {
+                            setSelectedAlbum({ ID: selectedAlbum.ParentID, fetchinfo: true })
+                        }} />
+                        <p className="text-white red-hat-mono">{currentPath.join(' / ')}</p>
+                    </div>
+                    {albums.map((album) => (
+                        <div key={album.ID} className="flex flex-row gap-2 cursor-pointer hover:bg-[#2B2B2B] rounded-md p-2 border border-[#2B2B2B]" onClick={() => {
+                            setSelectedAlbum(album)
+                        }}>
+                            <Folder className="w-6 h-6" />
+                            <p className="text-white red-hat-mono">{album.Title}</p>
+                        </div>
+                    ))}
+                    <hr className="border-[#2B2B2B] my-2" />
+                    {media.length === 0 && (
+                        <p className="text-white red-hat-mono">No media found</p>
+                    )}
+                    {media.length > 0 && (
+                        <div className="flex flex-col gap-2">
+                            {media.map((m) => (
+                                <div key={m.ID} className="flex flex-row gap-2 cursor-pointer hover:bg-[#2B2B2B] rounded-md p-2 border border-[#2B2B2B]">
+                                    <File className="w-6 h-6" />
+                                    <p className="text-white red-hat-mono">{m.Title}</p>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </Modal>
+        </div>
+    )
+}