ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.11

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

@@ -1,406 +1,406 @@
-/**
- * Generic List accepts an array of fields to update any resource
- */
-
-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 { TableComponent, Card, Button } from './../../../../lib';
-
-import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, DeleteOutlined, EditOutlined, CopyOutlined } from '@ant-design/icons';
-import { RolesAPI } from '../../..';
-
-const { Title } = Typography;
-
-const RoleList = ({ model, match, relativeAdd = false, additional_queries = [], disableAddModal = model.disableAddModal }) => {
-  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({});
-
-  // tracks RoleAdd form submission so the Drawer footer button shows loading
-  const [submitting, setSubmitting] = useState(false);
-
-  // holds the RoleAdd form instance so the Drawer footer Save button can submit it
-  const formRef = useRef(null);
-
-  var [queryValue, setQueryValue] = useState('');
-
-  const { Search } = Input;
-
-  useEffect(() => {
-    getRecords();
-  }, []);
-
-  /**
-   *
-   */
-  const getRecords = () => {
-    let firstStepQueries = [
-      {
-        field: 'step',
-        value: 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;
-
-        // if (id) {
-
-        //     var filtered = res.result.filter((record) => record.header_id = id)
-
-        // }
-
-        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;
-        }
-      }
-    } else {
-      return true;
-    }
-  });
-
-  /**
-   * 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);
-            }
-          },
-          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,
-          // 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 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>
-      </div>
-
-      {/* Table Header Ends */}
-
-      {loading ? (
-        <Skeleton active paragraph={{ rows: 10 }} />
-      ) : (
-        <>
-          <>
-            {!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} />
-            )}
-          </>
-        </>
-      )}
-
-      {/* Add Modal */}
-      <Drawer
-        title={single?.id ? 'Edit Role' : 'Create New Role'}
-        width={850}
-        open={visible}
-        destroyOnClose
-        onClose={closeModal}
-        bodyStyle={{ paddingBottom: 80 }}
-        footer={
-          <div style={{ textAlign: 'right' }}>
-            <Space size="small">
-              <Button type="default" onClick={closeModal}>
-                Cancel
-              </Button>
-              <Button type="primary" loading={submitting} onClick={() => formRef.current?.submit()}>
-                Save
-              </Button>
-            </Space>
-          </div>
-        }
-      >
-        <model.ModalAddComponent
-          match={match}
-          model={model}
-          additional_queries={additional_queries}
-          formContent={single}
-          formRef={formRef}
-          onSubmittingChange={setSubmitting}
-          callback={(event) => {
-            closeModal();
-            getRecords();
-          }}
-        />
-      </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} />;
-  });
-}
-export default RoleList;
+/**
+ * Generic List accepts an array of fields to update any resource
+ */
+
+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 { TableComponent, Card, Button } from './../../../../lib';
+
+import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, DeleteOutlined, EditOutlined, CopyOutlined } from '@ant-design/icons';
+import { RolesAPI } from '../../..';
+
+const { Title } = Typography;
+
+const RoleList = ({ model, match, relativeAdd = false, additional_queries = [], disableAddModal = model.disableAddModal }) => {
+  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({});
+
+  // tracks RoleAdd form submission so the Drawer footer button shows loading
+  const [submitting, setSubmitting] = useState(false);
+
+  // holds the RoleAdd form instance so the Drawer footer Save button can submit it
+  const formRef = useRef(null);
+
+  var [queryValue, setQueryValue] = useState('');
+
+  const { Search } = Input;
+
+  useEffect(() => {
+    getRecords();
+  }, []);
+
+  /**
+   *
+   */
+  const getRecords = () => {
+    let firstStepQueries = [
+      {
+        field: 'step',
+        value: 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;
+
+        // if (id) {
+
+        //     var filtered = res.result.filter((record) => record.header_id = id)
+
+        // }
+
+        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;
+        }
+      }
+    } else {
+      return true;
+    }
+  });
+
+  /**
+   * 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);
+            }
+          },
+          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,
+          // 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 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>
+      </div>
+
+      {/* Table Header Ends */}
+
+      {loading ? (
+        <Skeleton active paragraph={{ rows: 10 }} />
+      ) : (
+        <>
+          <>
+            {!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} />
+            )}
+          </>
+        </>
+      )}
+
+      {/* Add Modal */}
+      <Drawer
+        title={single?.id ? 'Edit Role' : 'Create New Role'}
+        width={850}
+        open={visible}
+        destroyOnClose
+        onClose={closeModal}
+        bodyStyle={{ paddingBottom: 80 }}
+        footer={
+          <div style={{ textAlign: 'right' }}>
+            <Space size="small">
+              <Button type="default" onClick={closeModal}>
+                Cancel
+              </Button>
+              <Button type="primary" loading={submitting} onClick={() => formRef.current?.submit()}>
+                Save
+              </Button>
+            </Space>
+          </div>
+        }
+      >
+        <model.ModalAddComponent
+          match={match}
+          model={model}
+          additional_queries={additional_queries}
+          formContent={single}
+          formRef={formRef}
+          onSubmittingChange={setSubmitting}
+          callback={(event) => {
+            closeModal();
+            getRecords();
+          }}
+        />
+      </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} />;
+  });
+}
+export default RoleList;