From b6a1a7c0d1011ae0a7c135a1eaf8dae979ef0686 Mon Sep 17 00:00:00 2001 From: Fabio Date: Mon, 16 Sep 2024 14:35:11 -0400 Subject: [PATCH 1/3] FOUR-18637:implement content "Tasks" tab --- .../jscomposition/base/table/BaseTable.vue | 2 +- .../jscomposition/base/table/THeader.vue | 2 +- .../cases/casesDetail/api/index.js | 24 +++++ .../casesDetail}/components/CaseDetail.vue | 6 +- .../casesDetail/components/RequestTable.vue | 35 +++++++ .../cases/casesDetail}/components/Tabs.vue | 4 +- .../casesDetail/components/TaskTable.vue | 35 +++++++ .../cases/casesDetail/config/columns.js | 99 +++++++++++++++++++ .../cases/casesDetail}/edit.js | 0 resources/views/cases/edit.blade.php | 2 +- 10 files changed, 202 insertions(+), 7 deletions(-) create mode 100644 resources/jscomposition/cases/casesDetail/api/index.js rename resources/{js/cases => jscomposition/cases/casesDetail}/components/CaseDetail.vue (86%) create mode 100644 resources/jscomposition/cases/casesDetail/components/RequestTable.vue rename resources/{js/cases => jscomposition/cases/casesDetail}/components/Tabs.vue (91%) create mode 100644 resources/jscomposition/cases/casesDetail/components/TaskTable.vue create mode 100644 resources/jscomposition/cases/casesDetail/config/columns.js rename resources/{js/cases => jscomposition/cases/casesDetail}/edit.js (100%) diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue index 638ba50f69..3fd2797617 100644 --- a/resources/jscomposition/base/table/BaseTable.vue +++ b/resources/jscomposition/base/table/BaseTable.vue @@ -9,7 +9,7 @@ :key="index" :columns="columns" :column="column"> - + diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue index e7dee4d39e..cd10c14b54 100644 --- a/resources/jscomposition/base/table/THeader.vue +++ b/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, diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js new file mode 100644 index 0000000000..1a7a835625 --- /dev/null +++ b/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 }; diff --git a/resources/js/cases/components/CaseDetail.vue b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue similarity index 86% rename from resources/js/cases/components/CaseDetail.vue rename to resources/jscomposition/cases/casesDetail/components/CaseDetail.vue index 6135a8aeb5..b348088f5c 100644 --- a/resources/js/cases/components/CaseDetail.vue +++ b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue @@ -10,6 +10,8 @@ diff --git a/resources/js/cases/components/Tabs.vue b/resources/jscomposition/cases/casesDetail/components/Tabs.vue similarity index 91% rename from resources/js/cases/components/Tabs.vue rename to resources/jscomposition/cases/casesDetail/components/Tabs.vue index d7f752eca7..0f0f056932 100644 --- a/resources/js/cases/components/Tabs.vue +++ b/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 @@ -
+
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue new file mode 100644 index 0000000000..ec56dc0555 --- /dev/null +++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue @@ -0,0 +1,35 @@ + + + diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js new file mode 100644 index 0000000000..2d00eadf2f --- /dev/null +++ b/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, + with: 200, +}); + +const taskNameColumn = () => ({ + field: "case_title", + header: "Task Name", + resizable: true, + with: 200, +}); + +const processNameColumn = () => ({ + field: "process_name", + header: "Process", + resizable: true, + with: 200, +}); + +const assignedColumn = () => ({ + field: "assigned", + header: "Assigned", + resizable: true, + with: 200, + cellRenderer: () => AvatarContainer, +}); + +const dueDateColumn = () => ({ + field: "due_date", + header: "Due Date", + resizable: true, + with: 200, +}); + +// Columns for Requests +const requestNumberColumn = () => ({ + field: "id", + header: "Request #", + resizable: true, + with: 200, +}); + +const requestNameColumn = () => ({ + field: "case_title", + header: "Request Name", + resizable: true, + with: 200, +}); + +const currentTaskColumn = () => ({ + field: "current_task", + header: "Current Task", + resizable: true, + with: 200, +}); + +const statusColumn = () => ({ + field: "status", + header: "Status", + resizable: true, + with: 200, + cellRenderer: () => BadgeContainer, +}); + +const startedColumn = () => ({ + field: "started_date", + header: "started", + resizable: true, + with: 200, +}); + +export const getColumns = (type) => { + const columns = { + tasks: [ + taskNumberColumn(), + taskNameColumn(), + processNameColumn(), + assignedColumn(), + dueDateColumn(), + ], + requests: [ + requestNumberColumn(), + requestNameColumn(), + currentTaskColumn(), + statusColumn(), + startedColumn(), + ], + }; + + return columns[type]; +}; diff --git a/resources/js/cases/edit.js b/resources/jscomposition/cases/casesDetail/edit.js similarity index 100% rename from resources/js/cases/edit.js rename to resources/jscomposition/cases/casesDetail/edit.js diff --git a/resources/views/cases/edit.blade.php b/resources/views/cases/edit.blade.php index a89c2e3b46..b95a5fba74 100644 --- a/resources/views/cases/edit.blade.php +++ b/resources/views/cases/edit.blade.php @@ -21,5 +21,5 @@ @endsection @section('js') - + @endsection From 343faed2a3f9c2cbc80502076aba2588e2f29c41 Mon Sep 17 00:00:00 2001 From: Fabio Date: Mon, 16 Sep 2024 15:41:09 -0400 Subject: [PATCH 2/3] CR --- .../cases/casesDetail/config/columns.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js index 2d00eadf2f..21f34b20e1 100644 --- a/resources/jscomposition/cases/casesDetail/config/columns.js +++ b/resources/jscomposition/cases/casesDetail/config/columns.js @@ -8,28 +8,28 @@ const taskNumberColumn = () => ({ field: "id", header: "Tasks #", resizable: true, - with: 200, + width: 200, }); const taskNameColumn = () => ({ field: "case_title", header: "Task Name", resizable: true, - with: 200, + width: 200, }); const processNameColumn = () => ({ field: "process_name", header: "Process", resizable: true, - with: 200, + width: 200, }); const assignedColumn = () => ({ field: "assigned", header: "Assigned", resizable: true, - with: 200, + width: 200, cellRenderer: () => AvatarContainer, }); @@ -37,7 +37,7 @@ const dueDateColumn = () => ({ field: "due_date", header: "Due Date", resizable: true, - with: 200, + width: 200, }); // Columns for Requests @@ -45,28 +45,28 @@ const requestNumberColumn = () => ({ field: "id", header: "Request #", resizable: true, - with: 200, + width: 200, }); const requestNameColumn = () => ({ field: "case_title", header: "Request Name", resizable: true, - with: 200, + width: 200, }); const currentTaskColumn = () => ({ field: "current_task", header: "Current Task", resizable: true, - with: 200, + width: 200, }); const statusColumn = () => ({ field: "status", header: "Status", resizable: true, - with: 200, + width: 200, cellRenderer: () => BadgeContainer, }); @@ -74,7 +74,7 @@ const startedColumn = () => ({ field: "started_date", header: "started", resizable: true, - with: 200, + width: 200, }); export const getColumns = (type) => { From 619a1e8eed2e0b9c92f1ab812646e7249230bbb2 Mon Sep 17 00:00:00 2001 From: Fabio Date: Tue, 17 Sep 2024 08:22:10 -0400 Subject: [PATCH 3/3] routes --- routes/web.php | 1 + webpack.mix.js | 1 + 2 files changed, 2 insertions(+) diff --git a/routes/web.php b/routes/web.php index 79f9f40450..3ef78d39a3 100644 --- a/routes/web.php +++ b/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') diff --git a/webpack.mix.js b/webpack.mix.js index e26379255a..ece7502148 100644 --- a/webpack.mix.js +++ b/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")