admin_lsac 2.0.30 → 2.0.32

package/README.md

@@ -24,6 +24,8 @@ If your project is TypeScript-based, you need to use the line from below as well
 
 ## How to add routes to the admin panel's pages?
 
+You will need to create an array of schemas (if more than one schema) for your own admin panel.
+
 ```
 {your_array.map((page, index) => (
   <Route
@@ -54,8 +56,6 @@ If your project is TypeScript-based, you need to use the line from below as well
 ) : null}
 ```
 
-You will need to create an array of schemas for your own admin panel.
-
 ## What is a schema?
 
 ```
@@ -142,397 +142,6 @@ The operations for the rowActions and actions will generally (not mandatory) hav
 - arrayField = arrays of data
 - objectField = an object containing more fields/inputs, or even other objects (some cool recursion)
 
-#### Schema example
-
-```
-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 your schemas though
-
-export const coursesPage: PageSchema = {
-  name: 'Courses',
-
-  // 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
-  },
-
-  // 2. Table fields: define columns for the courses table
-  tableFields: [
-    {
-      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',
-      access: (obj: any) => obj.name,
-    },
-    {
-      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: '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: [
-        {
-          // 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'),
-          // 'options' would have the same effect as 'getOptions', but not written as a function
-          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'),
-            },
-          ],
-        },
-        {
-          // Schedule (array of sessions with date and topic)
-          name: 'schedule',
-          label: 'Schedule',
-          type: 'array',
-          element: {
-            name: '', // no specific name for array elements
-            label: '', // (fields below define each session)
-            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'),
-              },
-            ],
-          },
-        },
-        {
-          // Cover Image (file upload)
-          name: 'coverImage',
-          label: 'Cover Image',
-          type: 'file',
-          validationSchema: Yup.mixed().required('Cover image is required'),
-        },
-      ],
-      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: '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: 'Edit Full Course',
-      // Form (all course fields) with three arguments onSubmit (formValues, rowId, rowObject)
-      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'),
-        },
-        {
-          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'),
-        },
-      ],
-      // 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' },
-        });
-      },
-    },
-  ],
-};
-```
-
-#### An array of schemas must be defined as below:
-
-```
-const your_array = [
-    {
-        // schema 1
-    },
-    {
-        // schema 2
-    },
-    ...
-];
-```
-
-- In TypeScript, it would slightly change:
-
-```
-const your_array: PageSchema[] = [
-    {
-        // schema 1
-    },
-    {
-        // schema 2
-    },
-    ...
-];
-```
-
 ## Websockets Support
 
 For real-time changes, this NPM module uses socket.io-client library to implement WebSockets. So, on the server-side, you will have to use socket.io library, and provide an `apiURL` as shown above.
@@ -547,4 +156,4 @@ For every entity you describe through a page schema, getRequest and onSubmit fun
 
 ## Learn More
 
-For more details, especially about page schemas, contact the owner. :)
+For more details, especially about page schemas, contact the owner (LSAC Bucuresti). :)

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

@@ -60,6 +60,13 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
     const [rowObject, setRowObject] = useState([]);
     const [refetch, setRefetch] = useState(false);
     const [socket, setSocket] = useState(io);
+    const [pagination, setPagination] = useState(() => {
+        const saved = localStorage.getItem('tablePageSize');
+        return {
+            pageIndex: 0,
+            pageSize: saved ? parseInt(saved) : 10,
+        };
+    });
     if (apiURL !== '') {
         newSocket(setSocket, apiURL);
     }
@@ -99,7 +106,13 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
                             overflowY: 'visible',
                             overflowX: 'auto',
                         },
-                    }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: false, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 2, direction: "row", wrap: "wrap", children: selectedPage.actions.map((action, index) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
+                    }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: true, paginationDisplayMode: "pages", onPaginationChange: (updater) => {
+                        setPagination((prev) => {
+                            const next = typeof updater === 'function' ? updater(prev) : updater;
+                            localStorage.setItem('tablePageSize', String(next.pageSize));
+                            return next;
+                        });
+                    }, state: { pagination }, enableRowVirtualization: false, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 2, direction: "row", wrap: "wrap", children: selectedPage.actions.map((action, index) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
                                     setSelectedAction(action);
                                     onOpen();
                                 }, children: action.name }, index))) }) })), enableRowActions: true, renderRowActionMenuItems: (obj) => {

package/dist/esm/src/testSchemas/course.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import axios from 'axios';
+import React from 'react';
 import * as Yup from 'yup';
 const domain = 'http://localhost:3001';
 // Please try to modularize the code for your schemas though
@@ -35,7 +35,6 @@ export const coursesPage = {
         },
         {
             name: 'Instructor',
-            // Display instructor name (assuming obj.instructor has { name, email })
             access: (obj) => (obj.instructor ? obj.instructor.name : 'N/A'),
         },
         {
@@ -125,8 +124,8 @@ export const coursesPage = {
                     label: 'Schedule',
                     type: 'array',
                     element: {
-                        name: '', // no specific name for array elements
-                        label: '', // (fields below define each session)
+                        name: '', // no specific name required for array elements, it will not be displayed
+                        label: '', // no specific label required for array elements, it will not be displayed
                         type: 'object',
                         fields: [
                             {
@@ -172,9 +171,25 @@ export const coursesPage = {
                         data.append(k, v);
                     }
                 });
-                await axios.post(`${domain}/courses`, data, {
+                const res = await axios.post(`${domain}/courses`, data, {
                     headers: { 'Content-Type': 'multipart/form-data' },
                 });
+                return res.data;
+            },
+        },
+        {
+            name: 'Download All Course Photos',
+            // Example for downloading different objects (photos, CVs etc.)
+            onSubmit: async () => {
+                const res = await axios.get(`${domain}/courses/photos/download`, { responseType: 'blob' });
+                const url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/zip' }));
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = 'courses-images.zip';
+                document.body.appendChild(link);
+                link.click();
+                link.remove();
+                window.URL.revokeObjectURL(url);
             },
         },
     ],
@@ -334,9 +349,10 @@ export const coursesPage = {
                 if (formValues.coverImage) {
                     data.append('coverImage', formValues.coverImage);
                 }
-                await axios.patch(`${domain}/courses/${courseId}`, data, {
+                const res = await axios.patch(`${domain}/courses/${courseId}`, data, {
                     headers: { 'Content-Type': 'multipart/form-data' },
                 });
+                return res.data;
             },
         },
     ],

package/package.json

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