{/* Changed alignItems to flex-start */}
+ {/* Left Section */}
+
+ {/* Full-width Work Order Title */}
+
Work Order Title:
+
handleChangeKV("workerOrderTitle", event.target.value)}
+ error={!!errors.workerOrderTitle}
+ helperText={errors.workerOrderTitle}
+ disabled={viewOnly} // Disable if in read-only mode
+ />
+
+ {/* Inputs Layout for WO number, PO#, TT# */}
+
+
+ WO Number:
+ handleChangeKV("workerOrderNumber", event.target.value)}
+ error={!!errors.workerOrderNumber}
+ helperText={errors.workerOrderNumber}
+ disabled={viewOnly} // Disable if in read-only mode
+ />
+
+
+
+ PO #:
+ handleChangeKV("po", event.target.value)}
+ error={!!errors.po}
+ helperText={errors.po}
+ disabled={viewOnly} // Disable if in read-only mode
+ />
+
+
+
+ TT #:
+ handleChangeKV("tt", event.target.value)}
+ error={!!errors.tt}
+ helperText={errors.tt}
+ disabled={viewOnly} // Disable if in read-only mode
+ />
+
+
+
+ Priority:
+ handleChangeKV("priority", event.target.value)}
+ disabled={viewOnly} // Disable if in read-only mode
+ >
+ {priorities.map((priority, index) => (
+
+ {priority.text}
+
+ ))}
+
+
+
+
+ Schedule Date:
+ handleChangeKV("scheduleDate", event.target.value)}
+ disabled={viewOnly} // Disable if in read-only mode
+ />
+
+
+
+ Due Date:
+ handleChangeKV("dueDate", event.target.value)}
+ disabled={viewOnly} // Disable if in read-only mode
+ />
+
+
+
+ Categories:
+ handleChangeKV("workOrderCategories", event.target.value)}
+ disabled={viewOnly} // Disable if in read-only mode
+ >
+ {categories.map((category) => (
+
+ {category.name}
+
+ ))}
+
+
+
+
+ Work Order Type:
+ handleChangeKV("workOrderType", event.target.value)}
+ disabled={viewOnly} // Disable if in read-only mode
+ >
+ {workOrderTypes.map((type) => (
+
+ {type.text}
+
+ ))}
+
+
+
+
+ Site Contact:
+ handleChangeKV("workOrderContacts", event.target.value)}
+ disabled={viewOnly} // Disable if in read-only mode
+ >
+ {contacts.map((contact) => (
+
+ {contact.name}
+
+ ))}
+
+
+
+
+ Dispatcher:
+ handleChangeKV("assignTo", event.target.value)}
+ disabled={viewOnly} // Disable if in read-only mode
+ >
+ {users.map((user) => (
+
+ {user.firstName}
+
+ ))}
+
+
+
+ Location:
+ handleChangeKV("locationId", event.target.value)}
+ disabled={viewOnly} // Disable if in read-only mode
+ >
+ {locations.map((location) => (
+
+ {location.name}
+
+ ))}
+
+
-
- {
- const { value } = event.target;
- handleChangeKV("workerOrderTitle", value);
- }}
- label="Work Order Title"
- >
- {workOrderTitles.map((title, index) => (
-
- {title}
-
- ))}
-
- Work Order Title:
- {
- const { value } = event.target;
- handleChangeKV("workerOrderTitle", value);
- }}
- error={!!errors.workerOrderTitle}
- helperText={errors.workerOrderTitle}
- />
-
-
- Description
- {
- const { value } = event.target;
- handleChangeKV("description", value);
- }}
- error={!!errors.description}
- helperText={errors.description}
- />
-
-
- PO # :
- {
- const { value } = event.target;
- handleChangeKV("po", value);
- }}
- error={!!errors.po}
- helperText={errors.po}
- />
-
-
- TT #
- {
- const { value } = event.target;
- handleChangeKV("tt", value);
- }}
- error={!!errors.tt}
- helperText={errors.tt}
- />
-
-
- Due Date*
- {
- const { value } = event.target;
- handleChangeKV("dueDate", value);
- }}
- error={!!errors.dueDate}
- helperText={errors.dueDate}
- />
-
-
- POC*
- {
- const { value } = event.target;
- handleChangeKV("workOrderContacts", value?.toString());
- }}
- >
- {contacts.map((s, i) => (
-
- {s.name}
-
- ))}
-
-
-
- Assigned To:*
- {
- const { value } = event.target;
- handleChangeKV("assignTo", value);
- }}
- >
- {users.map((s, i) => (
-
- {s.firstName}
-
- ))}
-
-
-
- Priority:*
- {
- const { value } = event.target;
- handleChangeKV("priority", value);
- }}
- >
- {priorities.map((s, i) => (
-
- {s.text}
-
- ))}
-
-
-
- Work Order Type:*
- {
- const { value } = event.target;
- handleChangeKV("workOrderType", value);
- }}
- label="Work Order Type"
- >
- {workOrderTypes.map((type, index) => (
-
- {type.text}
-
- ))}
-
-
-
- Location:*
- {
- const { value } = event.target;
- handleChangeKV("locationId", value);
- }}
- >
- {locations.map((s, i) => (
-
- {s.name}
-
- ))}
-
-
-
-
Categories:*
-
{
- const { value } = event.target;
- handleChangeKV("workOrderCategories", value?.toString());
- }}
- >
- {categories.map((s, i) => (
-
- {s.name}
-
- ))}
-
+ {/* Right Section for Notes, starts at the same level as Work Order Title */}
+
{/* Added margin-top to align with the title */}
+ Notes:
+ handleChangeKV("notes", event.target.value)}
+ disabled={viewOnly} // Disable if in read-only mode
+ />
+
-
- Cancel
- Close
+ {!viewOnly && (
+
@@ -384,4 +346,4 @@ const ItemForm = ({
);
};
-export default ItemForm;
+export default ItemForm;
\ No newline at end of file
diff --git a/src/pages/workorder/components/Table.js b/src/pages/workorder/components/Table.js
index a1309fe..b5afe61 100644
--- a/src/pages/workorder/components/Table.js
+++ b/src/pages/workorder/components/Table.js
@@ -4,12 +4,35 @@ import IconButton from "@mui/material/IconButton";
import EditOutlined from "@mui/icons-material/EditOutlined";
import DeleteIcon from "@mui/icons-material/Delete";
import SpeakerNotes from '@mui/icons-material/SpeakerNotes';
+import PermMediaIcon from '@mui/icons-material/PermMedia';
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
import TableStyles from './TableStyles';
import { createTheme, ThemeProvider } from '@mui/material/styles';
-import PermMediaIcon from '@mui/icons-material/PermMedia';
+import { post } from '../../../apiUtil';
+import { API_URL } from '../../../constants';
-const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpenAttachmentsClick }) => {
+export const EditStatus = (item) => post(`${API_URL}/WorkOrder/EditStatus`, item);
+export const EditAvettaTask = (item) => post(`${API_URL}/WorkOrder/EditAvettaTask`, item);
+
+const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpenAttachmentsClick, onRowClickViewOnly }) => {
const classes = TableStyles();
+
+ const statusOptions = [
+ "Open",
+ "Pending",
+ "Assigned",
+ "In Progress",
+ "On Hold",
+ "Cancelled",
+ "Completed"
+ ];
+
+ const completionOptions = [
+ "Yes, Complete",
+ "Yes, Incomplete",
+ "No" // Default option
+ ];
const getMuiTheme = () => {
return createTheme({
@@ -19,49 +42,61 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
root: {
backgroundColor: '#98acbf',
color: '#fff',
- }
- },
- },
- MUIDataTableSelectCell: {
- styleOverrides: {
- headerCell: {
- backgroundColor: '#98acbf',
- color: '#fff',
- }
- }
- },
- MUIDataTableBodyRow: {
- styleOverrides: {
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: 'rgba(0, 0, 0, 0.02)'
- }
- }
+ cursor: 'col-resize', // Indicate column can be resized
+ },
},
},
MUIDataTableBodyCell: {
styleOverrides: {
root: {
padding: 6,
- wordBreak: 'break-all'
- }
+ wordBreak: 'break-all',
+ },
+ },
+ },
+ MUIDataTableBodyRow: {
+ styleOverrides: {
+ root: {
+ cursor: 'pointer', // Change cursor to pointer for clickable rows
+ },
},
},
},
- })
- }
+ });
+ };
+ const updateStatusOnServer = async (id, status) => {
+ try {
+ await EditStatus({ id, status });
+ } catch (error) {
+ console.error('Error updating status:', error);
+ }
+ };
+
+ const updateTaskOnServer = async (id, avettaTask) => {
+ try {
+ await EditAvettaTask({ id, avettaTask });
+ } catch (error) {
+ console.error('Error updating Avetta Task:', error);
+ }
+ };
+
+ const handleRowClick = (rowData, rowMeta) => {
+ const index = rowMeta.dataIndex;
+ const selectedItem = items[index]; // Access the original items array
+ onRowClickViewOnly({ open: true, selectedItem, viewOnly:true }); // Pass the selected item
+ };
const columns = [
{
name: "id",
- label: "id",
+ label: "ID",
options: {
display: false,
filter: false,
sort: false,
- viewColumns:false,
- }
+ viewColumns: false,
+ },
},
{
name: "workerOrderNumber",
@@ -70,7 +105,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
display: true,
filter: false,
sort: true,
- }
+ },
},
{
name: "workerOrderTitle",
@@ -79,7 +114,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
display: true,
filter: false,
sort: true,
- }
+ },
},
{
name: "assignToUserName",
@@ -88,7 +123,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
display: true,
filter: true,
sort: false,
- }
+ },
},
{
name: "priority",
@@ -97,7 +132,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
display: true,
filter: true,
sort: false,
- }
+ },
},
{
name: "status",
@@ -106,7 +141,58 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
display: true,
filter: true,
sort: false,
- }
+ customBodyRender: (value, tableMeta, updateValue) => {
+ return (
+
{
+ const newStatus = event.target.value;
+ const rowId = tableMeta.rowData[0];
+ await updateStatusOnServer(rowId, newStatus);
+ updateValue(newStatus);
+ }}
+ >
+ {statusOptions.map((status) => (
+
+ {status}
+
+ ))}
+
+ );
+ },
+ },
+ },
+ {
+ name: "avettaTask",
+ label: "Avetta Task", // New column
+ options: {
+ display: true,
+ filter: true,
+ sort: false,
+ customBodyRender: (value, tableMeta, updateValue) => {
+ return (
+
{
+ const newAvettaTask = event.target.value;
+ const rowId = tableMeta.rowData[0];
+ await updateTaskOnServer(rowId, newAvettaTask); // Update server with new task status
+ updateValue(newAvettaTask);
+ }}
+ >
+ {completionOptions.map((completion) => (
+
+ {completion}
+
+ ))}
+
+ );
+ },
+ },
},
{
name: "formattedDueDate",
@@ -115,7 +201,16 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
display: true,
filter: true,
sort: false,
- }
+ },
+ },
+ {
+ name: "formattedAssignDate",
+ label: "AssignDate",
+ options: {
+ display: true,
+ filter: true,
+ sort: false,
+ },
},
{
name: "",
@@ -124,7 +219,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
filter: false,
sort: false,
empty: true,
- customBodyRender: (value, tableMeta, updateValue) => {
+ customBodyRender: (value, tableMeta) => {
return (
<>
{
e.stopPropagation();
- const id = tableMeta.rowData[0];
- const _selectedItem = tableMeta.tableData
- .find(obj => obj.id == id);
- onEditClick({ open: true, selectedItem: _selectedItem });
+ const rowIndex = tableMeta.rowIndex; // Get the index of the row
+ const selectedItem = items[rowIndex]; // Access the original items array
+ onEditClick({ open: true, selectedItem }); // Pass the selected item
}}
>
-
{
- e.stopPropagation();
- const id = tableMeta.rowData[0];
- const _selectedItem = tableMeta.tableData
- .find(obj => obj.id == id);
- onDeleteClick({ open: true, selectedItem: _selectedItem });
- }}
- >
-
{
e.stopPropagation();
- const id = tableMeta.rowData[0];
- const _selectedItem = tableMeta.tableData
- .find(obj => obj.id == id);
- onOpenNoteClick({ open: true, selectedItem: _selectedItem });
+ const rowIndex = tableMeta.rowIndex; // Get the index of the row
+ const selectedItem = items[rowIndex]; // Access the original items array
+ onOpenNoteClick({ open: true, selectedItem }); // Pass the selected item
}}
>
-
{
e.stopPropagation();
- const id = tableMeta.rowData[0];
- const _selectedItem = tableMeta.tableData
- .find(obj => obj.id == id);
- onOpenAttachmentsClick({ open: true, selectedItem: _selectedItem });
+ const rowIndex = tableMeta.rowIndex; // Get the index of the row
+ const selectedItem = items[rowIndex]; // Access the original items array
+ onOpenAttachmentsClick({ open: true, selectedItem }); // Pass the selected item
}}
>
-
+
{
+ e.stopPropagation();
+ const rowIndex = tableMeta.rowIndex; // Get the index of the row
+ const selectedItem = items[rowIndex]; // Access the original items array
+ onDeleteClick({ open: true, selectedItem }); // Pass the selected item
+ }}
+ >
+
);
@@ -190,16 +281,13 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
}
];
- const handleRowClick = (rowData, rowMeta) => {
- console.log(rowData, rowMeta);
- };
-
const options = {
filterType: "checkbox",
rowsPerPage: 50,
- rowsPerPageOptions: [50, 100, 200],
+ rowsPerPageOptions: [50, 100, 200],
jumpToPage: true,
onRowClick: handleRowClick,
+ resizableColumns: true, // Enables column resizing
};
return (
@@ -212,6 +300,6 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
/>
);
-}
+};
-export default React.memo(TableItems);
+export default React.memo(TableItems);
\ No newline at end of file
diff --git a/src/pages/workorder/edit/index.js b/src/pages/workorder/edit/index.js
index 368947e..9b62b9f 100644
--- a/src/pages/workorder/edit/index.js
+++ b/src/pages/workorder/edit/index.js
@@ -3,7 +3,7 @@ import Form from "../components/Form";
import { EDIT } from "../../../constants";
import { editItems } from "./api";
-const EditItemModal = ({ item, open, setOpen, isEdit, setApiStatus }) => {
+const EditItemModal = ({ item, open, setOpen, isEdit, setApiStatus, viewOnly = false }) => {
return (
isEdit && open && (