Fix bugs and add features to Znakopis document management

- Fix API endpoint for creating pages (documents/:id/pages) - Fix sentence deletion functionality - Add CreateDocumentDialog component for better UX - Improve document and sentence management UI - Update seed data and backend routes - Clean up documentation files (remove videos.md, videosentence.md) - Add comprehensive bug tracking in fixbugsaddfeatures.md
2026-01-18 15:21:23 +01:00
parent d3c90ea447
commit eab5303c0f
11 changed files with 643 additions and 869 deletions
--- a/packages/backend/prisma/seed.ts
+++ b/packages/backend/prisma/seed.ts
@@ -7,10 +7,12 @@ async function main() {
  console.log('🌱 Starting database seed...');

  // Create admin user
-  const adminPasswordHash = await bcrypt.hash('admin123', 10);
+  const adminPasswordHash = await bcrypt.hash('novinet01', 10);
  const admin = await prisma.user.upsert({
    where: { email: 'admin@znakovni.hr' },
-    update: {},
+    update: {
+      passwordHash: adminPasswordHash, // Update password if user exists
+    },
    create: {
      email: 'admin@znakovni.hr',
      displayName: 'Administrator',
@@ -23,7 +25,7 @@ async function main() {

  console.log('✅ Created admin user:', admin.email);
  console.log('   Email: admin@znakovni.hr');
-  console.log('   Password: admin123');
+  console.log('   Password: novinet01');

  // Create a demo regular user
  const demoPasswordHash = await bcrypt.hash('demo123', 10);
--- a/packages/backend/src/routes/sentences.ts
+++ b/packages/backend/src/routes/sentences.ts
@@ -8,7 +8,7 @@ const router = Router();
 * POST /api/documents/:documentId/pages/:pageIndex/sentences
 * Create a new sentence on a page
 */
-router.post('/:documentId/pages/:pageIndex/sentences', isAuthenticated, async (req: Request, res: Response) => {
+router.post('/documents/:documentId/pages/:pageIndex/sentences', isAuthenticated, async (req: Request, res: Response) => {
  try {
    const { documentId, pageIndex } = req.params;
    const userId = req.user?.id;
@@ -97,7 +97,7 @@ router.post('/:documentId/pages/:pageIndex/sentences', isAuthenticated, async (r
 * PATCH /api/sentences/:sentenceId/tokens
 * Update tokens in a sentence (reorder, add, remove)
 */
-router.patch('/:sentenceId/tokens', isAuthenticated, async (req: Request, res: Response) => {
+router.patch('/sentences/:sentenceId/tokens', isAuthenticated, async (req: Request, res: Response) => {
  try {
    const { sentenceId } = req.params;
    const userId = req.user?.id;
@@ -166,7 +166,7 @@ router.patch('/:sentenceId/tokens', isAuthenticated, async (req: Request, res: R
 * DELETE /api/sentences/:sentenceId
 * Delete a sentence
 */
-router.delete('/:sentenceId', isAuthenticated, async (req: Request, res: Response) => {
+router.delete('/sentences/:sentenceId', isAuthenticated, async (req: Request, res: Response) => {
  try {
    const { sentenceId } = req.params;
    const userId = req.user?.id;
@@ -202,7 +202,7 @@ router.delete('/:sentenceId', isAuthenticated, async (req: Request, res: Respons
 * POST /api/documents/:documentId/pages
 * Create a new page in a document
 */
-router.post('/:documentId/pages', isAuthenticated, async (req: Request, res: Response) => {
+router.post('/documents/:documentId/pages', isAuthenticated, async (req: Request, res: Response) => {
  try {
    const { documentId } = req.params;
    const userId = req.user?.id;
--- a/packages/frontend/src/components/znakopis/CreateDocumentDialog.tsx
+++ b/packages/frontend/src/components/znakopis/CreateDocumentDialog.tsx
@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+
+interface CreateDocumentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreate: (title: string, description: string) => void;
+}
+
+export function CreateDocumentDialog({ open, onOpenChange, onCreate }: CreateDocumentDialogProps) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+
+  const handleCreate = () => {
+    if (!title.trim()) return;
+    onCreate(title, description);
+    // Reset form
+    setTitle('');
+    setDescription('');
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+    // Reset form
+    setTitle('');
+    setDescription('');
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Novi dokument</DialogTitle>
+          <DialogDescription>
+            Unesite naziv i opis novog dokumenta.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div>
+            <label className="text-sm font-medium text-gray-700 mb-1 block">
+              Naslov <span className="text-red-500">*</span>
+            </label>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Novi dokument"
+              maxLength={255}
+              autoFocus
+            />
+            <p className="text-xs text-gray-500 mt-1">{title.length}/255 znakova</p>
+          </div>
+          <div>
+            <label className="text-sm font-medium text-gray-700 mb-1 block">
+              Opis
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Dodajte opis dokumenta..."
+              className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            Odustani
+          </Button>
+          <Button onClick={handleCreate} disabled={!title.trim()}>
+            Kreiraj
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
--- a/packages/frontend/src/components/znakopis/DocumentPanel.tsx
+++ b/packages/frontend/src/components/znakopis/DocumentPanel.tsx
@@ -1,7 +1,10 @@
-import { Document } from '../../lib/documentApi';
+import { Document, Sentence } from '../../lib/documentApi';
 import { Button } from '../ui/button';
-import { FileText, ChevronLeft, ChevronRight, Plus, Trash2 } from 'lucide-react';
+import { FileText, ChevronLeft, ChevronRight, Plus, Trash2, Pencil, Check, X, Upload } from 'lucide-react';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
+import { Input } from '../ui/input';
+import { useState } from 'react';

 interface DocumentPanelProps {
  documents: Document[];
@@ -11,6 +14,9 @@ interface DocumentPanelProps {
  onNewPage: () => void;
  onPageChange: (pageIndex: number) => void;
  onDeleteSentence: (sentenceId: string) => void;
+  onDeleteDocument: (documentId: string) => void;
+  onUpdateDocument: (documentId: string, title: string, description: string) => void;
+  onLoadSentence: (sentence: Sentence) => void;
  loading: boolean;
 }

@@ -22,11 +28,55 @@ export function DocumentPanel({
  onNewPage,
  onPageChange,
  onDeleteSentence,
+  onDeleteDocument,
+  onUpdateDocument,
+  onLoadSentence,
  loading,
 }: DocumentPanelProps) {
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState('');
+  const [editDescription, setEditDescription] = useState('');
  const currentPage = selectedDocument?.pages[currentPageIndex];
  const totalPages = selectedDocument?.pages.length || 0;

+  const handleDeleteClick = () => {
+    setDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!selectedDocument) return;
+
+    setIsDeleting(true);
+    try {
+      await onDeleteDocument(selectedDocument.id);
+      setDeleteDialogOpen(false);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleEditClick = () => {
+    if (!selectedDocument) return;
+    setEditTitle(selectedDocument.title);
+    setEditDescription(selectedDocument.description || '');
+    setIsEditing(true);
+  };
+
+  const handleSaveEdit = async () => {
+    if (!selectedDocument || !editTitle.trim()) return;
+
+    await onUpdateDocument(selectedDocument.id, editTitle, editDescription);
+    setIsEditing(false);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setEditTitle('');
+    setEditDescription('');
+  };
+
  return (
    <div className="bg-white rounded-lg shadow p-6 space-y-6">
      {/* Document Selector */}
@@ -54,14 +104,74 @@ export function DocumentPanel({
      {selectedDocument && (
        <>
          <div className="border-t pt-4">
-            <div className="flex items-center justify-between mb-3">
-              <h3 className="text-lg font-semibold text-gray-900">
-                <FileText className="inline h-5 w-5 mr-2" />
-                {selectedDocument.title}
-              </h3>
-            </div>
-            {selectedDocument.description && (
-              <p className="text-sm text-gray-600 mb-3">{selectedDocument.description}</p>
+            {isEditing ? (
+              <div className="space-y-3">
+                <div>
+                  <label className="text-sm font-medium text-gray-700 mb-1 block">Naslov</label>
+                  <Input
+                    value={editTitle}
+                    onChange={(e) => setEditTitle(e.target.value)}
+                    placeholder="Naslov dokumenta"
+                    autoFocus
+                  />
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-gray-700 mb-1 block">Opis</label>
+                  <textarea
+                    value={editDescription}
+                    onChange={(e) => setEditDescription(e.target.value)}
+                    placeholder="Dodajte opis dokumenta..."
+                    className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    size="sm"
+                    onClick={handleSaveEdit}
+                    disabled={!editTitle.trim()}
+                  >
+                    <Check className="h-4 w-4 mr-1" />
+                    Spremi
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleCancelEdit}
+                  >
+                    <X className="h-4 w-4 mr-1" />
+                    Odustani
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <>
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-lg font-semibold text-gray-900">
+                    <FileText className="inline h-5 w-5 mr-2" />
+                    {selectedDocument.title}
+                  </h3>
+                  <div className="flex gap-1">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleEditClick}
+                    >
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleDeleteClick}
+                      className="text-red-600 hover:text-red-800 hover:bg-red-50"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+                {selectedDocument.description && (
+                  <p className="text-sm text-gray-600 mb-3">{selectedDocument.description}</p>
+                )}
+              </>
            )}
          </div>

@@ -116,13 +226,23 @@ export function DocumentPanel({
                      <span className="text-xs font-semibold text-gray-500">
                        Rečenica {index + 1}
                      </span>
-                      <button
-                        onClick={() => onDeleteSentence(sentence.id)}
-                        className="text-red-600 hover:text-red-800 transition-colors"
-                        aria-label="Obriši rečenicu"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </button>
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() => onLoadSentence(sentence)}
+                          className="text-blue-600 hover:text-blue-800 transition-colors"
+                          aria-label="Učitaj rečenicu"
+                          title="Učitaj rečenicu u gornju traku"
+                        >
+                          <Upload className="h-4 w-4" />
+                        </button>
+                        <button
+                          onClick={() => onDeleteSentence(sentence.id)}
+                          className="text-red-600 hover:text-red-800 transition-colors"
+                          aria-label="Obriši rečenicu"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      </div>
                    </div>
                    <div className="flex flex-wrap gap-1">
                      {sentence.tokens.map((token) => (
@@ -145,6 +265,35 @@ export function DocumentPanel({
          </div>
        </>
      )}
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Obriši dokument</DialogTitle>
+            <DialogDescription>
+              Jeste li sigurni da želite obrisati dokument "{selectedDocument?.title}"?
+              Ova radnja se ne može poništiti.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setDeleteDialogOpen(false)}
+              disabled={isDeleting}
+            >
+              Odustani
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirmDelete}
+              disabled={isDeleting}
+            >
+              {isDeleting ? 'Brisanje...' : 'Obriši'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
    </div>
  );
 }
--- a/packages/frontend/src/lib/documentApi.ts
+++ b/packages/frontend/src/lib/documentApi.ts
@@ -85,7 +85,7 @@ export const documentApi = {

  // Create a new page in a document
  async createPage(documentId: string, title?: string): Promise<DocumentPage> {
-    const response = await api.post(`/api/${documentId}/pages`, { title });
+    const response = await api.post(`/api/documents/${documentId}/pages`, { title });
    return response.data.page;
  },

@@ -96,7 +96,7 @@ export const documentApi = {
    data: CreateSentenceData
  ): Promise<Sentence> {
    const response = await api.post(
-      `/api/${documentId}/pages/${pageIndex}/sentences`,
+      `/api/documents/${documentId}/pages/${pageIndex}/sentences`,
      data
    );
    return response.data.sentence;
--- a/packages/frontend/src/pages/Login.tsx
+++ b/packages/frontend/src/pages/Login.tsx
@@ -50,7 +50,7 @@ export function Login() {
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
-                placeholder="admin@znakovni.hr"
+                placeholder=""
                className="mt-1"
              />
            </div>
@@ -85,13 +85,6 @@ export function Login() {
            {isLoading ? 'Signing in...' : 'Sign in'}
          </Button>
        </form>
-
-        {/* Demo Credentials */}
-        <div className="mt-4 rounded-md bg-indigo-50 p-4 text-sm text-indigo-800">
-          <p className="font-semibold">Demo Credentials:</p>
-          <p className="mt-1">Admin: admin@znakovni.hr / admin123</p>
-          <p>User: demo@znakovni.hr / demo123</p>
-        </div>
      </div>
    </div>
  );
--- a/packages/frontend/src/pages/VideoSentence.tsx
+++ b/packages/frontend/src/pages/VideoSentence.tsx
@@ -22,14 +22,21 @@ function VideoSentence() {
  const nextItem = currentTokenIndex < playlist.length - 1 ? playlist[currentTokenIndex + 1] : null;
  const nextVideoUrl = nextItem ? getVideoUrl(nextItem.videoUrl) : null;

-  // Reset to first token when tokens change
+  // Reset to first token when tokens change and auto-start playback
  useEffect(() => {
    if (currentTokens.length > 0) {
      setCurrentTokenIndex(0);
-      setIsPlaying(false);
+      setIsPlaying(true); // Auto-start playback
    }
  }, [currentTokens]);

+  // Auto-start playback on page load if tokens exist
+  useEffect(() => {
+    if (currentTokens.length > 0 && currentTokenIndex === 0) {
+      setIsPlaying(true);
+    }
+  }, []); // Run only once on mount
+
  // Auto-advance to next video when no video is available
  useEffect(() => {
    if (currentItem && !currentItem.videoUrl && currentTokens.length > 0) {
--- a/packages/frontend/src/pages/Znakopis.tsx
+++ b/packages/frontend/src/pages/Znakopis.tsx
@@ -2,19 +2,21 @@ import { useState, useEffect } from 'react';
 import { Layout } from '../components/layout/Layout';
 import { TokenTray } from '../components/znakopis/TokenTray';
 import { DocumentPanel } from '../components/znakopis/DocumentPanel';
-import { useSentenceStore } from '../stores/sentenceStore';
-import { documentApi, Document } from '../lib/documentApi';
+import { CreateDocumentDialog } from '../components/znakopis/CreateDocumentDialog';
+import { useSentenceStore, SentenceToken } from '../stores/sentenceStore';
+import { documentApi, Document, Sentence } from '../lib/documentApi';
 import { toast } from 'sonner';
 import { Button } from '../components/ui/button';
 import { Save, FileText } from 'lucide-react';

 function Znakopis() {
-  const { currentTokens, clearTokens } = useSentenceStore();
+  const { currentTokens, clearTokens, setTokens } = useSentenceStore();
  const [documents, setDocuments] = useState<Document[]>([]);
  const [selectedDocument, setSelectedDocument] = useState<Document | null>(null);
  const [currentPageIndex, setCurrentPageIndex] = useState(0);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);

  useEffect(() => {
    loadDocuments();
@@ -98,10 +100,29 @@ function Znakopis() {
  };

  const handleNewDocument = () => {
-    setSelectedDocument(null);
-    setCurrentPageIndex(0);
-    clearTokens();
-    toast.info('Novi dokument');
+    setCreateDialogOpen(true);
+  };
+
+  const handleCreateDocument = async (title: string, description: string) => {
+    try {
+      const document = await documentApi.createDocument({
+        title,
+        description: description || undefined,
+      });
+
+      setSelectedDocument(document);
+      setCurrentPageIndex(0);
+      clearTokens();
+
+      // Reload documents list
+      await loadDocuments();
+
+      setCreateDialogOpen(false);
+      toast.success(`Dokument "${title}" kreiran`);
+    } catch (error) {
+      console.error('Failed to create document:', error);
+      toast.error('Greška pri kreiranju dokumenta');
+    }
  };

  const handleNewPage = async () => {
@@ -129,13 +150,13 @@ function Znakopis() {
  const handleDeleteSentence = async (sentenceId: string) => {
    try {
      await documentApi.deleteSentence(sentenceId);
-      
+
      // Reload document
      if (selectedDocument) {
        const updatedDoc = await documentApi.getDocument(selectedDocument.id);
        setSelectedDocument(updatedDoc);
      }
-      
+
      toast.success('Rečenica obrisana');
    } catch (error) {
      console.error('Failed to delete sentence:', error);
@@ -143,6 +164,67 @@ function Znakopis() {
    }
  };

+  const handleLoadSentence = (sentence: Sentence) => {
+    try {
+      // Convert DocumentTokens to SentenceTokens
+      // Filter out tokens without termId or term (punctuation-only tokens)
+      const sentenceTokens: SentenceToken[] = sentence.tokens
+        .filter((token) => token.termId && token.term)
+        .map((token) => ({
+          id: `token-${token.id}`,
+          termId: token.termId!,
+          term: token.term,
+          displayText: token.displayText,
+          isPunctuation: token.isPunctuation,
+        }));
+
+      // Load tokens into the store
+      setTokens(sentenceTokens);
+
+      toast.success('Rečenica učitana u gornju traku');
+    } catch (error) {
+      console.error('Failed to load sentence:', error);
+      toast.error('Greška pri učitavanju rečenice');
+    }
+  };
+
+  const handleDeleteDocument = async (documentId: string) => {
+    try {
+      await documentApi.deleteDocument(documentId);
+
+      // Clear selected document
+      setSelectedDocument(null);
+      setCurrentPageIndex(0);
+      clearTokens();
+
+      // Reload documents list
+      await loadDocuments();
+
+      toast.success('Dokument obrisan');
+    } catch (error) {
+      console.error('Failed to delete document:', error);
+      toast.error('Greška pri brisanju dokumenta');
+    }
+  };
+
+  const handleUpdateDocument = async (documentId: string, title: string, description: string) => {
+    try {
+      await documentApi.updateDocument(documentId, { title, description });
+
+      // Reload document
+      const updatedDoc = await documentApi.getDocument(documentId);
+      setSelectedDocument(updatedDoc);
+
+      // Reload documents list
+      await loadDocuments();
+
+      toast.success('Dokument ažuriran');
+    } catch (error) {
+      console.error('Failed to update document:', error);
+      toast.error('Greška pri ažuriranju dokumenta');
+    }
+  };
+
  return (
    <Layout>
      <div className="space-y-4">
@@ -181,10 +263,20 @@ function Znakopis() {
              onNewPage={handleNewPage}
              onPageChange={setCurrentPageIndex}
              onDeleteSentence={handleDeleteSentence}
+              onDeleteDocument={handleDeleteDocument}
+              onUpdateDocument={handleUpdateDocument}
+              onLoadSentence={handleLoadSentence}
              loading={loading}
            />
          </div>
        </div>
+
+        {/* Create Document Dialog */}
+        <CreateDocumentDialog
+          open={createDialogOpen}
+          onOpenChange={setCreateDialogOpen}
+          onCreate={handleCreateDocument}
+        />
      </div>
    </Layout>
  );