admin_lsac 2.0.7 → 2.0.9

package/README.md

@@ -63,14 +63,6 @@ You will need to create an array of schemas for your own admin panel.
 ## What is a schema?
 
 ```
-export interface PageSchema {
-  name: string;
-  actions: Action[];
-  rowActions: RowAction[];
-  getRequest: () => Promise<any[]>;
-  tableFields: TableField[];
-}
-
 export interface TableField {
   name: string;
   access: (obj: any) => string | number | React.ReactElement;
@@ -79,7 +71,7 @@ export interface TableField {
 export interface SimpleField {
   name: string;
   label: string;
-  type: "string" | "number" | "file";
+  type: 'string' | 'number' | 'file' | 'date';
   validationSchema: any;
 }
 
@@ -91,22 +83,23 @@ export interface Option {
 export interface DropdownField {
   name: string;
   label: string;
-  type: "dropdown";
-  options?: Option[] | undefined;
-  getOptions: () => Promise<Option[]>;
+  type: 'dropdown';
+  validationSchema?: any;
+  options?: Option[];
+  getOptions?: () => Promise<Option[]>;
 }
 
 export interface ObjectField {
   name: string;
   label: string;
-  type: "object";
+  type: 'object';
   fields: FormField[];
 }
 
 export interface ArrayField {
   name: string;
   label: string;
-  type: "array";
+  type: 'array';
   element: Exclude<FormField, ArrayField>;
 }
 
@@ -115,20 +108,28 @@ export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
 export interface Action {
   name: string;
   fields?: FormField[];
-  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
+  onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
 }
 
 export interface RowAction {
   name: string;
   fields?: FormField[];
-  initialise?: (obj: any) => any;
-  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
+  initialise?: (obj: any) => Promise<any>;
+  onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
+}
+
+export interface PageSchema {
+  name: string;
+  actions: Action[];
+  rowActions: RowAction[];
+  getRequest: () => Promise<any[]>;
+  tableFields: TableField[];
 }
 ```
 
 A page schema is based on these interfaces, and it describes how one table of your admin panel would need to be structured to accomplish what the user needs to do regarding an entity. (i.e. users, teams, companies, quizzes)
 
-The most important interface is `PageSchema`, as it is at the top of the relations between all these interfaces.
+The most important interface is `PageSchema`, as it stands at the top of the relations between all these interfaces.
 
 What do the fields of `PageSchema` refer to?
 
@@ -140,7 +141,7 @@ What do the fields of `PageSchema` refer to?
 
 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:
 
-- simpleField = simple data like numbers, strings or files
+- simpleField = simple data like numbers, strings, files and dates
 - dropdownField = enable the user to choose an option from a predefined list
 - arrayField = arrays of data
 - objectField = an object containing more fields/inputs, or even other objects (some cool recursion)
@@ -148,20 +149,15 @@ 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
 
-// helper function
-const getAuth = () => {
-  // return a token or whatever :)
-};
-
 const companies: PageSchema = {
   name: "Companies",
 
   getRequest: async () => { // retrieve all entries from the database
-    const res = await axios.get(domain + "/something", {
-      headers: getAuth(),
-    });
+    const res = await axios.get(domain + "/something");
     return res.data;
   },
 
@@ -217,6 +213,7 @@ const companies: PageSchema = {
                 name: "type",
                 label: "Question Type",
                 type: "dropdown",
+                // validationSchema is missing here (optional), so it will not be a required field
                 getOptions: async () => [
                   {
                     value: "OPEN",
@@ -238,13 +235,8 @@ const companies: PageSchema = {
       ],
       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)
-        // process formVaues as you wish
-
-        // Nevertheless, submitting the actual data is the most important thing
-        const result = await axios.post(domain + "/something", formValues, {
-          headers: getAuth(),
-        });
-
+        // you can also process formVaues as you wish
+        const result = await axios.post(domain + "/something", formValues);
         return result.data;
       }
     },
@@ -252,16 +244,14 @@ const companies: PageSchema = {
 
   rowActions: [
     {
-      name: "Delete Event - Variant 1", // without form
+      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
-        );
+        const res = await axios.delete(domain + "/something/" + eventId);
         return res.data;
       },
     },
     {
-      name: "Delete Event - Variant 2", // with form
+      name: "Modify Event - Variant 2", // with form
       fields: [
         {
           name: "input",
@@ -271,18 +261,16 @@ const companies: PageSchema = {
         },
       ],
       onSubmit: async (formValues: any, eventId: number) => { // onSubmit has two params
-      // the first param - formValues, while the second is the row's ID
-        const res = await axios.delete(
-          domain + "/something/" + eventId
-        );
-        return res.data;
+        // the first param - formValues, while the second is the row's ID
+        const result = await axios.patch(domain + "/something" + eventId, formValues);
+        return result.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 schemas.
+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/admin_lsac.d.ts

@@ -7,7 +7,7 @@ declare module 'admin_lsac' {
   export interface SimpleField {
     name: string;
     label: string;
-    type: 'string' | 'number' | 'file';
+    type: 'string' | 'number' | 'file' | 'date';
     validationSchema: any;
   }
   export interface Option {
@@ -19,7 +19,7 @@ declare module 'admin_lsac' {
     label: string;
     type: 'dropdown';
     validationSchema?: any;
-    options?: Option[] | undefined;
+    options?: Option[];
     getOptions?: () => Promise<Option[]>;
   }
   export interface ObjectField {
@@ -43,7 +43,7 @@ declare module 'admin_lsac' {
   export interface RowAction {
     name: string;
     fields?: FormField[];
-    initialise?: (obj: any) => any;
+    initialise?: (obj: any) => Promise<any>;
     onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
   }
   export interface PageSchema {

package/dist/esm/src/admin_lsac.d.ts

@@ -7,7 +7,7 @@ declare module 'admin_lsac' {
   export interface SimpleField {
     name: string;
     label: string;
-    type: 'string' | 'number' | 'file';
+    type: 'string' | 'number' | 'file' | 'date';
     validationSchema: any;
   }
   export interface Option {
@@ -19,7 +19,7 @@ declare module 'admin_lsac' {
     label: string;
     type: 'dropdown';
     validationSchema?: any;
-    options?: Option[] | undefined;
+    options?: Option[];
     getOptions?: () => Promise<Option[]>;
   }
   export interface ObjectField {
@@ -43,7 +43,7 @@ declare module 'admin_lsac' {
   export interface RowAction {
     name: string;
     fields?: FormField[];
-    initialise?: (obj: any) => any;
+    initialise?: (obj: any) => Promise<any>;
     onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
   }
   export interface PageSchema {

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

@@ -22,43 +22,13 @@ function Header({ pages, data, basePath }) {
                         }, children: "Export Data" }) })] }) }));
 }
 function exportToCSV(data, filename) {
-    const formatData = (obj) => {
-        const formattedObj = {};
-        for (const key in obj) {
-            if (typeof obj[key] !== 'object') {
-                formattedObj[key] = obj[key];
-            }
-            else if (typeof obj[key] === 'object' && obj[key] != null) {
-                Object.keys(obj[key]).forEach((k) => {
-                    formattedObj[`${key}.${k}`] = obj[key][k];
-                });
-            }
-        }
-        return formattedObj;
-    };
-    const removeTimestamps = (obj) => {
-        const { createdAt, updatedAt, ...rest } = obj;
-        return rest;
-    };
-    const allKeys = new Set();
-    data.forEach((item) => {
-        Object.keys(formatData(removeTimestamps(item))).forEach((key) => allKeys.add(key));
-    });
-    const formattedData = data.map((item) => {
-        const newItem = formatData(removeTimestamps(item));
-        allKeys.forEach((key) => {
-            if (!(key in newItem)) {
-                newItem[key] = '';
-            }
-        });
-        return newItem;
-    });
     const csvConfig = mkConfig({
         useKeysAsHeaders: true,
+        showColumnHeaders: false,
         filename: filename,
     });
-    if (formattedData.length > 0) {
-        const csv = generateCsv(csvConfig)(formattedData);
+    if (data.length > 1) {
+        const csv = generateCsv(csvConfig)(data);
         download(csvConfig)(csv);
     }
     else {
@@ -97,7 +67,7 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
     useEffect(() => {
         setDisplayData(data.map((table_data) => selectedPage.tableFields.map((field) => field.access(table_data))));
     }, [data]);
-    return (_jsxs(_Fragment, { children: [_jsx(Header, { pages: pages, data: data, basePath: basePath }), _jsx(ThemeProvider, { theme: createTheme(), children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map((field, index) => ({
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { pages: pages, data: [selectedPage.tableFields.map((field) => field.name), ...displayData], basePath: basePath }), _jsx(ThemeProvider, { theme: createTheme(), children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map((field, index) => ({
                         accessorFn: (row) => {
                             if (typeof row[index] === 'boolean') {
                                 row[index] = String(row[index]);
@@ -120,7 +90,7 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
                                 if (rowActionsMenu) {
                                     rowActionsMenu.remove();
                                 }
-                            }, children: rowAction.name + ' ' + obj.row.original[0] }, index)));
+                            }, children: rowAction.name }, index)));
                     } }) }), _jsxs(Modal, { size: '6xl', isOpen: isOpen, onClose: onClose, children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: selectedAction.name }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { children: [selectedAction.fields && selectedAction.fields?.length > 0 ? (_jsx(GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId, rowObject: rowObject })) : (_jsx(Button, { colorScheme: "blue", mr: 3, onClick: () => {
                                             selectedAction.onSubmit(rowId);
                                             onClose();

package/dist/esm/src/schema.d.ts

@@ -18,7 +18,7 @@ export interface DropdownField {
     label: string;
     type: 'dropdown';
     validationSchema?: any;
-    options?: Option[] | undefined;
+    options?: Option[];
     getOptions?: () => Promise<Option[]>;
 }
 export interface ObjectField {
@@ -42,7 +42,7 @@ export interface Action {
 export interface RowAction {
     name: string;
     fields?: FormField[];
-    initialise?: (obj: any) => any;
+    initialise?: (obj: any) => Promise<any>;
     onSubmit: (obj1: any, obj2?: any, obj3?: any) => Promise<any>;
 }
 export interface PageSchema {

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

@@ -1,36 +1,65 @@
-// import axios from "axios";
+import axios from 'axios';
 import React from 'react';
-// const domain = "http://localhost:3001";
+const domain = 'http://localhost:3001';
 export const event = {
     name: 'Events',
     actions: [],
     rowActions: [
-    // {
-    //   name: "Delete Event",
-    //   fields: [
-    //     {
-    //       name: "input",
-    //       label: "Mock Field",
-    //       type: "string",
-    //       validationSchema: "",
-    //     },
-    //   ],
-    //   initialise: async (eventId: number) => {
-    //     const res = await axios.get(domain + "/events/" + eventId);
-    //     let obj: any = {};
-    //     obj.input = res.data.name;
-    //     return obj;
-    //   },
-    //   onSubmit: async (_: any, eventId: number) => {
-    //     const res = await axios.delete(
-    //       domain + "/events/" + eventId
-    //     );
-    //     return res.data;
-    //   },
-    // }
+        {
+            name: 'Delete Event - Variant 1', // without form
+            onSubmit: async (eventId) => {
+                // onSubmit has only param, the row's ID
+                const res = await axios.delete(domain + '/something/' + eventId);
+                return res.data;
+            },
+        },
+        {
+            name: 'Delete Event - Variant 2', // with form
+            fields: [
+                {
+                    name: 'input',
+                    label: 'Mock Field',
+                    type: 'string',
+                    validationSchema: '',
+                },
+                {
+                    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',
+                        },
+                    ],
+                },
+            ],
+            initialise: async (eventId) => {
+                const res = await axios.get(domain + '/events/' + eventId);
+                const obj = {};
+                obj.input = res.data.name;
+                return obj;
+            },
+            onSubmit: async (formValues, eventId) => {
+                // onSubmit has two params
+                // the first param - formValues, while the second is the row's ID
+                console.log(formValues);
+                const res = await axios.delete(domain + '/something/' + eventId);
+                return res.data;
+            },
+        },
     ],
     getRequest: async () => {
-        // const res = await axios.get(domain + "/events");
+        // const res = await axios.get(domain + '/events');
         // return res.data;
         return [];
     },

package/package.json

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