Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion resources/jscomposition/base/table/BaseTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion resources/jscomposition/base/table/THeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
24 changes: 24 additions & 0 deletions resources/jscomposition/cases/casesDetail/api/index.js
Original file line number Diff line number Diff line change
@@ -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 };
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand All @@ -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: "",
Expand All @@ -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,
},
];

Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand All @@ -21,7 +21,7 @@
</a>
</template>
</nav>
<div class="content">
<div class="tw-mt-3">
<component :is="content" />
</div>
</div>
Expand Down
35 changes: 35 additions & 0 deletions resources/jscomposition/cases/casesDetail/components/TaskTable.vue
Original file line number Diff line number Diff line change
@@ -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>
99 changes: 99 additions & 0 deletions resources/jscomposition/cases/casesDetail/config/columns.js
Original file line number Diff line number Diff line change
@@ -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,
Comment thread
pmPaulis marked this conversation as resolved.
Resolved
});

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];
};
2 changes: 1 addition & 1 deletion resources/views/cases/edit.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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