admin panel update

2024-10-29 01:22:27 +01:00 · 2024-10-29 01:22:27 +01:00 · 3d2b0a5d6d
commit 3d2b0a5d6d
parent 1804bdbb99
5 changed files with 315 additions and 140 deletions
--- a/backend/imk-backend/src/admin/admin.controller.ts
+++ b/backend/imk-backend/src/admin/admin.controller.ts
@ -11,7 +11,6 @@ import {
  ParseIntPipe,
  UseGuards,
  Request,
-  Req,
 } from '@nestjs/common';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { AdminService } from './admin.service';
@ -96,12 +95,25 @@ export class AdminController {
    return this.adminService.updateDocumentStatus(+id, status);
  }

+  // async uploadDocument(
+  //   @UploadedFile() file: Express.Multer.File,
+  //   @Body('title') title: string,
+  //   @Request() req,
+  // ) {
+  //   return this.adminService.uploadDocument(file, title, req.user.userId);
+  // }
  async uploadDocument(
    @UploadedFile() file: Express.Multer.File,
    @Body('title') title: string,
+    @Body('description') description: number[],
    @Request() req,
  ) {
-    return this.adminService.uploadDocument(file, title, req.user.userId);
+    return this.adminService.uploadDocument(
+      file,
+      title,
+      req.user.userId,
+      description,
+    );
  }
  @Get('test-s3-connection')
  async testS3Connection() {
--- a/backend/imk-backend/src/admin/admin.service.ts
+++ b/backend/imk-backend/src/admin/admin.service.ts
@ -85,8 +85,41 @@ export class AdminService {
    });
  }

+  // async getAllDocuments() {
+  //   return this.prisma.document.findMany({
+  //     include: {
+  //       sharedWith: {
+  //         select: {
+  //           id: true,
+  //           name: true,
+  //           email: true,
+  //         },
+  //       },
+  //     },
+  //   });
+  // }
  async getAllDocuments() {
-    return this.prisma.document.findMany();
+    return this.prisma.document.findMany({
+      include: {
+        author: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+          },
+        },
+        sharedWith: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+          },
+        },
+      },
+      orderBy: {
+        createdAt: 'desc',
+      },
+    });
  }

  async updateDocument(
@ -116,6 +149,41 @@ export class AdminService {
      },
    });
  }
+  async uploadDocument(
+    file: Express.Multer.File,
+    title: string,
+    userId: number,
+    sharedWith: number[],
+  ) {
+    let s3Key;
+    try {
+      s3Key = await this.s3Service.uploadFile(file, 'documents');
+
+      // Log the sharedWith array to verify the data
+      console.log('Sharing document with users:', sharedWith);
+
+      const document = await this.prisma.document.create({
+        data: {
+          title,
+          authorId: userId,
+          s3Key,
+          status: 'completed',
+          sharedWith: {
+            connect: sharedWith.map((id) => ({ id })),
+          },
+        },
+        include: {
+          sharedWith: true, // Include this to verify the relation was created
+        },
+      });
+
+      console.log('Created document:', document);
+      return document;
+    } catch (error) {
+      console.error('Error in uploadDocument:', error);
+      throw error;
+    }
+  }

  async deleteDocument(id: number) {
    const document = await this.prisma.document.findUnique({
@ -221,42 +289,49 @@ export class AdminService {

  // problem whith upload status writing to db, i will fix it later

-  async uploadDocument(
-    file: Express.Multer.File,
-    title: string,
-    userId: number,
-  ) {
-    let s3Key;
-    try {
-      // First upload to S3
-      s3Key = await this.s3Service.uploadFile(file, 'documents');
+  // async uploadDocument(
+  //   file: Express.Multer.File,
+  //   title: string,
+  //   userId: number,
+  //   sharedWith: number[],
+  // ) {
+  //   let s3Key;
+  //   try {
+  //     // First upload to S3
+  //     s3Key = await this.s3Service.uploadFile(file, 'documents');

-      // Then create document with completed status and s3Key
-      const document = await this.prisma.document.create({
-        data: {
-          title,
-          authorId: userId,
-          s3Key,
-          status: 'completed', // Set status to completed immediately after successful upload
-        },
-      });
+  //     // Then create document with completed status and s3Key
+  //     const document = await this.prisma.document.create({
+  //       data: {
+  //         title,
+  //         authorId: userId,
+  //         s3Key,
+  //         status: 'completed', // Set status to completed immediately after successful upload
+  //         sharedWith: {
+  //           connect: sharedWith.map((id: number) => ({ id })),
+  //         },
+  //       },
+  //     });

-      return document;
-    } catch (error) {
-      // Create document with failed status if upload fails
-      if (title && userId) {
-        await this.prisma.document.create({
-          data: {
-            title,
-            authorId: userId,
-            s3Key: s3Key || '',
-            status: 'failed',
-          },
-        });
-      }
-      throw error;
-    }
-  }
+  //     return document;
+  //   } catch (error) {
+  //     // Create document with failed status if upload fails
+  //     if (title && userId) {
+  //       await this.prisma.document.create({
+  //         data: {
+  //           title,
+  //           authorId: userId,
+  //           s3Key: s3Key || '',
+  //           status: 'failed',
+  //           sharedWith: {
+  //             connect: sharedWith.map((id: number) => ({ id })),
+  //           },
+  //         },
+  //       });
+  //     }
+  //     throw error;
+  //   }
+  // }

  async getDocumentUrl(documentId: number) {
    const document = await this.prisma.document.findUnique({
--- a/frontend/imk/src/components/UserCreate.jsx
+++ b/frontend/imk/src/components/UserCreate.jsx
@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { createUser } from '../services/api';
+
+// eslint-disable-next-line react/prop-types
+function UserCreate({ onUserCreated }) {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: '',
+  });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await createUser(formData);
+      setFormData({ name: '', email: '', password: '' });
+      if (onUserCreated) onUserCreated();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to create user');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-lg shadow">
+      <h3 className="text-lg font-medium mb-4">Create New User</h3>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Name</label>
+          <input
+            type="text"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Email</label>
+          <input
+            type="email"
+            value={formData.email}
+            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Password</label>
+          <input
+            type="password"
+            value={formData.password}
+            onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            required
+          />
+        </div>
+
+        {error && (
+          <div className="text-red-500 text-sm">{error}</div>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white 
+            ${loading ? 'bg-gray-400' : 'bg-indigo-600 hover:bg-indigo-700'}`}
+        >
+          {loading ? 'Creating...' : 'Create User'}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default UserCreate;
--- a/frontend/imk/src/components/adminPanel/AdminPanel.jsx
+++ b/frontend/imk/src/components/adminPanel/AdminPanel.jsx
@ -1,86 +1,42 @@
-// import { useState, useEffect } from 'react';
-// import { getAllUsers, uploadDocument } from '../../services/api';
-// import DocumentUpload from '../documentUpload/DocumentUpload';
-// function AdminPanel() {
-//   const [users, setUsers] = useState([]);
-//   const [file, setFile] = useState(null);
-//   const [title, setTitle] = useState('');
-
-//   useEffect(() => {
-//     fetchUsers();
-//   }, []);
-
-//   const fetchUsers = async () => {
-//     try {
-//       const response = await getAllUsers();
-//       setUsers(response.data);
-//     } catch (error) {
-//       console.error('Failed to fetch users:', error);
-//     }
-//   };
-
-//   const handleFileUpload = async (e) => {
-//     e.preventDefault();
-//     if (!file) return;
-
-//     const formData = new FormData();
-//     formData.append('file', file);
-//     formData.append('title', title);
-
-//     try {
-//       await uploadDocument(formData);
-//       alert('Document uploaded successfully');
-//     } catch (error) {
-//       console.error('Failed to upload document:', error);
-//     }
-//   };
-
-//   return (
-//     <div>
-//       <h2>Users</h2>
-//       <ul>
-//         {users.map(user => (
-//           <li key={user.id}>{user.name} ({user.email})</li>
-//         ))}
-//       </ul>
-
-//       <h2>Upload Document</h2>
-//       <form onSubmit={handleFileUpload}>
-//         <input
-//           type="text"
-//           value={title}
-//           onChange={(e) => setTitle(e.target.value)}
-//           placeholder="Document Title"
-//           required
-//         />
-//         <input
-//           type="file"
-//           onChange={(e) => setFile(e.target.files[0])}
-//           required
-//         />
-//         <button type="submit">Upload</button>
-//       </form>
-//       <DocumentUpload />
-//     </div>
-//   );
-// }
-
-// export default AdminPanel;
-
 import { useState, useEffect } from 'react';
-import { getAllUsers, getAllDocuments } from '../../services/api';
+import { getAllUsers, getAllDocuments, getUserInfo } from '../../services/api';
 import DocumentUpload from '../documentUpload/DocumentUpload';
+import UserCreate from '../UserCreate';
+import { useNavigate } from 'react-router-dom';

 function AdminPanel() {
+  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('documents');
  const [users, setUsers] = useState([]);
  const [documents, setDocuments] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
+  const [isAdmin, setIsAdmin] = useState(false);

  useEffect(() => {
+    checkAdminStatus();
+  }, []);
+
+  const checkAdminStatus = async () => {
+    try {
+      const response = await getUserInfo();
+      if (!response?.data?.isAdmin) {
+        navigate('/');
+      } else {
+        setIsAdmin(true);
+        await fetchData();
+      }
+    } catch (error) {
+      console.error('Admin check failed:', error);
+      navigate('/');
+    }
+  };
+
+  useEffect(() => {
+    if (isAdmin) {
      fetchData();
-  }, [activeTab]);
+    }
+  }, [activeTab, isAdmin]);

  const fetchData = async () => {
    setLoading(true);
@ -110,6 +66,10 @@ function AdminPanel() {
    return colors[status] || 'bg-gray-100 text-gray-800';
  };

+  if (!isAdmin) {
+    return null;
+  }
+
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div className="bg-white rounded-lg shadow">
@ -175,7 +135,7 @@ function AdminPanel() {
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Author</th>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shared With</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created At</th>
                      </tr>
                    </thead>
@ -188,7 +148,9 @@ function AdminPanel() {
                              {doc.status}
                            </span>
                          </td>
-                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{doc.authorId}</td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            {doc.sharedWith?.map((user) => user.name).join(', ') || 'None'}
+                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {new Date(doc.createdAt).toLocaleDateString()}
                          </td>
@ -200,6 +162,8 @@ function AdminPanel() {
              )}

              {activeTab === 'users' && (
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                  <div>
                    <div className="overflow-x-auto">
                      <table className="min-w-full divide-y divide-gray-200">
                        <thead className="bg-gray-50">
@ -224,6 +188,11 @@ function AdminPanel() {
                        </tbody>
                      </table>
                    </div>
+                  </div>
+                  <div>
+                    <UserCreate onUserCreated={fetchData} />
+                  </div>
+                </div>
              )}

              {activeTab === 'upload' && <DocumentUpload />}
--- a/frontend/imk/src/components/documentUpload/DocumentUpload.jsx
+++ b/frontend/imk/src/components/documentUpload/DocumentUpload.jsx
@ -1,12 +1,27 @@
-import { useState } from 'react';
-import { uploadDocument } from '../../services/api';
+import { useState, useEffect } from 'react';
+import { uploadDocument, getAllUsers } from '../../services/api';

 function DocumentUpload() {
  const [file, setFile] = useState(null);
  const [title, setTitle] = useState('');
+  const [selectedUsers, setSelectedUsers] = useState([]);
+  const [availableUsers, setAvailableUsers] = useState([]);
  const [status, setStatus] = useState('idle'); // idle, uploading, completed, failed
  const [errorMessage, setErrorMessage] = useState('');

+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const fetchUsers = async () => {
+    try {
+      const response = await getAllUsers();
+      setAvailableUsers(response.data.filter(user => !user.isAdmin));
+    } catch (error) {
+      setErrorMessage('Failed to load users');
+    }
+  };
+
  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    setFile(selectedFile);
@ -14,8 +29,8 @@ function DocumentUpload() {

  const handleSubmit = async (event) => {
    event.preventDefault();
-    if (!file || !title) {
-      setErrorMessage('Please provide both a title and a file');
+    if (!file || !title || selectedUsers.length === 0) {
+      setErrorMessage('Please provide a title, file, and select at least one user');
      return;
    }

@ -25,17 +40,18 @@ function DocumentUpload() {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('title', title);
+    formData.append('sharedWith', JSON.stringify(selectedUsers));

    try {
      await uploadDocument(formData);
      setStatus('completed');
      setTitle('');
      setFile(null);
-      // Reset form
+      setSelectedUsers([]);
      event.target.reset();
    } catch (error) {
      setStatus('failed');
-      setErrorMessage(error.response?.data?.message || 'Upload failed. Please try again.');
+      setErrorMessage(error.response?.data?.message || 'Upload failed');
    }
  };

@ -69,6 +85,25 @@ function DocumentUpload() {
          />
        </div>

+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            Share with Users
+          </label>
+          <select
+            multiple
+            value={selectedUsers}
+            onChange={(e) => setSelectedUsers(Array.from(e.target.selectedOptions, option => option.value))}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            required
+          >
+            {availableUsers.map(user => (
+              <option key={user.id} value={user.id}>
+                {user.name} ({user.email})
+              </option>
+            ))}
+          </select>
+        </div>
+
        {errorMessage && (
          <div className="text-red-500 text-sm mt-2">
            {errorMessage}