- Progress Commit

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/task-list/task-list.component.jsx

@@ -2,58 +2,91 @@ import {Button, Card, Space, Switch, Table} from "antd";
 import queryString from "query-string";
 import React, {useCallback, useState} from "react";
 import {useTranslation} from "react-i18next";
-import {useLocation, useNavigate} from "react-router-dom";
+import {Link, useLocation, useNavigate} from "react-router-dom";
 import {pageLimit} from "../../utils/config";
 import dayjs from "../../utils/day";
 import {
   CheckCircleFilled,
   CheckCircleOutlined,
   DeleteFilled,
-  DeleteOutlined, ExclamationCircleFilled,
+  DeleteOutlined,
+  EditFilled,
+  ExclamationCircleFilled,
+  PlusCircleFilled,
   SyncOutlined
 } from "@ant-design/icons";
+import {DateFormatter} from "../../utils/DateFormatter.jsx";
+import {connect} from 'react-redux';
+import {setModalContext} from '../../redux/modals/modals.actions';
 
+/**
+ * Task List Component
+ * @param dueDate
+ * @returns {Element}
+ * @constructor
+ */
 const DueDateRecord = ({dueDate}) => {
   if (dueDate) {
-    const dueDateFormatted = dayjs(dueDate).format("YYYY-MM-DD");
-    const relativeDueDate = dayjs(dueDate).fromNow();
-    const today = dayjs().format("YYYY-MM-DD");
-    if (dueDateFormatted < today) {
-      return <div title={relativeDueDate} style={{color: 'red'}}>{dueDateFormatted}</div>;
+    const dueDateDayjs = dayjs(dueDate);
+    const relativeDueDate = dueDateDayjs.fromNow();
+    const today = dayjs();
+
+    if (dueDateDayjs.isAfter(today)) {
+      return <div title={relativeDueDate} style={{color: 'red'}}>
+        <DateFormatter>{dueDate}</DateFormatter></div>;
     } else {
-      return <div title={relativeDueDate}>{dueDateFormatted}</div>;
+      return <div title={relativeDueDate}><DateFormatter>{dueDate}</DateFormatter></div>;
     }
   } else {
     return <div>N/A</div>;
   }
 }
+
+/**
+ * Priority Label Component
+ * @param priority
+ * @returns {Element}
+ * @constructor
+ */
 const PriorityLabel = ({priority}) => {
   switch(priority) {
     case 1:
       return <div>
-        <ExclamationCircleFilled style={{color: 'red'}} /> High
+        High <ExclamationCircleFilled style={{marginLeft: '5px', color: 'red'}}/>
       </div>;
     case 2:
       return <div>
-        <ExclamationCircleFilled style={{ color: 'yellow' }} /> Medium
+        Medium <ExclamationCircleFilled style={{marginLeft: '5px', color: 'yellow'}}/>
       </div>;
     case 3:
       return <div>
-        <ExclamationCircleFilled style={{ color: 'green' }} /> Low
+        Low <ExclamationCircleFilled style={{marginLeft: '5px', color: 'green'}}/>
       </div>;
     default:
       return <div>
-        <ExclamationCircleFilled style={{ color: 'black' }} /> None
+        None <ExclamationCircleFilled style={{marginLeft: '5px', color: 'black'}}/>
       </div>;
   }
 }
 
-export default function TaskListComponent({
+const mapDispatchToProps = (dispatch) => ({
+  // Existing dispatch props...
+  setTaskUpsertContext: (context) => dispatch(setModalContext({context, modal: 'taskUpsert'})),
+});
+
+const mapStateToProps = (state) => ({
+  // Existing state props...
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskListComponent);
+
+function TaskListComponent({
                                             loading,
                                             tasks,
                                             total,
                                             refetch,
                                             toggleCompletedStatus,
+                             setTaskUpsertContext,
                                           }) {
   const {t} = useTranslation();
 
@@ -71,6 +104,17 @@ export default function TaskListComponent({
   const history = useNavigate();
 
   const columns = [
+    {
+      title: t("tasks.fields.job.ro_number"),
+      dataIndex: ["job", "ro_number"],
+      key: "job.ro_number",
+      width: '5%',
+      render: (text, record) => (
+        <Link to={`/manage/jobs/${record.job.id}`}>
+          {record.job.ro_number}
+        </Link>
+      ),
+    },
     {
       title: t("tasks.fields.title"),
       dataIndex: "title",
@@ -110,6 +154,16 @@ export default function TaskListComponent({
       width: '5%',
       render: (text, record) => (
         <Space direction='horizontal'>
+          <Button title={t('tasks.actions.edit')} onClick={() => {
+            setTaskUpsertContext({
+              actions: {},
+              context: {
+                existingTask: record,
+              },
+            });
+          }}>
+            <EditFilled/>
+          </Button>
           <Button title={t('tasks.actions.toggle_completed')}
                   onClick={() => toggleCompletedStatus(record.id, record.completed)}>
             {record.completed ? <CheckCircleOutlined/> :
@@ -129,7 +183,12 @@ export default function TaskListComponent({
     filteredInfo: {text: ""},
   });
 
-  // Columns definition remains the same
+  const handleCreateTask = () => {
+    setTaskUpsertContext({
+      actions: {},
+      context: {},
+    });
+  };
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({...state, filteredInfo: filters, sortedInfo: sorter});
@@ -169,6 +228,9 @@ export default function TaskListComponent({
           checked={deleted === "true"}
           onChange={(value) => handleSwitchChange('deleted', value)}
         />
+        <Button title={t('tasks.titles.create')} onClick={handleCreateTask}>
+          <PlusCircleFilled/>{t('tasks.buttons.create')}
+        </Button>
         <Button title={t('tasks.titles.refresh')}
                 onClick={() => refetch()}>
           <SyncOutlined/>
@@ -179,7 +241,7 @@ export default function TaskListComponent({
 
   return (
     <Card
-      title={t("menus.header.tasks")}
+      title={t("menus.header.my_tasks")}
       extra={tasksExtra()}
     >
       <Table