FOUR-18637:implement content "Tasks" tab

resources/jscomposition/base/table/BaseTable.vue

@@ -9,7 +9,7 @@
             :key="index"
             :columns="columns"
             :column="column">
-            <slot :name="`theader-${column.field}`"> </slot>
+            <slot :name="`theader-${column.header}`"> </slot>
           </THeader>
         </tr>
       </thead>

resources/jscomposition/base/table/THeader.vue

@@ -47,7 +47,7 @@ export default defineComponent({
         return props.column?.headerFormatter(props.columns);
       }
 
-      return props.column.headerName || props.column.field || "";
+      return props.column.header || props.column.field || "";
     };
     return {
       getValue,

resources/jscomposition/cases/casesDetail/api/index.js

@@ -0,0 +1,24 @@
+export default {};
+
+const getData = async () => {
+  const objectsList = [];
+
+  for (let i = 0; i <= 31; i += 1) {
+    const obj = {
+      id: `${i}`,
+      case_title: `Case Title ${i}`,
+      process_name: `Process ${i}`,
+      assigned: `Avatar ${i}`,
+      current_task: `Task ${i}`,
+      status: `badge ${i}`,
+      started: `21/21/${i}`,
+      due_date: `21/21/${i}`,
+    };
+
+    objectsList.push(obj);
+  }
+
+  return objectsList;
+};
+
+export { getData };

resources/js/cases/components/CaseDetail.vue → resources/jscomposition/cases/casesDetail/components/CaseDetail.vue

@@ -10,6 +10,8 @@
 <script>
 import { defineComponent, ref } from "vue";
 import Tabs from "./Tabs.vue";
+import TaskTable from "./TaskTable.vue";
+import RequestTable from "./RequestTable.vue";
 
 export default defineComponent({
   components: { Tabs },
@@ -20,7 +22,7 @@ export default defineComponent({
 
     const tabs = [
       {
-        name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: "",
+        name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: TaskTable,
       },
       {
         name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
@@ -35,7 +37,7 @@ export default defineComponent({
         name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
       },
       {
-        name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: "",
+        name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
       },
     ];
 

resources/jscomposition/cases/casesDetail/components/RequestTable.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <BaseTable
+      id="request-table"
+      :columns="columnsConfig"
+      :data="data"
+    />
+    <Pagination />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { BaseTable, Pagination } from "../../../base";
+import { getData } from "../api/index";
+import { getColumns } from "../config/columns";
+
+export default defineComponent({
+  components: { BaseTable, Pagination },
+  setup() {
+    const data = ref(null);
+    const columnsConfig = ref(null);
+
+    onMounted(async () => {
+      data.value = await getData();
+      columnsConfig.value = getColumns("requests");
+    });
+
+    return {
+      data,
+      columnsConfig,
+    };
+  },
+});
+</script>

resources/js/cases/components/Tabs.vue → resources/jscomposition/cases/casesDetail/components/Tabs.vue

@@ -12,7 +12,7 @@
             :href="tab.href"
             class="tw-whitespace-nowrap tw-border-b-2 tw-px-1 tw-py-4 tw-text-sm tw-font-medium"
             :class="[tabSelected === tab.current ? 'tw-border-blue-500 tw-text-blue-500'
-                       : 'tw-border-transparent tw-text-gray-500 hover:tw-border-gray-600 hover:tw-text-gray-600'
+              : 'tw-border-transparent tw-text-gray-500 hover:tw-border-gray-600 hover:tw-text-gray-600'
             ]"
             :aria-current="tab.current ? 'page' : undefined"
             @click="selectTab(tab)"
@@ -21,7 +21,7 @@
           </a>
         </template>
       </nav>
-      <div class="content">
+      <div class="tw-mt-3">
         <component :is="content" />
       </div>
     </div>

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <BaseTable
+      id="task-table"
+      :columns="columnsConfig"
+      :data="data"
+    />
+    <Pagination />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { BaseTable, Pagination } from "../../../base";
+import { getData } from "../api/index";
+import { getColumns } from "../config/columns";
+
+export default defineComponent({
+  components: { BaseTable, Pagination },
+  setup() {
+    const data = ref(null);
+    const columnsConfig = ref(null);
+
+    onMounted(async () => {
+      data.value = await getData();
+      columnsConfig.value = getColumns("tasks");
+    });
+
+    return {
+      data,
+      columnsConfig,
+    };
+  },
+});
+</script>

resources/jscomposition/cases/casesDetail/config/columns.js

@@ -0,0 +1,99 @@
+import BadgeContainer from "../../casesMain/components/BadgeContainer.vue";
+import AvatarContainer from "../../casesMain/components/AvatarContainer.vue";
+
+export default {};
+
+// Column for Task
+const taskNumberColumn = () => ({
+  field: "id",
+  header: "Tasks #",
+  resizable: true,
+  width: 200,
+});
+
+const taskNameColumn = () => ({
+  field: "case_title",
+  header: "Task Name",
+  resizable: true,
+  width: 200,
+});
+
+const processNameColumn = () => ({
+  field: "process_name",
+  header: "Process",
+  resizable: true,
+  width: 200,
+});
+
+const assignedColumn = () => ({
+  field: "assigned",
+  header: "Assigned",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => AvatarContainer,
+});
+
+const dueDateColumn = () => ({
+  field: "due_date",
+  header: "Due Date",
+  resizable: true,
+  width: 200,
+});
+
+// Columns for Requests
+const requestNumberColumn = () => ({
+  field: "id",
+  header: "Request #",
+  resizable: true,
+  width: 200,
+});
+
+const requestNameColumn = () => ({
+  field: "case_title",
+  header: "Request Name",
+  resizable: true,
+  width: 200,
+});
+
+const currentTaskColumn = () => ({
+  field: "current_task",
+  header: "Current Task",
+  resizable: true,
+  width: 200,
+});
+
+const statusColumn = () => ({
+  field: "status",
+  header: "Status",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => BadgeContainer,
+});
+
+const startedColumn = () => ({
+  field: "started_date",
+  header: "started",
+  resizable: true,
+  width: 200,
+});
+
+export const getColumns = (type) => {
+  const columns = {
+    tasks: [
+      taskNumberColumn(),
+      taskNameColumn(),
+      processNameColumn(),
+      assignedColumn(),
+      dueDateColumn(),
+    ],
+    requests: [
+      requestNumberColumn(),
+      requestNameColumn(),
+      currentTaskColumn(),
+      statusColumn(),
+      startedColumn(),
+    ],
+  };
+
+  return columns[type];
+};

resources/views/cases/edit.blade.php

@@ -21,5 +21,5 @@
 @endsection
 
 @section('js')
-  <script src="{{mix('js/cases/edit.js')}}"></script>
+  <script src="{{mix('js/composition/cases/casesDetail/edit.js')}}"></script>
 @endsection

routes/web.php

@@ -137,6 +137,7 @@
     Route::post('/keep-alive', [LoginController::class, 'keepAlive'])->name('keep-alive');
     // Cases
     Route::get('cases', [RequestController::class, 'index'])->name('cases.index')->middleware('no-cache');
+    Route::get('cases/{request}', [RequestController::class, 'edit'])->name('cases.edit');
     // This is a temporary API the engine team will create the API
     Route::get('cases-main', [CasesController::class, 'index'])->name('cases-main.index')->middleware('no-cache');
     Route::get('cases/{type?}', [RequestController::class, 'index'])->name('cases_by_type')

webpack.mix.js

@@ -122,6 +122,7 @@ mix
   .js("resources/js/requests/show.js", "public/js/requests")
   .js("resources/js/requests/preview.js", "public/js/requests")
   .js("resources/jscomposition/cases/casesMain/main.js", "public/js/composition/cases/casesMain/main.js")
+  .js("resources/jscomposition/cases/casesDetail/edit.js", "public/js/composition/cases/casesDetail/edit.js")
   .js("resources/js/processes/translations/import.js", "public/js/processes/translations")
 
   .js("resources/js/processes-catalogue/index.js", "public/js/processes-catalogue/index.js")