Merge pull request #15 from FevenSeyfu/frontend-crud-components

Frontend crud components

backend/models/projectModel.js

@@ -1,31 +1,36 @@
 import mongoose from "mongoose";
 
-const projectSchema = new mongoose.Schema({
-  name: { type: String, required: true },
-  description: { type: String, required: true },
-  startDate: { type: Date, required: true },
-  projectOwner: {
-    type: mongoose.Schema.Types.ObjectId,
-    ref: "User",
-    required: true,
-  },
-  scrumMaster: {
-    type: mongoose.Schema.Types.ObjectId,
-    ref: "User",
-    required: true,
-  },
-  teamMembers: [
-    {
+const projectSchema = new mongoose.Schema(
+  {
+    name: { type: String, required: true },
+    description: { type: String, required: true },
+    startDate: { type: Date, required: true },
+    projectOwner: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "User",
+      required: true,
+    },
+    scrumMaster: {
       type: mongoose.Schema.Types.ObjectId,
       ref: "User",
+      required: true,
+    },
+    teamMembers: [
+      {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: "User",
+      },
+    ],
+    tasks: [{ type: mongoose.Schema.Types.ObjectId, ref: "Task" }],
+    status: {
+      type: String,
+      enum: ["open", "onhold", "completed"],
+      default: "open",
     },
-  ],
-  tasks: [{ type: mongoose.Schema.Types.ObjectId, ref: "Task" }],
-  status: {
-    type: String,
-    enum: ["open", "onhold", "completed"],
-    default: "open",
   },
-});
+  {
+    timestamps: true,
+  }
+);
 
 export const Project = mongoose.model("Project", projectSchema);

backend/models/taskModels.js

@@ -1,17 +1,22 @@
 import mongoose from "mongoose";
 
-const taskSchema = new mongoose.Schema({
-  name: { type: String, required: true },
-  description: { type: String, required: true },
-  deadline: { type: Date, required: true,index: true },
-  status: {
-    type: String,
-    enum: ["To Do", "In Progress", "Review", "Done"],
-    default: "To Do",
+const taskSchema = new mongoose.Schema(
+  {
+    name: { type: String, required: true },
+    description: { type: String, required: true },
+    deadline: { type: Date, required: true, index: true },
+    status: {
+      type: String,
+      enum: ["To Do", "In Progress", "Review", "Done"],
+      default: "To Do",
+    },
+    assignee: { type: mongoose.Schema.Types.ObjectId, ref: "User" },
+    dependencies: [{ type: mongoose.Schema.Types.ObjectId, ref: "Task" }],
+    sprint: { type: mongoose.Schema.Types.ObjectId, ref: "Sprint" },
   },
-  assignee: { type: mongoose.Schema.Types.ObjectId, ref: "User" },
-  dependencies: [{ type: mongoose.Schema.Types.ObjectId, ref: "Task" }],
-  sprint: { type: mongoose.Schema.Types.ObjectId, ref: "Sprint" },
-});
+  {
+    timestamps: true,
+  }
+);
 
 export const Task = mongoose.model("Task", taskSchema);

frontend/.gitignore

@@ -11,7 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
-
+.vite
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

frontend/package.json

@@ -22,6 +22,8 @@
     "react-router-dom": "^6.21.0",
     "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^3.1.0",
     "typeface-roboto": "^1.1.13"
   },
   "devDependencies": {

frontend/src/App.jsx

@@ -14,6 +14,11 @@ import AdminDashboard from "./components/Admin/AdminDashboard";
 import ProductOwnerDashboard from "./components/ProductOwner/ProductOwnerDashboard";
 import ScrumMasterDashboard from "./components/ScrumMaster/ScrumMasterDashboard";
 import DevelopmentTeamDashboard from "./components/DevelopmentTeam/DevelopmentTeamDashboard";
+
+// project
+// import ProjectDetail from './components/ProductOwner/ProjectDetail'
+import ProjectDetail from "./components/ScrumMaster/project/ProjectDetail"
+
 const App = () => {
   const { user, isLoading, isError, isSuccess, message } = useSelector(
     (state) => state.auth
@@ -44,8 +49,18 @@ const App = () => {
             )
           }
         />
+        <Route path="/dashboard/project/:id" 
+            element={user ? (
+              <>
+                {user.role === "Scrum Master" && <ProjectDetail  />}
+              </>
+            ) : (
+              <Navigate to="/dashboard" />
+            )
+          }
+        />
       </Routes>
-      <ToastContainer className='top-left' />
+      <ToastContainer/>
     </>
   );
 };

frontend/src/app/store.js

@@ -1,14 +1,31 @@
-import { configureStore } from '@reduxjs/toolkit'
-import authReducer from '../features/Auth/authSlice'
-import userReducer from '../features/users/userSlice'
-import projectReducer from '../features/Projects/projectSlice'
-import taskReducer from '../features/Tasks/taskSlice'
-
-export const store = configureStore({
-    reducer:{
-        auth:authReducer,
-        users:userReducer,
-        project:projectReducer,
-        task:taskReducer
-    }
-})
+import { configureStore, combineReducers } from "@reduxjs/toolkit";
+
+import authReducer from "../features/Auth/authSlice";
+import userReducer from "../features/users/userSlice";
+import projectReducer from "../features/Projects/projectSlice";
+import taskReducer from "../features/Tasks/taskSlice";
+
+import storage from "redux-persist/lib/storage";
+import { persistReducer, persistStore } from "redux-persist";
+
+const persistConfig = {
+  key: "root",
+  storage,
+};
+
+const rootReducer = combineReducers({
+  auth: authReducer,
+  users: userReducer,
+  project: projectReducer,
+  task: taskReducer,
+});
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+const store = configureStore({
+  reducer: persistedReducer,
+});
+
+const persistor = persistStore(store);
+
+export { store, persistor };

frontend/src/components/Admin/AdminDashboard.jsx

@@ -1,14 +1,15 @@
 import React from 'react'
-import UpdateUserProfile from './UpdateUserProfile'
 import UserList from './UserList'
 import Layout from '../common/Layout'
+import { ToastContainer } from 'react-toastify'
 
 const AdminDashboard = () => {
   return (
     <Layout>
-      admin
-        <UpdateUserProfile />
-        <UserList />
+        <ToastContainer />
+        <div>
+          <UserList />
+        </div>
     </Layout>
   )
 }

frontend/src/components/Admin/DeleteUser.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { deleteUser, reset } from "../../features/users/userSlice";
+import Modal from "react-modal";
+import { toast } from "react-toastify";
+import { FaSpinner } from "react-icons/fa";
+import { MdClose } from "react-icons/md";
+
+Modal.setAppElement("#root");
+
+const DeleteUser = ({ userId, onClose }) => {
+  const dispatch = useDispatch();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { users,isLoading, isError, isSuccess, message } = useSelector(
+    (state) => state.users
+  );
+  let selectedUser
+  users.forEach((user) => {
+    user._id === userId && (selectedUser = user.username)
+
+  })
+  const handleDelete = () => {
+    setIsDeleting(true);
+    dispatch(deleteUser(userId));
+  };
+
+  const handleClose = () => {
+    setIsDeleting(false);
+    onClose();
+  };
+  return (
+    <Modal
+      isOpen={true}
+      contentLabel="Delete User Profile"
+      className="fixed top-0 left-0 w-full h-full flex justify-center items-center"
+      overlayClassName="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center"
+      onRequestClose={onClose}
+      shouldCloseOnOverlayClick={true}
+    >
+      <div className="bg-white text-black p-8 mx-12 rounded">
+        <div className="flex justify-end">
+          <MdClose size={30} onClick={onClose} />
+        </div>
+        <h2 className="font-bold text-2xl text-center mb-4">Delete User</h2>
+        {isLoading && <FaSpinner />}
+        <p>Are you sure you want to delete <b>{selectedUser}'s</b>  Profile?</p>
+        <div className="flex flex-row justify-evenly mt-4">
+          <button
+            className="bg-red text-white p-2 rounded-md"
+            onClick={handleDelete}
+            disabled={isDeleting}
+          >
+            {isDeleting ? "Deleting..." : "Delete"}
+          </button>
+          <button className="bg-gray text-white p-2 rounded-md" onClick={handleClose} disabled={isLoading}>
+            Cancel
+          </button>
+        </div>
+        {isError && <p>Error: {message}</p>}
+      </div>
+    </Modal>
+  );
+};
+
+export default DeleteUser;