admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-2626 Correct Sorting, Linking, Pagination and Update Response Container

Browse Source
This commit is contained in:
Allan Carr
2024-02-02 22:45:06 -08:00
parent 0d1ff6390c
commit 97a1bd66d1
5 changed files with 67 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/csi-response-form/csi-response-form.container.jsx
View File

@@ -1,19 +1,19 @@
import { useQuery } from "@apollo/client";
import { Card, Form, Result } from "antd";
import queryString from "query-string";
// import queryString from "query-string";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
// import { useLocation } from "react-router-dom";
import { QUERY_CSI_RESPONSE_BY_PK } from "../../graphql/csi.queries";
import { DateFormatter } from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";
import ConfigFormComponents from "../config-form-components/config-form-components.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
export default function CsiResponseFormContainer() {
export default function CsiResponseFormContainer({ responseid }) {
const { t } = useTranslation();
const [form] = Form.useForm();
const searchParams = queryString.parse(useLocation().search);
const { responseid } = searchParams;
const { loading, error, data } = useQuery(QUERY_CSI_RESPONSE_BY_PK, {
variables: {
id: responseid,
@@ -44,6 +44,19 @@ export default function CsiResponseFormContainer() {
readOnly
componentList={data.csi_by_pk.csiquestion.config}
/>
{data.csi_by_pk.completedon ? (
<>
{t("csi.fields.completedon")}
{": "}
<DateFormatter>{data.csi_by_pk.completedon}</DateFormatter>
</>
) : data.csi_by_pk.validuntil ? (
<>
{t("csi.fields.validuntil")}
{": "}
<DateFormatter>{data.csi_by_pk.validuntil}</DateFormatter>
</>
) : null}
</Form>
</Card>
);

70
client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
View File

@@ -1,37 +1,37 @@
import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Table } from "antd";
import queryString from "query-string";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useHistory, useLocation } from "react-router-dom";
import { Link } from "react-router-dom";
import { DateFormatter } from "../../utils/DateFormatter";
import { pageLimit } from "../../utils/config";
import { alphaSort } from "../../utils/sorters";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import { alphaSort, dateSort } from "../../utils/sorters";
import OwnerNameDisplay, {
OwnerNameDisplayFunction,
} from "../owner-name-display/owner-name-display.component";
export default function CsiResponseListPaginated({
refetch,
loading,
responses,
total,
setresponseid,
}) {
const search = queryString.parse(useLocation().search);
const { responseid, page, sortcolumn, sortorder } = search;
const history = useHistory();
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: { text: "" },
page: "",
});
const { t } = useTranslation();
const columns = [
{
title: t("jobs.fields.ro_number"),
dataIndex: "ro_number",
key: "ro_number",
sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
sortOrder: sortcolumn === "ro_number" && sortorder,
sorter: (a, b) => alphaSort(a.job?.ro_number, b.job?.ro_number),
sortOrder:
state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
render: (text, record) => (
<Link to={"/manage/jobs/" + record.job.id}>
{record.job.ro_number || t("general.labels.na")}
@@ -40,14 +40,18 @@ export default function CsiResponseListPaginated({
},
{
title: t("jobs.fields.owner"),
dataIndex: "owner",
key: "owner",
ellipsis: true,
sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
sortOrder: sortcolumn === "owner" && sortorder,
dataIndex: "owner_name",
key: "owner_name",
sorter: (a, b) =>
alphaSort(
OwnerNameDisplayFunction(a.job),
OwnerNameDisplayFunction(b.job)
),
sortOrder:
state.sortedInfo.columnKey === "owner_name" && state.sortedInfo.order,
render: (text, record) => {
return record.job.owner ? (
<Link to={"/manage/owners/" + record.job.owner.id}>
return record.job.ownerid ? (
<Link to={"/manage/owners/" + record.job.ownerid}>
<OwnerNameDisplay ownerObject={record.job} />
</Link>
) : (
@@ -62,8 +66,9 @@ export default function CsiResponseListPaginated({
dataIndex: "completedon",
key: "completedon",
ellipsis: true,
sorter: (a, b) => a.completedon - b.completedon,
sortOrder: sortcolumn === "completedon" && sortorder,
sorter: (a, b) => dateSort(a.completedon, b.completedon),
sortOrder:
state.sortedInfo.columnKey === "completedon" && state.sortedInfo.order,
render: (text, record) => {
return record.completedon ? (
<DateFormatter>{record.completedon}</DateFormatter>
@@ -73,25 +78,21 @@ export default function CsiResponseListPaginated({
];
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
search.page = pagination.current;
search.sortcolumn = sorter.columnKey;
search.sortorder = sorter.order;
history.push({ search: queryString.stringify(search) });
setState({
...state,
filteredInfo: filters,
sortedInfo: sorter,
page: pagination.current,
});
};
const handleOnRowClick = (record) => {
if (record) {
if (record.id) {
search.responseid = record.id;
history.push({ search: queryString.stringify(search) });
}
if (record?.id) {
setresponseid(record.id);
} else {
delete search.responseid;
history.push({ search: queryString.stringify(search) });
setresponseid("");
}
};
return (
<Card
extra={
@@ -105,7 +106,7 @@ export default function CsiResponseListPaginated({
pagination={{
position: "top",
pageSize: pageLimit,
current: parseInt(page || 1),
current: parseInt(state.page || 1),
total: total,
}}
columns={columns}
@@ -116,7 +117,6 @@ export default function CsiResponseListPaginated({
onSelect: (record) => {
handleOnRowClick(record);
},
selectedRowKeys: [responseid],
type: "radio",
}}
onRow={(record, rowIndex) => {

11
client/src/graphql/csi.queries.js
View File

@@ -57,19 +57,15 @@ export const INSERT_CSI = gql`
`;
export const QUERY_CSI_RESPONSE_PAGINATED = gql`
query QUERY_CSI_RESPONSE_PAGINATED(
$offset: Int
$limit: Int
$order: [csi_order_by!]!
) {
csi(offset: $offset, limit: $limit, order_by: $order) {
query QUERY_CSI_RESPONSE_PAGINATED {
csi(order_by: { completedon: desc_nulls_last }) {
id
completedon
job {
ownr_fn
ownr_ln
ownerid
ro_number
id
}
}
@@ -83,6 +79,7 @@ export const QUERY_CSI_RESPONSE_PAGINATED = gql`
export const QUERY_CSI_RESPONSE_BY_PK = gql`
query QUERY_CSI_RESPONSE_BY_PK($id: uuid!) {
csi_by_pk(id: $id) {
completedon
relateddata
valid
validuntil

38
client/src/pages/shop-csi/shop-csi.container.page.jsx
View File

@@ -1,22 +1,20 @@
import { Row, Col } from "antd";
import { useQuery } from "@apollo/client";
import queryString from "query-string";
import React, { useEffect } from "react";
import { Col, Row } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import AlertComponent from "../../components/alert/alert.component";
import CsiResponseFormContainer from "../../components/csi-response-form/csi-response-form.container";
import CsiResponseListPaginated from "../../components/csi-response-list-paginated/csi-response-list-paginated.component";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
import { QUERY_CSI_RESPONSE_PAGINATED } from "../../graphql/csi.queries";
import {
setBreadcrumbs,
setSelectedHeader,
} from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
import {pageLimit} from "../../utils/config";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
@@ -32,29 +30,13 @@ export function ShopCsiContainer({
setSelectedHeader,
}) {
const { t } = useTranslation();
const searchParams = queryString.parse(useLocation().search);
const { page, sortcolumn, sortorder } = searchParams;
const [responseid, setresponseid] = useState("");
const { loading, error, data, refetch } = useQuery(
QUERY_CSI_RESPONSE_PAGINATED,
{
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
variables: {
//search: search || "",
offset: page ? (page - 1) * pageLimit : 0,
limit: pageLimit,
order: [
{
[sortcolumn || "completedon"]: sortorder
? sortorder === "descend"
? "desc_nulls_last"
: "asc"
: "desc_nulls_last",
},
],
},
}
);
@@ -73,12 +55,7 @@ export function ShopCsiContainer({
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<RbacWrapper
action="csi:page"
// noauth={
// <AlertComponent message="You don't have acess to see this screen." />
// }
>
<RbacWrapper action="csi:page">
<Row gutter={16}>
<Col span={10}>
<CsiResponseListPaginated
@@ -86,10 +63,11 @@ export function ShopCsiContainer({
loading={loading}
responses={data ? data.csi : []}
total={data ? data.csi_aggregate.aggregate.count : 0}
setresponseid={setresponseid}
/>
</Col>
<Col span={14}>
<CsiResponseFormContainer />
<CsiResponseFormContainer responseid={responseid} />
</Col>
</Row>
</RbacWrapper>

3
client/src/translations/en_us/common.json
View File

@@ -845,7 +845,8 @@
"fields": {
"completedon": "Completed On",
"created_at": "Created At",
"surveyid": "Survey ID {{surveyId}}"
"surveyid": "Survey ID {{surveyId}}",
"validuntil": "Valid Until"
},
"labels": {
"nologgedinuser": "Please log out of ImEX Online",