feature/FOUR-18135: Story 5

ProcessMaker/Http/Controllers/CasesController.php

@@ -41,4 +41,8 @@ public function index($type = null)
  // This is a temporary API the engine team will provide the new
  return view('cases.casesMain');
  }
+ public function edit(ProcessRequest $request)
+ {
+ return view('cases.edit');
+ }
 }

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/jscomposition/cases/casesDetail/components/CaseDetail.vue

@@ -0,0 +1,50 @@
+<template>
+ <div class="container-fluid">
+ <Tabs
+ :tab-default="tabDefault"
+ :tabs="tabs"
+ />
+ </div>
+</template>
+
+<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 },
+ setup() {
+ const translate = ProcessMaker.i18n;
+
+ const tabDefault = ref("tasks");
+
+ const tabs = [
+ {
+ name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: TaskTable,
+ },
+ {
+ name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
+ },
+ {
+ name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+ },
+ {
+ name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
+ },
+ {
+ name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
+ },
+ {
+ name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
+ },
+ ];
+
+ return {
+ tabs,
+ tabDefault,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/components/Tabs.vue

@@ -0,0 +1,66 @@
+<template>
+ <div class="tw-block">
+ <div class="tw-border-b tw-border-gray-200">
+ <nav
+ class="tw-mb-px tw-flex tw-space-x-8"
+ aria-label="Tabs"
+ >
+ <template v-for="(tab, index) in tabs">
+ <a
+ v-if="tab.show"
+ :key="index"
+ :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'
+ ]"
+ :aria-current="tab.current ? 'page' : undefined"
+ @click="selectTab(tab)"
+ >
+ {{ tab.name }}
+ </a>
+ </template>
+ </nav>
+ <div class="tw-mt-3">
+ <component :is="content" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+
+export default defineComponent({
+ props: {
+ tabDefault: {
+ type: String,
+ required: true,
+ },
+ tabs: {
+ type: Array,
+ required: true,
+ },
+ },
+ setup(props) {
+ const content = ref(null);
+ const tabSelected = ref(props.tabDefault);
+ const selectTab = (tab) => {
+ content.value = tab.content;
+ tabSelected.value = tab.current;
+ };
+
+ const defaultTab = () => props.tabs.find((tab) => tab.current === tabSelected.value);
+
+ onMounted(() => {
+ selectTab(defaultTab());
+ });
+
+ return {
+ content,
+ selectTab,
+ tabSelected,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/edit.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+
+new Vue({
+ el: "#case-detail",
+ components: { CaseDetail },
+ data() {},
+});

resources/views/cases/edit.blade.php

@@ -0,0 +1,25 @@
+@extends('layouts.layout')
+
+@section('title')
+ {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+ @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+ @include('shared.breadcrumbs', ['routes' => [
+ __('Cases') => route('cases.index'),
+ ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
+ <case-detail></case-detail>
+</div>
+@endsection
+
+@section('js')
+ <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}', [CasesController::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")

ProcessMaker/Http/Controllers/CasesController.php

@@ -41,4 +41,8 @@ public function index($type = null)
  // This is a temporary API the engine team will provide the new
  return view('cases.casesMain');
  }
+ public function edit(ProcessRequest $request)
+ {
+ return view('cases.edit');
+ }
 }

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/jscomposition/cases/casesDetail/components/CaseDetail.vue

@@ -0,0 +1,50 @@
+<template>
+ <div class="container-fluid">
+ <Tabs
+ :tab-default="tabDefault"
+ :tabs="tabs"
+ />
+ </div>
+</template>
+
+<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 },
+ setup() {
+ const translate = ProcessMaker.i18n;
+
+ const tabDefault = ref("tasks");
+
+ const tabs = [
+ {
+ name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: TaskTable,
+ },
+ {
+ name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
+ },
+ {
+ name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+ },
+ {
+ name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
+ },
+ {
+ name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
+ },
+ {
+ name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
+ },
+ ];
+
+ return {
+ tabs,
+ tabDefault,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/components/Tabs.vue

@@ -0,0 +1,66 @@
+<template>
+ <div class="tw-block">
+ <div class="tw-border-b tw-border-gray-200">
+ <nav
+ class="tw-mb-px tw-flex tw-space-x-8"
+ aria-label="Tabs"
+ >
+ <template v-for="(tab, index) in tabs">
+ <a
+ v-if="tab.show"
+ :key="index"
+ :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'
+ ]"
+ :aria-current="tab.current ? 'page' : undefined"
+ @click="selectTab(tab)"
+ >
+ {{ tab.name }}
+ </a>
+ </template>
+ </nav>
+ <div class="tw-mt-3">
+ <component :is="content" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+
+export default defineComponent({
+ props: {
+ tabDefault: {
+ type: String,
+ required: true,
+ },
+ tabs: {
+ type: Array,
+ required: true,
+ },
+ },
+ setup(props) {
+ const content = ref(null);
+ const tabSelected = ref(props.tabDefault);
+ const selectTab = (tab) => {
+ content.value = tab.content;
+ tabSelected.value = tab.current;
+ };
+
+ const defaultTab = () => props.tabs.find((tab) => tab.current === tabSelected.value);
+
+ onMounted(() => {
+ selectTab(defaultTab());
+ });
+
+ return {
+ content,
+ selectTab,
+ tabSelected,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/edit.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+
+new Vue({
+ el: "#case-detail",
+ components: { CaseDetail },
+ data() {},
+});

resources/views/cases/edit.blade.php

@@ -0,0 +1,25 @@
+@extends('layouts.layout')
+
+@section('title')
+ {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+ @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+ @include('shared.breadcrumbs', ['routes' => [
+ __('Cases') => route('cases.index'),
+ ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
+ <case-detail></case-detail>
+</div>
+@endsection
+
+@section('js')
+ <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}', [CasesController::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")

ProcessMaker/Http/Controllers/CasesController.php

@@ -41,4 +41,8 @@ public function index($type = null)
  // This is a temporary API the engine team will provide the new
  return view('cases.casesMain');
  }
+ public function edit(ProcessRequest $request)
+ {
+ return view('cases.edit');
+ }
 }

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/jscomposition/cases/casesDetail/components/CaseDetail.vue

@@ -0,0 +1,50 @@
+<template>
+ <div class="container-fluid">
+ <Tabs
+ :tab-default="tabDefault"
+ :tabs="tabs"
+ />
+ </div>
+</template>
+
+<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 },
+ setup() {
+ const translate = ProcessMaker.i18n;
+
+ const tabDefault = ref("tasks");
+
+ const tabs = [
+ {
+ name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: TaskTable,
+ },
+ {
+ name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
+ },
+ {
+ name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+ },
+ {
+ name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
+ },
+ {
+ name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
+ },
+ {
+ name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
+ },
+ ];
+
+ return {
+ tabs,
+ tabDefault,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/components/Tabs.vue

@@ -0,0 +1,66 @@
+<template>
+ <div class="tw-block">
+ <div class="tw-border-b tw-border-gray-200">
+ <nav
+ class="tw-mb-px tw-flex tw-space-x-8"
+ aria-label="Tabs"
+ >
+ <template v-for="(tab, index) in tabs">
+ <a
+ v-if="tab.show"
+ :key="index"
+ :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'
+ ]"
+ :aria-current="tab.current ? 'page' : undefined"
+ @click="selectTab(tab)"
+ >
+ {{ tab.name }}
+ </a>
+ </template>
+ </nav>
+ <div class="tw-mt-3">
+ <component :is="content" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+
+export default defineComponent({
+ props: {
+ tabDefault: {
+ type: String,
+ required: true,
+ },
+ tabs: {
+ type: Array,
+ required: true,
+ },
+ },
+ setup(props) {
+ const content = ref(null);
+ const tabSelected = ref(props.tabDefault);
+ const selectTab = (tab) => {
+ content.value = tab.content;
+ tabSelected.value = tab.current;
+ };
+
+ const defaultTab = () => props.tabs.find((tab) => tab.current === tabSelected.value);
+
+ onMounted(() => {
+ selectTab(defaultTab());
+ });
+
+ return {
+ content,
+ selectTab,
+ tabSelected,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/edit.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+
+new Vue({
+ el: "#case-detail",
+ components: { CaseDetail },
+ data() {},
+});

resources/views/cases/edit.blade.php

@@ -0,0 +1,25 @@
+@extends('layouts.layout')
+
+@section('title')
+ {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+ @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+ @include('shared.breadcrumbs', ['routes' => [
+ __('Cases') => route('cases.index'),
+ ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
+ <case-detail></case-detail>
+</div>
+@endsection
+
+@section('js')
+ <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}', [CasesController::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")

ProcessMaker/Http/Controllers/CasesController.php

@@ -41,4 +41,8 @@ public function index($type = null)
  // This is a temporary API the engine team will provide the new
  return view('cases.casesMain');
  }
+ public function edit(ProcessRequest $request)
+ {
+ return view('cases.edit');
+ }
 }

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/jscomposition/cases/casesDetail/components/CaseDetail.vue

@@ -0,0 +1,50 @@
+<template>
+ <div class="container-fluid">
+ <Tabs
+ :tab-default="tabDefault"
+ :tabs="tabs"
+ />
+ </div>
+</template>
+
+<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 },
+ setup() {
+ const translate = ProcessMaker.i18n;
+
+ const tabDefault = ref("tasks");
+
+ const tabs = [
+ {
+ name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: TaskTable,
+ },
+ {
+ name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
+ },
+ {
+ name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+ },
+ {
+ name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
+ },
+ {
+ name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
+ },
+ {
+ name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
+ },
+ ];
+
+ return {
+ tabs,
+ tabDefault,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/components/Tabs.vue

@@ -0,0 +1,66 @@
+<template>
+ <div class="tw-block">
+ <div class="tw-border-b tw-border-gray-200">
+ <nav
+ class="tw-mb-px tw-flex tw-space-x-8"
+ aria-label="Tabs"
+ >
+ <template v-for="(tab, index) in tabs">
+ <a
+ v-if="tab.show"
+ :key="index"
+ :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'
+ ]"
+ :aria-current="tab.current ? 'page' : undefined"
+ @click="selectTab(tab)"
+ >
+ {{ tab.name }}
+ </a>
+ </template>
+ </nav>
+ <div class="tw-mt-3">
+ <component :is="content" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+
+export default defineComponent({
+ props: {
+ tabDefault: {
+ type: String,
+ required: true,
+ },
+ tabs: {
+ type: Array,
+ required: true,
+ },
+ },
+ setup(props) {
+ const content = ref(null);
+ const tabSelected = ref(props.tabDefault);
+ const selectTab = (tab) => {
+ content.value = tab.content;
+ tabSelected.value = tab.current;
+ };
+
+ const defaultTab = () => props.tabs.find((tab) => tab.current === tabSelected.value);
+
+ onMounted(() => {
+ selectTab(defaultTab());
+ });
+
+ return {
+ content,
+ selectTab,
+ tabSelected,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/edit.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+
+new Vue({
+ el: "#case-detail",
+ components: { CaseDetail },
+ data() {},
+});

resources/views/cases/edit.blade.php

@@ -0,0 +1,25 @@
+@extends('layouts.layout')
+
+@section('title')
+ {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+ @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+ @include('shared.breadcrumbs', ['routes' => [
+ __('Cases') => route('cases.index'),
+ ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
+ <case-detail></case-detail>
+</div>
+@endsection
+
+@section('js')
+ <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}', [CasesController::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")

ProcessMaker/Http/Controllers/CasesController.php

@@ -41,4 +41,8 @@ public function index($type = null)
  // This is a temporary API the engine team will provide the new
  return view('cases.casesMain');
  }
+ public function edit(ProcessRequest $request)
+ {
+ return view('cases.edit');
+ }
 }

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/jscomposition/cases/casesDetail/components/CaseDetail.vue

@@ -0,0 +1,50 @@
+<template>
+ <div class="container-fluid">
+ <Tabs
+ :tab-default="tabDefault"
+ :tabs="tabs"
+ />
+ </div>
+</template>
+
+<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 },
+ setup() {
+ const translate = ProcessMaker.i18n;
+
+ const tabDefault = ref("tasks");
+
+ const tabs = [
+ {
+ name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: TaskTable,
+ },
+ {
+ name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
+ },
+ {
+ name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+ },
+ {
+ name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
+ },
+ {
+ name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
+ },
+ {
+ name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
+ },
+ ];
+
+ return {
+ tabs,
+ tabDefault,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/components/Tabs.vue

@@ -0,0 +1,66 @@
+<template>
+ <div class="tw-block">
+ <div class="tw-border-b tw-border-gray-200">
+ <nav
+ class="tw-mb-px tw-flex tw-space-x-8"
+ aria-label="Tabs"
+ >
+ <template v-for="(tab, index) in tabs">
+ <a
+ v-if="tab.show"
+ :key="index"
+ :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'
+ ]"
+ :aria-current="tab.current ? 'page' : undefined"
+ @click="selectTab(tab)"
+ >
+ {{ tab.name }}
+ </a>
+ </template>
+ </nav>
+ <div class="tw-mt-3">
+ <component :is="content" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+
+export default defineComponent({
+ props: {
+ tabDefault: {
+ type: String,
+ required: true,
+ },
+ tabs: {
+ type: Array,
+ required: true,
+ },
+ },
+ setup(props) {
+ const content = ref(null);
+ const tabSelected = ref(props.tabDefault);
+ const selectTab = (tab) => {
+ content.value = tab.content;
+ tabSelected.value = tab.current;
+ };
+
+ const defaultTab = () => props.tabs.find((tab) => tab.current === tabSelected.value);
+
+ onMounted(() => {
+ selectTab(defaultTab());
+ });
+
+ return {
+ content,
+ selectTab,
+ tabSelected,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/edit.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+
+new Vue({
+ el: "#case-detail",
+ components: { CaseDetail },
+ data() {},
+});

resources/views/cases/edit.blade.php

@@ -0,0 +1,25 @@
+@extends('layouts.layout')
+
+@section('title')
+ {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+ @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+ @include('shared.breadcrumbs', ['routes' => [
+ __('Cases') => route('cases.index'),
+ ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
+ <case-detail></case-detail>
+</div>
+@endsection
+
+@section('js')
+ <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}', [CasesController::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")

ProcessMaker/Http/Controllers/CasesController.php

@@ -41,4 +41,8 @@ public function index($type = null)
  // This is a temporary API the engine team will provide the new
  return view('cases.casesMain');
  }
+ public function edit(ProcessRequest $request)
+ {
+ return view('cases.edit');
+ }
 }

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/jscomposition/cases/casesDetail/components/CaseDetail.vue

@@ -0,0 +1,50 @@
+<template>
+ <div class="container-fluid">
+ <Tabs
+ :tab-default="tabDefault"
+ :tabs="tabs"
+ />
+ </div>
+</template>
+
+<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 },
+ setup() {
+ const translate = ProcessMaker.i18n;
+
+ const tabDefault = ref("tasks");
+
+ const tabs = [
+ {
+ name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: TaskTable,
+ },
+ {
+ name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
+ },
+ {
+ name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+ },
+ {
+ name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
+ },
+ {
+ name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
+ },
+ {
+ name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
+ },
+ ];
+
+ return {
+ tabs,
+ tabDefault,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/components/Tabs.vue

@@ -0,0 +1,66 @@
+<template>
+ <div class="tw-block">
+ <div class="tw-border-b tw-border-gray-200">
+ <nav
+ class="tw-mb-px tw-flex tw-space-x-8"
+ aria-label="Tabs"
+ >
+ <template v-for="(tab, index) in tabs">
+ <a
+ v-if="tab.show"
+ :key="index"
+ :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'
+ ]"
+ :aria-current="tab.current ? 'page' : undefined"
+ @click="selectTab(tab)"
+ >
+ {{ tab.name }}
+ </a>
+ </template>
+ </nav>
+ <div class="tw-mt-3">
+ <component :is="content" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+
+export default defineComponent({
+ props: {
+ tabDefault: {
+ type: String,
+ required: true,
+ },
+ tabs: {
+ type: Array,
+ required: true,
+ },
+ },
+ setup(props) {
+ const content = ref(null);
+ const tabSelected = ref(props.tabDefault);
+ const selectTab = (tab) => {
+ content.value = tab.content;
+ tabSelected.value = tab.current;
+ };
+
+ const defaultTab = () => props.tabs.find((tab) => tab.current === tabSelected.value);
+
+ onMounted(() => {
+ selectTab(defaultTab());
+ });
+
+ return {
+ content,
+ selectTab,
+ tabSelected,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/edit.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+
+new Vue({
+ el: "#case-detail",
+ components: { CaseDetail },
+ data() {},
+});

resources/views/cases/edit.blade.php

@@ -0,0 +1,25 @@
+@extends('layouts.layout')
+
+@section('title')
+ {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+ @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+ @include('shared.breadcrumbs', ['routes' => [
+ __('Cases') => route('cases.index'),
+ ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
+ <case-detail></case-detail>
+</div>
+@endsection
+
+@section('js')
+ <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}', [CasesController::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")

ProcessMaker/Http/Controllers/CasesController.php

@@ -41,4 +41,8 @@ public function index($type = null)
  // This is a temporary API the engine team will provide the new
  return view('cases.casesMain');
  }
+ public function edit(ProcessRequest $request)
+ {
+ return view('cases.edit');
+ }
 }

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/jscomposition/cases/casesDetail/components/CaseDetail.vue

@@ -0,0 +1,50 @@
+<template>
+ <div class="container-fluid">
+ <Tabs
+ :tab-default="tabDefault"
+ :tabs="tabs"
+ />
+ </div>
+</template>
+
+<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 },
+ setup() {
+ const translate = ProcessMaker.i18n;
+
+ const tabDefault = ref("tasks");
+
+ const tabs = [
+ {
+ name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: TaskTable,
+ },
+ {
+ name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
+ },
+ {
+ name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+ },
+ {
+ name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
+ },
+ {
+ name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
+ },
+ {
+ name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
+ },
+ ];
+
+ return {
+ tabs,
+ tabDefault,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/components/Tabs.vue

@@ -0,0 +1,66 @@
+<template>
+ <div class="tw-block">
+ <div class="tw-border-b tw-border-gray-200">
+ <nav
+ class="tw-mb-px tw-flex tw-space-x-8"
+ aria-label="Tabs"
+ >
+ <template v-for="(tab, index) in tabs">
+ <a
+ v-if="tab.show"
+ :key="index"
+ :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'
+ ]"
+ :aria-current="tab.current ? 'page' : undefined"
+ @click="selectTab(tab)"
+ >
+ {{ tab.name }}
+ </a>
+ </template>
+ </nav>
+ <div class="tw-mt-3">
+ <component :is="content" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+
+export default defineComponent({
+ props: {
+ tabDefault: {
+ type: String,
+ required: true,
+ },
+ tabs: {
+ type: Array,
+ required: true,
+ },
+ },
+ setup(props) {
+ const content = ref(null);
+ const tabSelected = ref(props.tabDefault);
+ const selectTab = (tab) => {
+ content.value = tab.content;
+ tabSelected.value = tab.current;
+ };
+
+ const defaultTab = () => props.tabs.find((tab) => tab.current === tabSelected.value);
+
+ onMounted(() => {
+ selectTab(defaultTab());
+ });
+
+ return {
+ content,
+ selectTab,
+ tabSelected,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/edit.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+
+new Vue({
+ el: "#case-detail",
+ components: { CaseDetail },
+ data() {},
+});

resources/views/cases/edit.blade.php

@@ -0,0 +1,25 @@
+@extends('layouts.layout')
+
+@section('title')
+ {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+ @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+ @include('shared.breadcrumbs', ['routes' => [
+ __('Cases') => route('cases.index'),
+ ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
+ <case-detail></case-detail>
+</div>
+@endsection
+
+@section('js')
+ <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}', [CasesController::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")

ProcessMaker/Http/Controllers/CasesController.php

@@ -41,4 +41,8 @@ public function index($type = null)
  // This is a temporary API the engine team will provide the new
  return view('cases.casesMain');
  }
+ public function edit(ProcessRequest $request)
+ {
+ return view('cases.edit');
+ }
 }

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/jscomposition/cases/casesDetail/components/CaseDetail.vue

@@ -0,0 +1,50 @@
+<template>
+ <div class="container-fluid">
+ <Tabs
+ :tab-default="tabDefault"
+ :tabs="tabs"
+ />
+ </div>
+</template>
+
+<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 },
+ setup() {
+ const translate = ProcessMaker.i18n;
+
+ const tabDefault = ref("tasks");
+
+ const tabs = [
+ {
+ name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: TaskTable,
+ },
+ {
+ name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
+ },
+ {
+ name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+ },
+ {
+ name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
+ },
+ {
+ name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
+ },
+ {
+ name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
+ },
+ ];
+
+ return {
+ tabs,
+ tabDefault,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/components/Tabs.vue

@@ -0,0 +1,66 @@
+<template>
+ <div class="tw-block">
+ <div class="tw-border-b tw-border-gray-200">
+ <nav
+ class="tw-mb-px tw-flex tw-space-x-8"
+ aria-label="Tabs"
+ >
+ <template v-for="(tab, index) in tabs">
+ <a
+ v-if="tab.show"
+ :key="index"
+ :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'
+ ]"
+ :aria-current="tab.current ? 'page' : undefined"
+ @click="selectTab(tab)"
+ >
+ {{ tab.name }}
+ </a>
+ </template>
+ </nav>
+ <div class="tw-mt-3">
+ <component :is="content" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+
+export default defineComponent({
+ props: {
+ tabDefault: {
+ type: String,
+ required: true,
+ },
+ tabs: {
+ type: Array,
+ required: true,
+ },
+ },
+ setup(props) {
+ const content = ref(null);
+ const tabSelected = ref(props.tabDefault);
+ const selectTab = (tab) => {
+ content.value = tab.content;
+ tabSelected.value = tab.current;
+ };
+
+ const defaultTab = () => props.tabs.find((tab) => tab.current === tabSelected.value);
+
+ onMounted(() => {
+ selectTab(defaultTab());
+ });
+
+ return {
+ content,
+ selectTab,
+ tabSelected,
+ };
+ },
+});
+</script>

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/jscomposition/cases/casesDetail/edit.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+
+new Vue({
+ el: "#case-detail",
+ components: { CaseDetail },
+ data() {},
+});

resources/views/cases/edit.blade.php

@@ -0,0 +1,25 @@
+@extends('layouts.layout')
+
+@section('title')
+ {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+ @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+ @include('shared.breadcrumbs', ['routes' => [
+ __('Cases') => route('cases.index'),
+ ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
+ <case-detail></case-detail>
+</div>
+@endsection
+
+@section('js')
+ <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}', [CasesController::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")