admin_lsac 1.3.2 → 1.4.0

package/server/package.json

@@ -1,18 +0,0 @@
-{
-    "name": "server",
-    "version": "1.0.0",
-    "description": "",
-    "main": "deploy.js",
-    "scripts": {
-      "start": "node deploy.js"
-    },
-    "author": "",
-    "license": "ISC",
-    "dependencies": {
-      "dotenv": "^16.0.1",
-      "express": "^4.18.1",
-      "fs": "^0.0.1-security",
-      "https": "^1.0.0",
-      "path": "^0.12.7"
-    }
-  }

package/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/App.tsx

@@ -1,50 +0,0 @@
-import { ChakraProvider } from "@chakra-ui/react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { AdminPage } from "./components/Page";
-import { pageToUrl } from "./components/Page";
-import { PageSchema } from "./schema/schema";
-
-function App({
-  pages,
-  basePath,
-}: {
-  pages: PageSchema[];
-  basePath: string;
-}) {
-  return (
-    <ChakraProvider>
-      <BrowserRouter>
-        <Routes>
-          {pages.map((page) => (
-            <Route
-              path={`${basePath}/${pageToUrl(page)}`}
-              element={
-                <AdminPage
-                  pages={pages}
-                  selectedPage={page}
-                  basePath={basePath}
-                  apiURL="http://localhost:3001"
-                />
-              }
-            />
-          ))}
-          {pages[0] ? (
-            <Route
-              path={`${basePath}/*`}
-              element={
-                <AdminPage
-                  pages={pages}
-                  selectedPage={pages[0]}
-                  basePath={basePath}
-                  apiURL="http://localhost:3001"
-                />
-              }
-            />
-          ) : null}
-        </Routes>
-      </BrowserRouter>
-    </ChakraProvider>
-  );
-}
-
-export default App;

package/src/components/GenericForm.tsx

@@ -1,308 +0,0 @@
-import {
-  Box,
-  Button,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  Select,
-} from "@chakra-ui/react";
-import { Field, Form, Formik, FieldArray, getIn } from "formik";
-import {
-  Action,
-  FormField,
-  SimpleField,
-  DropdownField,
-  RowAction,
-} from "../schema/schema";
-import * as Yup from "yup";
-import Swal from "sweetalert2";
-import { useEffect, useState } from "react";
-
-interface RowActionWithInitialise extends RowAction {
-  initialise: (obj: any) => any;
-}
-
-interface GenericFormProps {
-  action: Action | RowAction;
-  onClose?: () => void;
-  rowId?: number;
-}
-
-function parseValidation(fields: FormField[] | undefined) {
-  if (!fields) {
-    return {};
-  }
-
-  return fields.reduce((acc: any, field) => {
-    if (
-      field.type !== "dropdown" &&
-      field.type !== "object" &&
-      field.type !== "array"
-    ) {
-      acc[field.name] = field.validationSchema;
-    } else if (field.type === "array") {
-      if (field.element.type === "dropdown") {
-        acc[field.name] = Yup.array().of(Yup.string().required());
-      } else if (field.element.type === "object") {
-        acc[field.name] = Yup.array().of(
-          Yup.object(parseValidation(field.element.fields))
-        );
-      } else {
-        acc[field.name] = Yup.array().of(field.element.validationSchema);
-      }
-    } else if (field.type === "object") {
-      acc[field.name] = Yup.object(parseValidation(field.fields));
-    }
-    if (field.type === "dropdown") {
-      acc[field.name] = Yup.string().required();
-    }
-    return acc;
-  }, {});
-}
-
-function generateSingleField(
-  formfield: SimpleField | DropdownField,
-  fieldName: string,
-  key: any
-) {
-  return (
-    <Field name={fieldName} key={key}>
-      {({ field, form }: any) => (
-        <FormControl
-          isInvalid={
-            getIn(form.touched, fieldName) && getIn(form.errors, fieldName)
-          }
-        >
-          <FormLabel marginTop={2}>{formfield.label}</FormLabel>
-
-          {formfield.type === "string" || formfield.type === "number" ? (
-            <Input
-              {...field}
-              type={formfield.type === "number" ? "number" : "text"}
-              placeholder=""
-            />
-          ) : formfield.type === "file" ? (
-            <Input
-              type="file"
-              name={fieldName}
-              onChange={(event) => {
-                if (event.currentTarget.files != null) {
-                  form.setFieldValue(fieldName, event.currentTarget.files[0]);
-                }
-              }}
-            />
-          ) : (
-            <Select {...field} defaultValue="">
-              <option disabled={true} value="">
-                Select an option!
-              </option>
-              {(formfield as DropdownField).options?.map((option, key) => (
-                <option key={key} value={`${option.value}`}>
-                  {option.display}
-                </option>
-              ))}
-            </Select>
-          )}
-
-          <FormErrorMessage>{getIn(form.errors, fieldName)}</FormErrorMessage>
-        </FormControl>
-      )}
-    </Field>
-  );
-}
-
-function parseFields(
-  fields: FormField[] | undefined,
-  previous?: string | undefined
-) {
-  if (!fields) {
-    return [];
-  }
-
-  const computedFields = fields.map((formfield, key) => {
-    let fieldName: string =
-      previous !== undefined ? previous + "." + formfield.name : formfield.name;
-
-    if (formfield.type === "object") {
-      const objectFields = parseFields(formfield.fields, fieldName);
-      return <FormControl key={fieldName}>{objectFields}</FormControl>;
-    } else if (formfield.type === "array") {
-      return (
-        <FieldArray name={fieldName}>
-          {({ remove, push, form }) => (
-            <div>
-              <FormLabel marginTop={2}>{formfield.label}</FormLabel>
-              {getIn(form.values, fieldName).length > 0 &&
-                getIn(form.values, fieldName).map(
-                  (element: any, index: number) => (
-                    <Box paddingLeft={10}>
-                      <h4>
-                        <b>{`${fieldName}.${index}`}</b>
-                      </h4>
-                      <Box paddingLeft={10}>
-                        {formfield.element.type === "object"
-                          ? parseFields(
-                              formfield.element.fields,
-                              `${fieldName}.${index}`
-                            )
-                          : generateSingleField(
-                              formfield.element,
-                              `${fieldName}.${index}`,
-                              key
-                            )}
-                      </Box>
-                      <Button
-                        type="button"
-                        colorScheme="red"
-                        marginY={2}
-                        onClick={() => remove(index)}
-                      >
-                        Remove {`${fieldName}.${index}`}
-                      </Button>
-                    </Box>
-                  )
-                )}
-
-              <Button
-                type="button"
-                marginY={2}
-                colorScheme="blue"
-                onClick={() => {
-                  let value = undefined;
-
-                  if (formfield.element.type === "object") {
-                    value = getCustomInitialValues(formfield.element.fields);
-                  } else {
-                    value = getCustomInitialValues([formfield.element])[0];
-                  }
-
-                  push(value);
-                }}
-              >
-                Add {fieldName}
-              </Button>
-            </div>
-          )}
-        </FieldArray>
-      );
-    } else {
-      return generateSingleField(formfield, fieldName, key);
-    }
-  });
-
-  return computedFields;
-}
-
-function getCustomInitialValues(fields: FormField[] | undefined) {
-  let obj: any = {};
-
-  if (!fields) {
-    return obj;
-  }
-
-  fields.forEach((field) => {
-    if (field.type === "array") obj[field.name] = [];
-    else if (field.type === "object")
-      obj[field.name] = getCustomInitialValues(field.fields);
-    else if (field.type === "string") obj[field.name] = "";
-    else if (field.type === "number") obj[field.name] = 0;
-    else obj[field.name] = null;
-  });
-
-  return obj;
-}
-
-async function getInitialValues(action: Action | RowAction, rowId: number | undefined) {
-  let obj: any = {};
-  if ((action as RowAction).initialise) {
-    obj = await (action as RowActionWithInitialise).initialise(rowId);
-  }
-  const customInitialValues = getCustomInitialValues(action.fields);
-  return Object.assign({}, customInitialValues, obj);
-}
-
-async function setOptions(fields: FormField[] | undefined) {
-  if (!fields) {
-    return;
-  }
-
-  const promises = fields.map(async (field) => {
-    if (field.type === "dropdown") field.options = await field.getOptions();
-    else if (field.type === "array") await setOptions([field.element]);
-    else if (field.type === "object") await setOptions(field.fields);
-  });
-
-  await Promise.all(promises);
-}
-
-export function GenericForm({ action, onClose, rowId }: GenericFormProps) {
-  const [formFields, setFormFields] = useState<any[]>(
-    parseFields(action.fields)
-  );
-  const [initialValues, setInitialValues] = useState<any>(getCustomInitialValues(action.fields));
-  const [validationSchema, setValidationSchema] = useState<any>(parseValidation(action.fields));
-
-  useEffect(() => {
-    setOptions(action.fields).then(() => {
-      setFormFields(parseFields(action.fields));
-    });
-  }, []);
-
-  const handleFormReset = async () => {
-    const newInitialValues = await getInitialValues(action, rowId);
-    console.log(newInitialValues)
-    setInitialValues(newInitialValues);
-  };
-
-  if (!action.fields) return <></>;
-  return (
-    <>
-      <Formik
-        enableReinitialize={true}
-        initialValues={initialValues}
-        validationSchema={Yup.object(validationSchema)}
-        onReset={handleFormReset}
-        onSubmit={async (values) => {
-          try {
-            let res;
-            if (rowId) res = await action.onSubmit(values, rowId);
-            else res = await action.onSubmit(values);
-
-            if (onClose) onClose();
-
-            Swal.fire("Ok");
-          } catch (e: any) {
-            if (onClose) onClose();
-            const err = e.request.response;
-
-            Swal.fire({
-              text: "Error: " + err,
-            });
-          }
-        }}
-      >
-        {({ isSubmitting }) => (
-          <Form>
-            {formFields}
-            <Button
-              mt={4}
-              colorScheme="teal"
-              isLoading={isSubmitting}
-              type="submit"
-            >
-              Submit
-            </Button>
-            <Button
-              mt={4}
-              colorScheme="teal"
-              type="reset"
-            >
-                Initialise Form
-            </Button>
-          </Form>
-        )}
-      </Formik>
-    </>
-  );
-}

package/src/components/Page.tsx

@@ -1,243 +0,0 @@
-import { useEffect, useState } from "react";
-import { ChakraProvider } from "@chakra-ui/react";
-import { PageSchema, Action } from "../schema/schema";
-import {
-  Button,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  useDisclosure,
-  ModalOverlay,
-  ModalContent,
-  ModalCloseButton,
-  Box,
-  Stack,
-} from "@chakra-ui/react";
-import { GenericForm } from "./GenericForm";
-import { ThemeProvider } from "@emotion/react";
-import { createTheme } from "@mui/material/styles";
-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";
-
-export function pageToUrl(page: PageSchema): string {
-  return `${page.name.toLowerCase().replace(" ", "_")}`;
-}
-
-function Header({
-  pages,
-  data,
-  basePath,
-}: {
-  pages: PageSchema[];
-  data: any[];
-  basePath: string;
-}) {
-  return (
-    <Box background="blue.50" padding={1}>
-      <Stack
-        margin={3}
-        direction="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Stack margin={4} gap={10} direction="row" alignItems="center">
-          {pages.map((p) => (
-            <Box as="a" href={`${basePath}/${pageToUrl(p)}`}>
-              {p.name}
-            </Box>
-          ))}
-        </Stack>
-        <Stack direction="row">
-          <Button
-            colorScheme="red"
-            onClick={() => {
-              const filename = prompt("Enter filename:");
-              if (filename) exportToCSV(data, filename);
-            }}
-          >
-            Export Data
-          </Button>
-        </Stack>
-      </Stack>
-    </Box>
-  );
-}
-
-function exportToCSV(data: any[], filename: string) {
-  const formatImageData = (obj: any) => {
-    const formattedObj: any = {};
-    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: any) => {
-          formattedObj[`${key}.${k}`] = obj[key][k];
-        });
-      }
-    }
-    return formattedObj;
-  };
-
-  const formattedData = data.map(formatImageData);
-
-  const csvConfig = mkConfig({
-    useKeysAsHeaders: true,
-    filename: filename,
-  });
-
-  if (formattedData.length > 0) {
-    const csv = generateCsv(csvConfig)(formattedData);
-    download(csvConfig)(csv);
-  } else {
-    Swal.fire({
-      title: "Error while exporting CSV!",
-      text: "There is no data to export.",
-    });
-  }
-}
-
-export function AdminPage({
-  pages,
-  selectedPage,
-  basePath,
-  apiURL=''
-}: {
-  pages: PageSchema[];
-  selectedPage: PageSchema;
-  basePath: string;
-  apiURL?: string;
-}) {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const [selectedAction, setSelectedAction] = useState({} as Action);
-  const [data, setData] = useState<any[]>([]);
-  const [displayData, setDisplayData] = useState<any[][]>([]);
-  const [rowId, setRowId] = useState<number>();
-  const [refetch, setRefetch] = useState<boolean>(false);
-  const [socket, setSocket] = useState(io);
-  newSocket(setSocket, 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(() => {
-    setDisplayData(
-      data.map((table_data) =>
-        selectedPage.tableFields.map((field) => field.access(table_data))
-      )
-    );
-  }, [data]);
-
-  return (
-    <>
-      <Header pages={pages} data={data} basePath={basePath} />
-
-      <ThemeProvider theme={createTheme()}>
-        <MaterialReactTable
-          columns={selectedPage.tableFields.map((field, index) => ({
-            accessorFn: (row: any) => row[index],
-            header: field.name,
-          }))}
-          data={displayData}
-          muiTableContainerProps={{ sx: { maxHeight: "70vh" } }}
-          enableColumnResizing
-          enableColumnPinning
-          enableGlobalFilterModes
-          enablePagination={true}
-          paginationDisplayMode="pages"
-          enableRowVirtualization
-          rowVirtualizerOptions={{ overscan: 20 }}
-          renderTopToolbarCustomActions={() => (
-            <ChakraProvider>
-              <Stack margin={0} padding={3} direction="row">
-                {selectedPage.actions.map((action) => (
-                  <Button
-                    colorScheme="blue"
-                    onClick={() => {
-                      setSelectedAction(action);
-                      onOpen();
-                    }}
-                  >
-                    {action.name}
-                  </Button>
-                ))}
-              </Stack>
-            </ChakraProvider>
-          )}
-          enableRowActions
-          renderRowActionMenuItems={(obj: any) => {
-            return selectedPage.rowActions.map((rowAction) => (
-              <MenuItem
-                onClick={() => {
-                  setSelectedAction(rowAction);
-                  setRowId(obj.row.original[0]);
-                  onOpen();
-
-                  const rowActionsMenu = document.querySelector(
-                    ".MuiPaper-root.MuiPopover-paper.MuiMenu-paper"
-                  );
-                  if (rowActionsMenu) {
-                    rowActionsMenu.remove();
-                  }
-                }}
-              >
-                {rowAction.name + " " + obj.row.original[0]}
-              </MenuItem>
-            ));
-          }}
-        />
-      </ThemeProvider>
-
-      <Modal size={"6xl"} isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>{selectedAction.name}</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            {selectedAction.fields && selectedAction.fields?.length > 0 ? (
-              <GenericForm
-                action={selectedAction}
-                onClose={onClose}
-                rowId={rowId}
-              />
-            ) : (
-              <Button
-                colorScheme="blue"
-                mr={3}
-                onClick={() => {
-                  selectedAction.onSubmit(rowId);
-                  onClose();
-                }}
-              >
-                Confirm Action
-              </Button>
-            )}
-            <Button colorScheme="red" mr={3} onClick={onClose}>
-              Close
-            </Button>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}

package/src/index.css

@@ -1,13 +0,0 @@
-html, body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

package/src/index.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-import { pages } from "./schema/schema.config";
-
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App pages={pages} basePath="" />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>