admin_lsac 2.0.24 → 2.0.26

package/README.md

@@ -4,24 +4,22 @@ For configuring your own admin panel, follow the next instructions.
 
 ## How to install it?
 
-- `npm install admin_lsac`
+The following command will download and install the specified package and its dependencies into your project's node_modules directory, making it available for use in your project.
 
-This command will download and install the specified package and its dependencies into your project's node_modules directory, making it available for use in your project.
+- `npm install admin_lsac`
 
 ## What do you need to import?
 
+You can import these in App.js / App.ts or wherever your routes to the pages are located.
+
 - `import { pageToUrl } from 'admin_lsac'`
 
 - `import { AdminPage } from 'admin_lsac'`
 
-You can import these in App.js / App.ts or wherever your routes to the pages are located.
+If your project is TypeScript-based, you need to use the line from below as well. Import the component where you want to write your schemas. (See below for details about schemas)
 
 - `import { PageSchema } from 'admin_lsac'`
 
-If your project is TypeScript-based, you need to use the line above as well.
-
-Import the component from above where you want to write your schemas! (See below for details about schemas)
-
 ## How to add routes to the admin panel's pages?
 
 ```
@@ -68,7 +66,7 @@ export interface SimpleField {
   name: string;
   label: string;
   type: 'string' | 'number' | 'file' | 'date' | 'datetime-local' | 'time';
-  validationSchema: any;
+  validationSchema?: any;
 }
 
 export interface Option {
@@ -104,13 +102,13 @@ export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
 export interface Action {
   name: string;
   fields?: FormField[];
-  onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
+  onSubmit: (obj1?: any, obj2?: any, obj3?: any) => Promise<any>;
 }
 
 export interface RowAction {
   name: string;
   fields?: FormField[];
-  initialise?: (obj: any) => Promise<any>;
+  initialise?: (rowId: any) => Promise<any>;
   onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
 }
 
@@ -135,7 +133,7 @@ What do the fields of `PageSchema` refer to?
 - getRequest = this is a field containg the function that will retrieve all the entries from one table in the database
 - tableFields = these are the 'definitions' of the displayed table's columns
 
-The operations for the rowActions and actions will generally have a form to complete before executing it. There are 4 types of inputs for the form part:
+The operations for the rowActions and actions will generally (not mandatory) have a form to complete before executing it. There are 4 types of inputs for the form part:
 
 - simpleField = simple data like numbers, strings, files and dates
 - dropdownField = enable the user to choose an option from a predefined list
@@ -145,129 +143,365 @@ The operations for the rowActions and actions will generally have a form to comp
 #### Schema example
 
 ```
-import axios from "axios";
-import React from "react";
-const domain = "http://localhost:3001"; // dev mode
+import React from 'react';
+import axios from 'axios';
+import * as Yup from 'yup';
+import { PageSchema } from '../schema';
+
+const domain = 'http://localhost:3001';
+
+// Please try to modularize the code for a schema though
 
-const companies: PageSchema = {
-  name: "Companies",
+export const coursesPage: PageSchema = {
+  name: 'Courses',
 
-  getRequest: async () => { // retrieve all entries from the database
-    const res = await axios.get(domain + "/something");
-    return res.data;
+  // 1. Data retrieval: fetch all courses from backend
+  getRequest: async () => {
+    const res = await axios.get(`${domain}/courses`);
+    return res.data; // returns an array of course objects
   },
 
-  tableFields: [ // the columns displayed on the page
+  // 2. Table fields: define columns for the courses table
+  tableFields: [
     {
-      name: "Company ID", // the ID must be displayed (and as first column),
-      // if you would like to use rowActions ⚠️
-      access: (obj: any) => obj.id, // obj.field_name
+      name: 'Course ID',
+      // The ID should be first column to allow rowActions to reference it (if rowActions needed)
+      access: (obj: any) => obj.id,
     },
     {
-      name: "Name",
+      name: 'Name',
       access: (obj: any) => obj.name,
     },
     {
-      name: "Logo",
-      access: (obj: any) => // you can have even more complex functions
-        obj.logoUrl
-          ? React.createElement("img", {
-            src: obj.logoUrl,
-            alt: "ERROR",
-            style: { width: "100px" },
-          })
-          : "No Image Available",
+      name: 'Level',
+      access: (obj: any) => obj.level,
+    },
+    {
+      name: 'Credits',
+      access: (obj: any) => obj.credits,
+    },
+    {
+      name: 'Start Date',
+      access: (obj: any) => (obj.startDate ? new Date(obj.startDate).toLocaleDateString() : 'N/A'),
+    },
+    {
+      name: 'Instructor',
+      // Display instructor name (assuming obj.instructor has { name, email })
+      access: (obj: any) => (obj.instructor ? obj.instructor.name : 'N/A'),
+    },
+    {
+      name: 'Course Image',
+      // Use React.createElement to render an image
+      access: (obj: any) =>
+        obj.coverImage
+          ? React.createElement('img', {
+              src: `${domain}${obj.coverImage}`,
+              alt: 'Cover Image',
+              style: { width: '100px' },
+            })
+          : 'No Image',
     },
   ],
 
+  // 3. Global actions (top-level page actions)
   actions: [
     {
-      name: "Create New Quiz",
+      name: 'Ping Server',
+      // No form, no arguments: simple request to '/ping'
+      onSubmit: async () => {
+        const res = await axios.get(`${domain}/courses/ping`);
+        return res.data;
+      },
+    },
+
+    {
+      name: 'Create Course',
+      // Form with one argument (formValues) on submit
       fields: [
         {
-          name: "name",
-          label: "Quiz Name",
-          type: "string", // for every FormField, type must be specified
-          validationSchema: Yup.string().required(), // you can also require 'boolean' values with Yup
+          // Course Name
+          name: 'name',
+          label: 'Course Name',
+          type: 'string',
+          validationSchema: Yup.string().required('Name is required'),
+        },
+        {
+          // Level (Undergraduate/Graduate dropdown)
+          name: 'level',
+          label: 'Level',
+          type: 'dropdown',
+          validationSchema: Yup.string().required('Level is required'),
+          getOptions: async () => [
+            { value: 'Undergraduate', display: 'Undergraduate' },
+            { value: 'Graduate', display: 'Graduate' },
+          ],
+        },
+        {
+          // Credits
+          name: 'credits',
+          label: 'Credits',
+          type: 'number',
+          validationSchema: Yup.number().required('Credits are required'),
+        },
+        {
+          // Start Date
+          name: 'startDate',
+          label: 'Start Date',
+          type: 'date',
+          validationSchema: Yup.date().required('Start date is required'),
+        },
+        {
+          // Instructor (object with name and email)
+          name: 'instructor',
+          label: 'Instructor',
+          type: 'object',
+          fields: [
+            {
+              name: 'name',
+              label: 'Instructor Name',
+              type: 'string',
+              validationSchema: Yup.string().required('Instructor name is required'),
+            },
+            {
+              name: 'email',
+              label: 'Instructor Email',
+              type: 'string',
+              validationSchema: Yup.string()
+                .email('Invalid email')
+                .required('Instructor email is required'),
+            },
+          ],
         },
         {
-          name: "questions",
-          label: "Questions",
-          type: "array",
+          // Schedule (array of sessions with date and topic)
+          name: 'schedule',
+          label: 'Schedule',
+          type: 'array',
           element: {
-            name: "",
-            label: "",
-            type: "object",
+            name: '', // no specific name for array elements
+            label: '', // (fields below define each session)
+            type: 'object',
             fields: [
               {
-                name: "text",
-                label: "Question Text",
-                type: "string",
-                validationSchema: Yup.string().required(),
+                name: 'date',
+                label: 'Date',
+                type: 'date',
+                validationSchema: Yup.date().required('Session date is required'),
               },
               {
-                name: "type",
-                label: "Question Type",
-                type: "dropdown",
-                // validationSchema is missing here (optional), so it will not be a required field
-                getOptions: async () => [
-                  {
-                    value: "OPEN",
-                    display: "Open",
-                  },
-                  {
-                    value: "SINGLE",
-                    display: "Single",
-                  },
-                  {
-                    value: "MULTIPLE",
-                    display: "Multiple",
-                  },
-                ],
+                name: 'topic',
+                label: 'Topic',
+                type: 'string',
+                validationSchema: Yup.string().required('Session topic is required'),
               },
             ],
           },
         },
+        {
+          // Cover Image (file upload)
+          name: 'coverImage',
+          label: 'Cover Image',
+          type: 'file',
+          validationSchema: Yup.mixed().required('Cover image is required'),
+        },
       ],
-      onSubmit: async (formValues: any) => { // onSubmit function can also be complex
-        // for actions, onSubmit will always have one param (formValues - you can change the name though)
-        // you can also process formVaues as you wish
-        const result = await axios.post(domain + "/something", formValues);
-        return result.data;
-      }
+      onSubmit: async (formValues: any) => {
+        // Create a new course
+        const data = new FormData();
+        Object.entries(formValues).forEach(([k, v]) => {
+          if (k === 'coverImage') {
+            if (v instanceof File) data.append('coverImage', v);
+          } else if (k === 'schedule') {
+            data.append('schedule', JSON.stringify(v));
+          } else if (k === 'instructor') {
+            const instructor = v as { name: string; email: string };
+            data.append('instructor[name]', instructor.name);
+            data.append('instructor[email]', instructor.email);
+          } else {
+            data.append(k, v as any);
+          }
+        });
+
+        await axios.post(`${domain}/courses`, data, {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        });
+      },
     },
   ],
 
+  // 4. Row-specific actions (actions for each course row)
   rowActions: [
     {
-      name: "Modify Event - Variant 1", // without form
-      onSubmit: async (eventId: number) => { // onSubmit has only param, the row's ID
-        const res = await axios.delete(domain + "/something/" + eventId);
+      name: 'Delete Course',
+      // No form; onSubmit uses one argument (rowId) to delete that course
+      onSubmit: async (courseId: number) => {
+        const res = await axios.delete(`${domain}/courses/${courseId}`);
+        return res.data;
+      },
+    },
+
+    {
+      name: 'Archive Course',
+      // No form; onSubmit uses two arguments (rowId and rowObject) to archive
+      onSubmit: async (courseId: number, course: any) => {
+        console.log(course); // you can do whatever you want with the course information
+        const res = await axios.patch(`${domain}/courses/${courseId}/archive`);
+        return res.data;
+      },
+    },
+
+    {
+      name: 'Edit Basic Info',
+      // Form (name, level, credits) with two arguments onSubmit (formValues, rowId)
+      fields: [
+        {
+          name: 'name',
+          label: 'Course Name',
+          type: 'string',
+          validationSchema: Yup.string().required('Name is required'),
+        },
+        {
+          name: 'level',
+          label: 'Level',
+          type: 'dropdown',
+          validationSchema: Yup.string().required('Level is required'),
+          getOptions: async () => [
+            { value: 'Undergraduate', display: 'Undergraduate' },
+            { value: 'Graduate', display: 'Graduate' },
+          ],
+        },
+        {
+          name: 'credits',
+          label: 'Credits',
+          type: 'number',
+          validationSchema: Yup.number().required('Credits are required'),
+        },
+      ],
+      onSubmit: async (formValues: any, courseId: number) => {
+        // Update course basic info
+        const res = await axios.patch(`${domain}/courses/${courseId}`, formValues);
         return res.data;
       },
     },
+
     {
-      name: "Modify Event - Variant 2", // with form
+      name: 'Edit Full Course',
+      // Form (all course fields) with three arguments onSubmit (formValues, rowId, rowObject)
       fields: [
         {
-          name: "input",
-          label: "Mock Field",
-          type: "string",
-          validationSchema: "",
+          name: 'name',
+          label: 'Course Name',
+          type: 'string',
+          validationSchema: Yup.string().required('Name is required'),
+        },
+        {
+          name: 'level',
+          label: 'Level',
+          type: 'dropdown',
+          validationSchema: Yup.string().required('Level is required'),
+          getOptions: async () => [
+            { value: 'Undergraduate', display: 'Undergraduate' },
+            { value: 'Graduate', display: 'Graduate' },
+          ],
+        },
+        {
+          name: 'credits',
+          label: 'Credits',
+          type: 'number',
+          validationSchema: Yup.number().required('Credits are required'),
+        },
+        {
+          name: 'startDate',
+          label: 'Start Date',
+          type: 'date',
+          validationSchema: Yup.date().required('Start date is required'),
+        },
+        {
+          name: 'instructor',
+          label: 'Instructor',
+          type: 'object',
+          fields: [
+            {
+              name: 'name',
+              label: 'Instructor Name',
+              type: 'string',
+              validationSchema: Yup.string().required('Instructor name is required'),
+            },
+            {
+              name: 'email',
+              label: 'Instructor Email',
+              type: 'string',
+              validationSchema: Yup.string()
+                .email('Invalid email')
+                .required('Instructor email is required'),
+            },
+          ],
+        },
+        {
+          name: 'schedule',
+          label: 'Schedule',
+          type: 'array',
+          element: {
+            name: '',
+            label: '',
+            type: 'object',
+            fields: [
+              {
+                name: 'date',
+                label: 'Date',
+                type: 'date',
+                validationSchema: Yup.date().required('Session date is required'),
+              },
+              {
+                name: 'topic',
+                label: 'Topic',
+                type: 'string',
+                validationSchema: Yup.string().required('Session topic is required'),
+              },
+            ],
+          },
+        },
+        {
+          name: 'coverImage',
+          label: 'Cover Image',
+          type: 'file',
+          validationSchema: Yup.mixed().required('Cover image is required'),
         },
       ],
-      onSubmit: async (formValues: any, eventId: number) => { // onSubmit has two params
-        // the first param - formValues, while the second is the row's ID
-        const result = await axios.patch(domain + "/something" + eventId, formValues);
-        return result.data;
+      // Use initialise to fetch current course data and pre-fill the form
+      initialise: async (courseId: any) => {
+        const res = await axios.get(`${domain}/courses/${courseId}`);
+        return res.data; // return course object to populate the form
+      },
+      onSubmit: async (formValues: any, courseId: number, course: any) => {
+        // Update full course details
+        // Please note that you can include "initialise" and not the "rowObject" (or vice versa)
+        console.log(course); // you can do whatever you want with the course information
+        const data = new FormData();
+
+        data.append('name', formValues.name);
+        data.append('level', formValues.level);
+        data.append('credits', formValues.credits);
+        data.append('startDate', formValues.startDate);
+
+        data.append('instructor[name]', formValues.instructor.name);
+        data.append('instructor[email]', formValues.instructor.email);
+
+        data.append('schedule', JSON.stringify(formValues.schedule));
+
+        if (formValues.coverImage) {
+          data.append('coverImage', formValues.coverImage);
+        }
+
+        await axios.patch(`${domain}/courses/${courseId}`, data, {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        });
       },
     },
   ],
-}
+};
 ```
 
-Please note that the schema above is not related to any entity, and the fields of PageSchema do not necessarily have any relation between them. These are just random examples to teach you how to create your own schema.
-
 #### An array of schemas must be defined as below:
 
 ```

package/dist/esm/src/components/AdminPage.js

@@ -8,8 +8,8 @@ import { MaterialReactTable } from 'material-react-table';
 import { mkConfig, generateCsv, download } from 'export-to-csv';
 import Swal from 'sweetalert2';
 import MenuItem from '@mui/material/MenuItem';
-import { io } from 'socket.io-client';
-import { newSocket } from '../utils/websockets';
+// import { io } from 'socket.io-client';
+// import { newSocket } from '../utils/websockets';
 export function pageToUrl(page) {
     return `${page.name.toLowerCase().replace(' ', '_')}`;
 }
@@ -59,24 +59,27 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
     const [rowId, setRowId] = useState();
     const [rowObject, setRowObject] = useState([]);
     const [refetch, setRefetch] = useState(false);
-    const [socket, setSocket] = useState(io);
-    newSocket(setSocket, apiURL);
+    // const [socket, setSocket] = useState(io);
+    // newSocket(setSocket, apiURL);
+    console.log(apiURL);
     useEffect(() => {
         selectedPage.getRequest().then((resArray) => {
             setData(resArray);
             setRefetch(false);
         });
     }, [refetch]); // Do not remove 'refetch' from here !!!
-    useEffect(() => {
-        socket.on('updateData', (message) => {
-            console.log('Message emitted from socket: ' + message);
-            setRefetch(true);
-            const rowActionsMenu = document.querySelector('.MuiPaper-root.MuiPopover-paper.MuiMenu-paper');
-            if (rowActionsMenu) {
-                rowActionsMenu.remove();
-            }
-        });
-    }, [socket, selectedPage]);
+    // useEffect(() => {
+    //   socket.on('updateData', (message) => {
+    //     console.log('Message emitted from socket: ' + message);
+    //     setRefetch(true);
+    //     const rowActionsMenu = document.querySelector(
+    //       '.MuiPaper-root.MuiPopover-paper.MuiMenu-paper',
+    //     );
+    //     if (rowActionsMenu) {
+    //       rowActionsMenu.remove();
+    //     }
+    //   });
+    // }, [socket, selectedPage]);
     useEffect(() => {
         setDisplayData(data.map((row) => selectedPage.tableFields.map((field) => field.access(row))));
     }, [data]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin_lsac",
   "private": false,
-  "version": "2.0.24",
+  "version": "2.0.26",
   "description": "Generic Admin Panel created for storing events' data",
   "scripts": {
     "dev": "vite",