ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +1,705 @@
+/**
+ * Generic List 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, Table, Modal, Space, Switch, Popconfirm, message, Skeleton } from 'antd';
+ 
+ import { withRouter } from 'react-router-dom';
+ 
+ import './generic-list.scss';
+ 
+ import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, DeleteOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
+ 
+ import TableSettings from '../table-settings/table-settings';
+ 
+ import { PortletTable } from '../../../components';
+  
+ import { ModelColumns, UserPreferences } from '../../../../lib/models';
+ 
+ import { Location } from '../../../utils';
+ 
+ import CustomActions from '../../../models/actions/components/custom-actions/custom-actions';
+ 
+ import { MenuGlobalContext } from './../../../components/menu-context/menu-context';
+ 
+ import moment from 'moment';
+ 
+ const { Title } = Typography;
+ 
+ /**
+  * Generic List
+  *
+  * @param {*} param0
+  */
+ function GenericList({
+ 
+     
+     menu = {},
+     match,
+     model = {
+         columns: [],
+         actions: [],
+         queries: [],
+         filterDate: () => { },
+     },
+     actions = [],
+     queries = model.queries,
+     disableAdd = model.disableAdd,
+     disableEdit = model.disableEdit,
+     disableDelete = model.disableDelete,
+     disableSelect = model.disableSelect,
+     disableAddModal = model.disableAddModal,
+     additional_queries = [],
+ 
+     config = {
+         // limit: 20
+     }
+     
+     // columns = schema.columns || [],
+     // isDirect = schema.isDirect,
+     // disableUpload = schema.disableUpload,
+     // disableAdd = schema.disableAdd,
+     // disableSelect = schema.disableSelect,
+     // queries = schema.queries || [],
+     // actions = schema.actions || [],
+ }) {
+     // console.log(model);
+    let { city,Model}=Location.search();
+    console.log(city,Model)
+     const { menu: result } = useContext(MenuGlobalContext);
+ 
+     // console.log(result);
+ 
+     const [today, setToday] = useState(moment());
+ 
+     const [records, setRecords] = useState({ [model.name]: [] });
+ 
+     const [single, setSingle] = useState({});
+ 
+     const [columns, setColumns] = useState([]);
+ 
+     const { params } = match;
+ 
+     const [loading, setLoading] = useState(true);
+ 
+     let cardView = JSON.parse(localStorage.getItem('card-view'))
+ 
+     const [view, setView] = useState(cardView);
+ 
+     const [selected, setSelected] = useState([]);
+ 
+     const [visible, setVisible] = useState(false);
+ 
+     const [layout, setLayout] = useState({});
+ 
+     // Index for the columns : #Note This should be moved to a generic utils to make this complete leaner
+     let columnIndex = [
+         {
+             title: '#',
+             dataIndex: 'index',
+             render: (value, item, index) => {
+ 
+                 console.log(options.page, options.pageSize, index);
+ 
+                 return (options.page - 1) * options.pageSize + index + 1;
+             },
+         },
+     ]
+ 
+     // Actions for the generic list
+     let columnActions = [
+ 
+         {
+             title: '',
+             key: '',
+             render: (record, column) => {
+                 return (
+                     <Space size="middle">
+ 
+                         {/* Edit */}
+                         {disableAddModal() || !model.ModalAddComponent ? null : (
+                             <Button type="dashed" onClick={() => {
+ 
+                                 setSingle({ ...record });
+ 
+                                 setVisible(true);
+                             }}>
+                                 Edit
+                             </Button>
+                         )}
+                         {/* Edit Ends */}
+ 
+                         {/* Edit */}
+                         {disableDelete() ? null : (
+                             <Popconfirm
+                                 title="Are you sure you want to delete this record ? "
+                                 onConfirm={() => deleteRecord(record)}
+                                 onCancel={() => { }}
+                                 okText="Yes"
+                                 cancelText="No"
+                             >
+                                 <Button size="small">
+                                     <DeleteOutlined />
+                                 </Button>
+                             </Popconfirm>
+                         )}
+                         {/* Edit Ends */}
+ 
+ 
+                     </Space>
+                 );
+             },
+         },
+ 
+ 
+ 
+         {
+             title: '',
+             key: 'action',
+             render: (text, record) => {
+ 
+                 // #Note Redirect link is a temporary fix for menus to work
+                 // Until models are more strong 
+ 
+                 let redirectLink = `/${model.name}/:id`;
+ 
+                 if (menu.redirect_link) {
+                     redirectLink = menu.redirect_link
+                 }
+ 
+                 redirectLink = redirectLink.replace(':id', text.id)
+ 
+                 return (
+                     <Space size="middle">
+                         {!model.hideView && !actions.length ? <Link to={redirectLink}>View</Link> : null}
+ 
+                         {actions.map((action) => (
+                             <Link to={action.url(record)}>{action.caption}</Link>
+                         ))}
+                     </Space>
+                 );
+             },
+         },
+     ]
+ 
+     const cols = [
+         ...columnIndex
+         ,
+         ...model.columns.map((entry) => {
+             if (entry.sort) {
+                 return {
+                     render: (record) => {
+                         if (entry.render) {
+                             return entry.render(record);
+                         } else {
+                             return entry.field.split('.').reduce((acc, part) => acc && acc[part], record);
+                         }
+                     },
+                     title: entry.caption,
+                     key: entry.field,
+                     sorter: (a, b) => entry.sort(a, b),
+                     sortDirections: ['ascend', 'descend', 'ascend'],
+                 };
+             } else {
+                 return {
+                     render: (record) => {
+                         if (entry.render) {
+                             return entry.render(record);
+                             // return entry.field.split('.').reduce((acc, part) => acc && acc[part], record);
+                         } else {
+                             return entry.field.split('.').reduce((acc, part) => acc && acc[part], record);
+                         }
+                         // return record[entry.field]
+                     },
+                     title: entry.caption,
+                     key: entry.field,
+                 };
+             }
+         }),
+         ...columnActions,
+     ];
+ 
+     const [options, setOptions] = useState({
+         page: 1,
+         current: 1,
+         pageSize: 20,
+     });
+ 
+     useEffect(() => {
+ 
+         loadListing();
+ 
+     }, []);
+ 
+ 
+ 
+     function loadListing() {
+ 
+         if (menu && menu.model && menu.model.id) {
+             // loadConfiguration(menu.model.id);
+ 
+             loadConfiguration(menu.id).then(() => {
+ 
+                 loadData(null, queries);
+ 
+             });
+ 
+         } else {
+             setColumns(cols);
+ 
+             loadData(null, queries);
+ 
+         }
+     }
+ 
+     /**
+      * Load the configuration
+      */
+     function loadConfiguration(id) {
+ 
+         var queries = [{
+             field: 'menu_id',
+             value: id
+         }]
+ 
+         return UserPreferences.get(queries).then((result) => {
+ 
+             // console.log(result);
+             if (result.user_preferences.length) {
+ 
+                 let cols = result.user_preferences[0].selected;
+ 
+                 setLayout(result.user_preferences[0]);
+ 
+                 let mapped = cols.map((record) => {
+ 
+                     let columnConfig = {
+                         dataIndex: record.field,
+                         title: record.caption,
+                         key: record.field
+                     };
+ 
+                     if (columnConfig.dataIndex.split('.').length > 1) {
+ 
+                         columnConfig = {
+                             ...columnConfig,
+                             render: (col, entry) => {
+ 
+                                 return record.field.split('.').reduce((acc, part) => acc && acc[part], entry);
+ 
+                             }
+                         }
+ 
+                     } else {
+ 
+                     }
+ 
+                     return columnConfig;
+                 })
+ 
+                 setColumns(
+ 
+                     [
+                         ...columnIndex
+                         ,
+ 
+                         ...mapped,
+                         ...columnActions,
+ 
+                     ]
+                 )
+ 
+             } else {
+ 
+                 let mapped = model.columns.map((record) => {
+ 
+                     return {
+                         dataIndex: record.field,
+                         title: record.caption,
+                         key: record.field
+                     }
+                 })
+ 
+ 
+ 
+                 setColumns(
+ 
+                     [
+                         ...columnIndex
+                         ,
+                         ...mapped,
+ 
+                         ...columnActions,
+ 
+                     ]
+                 )
+ 
+ 
+             }
+         })
+     }
+ 
+     function changeView(result) {
+         setView(result);
+ 
+         localStorage.setItem('card-view', result);
+     }
+ 
+     /**
+      *
+      */
+     const getRecords = ({ queries, startAt }) => {
+ 
+         let finalConfig = {
+             ...config,
+             startAt
+         }
+ 
+         var queries = [...additional_queries];
+ 
+         // Append the url params to the Get Call
+         let urlParams = Location.search();
+ 
+         // Find Final Queries
+         // let finalQueries = model.getQueries(queries, urlParams);
+ 
+         // queries.push()
+ 
+         // if (model.filterDate()) {
+         //     queries.push({
+         //         field: 'created_date',
+         //         value: moment(today).startOf('day').valueOf(),
+         //     });
+         // }
+ 
+         return model.get(queries, finalConfig).then((result) => {
+ 
+             console.log(result);
+ 
+             setRecords(result);
+ 
+             setLoading(false);
+         });
+     };
+ 
+     const loadData = (today, queries) => {
+         // console.log('queries', queries);
+ 
+         setLoading(true);
+ 
+         setToday(today);
+ 
+         setSelected([]);
+ 
+         getRecords({ today, queries });
+     };
+ 
+     /**
+      * Function loads the next set of records
+      */
+     const nextPage = () => {
+ 
+         let startAt = records[model.name][records[model.name].length - 1].id
+ 
+         Location.search({
+             startAt: startAt
+         })
+ 
+         getRecords({
+             queries,
+             startAt
+         })
+ 
+     }
+ 
+     function refresh() {
+         loadData(today, queries);
+     }
+ 
+     /**
+      * Delete multiple selected records
+      */
+     function deleteSelected() {
+ 
+         setLoading(true);
+ 
+         Promise.all(
+             selected.map((entry) => model.delete(entry.id, { hideAlert: true }))
+         ).then(() => {
+ 
+             message.success('Selected records has been deleted');
+ 
+             setLoading(false);
+ 
+             setSelected([]);
+ 
+             loadData();
+         });
+     }
+ 
+     /**
+      * Delete the record
+      */
+     function deleteRecord(record) {
+ 
+         return model.delete(record.id).then(() => {
+ 
+             loadData();
+ 
+         })
+     }
+ 
+     /**
+      * Close the modal
+      */
+     function closeModal(refresh) {
+ 
+         setSingle({});
+ 
+         setVisible(false);
+ 
+         if (refresh) {
+             loadData();
+         }
+     }
+ 
+     // rowSelection object indicates the need for row selection
+     const rowSelection = {
+         onChange: (selectedRowKeys, selectedRows) => {
+             console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+ 
+             setSelected(selectedRows);
+         },
+         getCheckboxProps: (record) => ({
+             disabled: record.name === 'Disabled User', // Column configuration not to be checked
+             name: record.name,
+         }),
+     };
+ 
+ 
+     // Additional Props that needs to be added to the component
+     let props = {
+     }
+ 
+     if (!disableSelect) {
+         props.rowSelection = rowSelection
+     }
+ 
+ 
+     return (
+         <section className="generic-list">
+             {/* Table Header */}
+             <div className="table-header">
+                 <div className="table-title">
+                     <Title level={4}>{menu.name || model.name}</Title>
+ 
+                     <p>{loading ? 'Loading records' : `${records[model.name].length} records`}</p>
+                 </div>
+ 
+                 {/* Table Filters */}
+                 <div className="table-filters">
+                     <Space direction="vertical" size={12}>
+                         {/* <RangePicker onChange={updateFilter} /> */}
+                     </Space>
+                 </div>
+                 {/* Table Filters Ends */}
+ 
+                 <div className="table-actions">
+                     <div className="button-container">
+ 
+                         {/* Selected Actions */}
+                         {selected.length ? (
+                             <>
+                                 {selected.length} selected .
+                                 <Popconfirm
+                                     title="Are you sure you want to delete the selected rows ? "
+                                     onConfirm={() => deleteSelected()}
+                                     onCancel={() => { }}
+                                     okText="Yes"
+                                     cancelText="No"
+                                 >
+                                     <Button size="small">
+                                         <DeleteOutlined />
+                                     </Button>
+                                 </Popconfirm>
+ 
+                                 {/* Custom Actions */}
+                                 {
+                                     actions.map((action) => {
+                                         return (
+                                             <Popconfirm
+                                                 title="Are you sure you want to perform the action on selected rows ? "
+                                                 onConfirm={() => action.onClick(selected, refresh)}
+                                                 onCancel={() => { }}
+                                                 okText="Yes"
+                                                 cancelText="No"
+                                             >
+                                                 <Button size="small">{action.caption}</Button>
+                                             </Popconfirm>
+                                         );
+                                     })
+                                 }
+                                 {/* Custom Actions */}
+ 
+                             </>
+                         ) : null}
+ 
+                         <Space size="small">
+                             {/* {model.filterDate() ? (
+                                 <DatePicker defaultValue={today} format={'DD/MM/YYYY'} allowClear={false} onChange={loadData} />
+                             ) : null} */}
+ 
+ 
+                             <Button size="small">
+                                 <LeftOutlined />
+                             </Button>
+                             <Button size="small" onClick={nextPage}>
+                                 <RightOutlined />
+                             </Button>
+ 
+ 
+                             <Switch
+                                 size={'small'}
+                                 defaultChecked
+                                 onChange={changeView}
+                                 checked={view}
+                                 checkedChildren={<OrderedListOutlined />}
+                                 unCheckedChildren={<PicCenterOutlined />}
+                             />
+ 
+                             <Button onClick={refresh} type="secondary" size={'small'}>
+                                 <ReloadOutlined />
+                             </Button>
+ 
+ 
+                             {menu && menu.id && <CustomActions menu={menu} />}
+ 
+ 
+                             {/* <Button onClick={refresh} type="secondary" size={'small'}>
+                                 <TableOutlined />
+                             </Button> */}
+ 
+                             {/*  */}
+                             {!loading ? <TableSettings refresh={loadListing} layout={layout} menu={menu} model={model} onUpdate={() => { }} /> : null}
+ 
+ 
+                             {/* <Button onClick={exportTableLocal} type="secondary" size={'small'}>
+                                 Download
+                             </Button> */}
+ 
+                             {/*table data export to csc component*/}
+                             {/* {records && <ExportReactCSV csvData={expRecord} />} */}
+ 
+                             {/* <Button disabled={options.page <= 1} size="small" onClick={() => { }}>
+                                 <CaretLeftOutlined />
+                             </Button>
+ 
+                             <Button size="small" onClick={() => { }}>
+ 
+                                 <CaretRightOutlined />
+ 
+                             </Button> */}
+ 
+                             {/* {
+                                 disableUpload
+                                     ?
+                                     null
+                                     :
+                                     <Button type="dashed">
+                                         <Link to={`/${city}/${model}/upload/file`}>
+                                             Upload
+                                         </Link>
+                                     </Button>
+                             } */}
+                                     <Button type="dashed">
+                                         <Link to={`/upload/file?city=${city}&Model=${Model}`}>
+                                             Upload
+                                         </Link>
+                                     </Button>
+                             {/* Add Redirection */}
+                             {/* {disableAdd ? null : (
+                                 <Button type="dashed" size={'small'}>
+                                     <Link to={`/${model.name}/create`}>Add</Link>
+                                 </Button>
+                             )} */}
+                             {/* Add Redirection Ends */}
+ 
+                             {disableAddModal() || !model.ModalAddComponent ? null : (
+                                 <Button size={'small'} type="dashed" onClick={() => setVisible(true)}>
+                                     Add
+                                 </Button>
+                             )}
+                         </Space>
+                     </div>
+                 </div>
+             </div>
+ 
+             {/* Table Header Ends */}
+ 
+             {loading ? (
+                 <Skeleton type="listing" />
+             ) : (
+                 <>
+                     <>
+                         {!view ? (
+ 
+                             <PortletTable records={records[model.name]} columns={columns} />
+                             // <Table
+                             //     // ref={(ref) => { tableRef = ref }}
+                             //     className="table-exportable"
+                             //     loading={loading}
+                             //     size="small"
+                             //     // rowSelection={rowSelection}
+                             //     scroll={{ x: true, y: 750 }}
+ 
+                             //     // scroll={{ x: true, y: 750 }}
+                             //     rowKey={(record) => record.id}
+                             //     // rowKey={record => record[model + 'Id']}
+                             //     dataSource={records[model.name]}
+                             //     columns={columns}
+                             //     // onChange={handleTableChange}
+                             //     pagination={false}
+ 
+                             //     {...props}
+ 
+                             // ></Table>
+                         ) : (
+                             <CardList model={model} data={records[model.name]} />
+                         )}
+                     </>
+                 </>
+             )}
+ 
+             {/* Add Modal */}
+             <Modal width={'80%'} destroyOnClose confirmLoading={loading} title={`Add ${model.name}`} visible={visible} onCancel={() => { closeModal() }} footer={null}>
+                 <model.ModalAddComponent
+                     match={match}
+                     menu={menu}
+                     model={model}
+                     additional_queries={additional_queries}
+                     formContent={single}
+ 
+                     callback={() => {
+                         closeModal(true);
+                     }}
+                 />
+                 {/* <FormCreator formContent={{ [model]: {} }} modelIndex="requestId" model={model} onSubmit={createRecord} config={step} /> */}
+             </Modal>
+ 
+             {/* Add Modal Ends */}
+         </section>
+     );
+ }
+ 
+ export default withRouter(GenericList);
+ 
+ function CardList({ model, data, ...props }) {
+     return data.map((record, index) => {
+         return <model.Card index={index} key={index} record={record} {...record} {...props} />;
+     });
+ }
+