ui-soxo-bootstrap-core 2.4.24

package/core/lib/modules/generic/generic-add/generic-add.js

@@ -0,0 +1,213 @@
+/**
+ * Generic Edit Form create accepts an array of fields to update any resource
+ */
+
+import React, { useState, useEffect, useContext } from "react";
+
+import { Typography, Skeleton } from "antd";
+
+import { withRouter } from "react-router-dom";
+
+import "./generic-add.scss";
+
+import { GlobalContext } from "../../../Store";
+
+import { Columns, LookupValues } from "../../../../lib/models/";
+
+import FormCreator from "./../../../models/forms/components/form-creator/form-creator";
+
+const { Title } = Typography;
+
+/**
+ * Generic List
+ *
+ * @param {*} param0
+ */
+function GenericAdd({
+  match,
+  menu,
+  model,
+  additional_queries = [],
+  columns: cols,
+  history,
+  schema,
+  formContent,
+  callback,
+  ...props
+}) {
+  console.log("a", model);
+
+  const { user } = useContext(GlobalContext);
+
+  const [loading, setLoading] = useState(true);
+
+  const [columns, setColumns] = useState([]);
+
+  useEffect(() => {
+    setLoading(true);
+
+    if (model) {
+      setColumns(model.columns || model.fields);
+
+      setLoading(false);
+    } else {
+      loadConfiguration(menu.model.id);
+    }
+  }, []);
+
+  /**
+   * Load the configuration
+   */
+  async function loadConfiguration(id) {
+    var queries = [
+      {
+        field: "model_id",
+        value: id,
+      },
+    ];
+
+    const { columns } = await Columns.get(queries);
+
+    let mapped = await Promise.all(
+      columns.map((column) => getColumnDetail(column))
+    );
+
+    console.log(mapped);
+
+    setColumns([...mapped]);
+
+    setLoading(false);
+
+    // return Columns.get(queries).then((result) => {
+
+    //     let mapped = result.columns.map((record) => {
+
+    //         return LookupValues.getRecord(record.column_type_id).then((result) => {
+
+    //             return {
+    //                 field: record.field,
+    //                 caption: record.caption,
+    //                 // caption: record.caption,
+    //                 key: record.field,
+    //                 type: result.value
+    //             }
+    //         })
+    //     });
+
+    //     console.log(mapped);
+
+    //     setColumns(
+    //         [
+    //             ...mapped,
+    //         ]
+    //     )
+
+    //     setLoading(false);
+
+    // })
+  }
+
+  /**
+   *
+   */
+  const getColumnDetail = async (column) => {
+    return LookupValues.getRecord(column.column_type_id).then((result) => {
+      return {
+        field: column.field,
+        caption: column.caption,
+        key: column.field,
+        type: result.value,
+        ...column,
+      };
+    });
+  };
+
+  /**
+   *
+   *
+   * @param {*} values
+   */
+  const onSubmit = (values) => {
+    // values = {
+    //     ...values,
+    //     additional_queries
+    // }
+    //
+    additional_queries.forEach((query) => {
+      values[query.field] = query.value;
+    });
+
+    // If there is a change property change , change it to some other format
+    columns.forEach((entry) => {
+      if (entry.changeTo) {
+        values[entry.field] = entry.changeTo(values[entry.field]);
+      }
+    });
+
+    if (formContent && formContent.id) {
+      return model.update(formContent.id, values, user).then(() => {
+        // history.goBack();
+
+        callback();
+      });
+    } else {
+      return model.add(values, user).then((result) => {
+        // history.goBack();
+
+        callback();
+
+        console.log(result);
+      });
+    }
+  };
+
+  // Override model fields by columns
+  // model.fields = columns;
+
+  return (
+    <section className="generic-list">
+      {/* Table Header */}
+      <div className="table-header">
+        <div className="table-title">
+          {/* <Title level={4}>{model.name}</Title> */}
+
+          <p>Add new record below</p>
+        </div>
+
+        <div className="table-actions">
+          <div className="button-container">
+            {/* <Button onClick={refresh} type="secondary" size={'small'}>
+                            <ReloadOutlined />
+                        </Button> */}
+          </div>
+        </div>
+      </div>
+
+      {/* Table Header Ends */}
+      {loading ? (
+        <Skeleton type="listing" />
+      ) : (
+        <>
+          <div className="card">
+            <FormCreator
+              formContent={{
+                // [model.name]: {
+                ...formContent,
+                // }
+              }}
+              fields={columns}
+              modelIndex="requestId"
+              model={model}
+              onSubmit={onSubmit}
+              callback={() => {
+                history.goBack();
+              }}
+            />
+          </div>
+        </>
+      )}
+    </section>
+  );
+}
+
+export default withRouter(GenericAdd);

package/core/lib/modules/generic/generic-detail/generic-detail.js

@@ -0,0 +1,199 @@
+
+/**
+ * Generic Detail accepts an array of fields to update any resource
+ */
+
+import React, { useState, useEffect, useContext } from "react"
+
+import { Link } from 'react-router-dom'
+
+import { Typography, Button, Descriptions, Input, Switch, Space, Tag } from 'antd';
+
+import { withRouter } from 'react-router-dom'
+
+import './generic-detail.scss'
+
+import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
+
+
+import useDeviceDetect from "../../../hooks/device-detect";
+
+import PlaceHolder from "../../../components/ui_elements/PlaceHolder";
+
+import { GlobalContext } from "../../../Store";
+
+
+const { Title } = Typography;
+
+/**
+ * Generic List 
+ * 
+ * @param {*} param0 
+ */
+function GenericDetail({
+    match,
+    model,
+    columns: cols,
+    schema = { custom_actions: [] },
+    disableEdit = schema.disableEdit,
+    menu
+
+}) {
+
+    const [record, setRecords] = useState([]);
+
+    const { isMobile } = useDeviceDetect();
+
+    const { user } = useContext(GlobalContext);
+
+    // const city = user.locations[0];
+
+    const { params } = match;
+
+    const { city } = params;
+
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+
+        loadData();
+
+        // console.log('hello');
+
+    }, []);
+
+    const loadData = () => {
+
+        setLoading(true);
+
+        getRecords(schema)
+    }
+
+    const getRecords = (schema) => {
+
+        // Get the model by queries
+        return model.getRecord(match.params.id, model).then((result) => {
+
+            setRecords(result);
+
+            console.log(result);
+
+            setLoading(false);
+                                                                                            
+        })
+    }
+
+
+    function refresh() {
+
+        loadData();
+    }
+
+    return (
+        <section className="generic-list">
+
+            {/* Table Header */}
+            <div className="table-header">
+
+                <div className="table-title">
+                    <Title level={4}>
+                        {model.name}
+                    </Title>
+                </div>
+
+                <div className="table-actions">
+
+                    <div className="button-container">
+
+                        {/* {menu && menu.id && <CustomActions menu={menu} />} */}
+
+                        <Button onClick={refresh} type="secondary" size={'small'}>
+                            <ReloadOutlined />
+                        </Button>
+
+                        {
+                            disableEdit
+                                ?
+                                null
+                                :
+                                <Space size="middle">
+                                    <Button type="dashed">
+                                        <Link to={`/${model.name}/${match.params.id}/edit`}>
+                                            Edit
+                                        </Link>
+                                    </Button>
+                                </Space>
+                        }
+
+                    </div>
+                </div>
+            </div>
+
+            {/* Table Header Ends */}
+
+            {
+                loading ? (
+                    <PlaceHolder type="listing" />
+                ) : <>
+
+                    <div className="card">
+
+                        <Descriptions title="Detail">
+
+                            {
+                                Object.keys(record).map((field, key) => {
+
+
+                                    if (record[field]) {
+
+                                        if (typeof record[field] === 'string' || typeof record[field] === 'number') {
+
+                                            return <Descriptions.Item key={key} label={field}>{record[field]}</Descriptions.Item>
+
+                                        } else if (typeof record[field] === 'object') {
+
+                                            let nested = record[field];
+
+                                            Object.keys(record[field]).map((entry) => {
+
+                                                return <Descriptions.Item key={key} label={entry}>{record[field][entry]}</Descriptions.Item>
+
+                                            })
+
+
+                                        } else {
+                                            console.log(field, record[field]);
+                                        }
+
+                                    }
+
+                                })
+                            }
+
+                            {/* {cols.map((column) => <Descriptions.Item label={column.caption}>{record[column.field]}</Descriptions.Item>)} */}
+
+                        </Descriptions>
+
+                        {/* 
+                            <RecordForm
+                                record={record[model]}
+                                // index={id}
+                                // formContent={{}}
+                                // modelIndex='requestId'
+                                model={schema.model}
+                                step={schema.form}
+                                callback={(params, values) => {
+
+                                }}
+                            /> */}
+
+                    </div>
+
+                </>
+            }
+
+        </section>
+    );
+}
+
+export default withRouter(GenericDetail);

package/core/lib/modules/generic/generic-edit/generic-edit.js

@@ -0,0 +1,120 @@
+/**
+ * Generic Edit Form create accepts an array of fields to update any resource
+ */
+
+import React, { useState, useEffect, useContext } from 'react';
+
+import { Typography, Button, Input } from 'antd';
+
+import { withRouter } from 'react-router-dom';
+
+import './generic-edit.scss';
+
+import { ReloadOutlined } from '@ant-design/icons';
+
+import useDeviceDetect from '../../../hooks/device-detect';
+
+import PlaceHolder from '../../../components/ui_elements/PlaceHolder';
+
+import { GlobalContext } from '../../../Store';
+
+import FormCreator from './../../../models/forms/components/form-creator/form-creator';
+
+const { Title } = Typography;
+
+/**
+ * Generic List
+ *
+ * @param {*} param0
+ */
+function GenericEdit({ history, match, model, columns: cols }) {
+    const [record, setRecord] = useState([]);
+
+    const { isMobile } = useDeviceDetect();
+
+    const { user } = useContext(GlobalContext);
+
+    const { params } = match;
+
+    const { city } = params;
+
+    const [loading, setLoading] = useState(false);
+
+    const step = {
+        fields: cols,
+    };
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    const loadData = () => {
+        setLoading(true);
+
+        // Get the model by queries
+        return model.getRecord(match.params.id, model).then((result) => {
+            setRecord(result);
+
+            setLoading(false);
+        });
+    };
+
+    /**
+     *
+     *
+     * @param {*} values
+     */
+    const onSubmit = (values) => {
+        return model.update(match.params.id, values, user).then(() => {
+            history.goBack();
+        });
+    };
+
+    function refresh() {
+        loadData();
+    }
+
+    return (
+        <section className="generic-list">
+            {/* Table Header */}
+            <div className="table-header">
+                <div className="table-title">
+                    <Title level={4}>{model.name}</Title>
+
+                    <p>Edit the record below</p>
+                </div>
+
+                <div className="table-actions">
+                    <div className="button-container">
+                        <Button onClick={refresh} type="secondary" size={'small'}>
+                            <ReloadOutlined />
+                        </Button>
+                    </div>
+                </div>
+            </div>
+
+            {/* Table Header Ends */}
+
+            {loading ? (
+                <PlaceHolder type="listing" />
+            ) : (
+                <>
+                    <div className="card">
+                        <FormCreator
+                            formContent={record}
+                            modelIndex="requestId"
+                            model={model}
+                            onSubmit={onSubmit}
+                            config={step}
+                            callback={() => {
+                                history.goBack();
+                            }}
+                        />
+                    </div>
+                </>
+            )}
+        </section>
+    );
+}
+
+export default withRouter(GenericEdit);

package/core/lib/modules/generic/generic-list/ExportReactCSV.js

@@ -0,0 +1,62 @@
+/**
+ * Exports the provided data as an `.xlsx` Excel file using the `xlsx` and `file-saver` libraries.
+ *
+ * Props:
+ * @param {Array<Object>} csvData - The data array to export.
+ * @param {Array<{ label: string, key: string }>} [headers] - Optional column headers and field mappings.
+ * @param {string} [fileName='Report.xlsx'] - Optional name for the downloaded Excel file.
+ */
+
+import React from 'react';
+// Import XLSX library to handle Excel file creation
+import * as XLSX from 'xlsx';
+// Import saveAs from file-saver to trigger file download in browser
+import { saveAs } from 'file-saver';
+import { Button } from 'antd';
+import { Trans } from 'react-i18next';
+
+export const ExportReactCSV = ({ csvData, headers, fileName,title }) => {
+  /**
+   * exportToExcel function
+   * Triggered on button click, generates and downloads an Excel file
+   */
+
+  const exportToExcel = () => {
+    // if (!csvData?.length) return;
+
+    let worksheet;
+    // If headers are provided, use them to create the sheet with custom columns
+    if (headers?.length) {
+      // Extract label names for the header row
+      const headerLabels = headers.map((h) => h.label);
+      // Map data rows according to the headers' key order
+      const rows = csvData.map((row) => headers.map((h) => row[h.key]));
+      // Create a worksheet from an array of arrays (header + rows)
+      const data = [[title || "Report"], [], headerLabels, ...rows];
+      // worksheet = XLSX.utils.aoa_to_sheet([headerLabels, ...rows]);
+      worksheet = XLSX.utils.aoa_to_sheet(data);
+    } else {
+      // If no headers, convert JSON data directly to a worksheet
+      worksheet = XLSX.utils.json_to_sheet(csvData);
+    }
+    // Create a new workbook
+    const workbook = XLSX.utils.book_new();
+    // Append the worksheet to the workbook with the name 'Sheet1'
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+    // Write workbook to a buffer as an array
+    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+    // Create a Blob object from the buffer with correct MIME type
+    const blob = new Blob([excelBuffer], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    });
+    const flName = fileName || 'Report.xlsx';
+    // Trigger download using file-saver
+    saveAs(blob, flName);
+  };
+  // Render an Ant Design Button that triggers the Excel export
+  return (
+    <Button type="secondary" size="small" onClick={exportToExcel}>
+      <Trans i18nKey="Download" />
+    </Button>
+  );
+};