DayJS and antd improvements.

2024-04-18 11:08:50 -07:00
parent 7d7fe9819f
commit 1d155eb42a
16 changed files with 126 additions and 153 deletions
--- a/src/components/molecules/jobs-list-item/jobs-list-item.molecule.jsx
+++ b/src/components/molecules/jobs-list-item/jobs-list-item.molecule.jsx
@@ -1,5 +1,5 @@
 import { WarningOutlined, CloudUploadOutlined } from "@ant-design/icons";
-import { List } from "antd";
+import { Card, List } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -9,18 +9,13 @@ import TimeAgoFormatter from "../../atoms/time-ago-formatter/time-ago-formatter.
 import "./jobs-list-item.styles.scss";

 const mapStateToProps = createStructuredSelector({
-  selectedJobId: selectSelectedJobId,
+  selectedJobId: selectSelectedJobId
 });
 const mapDispatchToProps = (dispatch) => ({
-  setSelectedJobId: (jobId) => dispatch(setSelectedJobId(jobId)),
+  setSelectedJobId: (jobId) => dispatch(setSelectedJobId(jobId))
 });

-export function JobsListItemMolecule({
-  selectedJobId,
-  setSelectedJobId,
-  item,
-  refetch,
-}) {
+export function JobsListItemMolecule({ selectedJobId, setSelectedJobId, item, refetch }) {
  const handleSelect = (jobId) => {
    setSelectedJobId(jobId);
  };
@@ -38,21 +33,13 @@ export function JobsListItemMolecule({
      </List.Item>
    );
  return (
-    <List.Item
-      className="jobs-list-item"
-      key={item.id}
-      onClick={() => handleSelect(item.id)}
-    >
-      <div
-        className={`jobs-list-item-content ${
-          item.id === selectedJobId ? "jobs-list-item-content-selected" : ""
-        }`}
-      >
+    <List.Item className="jobs-list-item" key={item.id} onClick={() => handleSelect(item.id)}>
+      <Card className={`jobs-list-item-content ${item.id === selectedJobId ? "jobs-list-item-content-selected" : ""}`}>
        <div
          style={{
            display: "flex",

-            justifyContent: "space-between",
+            justifyContent: "space-between"
          }}
        >
          <strong>
@@ -77,14 +64,9 @@ export function JobsListItemMolecule({

        <div>{item.ins_co_nm || "No Insurance Co."}</div>
        <div>{`${item.ownr_fn} ${item.ownr_ln}`}</div>
-        <div>
-          {`${item.v_model_yr} ${item.v_makedesc} ${item.v_model} ${item.v_vin}`}
-        </div>
-      </div>
+        <div>{`${item.v_model_yr} ${item.v_makedesc} ${item.v_model} ${item.v_vin}`}</div>
+      </Card>
    </List.Item>
  );
 }
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(JobsListItemMolecule);
+export default connect(mapStateToProps, mapDispatchToProps)(JobsListItemMolecule);
--- a/src/components/molecules/jobs-list-item/jobs-list-item.styles.scss
+++ b/src/components/molecules/jobs-list-item/jobs-list-item.styles.scss
@@ -1,23 +1,23 @@
 .jobs-list-item {
-  padding: 0.1rem !important;
+  padding: 0rem !important;
  margin: 0;
-  border-bottom: 0.8rem solid #f0f0f0 !important;
-
+  border: 0.4rem solid #f0f0f0 !important;
  .jobs-list-item-content {
    &-selected {
      border-left: 3px solid #1890ff;
    }

+    border-radius: 8px;
    display: inline;
-    margin: 0.5rem;
-    padding: 0.5rem;
+    //margin: 0.5rem;
+    //padding: 0.5rem;
    width: 100%;
  }
-
+  background-color: #f0f0f0;
  cursor: pointer;
-  &:hover {
-    background-color: #e6f7ff;
-  }
+  // &:hover {
+  //   background-color: #e6f7ff;
+  // }
 }
 .jobs-list-item-refresh {
  padding: 0.1rem !important;
--- a/src/components/molecules/reporting-dates/reporting-dates.molecule.jsx
+++ b/src/components/molecules/reporting-dates/reporting-dates.molecule.jsx
@@ -1,19 +1,16 @@
-import { Button, DatePicker, Form } from "antd";
+import { Button, DatePicker, Form, Space } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { queryReportingData } from "../../../redux/reporting/reporting.actions";
-import dayjs from '../../../util/day.js';
+import dayjs from "../../../util/day.js";
 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
 });
 const mapDispatchToProps = (dispatch) => ({
-  queryReportingData: (dates) => dispatch(queryReportingData(dates)),
+  queryReportingData: (dates) => dispatch(queryReportingData(dates))
 });
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ReportingDatesMolecule);
+export default connect(mapStateToProps, mapDispatchToProps)(ReportingDatesMolecule);

 export function ReportingDatesMolecule({ queryReportingData }) {
  const [form] = Form.useForm();
@@ -21,13 +18,13 @@ export function ReportingDatesMolecule({ queryReportingData }) {
  const handleFinish = (values) => {
    queryReportingData({
      startDate: values.dateRange[0],
-      endDate: values.dateRange[1],
+      endDate: values.dateRange[1]
    });
  };

  return (
    <Form form={form} onFinish={handleFinish}>
-      <div style={{ display: "flex" }}>
+      <Space wrap align="middle">
        <Form.Item
          label="Ready for Payment Date Between"
          name="dateRange"
@@ -39,17 +36,13 @@ export function ReportingDatesMolecule({ queryReportingData }) {
                  return Promise.resolve();
                }

-                if (
-                  dayjs(value[1]).diff(dayjs(value[0]), "years", true) > 1
-                ) {
-                  return Promise.reject(
-                    "Time period exceeds 1 year. Please select a shorter date range."
-                  );
+                if (dayjs(value[1]).diff(dayjs(value[0]), "years", true) > 1) {
+                  return Promise.reject("Time period exceeds 1 year. Please select a shorter date range.");
                } else {
                  return Promise.resolve();
                }
-              },
-            },
+              }
+            }
          ]}
        >
          <DatePicker.RangePicker
@@ -62,39 +55,33 @@ export function ReportingDatesMolecule({ queryReportingData }) {
              "Next 14 days": [dayjs(), dayjs().add(14, "day")],
              "Last Month": [
                dayjs().startOf("month").subtract(1, "month"),
-                dayjs().startOf("month").subtract(1, "month").endOf("month"),
+                dayjs().startOf("month").subtract(1, "month").endOf("month")
              ],

-              "This Month": [
-                dayjs().startOf("month"),
-                dayjs().endOf("month"),
-              ],
+              "This Month": [dayjs().startOf("month"), dayjs().endOf("month")],
              "Next Month": [
                dayjs().startOf("month").add(1, "month"),
-                dayjs().startOf("month").add(1, "month").endOf("month"),
+                dayjs().startOf("month").add(1, "month").endOf("month")
              ],
              "Last Quarter": [
                dayjs().startOf("quarter").subtract(1, "quarter"),
-                dayjs().startOf("quarter").subtract(1, "day"),
+                dayjs().startOf("quarter").subtract(1, "day")
              ],
              "This Quarter": [
                dayjs().startOf("quarter"),
-                dayjs()
-                  .startOf("quarter")
-                  .add(1, "quarter")
-                  .subtract(1, "day"),
+                dayjs().startOf("quarter").add(1, "quarter").subtract(1, "day")
              ],
              "Last 3 Months": [
                dayjs().startOf("month").subtract(3, "month"),
-                dayjs().startOf("month").subtract(1, "month").endOf("month"),
-              ],
+                dayjs().startOf("month").subtract(1, "month").endOf("month")
+              ]
            }}
          />
        </Form.Item>
        <Button type="primary" htmlType="submit">
          Run Search
        </Button>
-      </div>
+      </Space>
    </Form>
  );
 }
--- a/src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx
+++ b/src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx
@@ -60,7 +60,7 @@ export function ReportingJobsListMolecule({
      title: "R4P",
      dataIndex: "close_date",
      key: "close_date",
-      render: (text, record) => dayjs(record.close_date).format("MM/DD/yyyy"),
+      render: (text, record) => dayjs(record.close_date).format("MM/DD/YYYY"),
      defaultSortOrder: "ascend",
      sorter: (a, b) =>
        dayjs(a.close_date).unix() - dayjs(b.close_date).unix(),