ui-soxo-bootstrap-core 2.4.25-dev.10 → 2.4.25-dev.11

package/core/models/roles/components/role-list/role-list.js

@@ -6,7 +6,7 @@ import React, { useState, useRef, useEffect, useContext } from 'react';
 
 import { Link, useParams, useLocation } from 'react-router-dom';
 
-import { Typography, Modal, Space, Switch, Popconfirm, Skeleton, Input, Drawer,Select} from 'antd';
+import { Typography, Modal, Space, Switch, Popconfirm, Skeleton, Input, Drawer, Select } from 'antd';
 
 import { TableComponent, Card, Button } from './../../../../lib';
 
@@ -15,396 +15,372 @@ import { RolesAPI } from '../../..';
 
 const { Title } = Typography;
 
-
 const RoleList = ({ model, match, relativeAdd = false, additional_queries = [], disableAddModal = model.disableAddModal }) => {
+  const actions = [];
 
-    const actions = [];
-
-    match = useParams();
-
-    // Block to get the url params #Note Location search is not working
-    let location = useLocation();
-
-    const query = new URLSearchParams(location.search);
-
-    console.log(query.get('step'));
-
-    let step = parseInt(query.get('step')) || 1;
-    // 
-
-    const [loading, setLoading] = useState(false);
-
-    const [records, setRecords] = useState([]);
-
-    const [view, setView] = useState(false);
-
-    const [visible, setVisible] = useState(false);
-
-    const [single, setSingle] = useState({});
-
-    var [queryValue, setQueryValue] = useState('');
-
-    const { Search } = Input;
-
-    useEffect(() => {
-
-        getRecords();
+  match = useParams();
 
-    }, []);
+  // Block to get the url params #Note Location search is not working
+  let location = useLocation();
 
-    /**
-     *
-     */
-    const getRecords = () => {
+  const query = new URLSearchParams(location.search);
 
-        let firstStepQueries = [{
-            field: 'step',
-            value: step
-        }]
+  console.log(query.get('step'));
 
-        let config = {
-            queries: [
-                // ...additional_queries,
-                // ...firstStepQueries
-            ],
-        }
-
-        // if (!additional_queries.length) {
-
-        //     config.queries.push({
-        //         field: 'header_id',
-        //         value: null
-        //     })
-        // }
-
-        setLoading(true);
-
-        // Get the records
-        return RolesAPI.getRole()
-
-            .then((res) => {
-
-                // setRecords(res.result);
-                var result = res;
-             
+  let step = parseInt(query.get('step')) || 1;
+  //
 
-                // if (id) {
+  const [loading, setLoading] = useState(false);
 
-                //     var filtered = res.result.filter((record) => record.header_id = id)
+  const [records, setRecords] = useState([]);
 
-                // }
+  const [view, setView] = useState(false);
 
+  const [visible, setVisible] = useState(false);
 
-                setRecords(result.result);
+  const [single, setSingle] = useState({});
 
-                setLoading(false);
+  var [queryValue, setQueryValue] = useState('');
 
-            })
-            .catch((error) => {
+  const { Search } = Input;
 
-                setLoading(false);
+  useEffect(() => {
+    getRecords();
+  }, []);
 
-                console.log(error);
-            });
+  /**
+   *
+   */
+  const getRecords = () => {
+    let firstStepQueries = [
+      {
+        field: 'step',
+        value: step,
+      },
+    ];
 
+    let config = {
+      queries: [
+        // ...additional_queries,
+        // ...firstStepQueries
+      ],
     };
 
-    /**
-     * Function to change view
-     */
-    function changeView(result) {
-        setView(result);
-    }
+    // if (!additional_queries.length) {
 
-    /**
-     * Function to store search value
-     */
-    function onSearch(event) {
-        setQueryValue(event.target.value);
-    }
+    //     config.queries.push({
+    //         field: 'header_id',
+    //         value: null
+    //     })
+    // }
 
-    /**
-    * Search in candidate visit List
-    */
-    let filtered = records.filter(record => {
+    setLoading(true);
 
-        let searchText = queryValue.toUpperCase();
+    // Get the records
+    return RolesAPI.getRole()
 
-        if (queryValue) {
+      .then((res) => {
+        // setRecords(res.result);
+        var result = res;
 
-            if (record.name !== null) {
+        // if (id) {
 
-                if (record.name.toUpperCase().indexOf(searchText) != -1) {
+        //     var filtered = res.result.filter((record) => record.header_id = id)
 
-                    return true;
-                }
-            }
-        } else {
-
-            return true;
+        // }
 
+        setRecords(result.result);
+
+        setLoading(false);
+      })
+      .catch((error) => {
+        setLoading(false);
+
+        console.log(error);
+      });
+  };
+
+  /**
+   * Function to change view
+   */
+  function changeView(result) {
+    setView(result);
+  }
+
+  /**
+   * 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;
         }
-    });
-
-    /**
-     * Function hides the modal
-     * 
-     * @param reload 
-     */
-    function closeModal() {
-
-        setVisible(false);
-
-        // if (reload) {
-        //     getRecords();
-        // }
+      }
+    } else {
+      return true;
     }
-    /**
-     * On delete of each record 
-     */
-    function onDelete(id) {
-
-        RolesAPI.deleteRole(id).then((res) => {
-            if (res) {
-                getRecords();
-
+  });
+
+  /**
+   * Function hides the modal
+   *
+   * @param reload
+   */
+  function closeModal() {
+    setVisible(false);
+
+    // if (reload) {
+    //     getRecords();
+    // }
+  }
+  /**
+   * On delete of each record
+   */
+  function onDelete(id) {
+    RolesAPI.deleteRole(id)
+      .then((res) => {
+        if (res) {
+          getRecords();
+        }
+      })
+      .catch((error) => {
+        setLoading(false);
+
+        console.log(error);
+      });
+  }
+
+  const cols = [
+    ...[
+      {
+        title: '#',
+        dataIndex: 'index',
+        render: (value, item, index) => index + 1,
+      },
+    ],
+    ...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);
             }
-
-
-        }).catch((error) => {
-
-            setLoading(false);
-
-            console.log(error);
-
-        })
-    }
-
-    const cols = [
-        ...[
-            {
-                title: '#',
-                dataIndex: 'index',
-                render: (value, item, index) => index + 1,
-            },
-        ],
-        ...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'],
-                };
+          },
+          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 {
-                    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,
-                    // dataIndex: entry.field,
-                };
+              return entry.field.split('.').reduce((acc, part) => acc && acc[part], record);
             }
-        }),
-        ...[
-            {
-                title: '',
-                key: 'action',
-                render: (text, record) => {
-                    return (
-                        <Space size="middle">
-
-                            {/* Edit */}
-                            {!model.ModalAddComponent ? null : (
-                                <Button size={'small'} type="dashed" onClick={() => {
-
-                                    setSingle({ ...record });
-
-                                    setVisible(true);
-                                }}>
-                                    <EditOutlined />
-                                </Button>
-                            )}
-                            {/* Edit Ends */}
-
-                            {/* Copy */}
-                            {!model.ModalAddComponent ? null : (
-                                <Button size={'small'} type="dashed" onClick={() => {
-
-                                    setSingle({
-                                        ...record,
-                                        id: null,
-                                        copy: true
-                                    });
-
-                                    setVisible(true);
-                                }}>
-                                    <CopyOutlined />
-                                </Button>
-                            )}
-                            {/* Copy Ends */}
-
-                            {/* Delete Icon */}
-                            <Popconfirm title="Are you sure" onConfirm={() => {
-                               
-                                onDelete(record.id);
-                            }}>
-                                <Button size={'small'} type="dashed">
-                                    <DeleteOutlined />
-                                </Button>
-                            </Popconfirm>
-                            {/* Delete Icon */}
-
-
-                            {/* {!model.hideView && !actions.length ? <Link to={`/${model.name}/${text.id}`}>View</Link> : null} */}
-
-                            {/* {!model.hideView && !actions.length ? <Link to={`/users/${record['id']}`}>View</Link> : null} */}
-
-                            {/* {actions.map((action) => (
+            // return record[entry.field]
+          },
+          title: entry.caption,
+          key: entry.field,
+          // dataIndex: entry.field,
+        };
+      }
+    }),
+    ...[
+      {
+        title: '',
+        key: 'action',
+        render: (text, record) => {
+          return (
+            <Space size="middle">
+              {/* Edit */}
+              {!model.ModalAddComponent ? null : (
+                <Button
+                  size={'small'}
+                  type="dashed"
+                  onClick={() => {
+                    setSingle({ ...record });
+
+                    setVisible(true);
+                  }}
+                >
+                  <EditOutlined />
+                </Button>
+              )}
+              {/* Edit Ends */}
+
+              {/* Copy */}
+              {!model.ModalAddComponent ? null : (
+                <Button
+                  size={'small'}
+                  type="dashed"
+                  onClick={() => {
+                    setSingle({
+                      ...record,
+                      id: null,
+                      copy: true,
+                    });
+
+                    setVisible(true);
+                  }}
+                >
+                  <CopyOutlined />
+                </Button>
+              )}
+              {/* Copy Ends */}
+
+              {/* Delete Icon */}
+              <Popconfirm
+                title="Are you sure"
+                onConfirm={() => {
+                  onDelete(record.id);
+                }}
+              >
+                <Button size={'small'} type="dashed">
+                  <DeleteOutlined />
+                </Button>
+              </Popconfirm>
+              {/* Delete Icon */}
+
+              {/* {!model.hideView && !actions.length ? <Link to={`/${model.name}/${text.id}`}>View</Link> : null} */}
+
+              {/* {!model.hideView && !actions.length ? <Link to={`/users/${record['id']}`}>View</Link> : null} */}
+
+              {/* {actions.map((action) => (
                                  <Link to={action.url(record)}>{action.caption}</Link>
                              ))} */}
-                        </Space>
-                    );
-                },
-            },
-        ],
-    ];
-
-
-    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>
+          );
+        },
+      },
+    ],
+  ];
+
+  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'} type='default'>
-                                    <ReloadOutlined />
-                                </Button>
-
-                                <Switch
-                                    defaultChecked
-                                    onChange={changeView}
-                                    checked={view}
-                                    checkedChildren={<OrderedListOutlined />}
-                                    unCheckedChildren={<PicCenterOutlined />}
-                                />
-
-
-                                {/* {disableAddModal || !model.ModalAddComponent ? null : ( */}
-                                {!model.ModalAddComponent ? null : (
-                                    <Button type="primary" onClick={() => {
-
-                                        setSingle({});
-
-                                        setVisible(true);
-                                    }}>
-                                        Create Role
-                                    </Button>
-                                )}
-                            </Space>
-                        </div>
-                    </div>
-                </div>
+          {/* Table Filters Ends */}
+
+          <div className="table-actions">
+            <div className="button-container">
+              <Space size="small">
+                <Button onClick={getRecords} size={'small'} type="default">
+                  <ReloadOutlined />
+                </Button>
+
+                <Switch
+                  defaultChecked
+                  onChange={changeView}
+                  checked={view}
+                  checkedChildren={<OrderedListOutlined />}
+                  unCheckedChildren={<PicCenterOutlined />}
+                />
+
+                {/* {disableAddModal || !model.ModalAddComponent ? null : ( */}
+                {!model.ModalAddComponent ? null : (
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      setSingle({});
+
+                      setVisible(true);
+                    }}
+                  >
+                    Create Role
+                  </Button>
+                )}
+              </Space>
             </div>
-
-            {/* Table Header Ends */}
-
-            {loading ? (
-                <Skeleton />
+          </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>
             ) : (
-                <>
-                    <>
-                        {!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={filtered ? filtered : records} />
-                        )}
-                    </>
-                </>
+              <CardList model={model} data={filtered ? filtered : records} />
             )}
-
-            {/* Add Modal */}
-            <Drawer
-    title={single?.id ? "Edit Role" : "Create New Role"}
-    width={780}
-    open={visible}
-    destroyOnClose
-    onClose={closeModal}
-    bodyStyle={{ paddingBottom: 80 }}
->
-    <model.ModalAddComponent
-        match={match}
-        model={model}
-        additional_queries={additional_queries}
-        formContent={single}
-        callback={(event) => {
+          </>
+        </>
+      )}
+
+      {/* Add Modal */}
+      <Drawer
+        title={single?.id ? 'Edit Role' : 'Create New Role'}
+        width={850}
+        open={visible}
+        destroyOnClose
+        onClose={closeModal}
+        bodyStyle={{ paddingBottom: 80 }}
+      >
+        <model.ModalAddComponent
+          match={match}
+          model={model}
+          additional_queries={additional_queries}
+          formContent={single}
+          callback={(event) => {
             closeModal();
             getRecords();
-        }}
-    />
-</Drawer>
-
-          
-                {/* <FormCreator formContent={{ [model]: {} }} modelIndex="requestId" model={model} onSubmit={createRecord} config={step} /> */}
-           
-
-
-        </Card>
+          }}
+        />
+      </Drawer>
 
-
-    );
-}
+      {/* <FormCreator formContent={{ [model]: {} }} modelIndex="requestId" model={model} onSubmit={createRecord} config={step} /> */}
+    </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} />;
-    });
+  return data.map((record, index) => {
+    return <model.Card record={record} model={model} index={index} key={index} {...record} {...props} />;
+  });
 }
 export default RoleList;
-