New report system and views
This commit is contained in:
Simon Pocrnjič
@@ -1,14 +1,28 @@
|
||||
<script setup>
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { Link, useForm } from "@inertiajs/vue3";
|
||||
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
|
||||
import UpdateDialog from "@/Components/Dialogs/UpdateDialog.vue";
|
||||
import PrimaryButton from "@/Components/PrimaryButton.vue";
|
||||
import { useForm } from "@inertiajs/vue3";
|
||||
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
||||
import CardTitle from "@/Components/ui/card/CardTitle.vue";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/Components/ui/dialog";
|
||||
import InputLabel from "@/Components/InputLabel.vue";
|
||||
import InputError from "@/Components/InputError.vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import Multiselect from "vue-multiselect";
|
||||
import { de } from "date-fns/locale";
|
||||
import { ref, onMounted, watch, computed } from "vue";
|
||||
import AppCombobox from "@/Components/app/ui/AppCombobox.vue";
|
||||
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/Components/ui/dropdown-menu";
|
||||
import { MoreHorizontal, Pencil, Settings } from "lucide-vue-next";
|
||||
|
||||
const props = defineProps({
|
||||
settings: Array,
|
||||
@@ -25,12 +39,18 @@ const decisionOptions = ref([]);
|
||||
const actionOptions = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
segmentOptions.value = (props.segments || []).map((s) => ({ id: s.id, name: s.name }));
|
||||
decisionOptions.value = (props.decisions || []).map((d) => ({
|
||||
id: d.id,
|
||||
name: d.name,
|
||||
segmentOptions.value = (props.segments || []).map((s) => ({
|
||||
label: s.name,
|
||||
value: s.id,
|
||||
}));
|
||||
decisionOptions.value = (props.decisions || []).map((d) => ({
|
||||
label: d.name,
|
||||
value: d.id,
|
||||
}));
|
||||
actionOptions.value = (props.actions || []).map((a) => ({
|
||||
label: a.name,
|
||||
value: a.id,
|
||||
}));
|
||||
actionOptions.value = (props.actions || []).map((a) => ({ id: a.id, name: a.name }));
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
@@ -117,18 +137,10 @@ const update = () => {
|
||||
watch(
|
||||
() => editForm.action_id,
|
||||
(newActionId) => {
|
||||
// Clear decision fields when action changes
|
||||
/*editForm.initial_decision_id = null;
|
||||
editForm.assign_decision_id = null;
|
||||
editForm.complete_decision_id = null;
|
||||
editForm.cancel_decision_id = null;*/
|
||||
if (newActionId !== null) {
|
||||
// Optionally, you can filter decisionOptions based on the selected action here
|
||||
decisionOptions.value = (props.decisions || [])
|
||||
.filter((decision) => decision.actions?.some((a) => a.id === newActionId) ?? true)
|
||||
.map((d) => ({ id: d.id, name: d.name }));
|
||||
// For simplicity, we are not implementing that logic now
|
||||
console.log(decisionOptions.value);
|
||||
.map((d) => ({ label: d.name, value: d.id }));
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -136,20 +148,32 @@ watch(
|
||||
watch(
|
||||
() => form.action_id,
|
||||
(newActionId) => {
|
||||
// Clear decision fields when action changes
|
||||
form.initial_decision_id = null;
|
||||
form.assign_decision_id = null;
|
||||
form.complete_decision_id = null;
|
||||
if (newActionId !== null) {
|
||||
// Optionally, you can filter decisionOptions based on the selected action here
|
||||
decisionOptions.value = (props.decisions || [])
|
||||
.filter((decision) => decision.actions?.some((a) => a.id === newActionId) ?? true)
|
||||
.map((d) => ({ id: d.id, name: d.name }));
|
||||
// For simplicity, we are not implementing that logic now
|
||||
console.log(decisionOptions.value);
|
||||
.map((d) => ({ label: d.name, value: d.id }));
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// DataTable state
|
||||
const sort = ref({ key: null, direction: null });
|
||||
const page = ref(1);
|
||||
const pageSize = ref(25);
|
||||
const columns = [
|
||||
{ key: "id", label: "ID", sortable: true, class: "w-16" },
|
||||
{ key: "segment", label: "Segment", sortable: false },
|
||||
{ key: "action", label: "Action", sortable: false },
|
||||
{ key: "initial_decision", label: "Initial Decision", sortable: false },
|
||||
{ key: "assign_decision", label: "Assign Decision", sortable: false },
|
||||
{ key: "complete_decision", label: "Complete Decision", sortable: false },
|
||||
{ key: "cancel_decision", label: "Cancel Decision", sortable: false },
|
||||
{ key: "return_segment", label: "Return Segment", sortable: false },
|
||||
{ key: "queue_segment", label: "Queue Segment", sortable: false },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -157,383 +181,299 @@ watch(
|
||||
<template #header></template>
|
||||
<div class="pt-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-semibold">Field Job Settings</h2>
|
||||
<PrimaryButton @click="openCreate">+ New</PrimaryButton>
|
||||
</div>
|
||||
<AppCard
|
||||
title=""
|
||||
padding="none"
|
||||
class="p-0! gap-0"
|
||||
header-class="py-3! px-4 gap-0 text-muted-foreground"
|
||||
body-class=""
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<Settings :size="18" />
|
||||
<CardTitle class="uppercase">Field Job Settings</CardTitle>
|
||||
</div>
|
||||
<Button @click="openCreate">+ New</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<CreateDialog
|
||||
:show="showCreate"
|
||||
title="Create Field Job Setting"
|
||||
confirm-text="Create"
|
||||
:processing="form.processing"
|
||||
@close="closeCreate"
|
||||
@confirm="store"
|
||||
>
|
||||
<form @submit.prevent="store">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<InputLabel for="segment" value="Segment" />
|
||||
<multiselect
|
||||
id="segment"
|
||||
v-model="form.segment_id"
|
||||
:options="segmentOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="
|
||||
(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError :message="form.errors.segment_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="action" value="Action" />
|
||||
<multiselect
|
||||
id="action"
|
||||
v-model="form.action_id"
|
||||
:options="actionOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select action"
|
||||
:append-to-body="true"
|
||||
:custom-label="
|
||||
(opt) => actionOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError :message="form.errors.action_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="initialDecision" value="Initial Decision" />
|
||||
<multiselect
|
||||
id="initialDecision"
|
||||
v-model="form.initial_decision_id"
|
||||
:options="decisionOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select initial decision"
|
||||
:append-to-body="true"
|
||||
:disabled="!form.action_id"
|
||||
:custom-label="
|
||||
(opt) => decisionOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError :message="form.errors.initial_decision_id" class="mt-1" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<InputLabel for="assignDecision" value="Assign Decision" />
|
||||
<multiselect
|
||||
id="assignDecision"
|
||||
v-model="form.assign_decision_id"
|
||||
:options="decisionOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select assign decision"
|
||||
:append-to-body="true"
|
||||
:disabled="!form.action_id"
|
||||
:custom-label="
|
||||
(opt) => decisionOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError :message="form.errors.assign_decision_id" class="mt-1" />
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<InputLabel for="completeDecision" value="Complete Decision" />
|
||||
<multiselect
|
||||
id="completeDecision"
|
||||
v-model="form.complete_decision_id"
|
||||
:options="decisionOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select complete decision"
|
||||
:append-to-body="true"
|
||||
:disabled="!form.action_id"
|
||||
:custom-label="
|
||||
(opt) => decisionOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError
|
||||
:message="form.errors.complete_decision_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<InputLabel for="cancelDecision" value="Cancel Decision" />
|
||||
<multiselect
|
||||
id="cancelDecision"
|
||||
v-model="form.cancel_decision_id"
|
||||
:options="decisionOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select cancel decision (optional)"
|
||||
:append-to-body="true"
|
||||
:disabled="!form.action_id"
|
||||
:custom-label="
|
||||
(opt) => decisionOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError :message="form.errors.cancel_decision_id" class="mt-1" />
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<InputLabel for="returnSegment" value="Return Segment" />
|
||||
<multiselect
|
||||
id="returnSegment"
|
||||
v-model="form.return_segment_id"
|
||||
:options="segmentOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select return segment (optional)"
|
||||
:append-to-body="true"
|
||||
:custom-label="
|
||||
(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError :message="form.errors.return_segment_id" class="mt-1" />
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<InputLabel for="queueSegment" value="Queue Segment" />
|
||||
<multiselect
|
||||
id="queueSegment"
|
||||
v-model="form.queue_segment_id"
|
||||
:options="segmentOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select queue segment (optional)"
|
||||
:append-to-body="true"
|
||||
:custom-label="
|
||||
(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError :message="form.errors.queue_segment_id" class="mt-1" />
|
||||
</div>
|
||||
<Dialog v-model:open="showCreate">
|
||||
<DialogContent class="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Field Job Setting</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<InputLabel for="segment" value="Segment" />
|
||||
<AppCombobox
|
||||
id="segment"
|
||||
v-model="form.segment_id"
|
||||
:items="segmentOptions"
|
||||
placeholder="Select segment"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="form.errors.segment_id" class="mt-1" />
|
||||
</div>
|
||||
</form>
|
||||
</CreateDialog>
|
||||
<UpdateDialog
|
||||
:show="showEdit"
|
||||
title="Edit Field Job Setting"
|
||||
confirm-text="Save"
|
||||
:processing="editForm.processing"
|
||||
@close="closeEdit"
|
||||
@confirm="update"
|
||||
>
|
||||
<form @submit.prevent="update">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<InputLabel for="edit-segment" value="Segment" />
|
||||
<multiselect
|
||||
id="edit-segment"
|
||||
v-model="editForm.segment_id"
|
||||
:options="segmentOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="
|
||||
(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError :message="editForm.errors.segment_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="edit-action" value="Action" />
|
||||
<multiselect
|
||||
id="edit-action"
|
||||
v-model="editForm.action_id"
|
||||
:options="actionOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select action"
|
||||
:append-to-body="true"
|
||||
:custom-label="
|
||||
(opt) => actionOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError :message="editForm.errors.action_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="edit-initialDecision" value="Initial Decision" />
|
||||
<multiselect
|
||||
id="edit-initialDecision"
|
||||
v-model="editForm.initial_decision_id"
|
||||
:options="decisionOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select initial decision"
|
||||
:append-to-body="true"
|
||||
:disabled="!editForm.action_id"
|
||||
:custom-label="
|
||||
(opt) => decisionOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError
|
||||
:message="editForm.errors.initial_decision_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<InputLabel for="edit-assignDecision" value="Assign Decision" />
|
||||
<multiselect
|
||||
id="edit-assignDecision"
|
||||
v-model="editForm.assign_decision_id"
|
||||
:options="decisionOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select assign decision"
|
||||
:append-to-body="true"
|
||||
:disabled="!editForm.action_id"
|
||||
:custom-label="
|
||||
(opt) => decisionOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError
|
||||
:message="editForm.errors.assign_decision_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<InputLabel for="edit-completeDecision" value="Complete Decision" />
|
||||
<multiselect
|
||||
id="edit-completeDecision"
|
||||
v-model="editForm.complete_decision_id"
|
||||
:options="decisionOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select complete decision"
|
||||
:disabled="!editForm.action_id"
|
||||
:append-to-body="true"
|
||||
:custom-label="
|
||||
(opt) => decisionOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError
|
||||
:message="editForm.errors.complete_decision_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<InputLabel for="edit-cancelDecision" value="Cancel Decision" />
|
||||
<multiselect
|
||||
id="edit-cancelDecision"
|
||||
v-model="editForm.cancel_decision_id"
|
||||
:options="decisionOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select cancel decision (optional)"
|
||||
:append-to-body="true"
|
||||
:disabled="!editForm.action_id"
|
||||
:custom-label="
|
||||
(opt) => decisionOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError
|
||||
:message="editForm.errors.cancel_decision_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<InputLabel for="edit-returnSegment" value="Return Segment" />
|
||||
<multiselect
|
||||
id="edit-returnSegment"
|
||||
v-model="editForm.return_segment_id"
|
||||
:options="segmentOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select return segment (optional)"
|
||||
:append-to-body="true"
|
||||
:custom-label="
|
||||
(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError
|
||||
:message="editForm.errors.return_segment_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<InputLabel for="edit-queueSegment" value="Queue Segment" />
|
||||
<multiselect
|
||||
id="edit-queueSegment"
|
||||
v-model="editForm.queue_segment_id"
|
||||
:options="segmentOptions.map((o) => o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select queue segment (optional)"
|
||||
:append-to-body="true"
|
||||
:custom-label="
|
||||
(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''
|
||||
"
|
||||
/>
|
||||
<InputError
|
||||
:message="editForm.errors.queue_segment_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="action" value="Action" />
|
||||
<AppCombobox
|
||||
id="action"
|
||||
v-model="form.action_id"
|
||||
:items="actionOptions"
|
||||
placeholder="Select action"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="form.errors.action_id" class="mt-1" />
|
||||
</div>
|
||||
</form>
|
||||
</UpdateDialog>
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 pr-4">ID</th>
|
||||
<th class="py-2 pr-4">Segment</th>
|
||||
<th class="py-2 pr-4">Action</th>
|
||||
<th class="py-2 pr-4">Initial Decision</th>
|
||||
<th class="py-2 pr-4">Assign Decision</th>
|
||||
<th class="py-2 pr-4">Complete Decision</th>
|
||||
<th class="py-2 pr-4">Cancel Decision</th>
|
||||
<th class="py-2 pr-4">Return Segment</th>
|
||||
<th class="py-2 pr-4">Queue Segment</th>
|
||||
<th class="py-2 pr-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in settings" :key="row.id" class="border-b last:border-0">
|
||||
<td class="py-2 pr-4">{{ row.id }}</td>
|
||||
<td class="py-2 pr-4">{{ row.segment?.name }}</td>
|
||||
<td class="py-2 pr-4">{{ row.action?.name }}</td>
|
||||
<td class="py-2 pr-4">
|
||||
{{ row.initial_decision?.name || row.initialDecision?.name }}
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
{{ row.assign_decision?.name || row.assignDecision?.name }}
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
{{ row.complete_decision?.name || row.completeDecision?.name }}
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
{{ row.cancel_decision?.name || row.cancelDecision?.name }}
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
{{ row.return_segment?.name || row.returnSegment?.name }}
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
{{ row.queue_segment?.name || row.queueSegment?.name }}
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
<button
|
||||
@click="openEdit(row)"
|
||||
class="px-3 py-1 rounded bg-indigo-600 text-white hover:bg-indigo-700"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="initialDecision" value="Initial Decision" />
|
||||
<AppCombobox
|
||||
id="initialDecision"
|
||||
v-model="form.initial_decision_id"
|
||||
:items="decisionOptions"
|
||||
placeholder="Select initial decision"
|
||||
:disabled="!form.action_id"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="form.errors.initial_decision_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="assignDecision" value="Assign Decision" />
|
||||
<AppCombobox
|
||||
id="assignDecision"
|
||||
v-model="form.assign_decision_id"
|
||||
:items="decisionOptions"
|
||||
placeholder="Select assign decision"
|
||||
:disabled="!form.action_id"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="form.errors.assign_decision_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="completeDecision" value="Complete Decision" />
|
||||
<AppCombobox
|
||||
id="completeDecision"
|
||||
v-model="form.complete_decision_id"
|
||||
:items="decisionOptions"
|
||||
placeholder="Select complete decision"
|
||||
:disabled="!form.action_id"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="form.errors.complete_decision_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="cancelDecision" value="Cancel Decision" />
|
||||
<AppCombobox
|
||||
id="cancelDecision"
|
||||
v-model="form.cancel_decision_id"
|
||||
:items="decisionOptions"
|
||||
placeholder="Select cancel decision (optional)"
|
||||
:disabled="!form.action_id"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="form.errors.cancel_decision_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="returnSegment" value="Return Segment" />
|
||||
<AppCombobox
|
||||
id="returnSegment"
|
||||
v-model="form.return_segment_id"
|
||||
:items="segmentOptions"
|
||||
placeholder="Select return segment (optional)"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="form.errors.return_segment_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="queueSegment" value="Queue Segment" />
|
||||
<AppCombobox
|
||||
id="queueSegment"
|
||||
v-model="form.queue_segment_id"
|
||||
:items="segmentOptions"
|
||||
placeholder="Select queue segment (optional)"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="form.errors.queue_segment_id" class="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="closeCreate">Cancel</Button>
|
||||
<Button @click="store" :disabled="form.processing">Create</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Dialog v-model:open="showEdit">
|
||||
<DialogContent class="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Field Job Setting</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<InputLabel for="edit-segment" value="Segment" />
|
||||
<AppCombobox
|
||||
id="edit-segment"
|
||||
v-model="editForm.segment_id"
|
||||
:items="segmentOptions"
|
||||
placeholder="Select segment"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="editForm.errors.segment_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="edit-action" value="Action" />
|
||||
<AppCombobox
|
||||
id="edit-action"
|
||||
v-model="editForm.action_id"
|
||||
:items="actionOptions"
|
||||
placeholder="Select action"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="editForm.errors.action_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="edit-initialDecision" value="Initial Decision" />
|
||||
<AppCombobox
|
||||
id="edit-initialDecision"
|
||||
v-model="editForm.initial_decision_id"
|
||||
:items="decisionOptions"
|
||||
placeholder="Select initial decision"
|
||||
:disabled="!editForm.action_id"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError
|
||||
:message="editForm.errors.initial_decision_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="edit-assignDecision" value="Assign Decision" />
|
||||
<AppCombobox
|
||||
id="edit-assignDecision"
|
||||
v-model="editForm.assign_decision_id"
|
||||
:items="decisionOptions"
|
||||
placeholder="Select assign decision"
|
||||
:disabled="!editForm.action_id"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError
|
||||
:message="editForm.errors.assign_decision_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="edit-completeDecision" value="Complete Decision" />
|
||||
<AppCombobox
|
||||
id="edit-completeDecision"
|
||||
v-model="editForm.complete_decision_id"
|
||||
:items="decisionOptions"
|
||||
placeholder="Select complete decision"
|
||||
:disabled="!editForm.action_id"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError
|
||||
:message="editForm.errors.complete_decision_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="edit-cancelDecision" value="Cancel Decision" />
|
||||
<AppCombobox
|
||||
id="edit-cancelDecision"
|
||||
v-model="editForm.cancel_decision_id"
|
||||
:items="decisionOptions"
|
||||
placeholder="Select cancel decision (optional)"
|
||||
:disabled="!editForm.action_id"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError
|
||||
:message="editForm.errors.cancel_decision_id"
|
||||
class="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="edit-returnSegment" value="Return Segment" />
|
||||
<AppCombobox
|
||||
id="edit-returnSegment"
|
||||
v-model="editForm.return_segment_id"
|
||||
:items="segmentOptions"
|
||||
placeholder="Select return segment (optional)"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="editForm.errors.return_segment_id" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="edit-queueSegment" value="Queue Segment" />
|
||||
<AppCombobox
|
||||
id="edit-queueSegment"
|
||||
v-model="editForm.queue_segment_id"
|
||||
:items="segmentOptions"
|
||||
placeholder="Select queue segment (optional)"
|
||||
button-class="w-full"
|
||||
/>
|
||||
<InputError :message="editForm.errors.queue_segment_id" class="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="closeEdit">Cancel</Button>
|
||||
<Button @click="update" :disabled="editForm.processing">Save</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<DataTableClient
|
||||
:columns="columns"
|
||||
:rows="settings"
|
||||
:sort="sort"
|
||||
:search="''"
|
||||
:page="page"
|
||||
:pageSize="pageSize"
|
||||
:showToolbar="false"
|
||||
:showPagination="true"
|
||||
@update:sort="(v) => (sort = v)"
|
||||
@update:page="(v) => (page = v)"
|
||||
@update:pageSize="(v) => (pageSize = v)"
|
||||
>
|
||||
<template #cell-segment="{ row }">
|
||||
{{ row.segment?.name }}
|
||||
</template>
|
||||
<template #cell-action="{ row }">
|
||||
{{ row.action?.name }}
|
||||
</template>
|
||||
<template #cell-initial_decision="{ row }">
|
||||
{{ row.initial_decision?.name || row.initialDecision?.name }}
|
||||
</template>
|
||||
<template #cell-assign_decision="{ row }">
|
||||
{{ row.assign_decision?.name || row.assignDecision?.name }}
|
||||
</template>
|
||||
<template #cell-complete_decision="{ row }">
|
||||
{{ row.complete_decision?.name || row.completeDecision?.name }}
|
||||
</template>
|
||||
<template #cell-cancel_decision="{ row }">
|
||||
{{ row.cancel_decision?.name || row.cancelDecision?.name }}
|
||||
</template>
|
||||
<template #cell-return_segment="{ row }">
|
||||
{{ row.return_segment?.name || row.returnSegment?.name }}
|
||||
</template>
|
||||
<template #cell-queue_segment="{ row }">
|
||||
{{ row.queue_segment?.name || row.queueSegment?.name }}
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal class="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem @click="openEdit(row)">
|
||||
<Pencil class="w-4 h-4 mr-2" />
|
||||
Uredi
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
</DataTableClient>
|
||||
</AppCard>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
Reference in New Issue
Block a user