ui-soxo-bootstrap-core 2.4.24

package/core/models/pages/components/page-list/page-list.js

@@ -0,0 +1,248 @@
+/**
+ * Generic List accepts an array of fields to update any resource
+ */
+
+import React, { useState, useRef, useEffect, useContext } from 'react';
+
+import { useParams } from 'react-router-dom';
+
+import { Input, Typography, Modal, Space, Switch, Skeleton } from 'antd';
+
+import { Table, Card, Button, TableComponent } from './../../../../lib';
+
+import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const { Title } = Typography;
+
+const { Search } = Input;
+
+const PageList = ({ history, model, match, columns, relativeAdd = false, additional_queries = [], disableAddModal = model.disableAddModal, disableEditModal = model.disableEditModal }) => {
+
+    const actions = [];
+
+    match = useParams();
+
+    const [loading, setLoading] = useState(false);
+
+    const [records, setRecords] = useState([]);
+
+    const [view, setView] = useState(false);
+
+    const [visible, setVisible] = useState(false);
+
+    const [single, setSingle] = useState({});
+
+    const [config, setConfig] = useState({});
+
+    var [queryValue, setQueryValue] = useState('');
+
+    useEffect(() => {
+
+        getRecords();
+
+    }, []);
+
+    /**
+     *
+     */
+    const getRecords = () => {
+
+        setLoading(true);
+
+        // Get the records
+        return model.get({})
+
+            .then((res) => {
+
+                // setRecords(res.result);
+                var result = res.result;
+
+                if (Array.isArray(result)) {
+
+                    setRecords(result);
+
+                }
+
+                setLoading(false);
+
+            })
+            .catch((error) => {
+
+                setLoading(false);
+
+                console.log(error);
+            });
+    };
+
+
+    function changeView(result) {
+        setView(result);
+    }
+
+    function closeModal() {
+        setVisible(false);
+    }
+
+    // Options for the list
+    const [options, setOptions] = useState({
+        page: 1,
+        size: 20,
+    });
+
+    /**
+     * Edit the record
+     * 
+     * @param record 
+     */
+    function edit(record) {
+
+        setSingle({ ...record });
+
+        setVisible(true);
+    }
+
+
+    /**
+     * Function to store search value
+     */
+    function onSearch(event) {
+        setQueryValue(event.target.value);
+    }
+
+
+    /**
+    * Search in candidate visit List
+    */
+    let filtered = records.filter(record => {
+
+        let searchText = queryValue.toUpperCase();
+
+        if (queryValue) {
+
+            if (record.name !== null) {
+
+                if (record.name.toUpperCase().indexOf(searchText) != -1) {
+
+                    return true;
+                }
+            }
+        } else {
+
+            return true;
+
+        }
+    });
+
+    const cols = model.getColumnConfig({ options, model, actions: [], callback: getRecords, edit })
+
+    return (
+
+        <Card className="generic-list">
+            {/* Table Header */}
+            <div className="table-header">
+                <div className="table-title">
+
+
+                    <Search
+                        placeholder="Enter Search Value"
+                        allowClear
+                        // value={query}
+                        style={{ width: 300, marginTop: '10px', marginBottom: '20px' }}
+                        onChange={onSearch}
+                    />
+
+                    {/* <Title level={4}>{model.name}</Title> */}
+
+                    {/* <p>{loading ? 'Loading records' : `${record.length} records`}</p> */}
+                </div>
+
+                <div className="table-bar">
+                    {/* Table Filters */}
+                    <div className="table-filters">
+                        <Space direction="vertical" size={12}></Space>
+                    </div>
+                    {/* Table Filters Ends */}
+
+                    <div className="table-actions">
+                        <div className="button-container">
+                            <Space size="small">
+                                <Button onClick={getRecords} size={'small'}>
+                                    <ReloadOutlined />
+                                </Button>
+
+                                <Switch
+                                    defaultChecked
+                                    onChange={changeView}
+                                    checked={view}
+                                    checkedChildren={<OrderedListOutlined />}
+                                    unCheckedChildren={<PicCenterOutlined />}
+                                />
+
+                                {!model.ModalAddComponent ? null : (
+                                    <Button type="dashed" onClick={() => {
+
+                                        // setSingle(record);
+
+                                        setVisible(true);
+                                    }}>
+                                        Add
+                                    </Button>
+                                )}
+
+                            </Space>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Table Header Ends */}
+
+            {loading ? (
+                <Skeleton />
+            ) : (
+                <>
+                    <>
+                        {!view ? (
+                            <div className='card card-shadow'>
+                                <TableComponent
+                                    // rowKey={obj => obj.id}
+                                    // ref={(ref) => { tableRef = ref }}
+                                    loading={loading}
+                                    dataSource={filtered ? filtered : records}
+                                    columns={cols}
+                                ></TableComponent>
+                            </div>
+                        ) : (
+                            <CardList model={model} data={records} />
+                        )}
+                    </>
+                </>
+            )}
+
+            {/* Add Modal */}
+            <Modal width="80%" destroyOnClose confirmLoading={loading} visible={visible} onCancel={closeModal} footer={null}>
+                <model.ModalAddComponent
+                    config={config}
+                    match={match}
+                    model={model}
+                    additional_queries={additional_queries}
+                    formContent={single}
+                    callback={() => {
+                        closeModal();
+
+                        getRecords();
+                    }}
+                />
+                {/* <FormCreator formContent={{ [model]: {} }} modelIndex="requestId" model={model} onSubmit={createRecord} config={step} /> */}
+            </Modal>
+        </Card>
+    );
+}
+
+function CardList({ model, data, url, ...props }) {
+    return data.map((record, index) => {
+        return <model.Card record={record} model={model} index={index} key={index} {...record} {...props} />;
+    });
+}
+export default PageList;
+

package/core/models/pages/pages.js

@@ -0,0 +1,142 @@
+// @ts-nocheck
+import React from 'react';
+import Base from './base';
+
+// Libraries
+import { Link } from 'react-router-dom';
+import { Tag } from 'antd';
+
+// Utils
+import { DateUtils } from './../../lib/';
+
+//Componenets
+import PageAdd from '../core/components/pages/page-add/page-add';
+import PageList from '../core/components/pages/page-list/page-list';
+import PageDetails from '../core/components/pages/page-details/page-details';
+
+
+class Pages extends Base {
+    constructor() {
+        super();
+
+        this.fields = [
+            {
+                field: 'name',
+                caption: 'Name',
+            },
+
+            {
+                field: 'description',
+                caption: 'Description',
+            },
+
+            {
+                field: 'path',
+                caption: 'Path',
+            },
+        ];
+    }
+
+    get getEndpoint() {
+        return 'pagedefinitions';
+    }
+
+    get path() {
+        return `pagedefinitions`;
+    }
+
+    get getName() {
+        return this.modelName + `s`;
+    }
+
+    get modelName() {
+        return `pagedefinition`;
+    }
+
+    get route() {
+        return 'pages';
+    }
+
+    /**
+     *
+     */
+    get columns() {
+        return [
+            {
+                caption: 'Name',
+                field: 'name',
+                key: 'name',
+            },
+
+            {
+                caption: 'Description',
+                field: 'description',
+                key: 'description',
+            },
+
+            {
+                caption: 'Path',
+                field: 'path',
+                key: 'path',
+            },
+
+            {
+                caption: 'Created By',
+                field: 'created_by',
+                key: 'created_by',
+            },
+
+            {
+                caption: 'Created at',
+                field: 'created_at',
+                key: 'created_at',
+                render: (ele) => {
+                    return ele.created_at ? DateUtils.formatDate(ele.created_at) : null
+                },
+            },
+        ];
+    }
+
+
+    
+    ListComponent = PageList;
+
+    DetailComponent = PageDetails;
+
+    ModalAddComponent = (props) => <PageAdd model={this} {...props} />;
+
+
+    /**
+     * load all Pages
+     *
+     * @param {*} menu
+     * @returns
+     */
+     getPages = () => {
+
+        // return this.getData({ path: `menus/get-menus`, queries: queries}).then((result) => {
+        //     return result;
+        // });
+
+        return this.get({ url: `pagedefinitions`}).then((result) => {
+                return result;
+            });
+
+    }
+
+    /**
+     * load the detail of Page
+     *
+     * @param {*} page
+     * @returns
+     */
+     getDetail = (id) => {
+        return this.getRecord(id).then((result) => {
+            return result;
+        });
+    };
+
+}
+
+
+export default Pages;

package/core/models/pages.js

@@ -0,0 +1,142 @@
+// @ts-nocheck
+import React from 'react';
+import Base from './base/base';
+
+import { Link } from 'react-router-dom';
+
+import { Tag } from 'antd';
+
+// Utils
+import { DateUtils } from './../lib/';
+
+// Components
+import PageAdd from './pages/components/page-add/page-add';
+import PageList from './pages/components/page-list/page-list';
+import PageDetails from './pages/components/page-details/page-details';
+
+
+class Pages extends Base {
+    constructor() {
+        super();
+
+        this.fields = [
+            {
+                field: 'name',
+                caption: 'Name',
+            },
+
+            {
+                field: 'description',
+                caption: 'Description',
+            },
+
+            {
+                field: 'path',
+                caption: 'Path',
+            },
+        ];
+    }
+
+    get getEndpoint() {
+        return 'core-page-definitions';
+    }
+
+    get path() {
+        return `pages`;
+    }
+
+    get getName() {
+        return this.modelName + `s`;
+    }
+
+    get modelName() {
+        return `page`;
+    }
+
+    get route() {
+        return 'pages';
+    }
+
+    /**
+     *
+     */
+    get columns() {
+        return [
+            {
+                caption: 'Name',
+                field: 'name',
+                key: 'name',
+            },
+
+            {
+                caption: 'Description',
+                field: 'description',
+                key: 'description',
+            },
+
+            {
+                caption: 'Path',
+                field: 'path',
+                key: 'path',
+            },
+
+            // {
+            //     caption: 'Created By',
+            //     field: 'created_by',
+            //     key: 'created_by',
+            // },
+
+            {
+                caption: 'Created at',
+                field: 'created_at',
+                key: 'created_at',
+                render: (ele) => {
+                    return ele.created_at ? DateUtils.formatDate(ele.created_at) : null
+                },
+            },
+        ];
+    }
+
+
+
+    ListComponent = PageList;
+
+    DetailComponent = PageDetails;
+
+    ModalAddComponent = (props) => <PageAdd model={this} {...props} />;
+
+
+    /**
+     * load all Pages
+     *
+     * @param {*} menu
+     * @returns
+     */
+    getPages = () => {
+
+        // return this.getData({ path: `menus/get-menus`, queries: queries}).then((result) => {
+        //     return result;
+        // });
+
+        return this.get({ url: `core-page-definitions` }).then((result) => {
+            return result;
+        });
+
+    }
+
+    /**
+     * load the detail of Page
+     *
+     * @param {*} page
+     * @returns
+     */
+    getDetail = (id) => {
+        return this.getRecord(id).then((result) => {
+            return result;
+        });
+    };
+
+}
+
+
+export default Pages;