Merge pull request #2289 from visuddhinanda/development

Development

api-v8/app/Http/Api/ProjectApi.php

@@ -17,6 +17,7 @@ class ProjectApi
         if ($project) {
             return [
                 'id' => $id,
+                'sn' => $project->id,
                 'title' => $project->title,
                 'type' => $project->type,
                 'weight' => $project->weight,
@@ -39,6 +40,7 @@ class ProjectApi
                 if ($project->uid === $id) {
                     $output[] = [
                         'id' => $id,
+                        'sn' => $project->id,
                         'title' => $project->title,
                         'type' => $project->type,
                         'weight' => $project->weight,

dashboard-v4/dashboard/src/components/api/task.ts

@@ -30,6 +30,7 @@ export type TTaskType = "instance" | "workflow" | "group";
 
 export interface IProject {
   id: string;
+  sn: number;
   title: string;
   description: string | null;
   weight: number;

dashboard-v4/dashboard/src/components/task/TaskRelation.tsx

@@ -22,15 +22,17 @@ const TaskRelation = ({ tasks }: IWidget) => {
     <Collapse
       defaultActiveKey={Array.from({ length: flowcharts.length }, (_, i) => i)}
     >
-      {flowcharts.map((item, id) => {
-        return (
-          <Panel header={item.title} key={id}>
-            <TaskFlowchart
-              tasks={tasks?.filter((value) => value.project_id === item.id)}
-            />
-          </Panel>
-        );
-      })}
+      {flowcharts
+        .sort((a, b) => a.sn - b.sn)
+        .map((item, id) => {
+          return (
+            <Panel header={item.title} key={id}>
+              <TaskFlowchart
+                tasks={tasks?.filter((value) => value.project_id === item.id)}
+              />
+            </Panel>
+          );
+        })}
     </Collapse>
   );
 };

dashboard-v4/dashboard/src/components/task/TaskTable.tsx

@@ -119,23 +119,25 @@ const TaskTable = ({ tasks, onChange }: IWidget) => {
           })}
         </thead>
         <tbody>
-          {projects?.map((row, index) => (
-            <tr key={index}>
-              <td key={"title"}>{row.title}</td>
-              <td key={"weight"}>{row.weight}</td>
-              {dataHeading?.map((task, id) => {
-                const taskData = tasks?.find(
-                  (value: ITaskData) =>
-                    value.title === task && value.project_id === row.id
-                );
-                return (
-                  <td key={id}>
-                    <TaskTableCell task={taskData} onChange={onChange} />
-                  </td>
-                );
-              })}
-            </tr>
-          ))}
+          {projects
+            ?.sort((a, b) => a.sn - b.sn)
+            .map((row, index) => (
+              <tr key={index}>
+                <td key={"title"}>{row.title}</td>
+                <td key={"weight"}>{row.weight}</td>
+                {dataHeading?.map((task, id) => {
+                  const taskData = tasks?.find(
+                    (value: ITaskData) =>
+                      value.title === task && value.project_id === row.id
+                  );
+                  return (
+                    <td key={id}>
+                      <TaskTableCell task={taskData} onChange={onChange} />
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
         </tbody>
       </table>
     </div>