Big changes added events for decisions
This commit is contained in:
Simon Pocrnjič
@@ -28,7 +28,7 @@ const decisions = ref(
|
||||
: []
|
||||
);
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
const emit = defineEmits(["close", "saved"]);
|
||||
const close = () => emit("close");
|
||||
|
||||
const form = useForm({
|
||||
@@ -123,6 +123,8 @@ const store = async () => {
|
||||
onSuccess: () => {
|
||||
close();
|
||||
form.reset("due_date", "amount", "note");
|
||||
// Notify parent to react (e.g., refresh, redirect in phone mode when no contracts left)
|
||||
emit("saved");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@@ -8,6 +8,7 @@ import SavedMappingsTable from "./Partials/SavedMappingsTable.vue";
|
||||
import LogsTable from "./Partials/LogsTable.vue";
|
||||
import ProcessResult from "./Partials/ProcessResult.vue";
|
||||
import { ref, computed, onMounted, watch } from "vue";
|
||||
import { router } from "@inertiajs/vue3";
|
||||
import Multiselect from "vue-multiselect";
|
||||
import axios from "axios";
|
||||
import Modal from "@/Components/Modal.vue"; // still potentially used elsewhere
|
||||
@@ -150,6 +151,40 @@ async function openMissingContracts() {
|
||||
}
|
||||
}
|
||||
|
||||
// Unresolved keyref rows (contracts not found) UI state
|
||||
const showUnresolved = ref(false);
|
||||
const unresolvedLoading = ref(false);
|
||||
const unresolvedColumns = ref([]);
|
||||
const unresolvedRows = ref([]); // [{id,row_number,values:[]}]
|
||||
async function openUnresolved() {
|
||||
if (!importId.value || !contractRefIsKeyref.value) return;
|
||||
showUnresolved.value = true;
|
||||
unresolvedLoading.value = true;
|
||||
try {
|
||||
const { data } = await axios.get(
|
||||
route("imports.missing-keyref-rows", { import: importId.value }),
|
||||
{ headers: { Accept: "application/json" }, withCredentials: true }
|
||||
);
|
||||
unresolvedColumns.value = Array.isArray(data?.columns) ? data.columns : [];
|
||||
unresolvedRows.value = Array.isArray(data?.rows) ? data.rows : [];
|
||||
} catch (e) {
|
||||
console.error(
|
||||
"Unresolved keyref rows fetch failed",
|
||||
e.response?.status || "",
|
||||
e.response?.data || e
|
||||
);
|
||||
unresolvedColumns.value = [];
|
||||
unresolvedRows.value = [];
|
||||
} finally {
|
||||
unresolvedLoading.value = false;
|
||||
}
|
||||
}
|
||||
function downloadUnresolvedCsv() {
|
||||
if (!importId.value) return;
|
||||
// Direct download
|
||||
window.location.href = route("imports.missing-keyref-csv", { import: importId.value });
|
||||
}
|
||||
|
||||
// Determine if all detected columns are mapped with entity+field
|
||||
function evaluateMappingSaved() {
|
||||
console.log("here the evaluation happen of mapping save!");
|
||||
@@ -881,6 +916,9 @@ async function processImport() {
|
||||
}
|
||||
);
|
||||
processResult.value = data;
|
||||
// Immediately refresh the page props to reflect the completed state
|
||||
// Reload only the 'import' prop to minimize payload; don't preserve state so UI reflects new status
|
||||
router.reload({ only: ["import"], preserveScroll: true, preserveState: false });
|
||||
} catch (e) {
|
||||
console.error(
|
||||
"Process import error",
|
||||
@@ -1153,6 +1191,14 @@ async function fetchSimulation() {
|
||||
>
|
||||
Ogled manjkajoče
|
||||
</button>
|
||||
<button
|
||||
v-if="isCompleted && contractRefIsKeyref"
|
||||
class="px-3 py-1.5 bg-amber-600 text-white text-xs rounded"
|
||||
@click.prevent="openUnresolved"
|
||||
title="Prikaži vrstice, kjer pogodba (keyref) ni bila najdena"
|
||||
>
|
||||
Neobstoječi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
@@ -1331,6 +1377,67 @@ async function fetchSimulation() {
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- Unresolved keyref rows modal -->
|
||||
<Modal :show="showUnresolved" max-width="5xl" @close="showUnresolved = false">
|
||||
<div class="p-4 max-h-[75vh] overflow-auto">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-semibold text-lg">
|
||||
Vrstice z neobstoječim contract.reference (KEYREF)
|
||||
</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="px-3 py-1.5 bg-green-600 text-white text-xs rounded"
|
||||
@click.prevent="downloadUnresolvedCsv"
|
||||
>
|
||||
Prenesi CSV
|
||||
</button>
|
||||
<button
|
||||
class="text-gray-500 hover:text-gray-700"
|
||||
@click.prevent="showUnresolved = false"
|
||||
>
|
||||
Zapri
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="unresolvedLoading" class="py-8 text-center text-sm text-gray-500">
|
||||
Nalagam …
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="!unresolvedRows.length" class="py-6 text-sm text-gray-600">
|
||||
Ni zadetkov.
|
||||
</div>
|
||||
<div v-else class="overflow-auto border border-gray-200 rounded">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-700">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left w-24"># vrstica</th>
|
||||
<th
|
||||
v-for="(c, i) in unresolvedColumns"
|
||||
:key="i"
|
||||
class="px-3 py-2 text-left"
|
||||
>
|
||||
{{ c }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="r in unresolvedRows" :key="r.id" class="border-t">
|
||||
<td class="px-3 py-2 text-gray-500">{{ r.row_number }}</td>
|
||||
<td
|
||||
v-for="(c, i) in unresolvedColumns"
|
||||
:key="i"
|
||||
class="px-3 py-2 whitespace-pre-wrap break-words"
|
||||
>
|
||||
{{ r.values?.[i] ?? "" }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<SimulationModal
|
||||
:show="showPaymentSim"
|
||||
:rows="paymentSimRows"
|
||||
|
||||
@@ -6,13 +6,13 @@ import PersonDetailPhone from "@/Components/PersonDetailPhone.vue";
|
||||
// import DocumentsTable from '@/Components/DocumentsTable.vue';
|
||||
import DocumentViewerDialog from "@/Components/DocumentViewerDialog.vue";
|
||||
import { classifyDocument } from "@/Services/documents";
|
||||
import { reactive, ref, computed } from "vue";
|
||||
import { reactive, ref, computed, watch, onMounted } from "vue";
|
||||
import DialogModal from "@/Components/DialogModal.vue";
|
||||
import InputLabel from "@/Components/InputLabel.vue";
|
||||
import TextInput from "@/Components/TextInput.vue";
|
||||
import PrimaryButton from "@/Components/PrimaryButton.vue";
|
||||
import BasicButton from "@/Components/buttons/BasicButton.vue";
|
||||
import { useForm } from "@inertiajs/vue3";
|
||||
import { useForm, router } from "@inertiajs/vue3";
|
||||
import ActivityDrawer from "@/Pages/Cases/Partials/ActivityDrawer.vue";
|
||||
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
|
||||
|
||||
@@ -112,6 +112,37 @@ const closeDrawer = () => {
|
||||
drawerAddActivity.value = false;
|
||||
};
|
||||
|
||||
// After an activity is saved, if there are no contracts left for this case (assigned to me),
|
||||
// redirect back to the Phone index to pick the next case.
|
||||
const onActivitySaved = () => {
|
||||
// Inertia onSuccess already refreshed props, so props.contracts reflects current state.
|
||||
const count = Array.isArray(props.contracts) ? props.contracts.length : 0;
|
||||
if (count === 0) {
|
||||
router.visit(route("phone.index"));
|
||||
}
|
||||
};
|
||||
|
||||
// Also react if the page is reloaded with zero contracts (e.g., after EndFieldJob moves the only contract):
|
||||
const redirectIfNoContracts = () => {
|
||||
const count = Array.isArray(props.contracts) ? props.contracts.length : 0;
|
||||
if (count === 0) {
|
||||
router.visit(route("phone.index"));
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
redirectIfNoContracts();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => (Array.isArray(props.contracts) ? props.contracts.length : null),
|
||||
(len) => {
|
||||
if (len === 0) {
|
||||
router.visit(route("phone.index"));
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Document upload state
|
||||
const docDialogOpen = ref(false);
|
||||
const docForm = useForm({
|
||||
@@ -533,6 +564,7 @@ const clientSummary = computed(() => {
|
||||
<ActivityDrawer
|
||||
:show="drawerAddActivity"
|
||||
@close="closeDrawer"
|
||||
@saved="onActivitySaved"
|
||||
:client_case="client_case"
|
||||
:actions="actions"
|
||||
:contract-uuid="activityContractUuid"
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
<script setup>
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import { ref, computed, watch } from "vue";
|
||||
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
||||
|
||||
const props = defineProps({
|
||||
segment: Object,
|
||||
contracts: Object, // LengthAwarePaginator payload from Laravel
|
||||
clients: Array, // Full list of clients with contracts in this segment
|
||||
});
|
||||
|
||||
// Initialize search from current URL so input reflects server filter
|
||||
const search = ref(new URLSearchParams(window.location.search).get("search") || "");
|
||||
// Initialize search and client filter from current URL so inputs reflect server filters
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const search = ref(urlParams.get("search") || "");
|
||||
const initialClient = urlParams.get("client") || urlParams.get("client_id") || "";
|
||||
const selectedClient = ref(initialClient);
|
||||
|
||||
// Column definitions for the server-driven table
|
||||
const columns = [
|
||||
@@ -23,6 +27,29 @@ const columns = [
|
||||
{ key: "account", label: "Stanje", align: "right" },
|
||||
];
|
||||
|
||||
// Build client options from the full list provided by the server, so the dropdown isn't limited by current filters
|
||||
const clientOptions = computed(() => {
|
||||
const list = Array.isArray(props.clients) ? props.clients : [];
|
||||
const opts = list.map((c) => ({
|
||||
value: c.uuid || "",
|
||||
label: c.name || "(neznana stranka)",
|
||||
}));
|
||||
return opts.sort((a, b) => (a.label || "").localeCompare(b.label || ""));
|
||||
});
|
||||
|
||||
// React to client selection changes by visiting the same route with updated query
|
||||
watch(selectedClient, (val) => {
|
||||
const query = { search: search.value };
|
||||
if (val) {
|
||||
query.client = val;
|
||||
}
|
||||
router.get(
|
||||
route("segments.show", { segment: props.segment?.id ?? props.segment }),
|
||||
query,
|
||||
{ preserveState: true, preserveScroll: true, only: ["contracts"], replace: true }
|
||||
);
|
||||
});
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) {
|
||||
return "-";
|
||||
@@ -54,6 +81,36 @@ function formatCurrency(value) {
|
||||
<h2 class="text-lg">{{ segment.name }}</h2>
|
||||
<div class="text-sm text-gray-600 mb-4">{{ segment?.description }}</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="mb-4 flex flex-col sm:flex-row sm:items-end gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Stranka</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<select
|
||||
v-model="selectedClient"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
|
||||
>
|
||||
<option value="">Vse stranke</option>
|
||||
<option
|
||||
v-for="opt in clientOptions"
|
||||
:key="opt.value || opt.label"
|
||||
:value="opt.value"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm text-gray-600 hover:text-gray-900"
|
||||
@click="selectedClient = ''"
|
||||
v-if="selectedClient"
|
||||
>
|
||||
Počisti
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTableServer
|
||||
:columns="columns"
|
||||
:rows="contracts?.data || []"
|
||||
@@ -61,6 +118,7 @@ function formatCurrency(value) {
|
||||
v-model:search="search"
|
||||
route-name="segments.show"
|
||||
:route-params="{ segment: segment?.id ?? segment }"
|
||||
:query="{ client: selectedClient || undefined }"
|
||||
:only-props="['contracts']"
|
||||
:page-size-options="[10, 25, 50]"
|
||||
empty-text="Ni pogodb v tem segmentu."
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script setup>
|
||||
// flowbite-vue table imports removed; using DataTableClient
|
||||
import { EditIcon, TrashBinIcon } from "@/Utilities/Icons";
|
||||
import { EditIcon, TrashBinIcon, DottedMenu } from "@/Utilities/Icons";
|
||||
import DialogModal from "@/Components/DialogModal.vue";
|
||||
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
|
||||
import { computed, onMounted, ref, watch } from "vue";
|
||||
import { computed, onMounted, ref, watch, nextTick } from "vue";
|
||||
import { router, useForm } from "@inertiajs/vue3";
|
||||
import InputLabel from "@/Components/InputLabel.vue";
|
||||
import TextInput from "@/Components/TextInput.vue";
|
||||
@@ -12,11 +12,15 @@ import PrimaryButton from "@/Components/PrimaryButton.vue";
|
||||
import ActionMessage from "@/Components/ActionMessage.vue";
|
||||
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
|
||||
import InlineColorPicker from "@/Components/InlineColorPicker.vue";
|
||||
import Dropdown from "@/Components/Dropdown.vue";
|
||||
|
||||
const props = defineProps({
|
||||
decisions: Array,
|
||||
actions: Array,
|
||||
emailTemplates: { type: Array, default: () => [] },
|
||||
availableEvents: { type: Array, default: () => [] },
|
||||
segments: { type: Array, default: () => [] },
|
||||
archiveSettings: { type: Array, default: () => [] },
|
||||
});
|
||||
|
||||
const drawerEdit = ref(false);
|
||||
@@ -38,6 +42,7 @@ const columns = [
|
||||
{ key: "id", label: "#", sortable: true, class: "w-16" },
|
||||
{ key: "name", label: "Ime", sortable: true },
|
||||
{ key: "color_tag", label: "Barva", sortable: false },
|
||||
{ key: "events", label: "Dogodki", sortable: false, class: "w-40" },
|
||||
{ key: "belongs", label: "Pripada akcijam", sortable: false, class: "w-40" },
|
||||
{ key: "auto_mail", label: "Auto mail", sortable: false, class: "w-46" },
|
||||
];
|
||||
@@ -49,6 +54,7 @@ const form = useForm({
|
||||
actions: [],
|
||||
auto_mail: false,
|
||||
email_template_id: null,
|
||||
events: [],
|
||||
});
|
||||
|
||||
const createForm = useForm({
|
||||
@@ -57,6 +63,7 @@ const createForm = useForm({
|
||||
actions: [],
|
||||
auto_mail: false,
|
||||
email_template_id: null,
|
||||
events: [],
|
||||
});
|
||||
|
||||
// When auto mail is disabled, also detach email template selection (edit form)
|
||||
@@ -86,6 +93,27 @@ const openEditDrawer = (item) => {
|
||||
form.color_tag = item.color_tag;
|
||||
form.auto_mail = !!item.auto_mail;
|
||||
form.email_template_id = item.email_template_id || null;
|
||||
form.events = (item.events || []).map((ev) => {
|
||||
let cfgObj = {};
|
||||
const pCfg = ev.pivot?.config;
|
||||
if (typeof pCfg === "string" && pCfg.trim() !== "") {
|
||||
try {
|
||||
cfgObj = JSON.parse(pCfg);
|
||||
} catch (e) {
|
||||
cfgObj = {};
|
||||
}
|
||||
} else if (typeof pCfg === "object" && pCfg !== null) {
|
||||
cfgObj = pCfg;
|
||||
}
|
||||
return {
|
||||
id: ev.id,
|
||||
key: ev.key,
|
||||
name: ev.name,
|
||||
active: ev.pivot?.active ?? true,
|
||||
run_order: ev.pivot?.run_order ?? null,
|
||||
config: cfgObj,
|
||||
};
|
||||
});
|
||||
drawerEdit.value = true;
|
||||
|
||||
item.actions.forEach((a) => {
|
||||
@@ -120,6 +148,69 @@ onMounted(() => {
|
||||
});
|
||||
});
|
||||
|
||||
function eventById(id) {
|
||||
return (props.availableEvents || []).find((e) => Number(e.id) === Number(id));
|
||||
}
|
||||
|
||||
function eventKey(ev) {
|
||||
const id = ev?.id;
|
||||
const found = eventById(id);
|
||||
return (found?.key || ev?.key || "").toString();
|
||||
}
|
||||
|
||||
function defaultConfigForKey(key) {
|
||||
switch (key) {
|
||||
case "add_segment":
|
||||
return { segment_id: null, deactivate_previous: true };
|
||||
case "archive_contract":
|
||||
return { archive_setting_id: null, reactivate: false };
|
||||
case "end_field_job":
|
||||
return {};
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function adoptKeyAndName(ev) {
|
||||
const found = eventById(ev.id);
|
||||
if (found) {
|
||||
ev.key = found.key;
|
||||
ev.name = found.name;
|
||||
}
|
||||
}
|
||||
|
||||
function onEventChange(ev) {
|
||||
adoptKeyAndName(ev);
|
||||
const key = eventKey(ev);
|
||||
// Reset config to sensible defaults for the new key
|
||||
ev.config = defaultConfigForKey(key);
|
||||
// Clear any raw JSON cache
|
||||
if (ev.__rawJson !== undefined) delete ev.__rawJson;
|
||||
}
|
||||
|
||||
function defaultEventPayload() {
|
||||
const first = (props.availableEvents || [])[0] || { id: null, key: null, name: null };
|
||||
return {
|
||||
id: first.id || null,
|
||||
key: first.key || null,
|
||||
name: first.name || null,
|
||||
active: true,
|
||||
run_order: null,
|
||||
config: defaultConfigForKey(first.key || ""),
|
||||
};
|
||||
}
|
||||
|
||||
function tryAdoptRaw(ev) {
|
||||
try {
|
||||
const obj = JSON.parse(ev.__rawJson || "{}");
|
||||
if (obj && typeof obj === "object") {
|
||||
ev.config = obj;
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore parse error, leave raw as-is
|
||||
}
|
||||
}
|
||||
|
||||
const filtered = computed(() => {
|
||||
const term = search.value?.toLowerCase() ?? "";
|
||||
const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null;
|
||||
@@ -135,21 +226,104 @@ const filtered = computed(() => {
|
||||
});
|
||||
|
||||
const update = () => {
|
||||
const clientErrors = validateEventsClientSide(form.events || []);
|
||||
if (Object.keys(clientErrors).length > 0) {
|
||||
// attach errors to form for display
|
||||
form.setErrors(clientErrors);
|
||||
scrollToFirstEventError(clientErrors, "edit");
|
||||
return;
|
||||
}
|
||||
|
||||
form.put(route("settings.decisions.update", { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
closeEditDrawer();
|
||||
},
|
||||
onError: (errors) => {
|
||||
// preserve server errors for display
|
||||
scrollToFirstEventError(form.errors, "edit");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const store = () => {
|
||||
const clientErrors = validateEventsClientSide(createForm.events || []);
|
||||
if (Object.keys(clientErrors).length > 0) {
|
||||
createForm.setErrors(clientErrors);
|
||||
scrollToFirstEventError(clientErrors, "create");
|
||||
return;
|
||||
}
|
||||
|
||||
createForm.post(route("settings.decisions.store"), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
onError: () => {
|
||||
scrollToFirstEventError(createForm.errors, "create");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
function validateEventsClientSide(events) {
|
||||
const errors = {};
|
||||
(events || []).forEach((ev, idx) => {
|
||||
const key = eventKey(ev);
|
||||
if (key === "add_segment") {
|
||||
if (!ev.config || !ev.config.segment_id) {
|
||||
errors[`events.${idx}.config.segment_id`] = "Izberite segment.";
|
||||
}
|
||||
} else if (key === "archive_contract") {
|
||||
if (!ev.config || !ev.config.archive_setting_id) {
|
||||
errors[`events.${idx}.config.archive_setting_id`] = "Izberite nastavitve arhiva.";
|
||||
}
|
||||
}
|
||||
});
|
||||
return errors;
|
||||
}
|
||||
|
||||
function scrollToFirstEventError(errorsBag, mode /* 'edit' | 'create' */) {
|
||||
const keys = Object.keys(errorsBag || {});
|
||||
// find first event-related error key
|
||||
const first = keys.find((k) =>
|
||||
/^events\.\d+\.config\.(segment_id|archive_setting_id)$/.test(k)
|
||||
);
|
||||
if (!first) return;
|
||||
const match = first.match(/^events\.(\d+)\.config\.(segment_id|archive_setting_id)$/);
|
||||
if (!match) return;
|
||||
const idx = Number(match[1]);
|
||||
const field = match[2];
|
||||
let targetId = null;
|
||||
if (field === "segment_id") {
|
||||
targetId = mode === "create" ? `cseg-${idx}` : `seg-${idx}`;
|
||||
} else if (field === "archive_setting_id") {
|
||||
targetId = mode === "create" ? `cas-${idx}` : `as-${idx}`;
|
||||
}
|
||||
if (!targetId) return;
|
||||
nextTick(() => {
|
||||
const el = document.getElementById(targetId);
|
||||
if (el && "scrollIntoView" in el) {
|
||||
el.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
// also focus the control for accessibility
|
||||
if ("focus" in el) {
|
||||
try {
|
||||
el.focus();
|
||||
} catch (e) {
|
||||
/* noop */
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const eventsValidEdit = computed(() => {
|
||||
const errs = validateEventsClientSide(form.events || []);
|
||||
return Object.keys(errs).length === 0;
|
||||
});
|
||||
|
||||
const eventsValidCreate = computed(() => {
|
||||
const errs = validateEventsClientSide(createForm.events || []);
|
||||
return Object.keys(errs).length === 0;
|
||||
});
|
||||
|
||||
const confirmDelete = (decision) => {
|
||||
toDelete.value = decision;
|
||||
showDelete.value = true;
|
||||
@@ -218,6 +392,52 @@ const destroyDecision = () => {
|
||||
<template #cell-belongs="{ row }">
|
||||
{{ row.actions?.length ?? 0 }}
|
||||
</template>
|
||||
<template #cell-events="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-gray-600">{{ row.events?.length ?? 0 }}</span>
|
||||
<Dropdown align="left" width="64" :close-on-content-click="false">
|
||||
<template #trigger>
|
||||
<button
|
||||
type="button"
|
||||
class="p-1 rounded hover:bg-gray-100 border border-transparent hover:border-gray-200"
|
||||
>
|
||||
<DottedMenu size="sm" css="text-gray-600" />
|
||||
</button>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="py-2">
|
||||
<div
|
||||
v-if="!row.events || row.events.length === 0"
|
||||
class="px-3 py-1 text-sm text-gray-500"
|
||||
>
|
||||
Ni dogodkov
|
||||
</div>
|
||||
<ul v-else class="max-h-64 overflow-auto">
|
||||
<li
|
||||
v-for="(ev, i) in row.events"
|
||||
:key="ev.id"
|
||||
class="px-3 py-1 text-sm flex items-center gap-2"
|
||||
>
|
||||
<span
|
||||
class="inline-flex items-center justify-center w-2 h-2 rounded-full"
|
||||
:class="ev.pivot?.active === false ? 'bg-gray-300' : 'bg-green-500'"
|
||||
></span>
|
||||
<span
|
||||
class="text-gray-800"
|
||||
:class="
|
||||
ev.pivot?.active === false ? 'line-through text-gray-400' : ''
|
||||
"
|
||||
>
|
||||
{{ ev.pivot?.run_order ?? i + 1 }}.
|
||||
{{ ev.name || ev.key || "#" + ev.id }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell-auto_mail="{ row }">
|
||||
<div class="flex flex-col text-sm">
|
||||
<span :class="row.auto_mail ? 'text-green-700' : 'text-gray-500'">{{
|
||||
@@ -317,14 +537,161 @@ const destroyDecision = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<!-- Quick JSON event config editor -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-md font-semibold mb-2">Dogodki odločitve</h3>
|
||||
<div class="space-y-4">
|
||||
<div v-for="(ev, idx) in form.events" :key="idx" class="border rounded p-3">
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<div class="flex-1">
|
||||
<InputLabel :for="`event-${idx}`" value="Dogodek" />
|
||||
<select
|
||||
:id="`event-${idx}`"
|
||||
v-model.number="ev.id"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
@change="onEventChange(ev)"
|
||||
>
|
||||
<option :value="null">— Izberi —</option>
|
||||
<option v-for="opt in availableEvents" :key="opt.id" :value="opt.id">
|
||||
{{ opt.name || opt.key || `#${opt.id}` }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-36">
|
||||
<InputLabel :for="`order-${idx}`" value="Vrstni red" />
|
||||
<TextInput
|
||||
:id="`order-${idx}`"
|
||||
v-model.number="ev.run_order"
|
||||
type="number"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-end gap-2">
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="ev.active"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
Aktivno
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
class="text-red-600 text-sm"
|
||||
@click="form.events.splice(idx, 1)"
|
||||
>
|
||||
Odstrani
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<template v-if="eventKey(ev) === 'add_segment'">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<InputLabel :for="`seg-${idx}`" value="Segment" />
|
||||
<select
|
||||
:id="`seg-${idx}`"
|
||||
v-model.number="ev.config.segment_id"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
>
|
||||
<option :value="null">— Izberi segment —</option>
|
||||
<option v-for="s in segments" :key="s.id" :value="s.id">
|
||||
{{ s.name }}
|
||||
</option>
|
||||
</select>
|
||||
<p
|
||||
v-if="form.errors[`events.${idx}.config.segment_id`]"
|
||||
class="text-xs text-red-600 mt-1"
|
||||
>
|
||||
{{ form.errors[`events.${idx}.config.segment_id`] }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<label class="flex items-center gap-2 text-sm mt-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="ev.config.deactivate_previous"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
Deaktiviraj prejšnje
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="eventKey(ev) === 'archive_contract'">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<InputLabel :for="`as-${idx}`" value="Archive setting" />
|
||||
<select
|
||||
:id="`as-${idx}`"
|
||||
v-model.number="ev.config.archive_setting_id"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
>
|
||||
<option :value="null">— Izberi nastavitev —</option>
|
||||
<option v-for="a in archiveSettings" :key="a.id" :value="a.id">
|
||||
{{ a.name }}
|
||||
</option>
|
||||
</select>
|
||||
<p
|
||||
v-if="form.errors[`events.${idx}.config.archive_setting_id`]"
|
||||
class="text-xs text-red-600 mt-1"
|
||||
>
|
||||
{{ form.errors[`events.${idx}.config.archive_setting_id`] }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<label class="flex items-center gap-2 text-sm mt-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="ev.config.reactivate"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
Reactivate namesto arhiva
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="eventKey(ev) === 'end_field_job'">
|
||||
<p class="text-sm text-gray-600">
|
||||
Ta dogodek nima dodatnih nastavitev.
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- Fallback advanced editor for unknown event keys -->
|
||||
<InputLabel :for="`cfg-${idx}`" value="Napredna nastavitev (JSON)" />
|
||||
<textarea
|
||||
:id="`cfg-${idx}`"
|
||||
v-model="ev.__rawJson"
|
||||
@focus="
|
||||
ev.__rawJson =
|
||||
ev.__rawJson ?? JSON.stringify(ev.config || {}, null, 2)
|
||||
"
|
||||
@change="tryAdoptRaw(ev)"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm font-mono"
|
||||
rows="6"
|
||||
placeholder="{ }"
|
||||
></textarea>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
@click="form.events.push(defaultEventPayload())"
|
||||
>+ Dodaj dogodek</PrimaryButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-6">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
:class="{ 'opacity-25': form.processing || !eventsValidEdit }"
|
||||
:disabled="form.processing || !eventsValidEdit"
|
||||
>
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
@@ -407,14 +774,166 @@ const destroyDecision = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Create: Decision events editor -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-md font-semibold mb-2">Dogodki odločitve</h3>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="(ev, idx) in createForm.events"
|
||||
:key="`c-${idx}`"
|
||||
class="border rounded p-3"
|
||||
>
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<div class="flex-1">
|
||||
<InputLabel :for="`cevent-${idx}`" value="Dogodek" />
|
||||
<select
|
||||
:id="`cevent-${idx}`"
|
||||
v-model.number="ev.id"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
@change="onEventChange(ev)"
|
||||
>
|
||||
<option :value="null">— Izberi —</option>
|
||||
<option v-for="opt in availableEvents" :key="opt.id" :value="opt.id">
|
||||
{{ opt.name || opt.key || `#${opt.id}` }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-36">
|
||||
<InputLabel :for="`corder-${idx}`" value="Vrstni red" />
|
||||
<TextInput
|
||||
:id="`corder-${idx}`"
|
||||
v-model.number="ev.run_order"
|
||||
type="number"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-end gap-2">
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="ev.active"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
Aktivno
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
class="text-red-600 text-sm"
|
||||
@click="createForm.events.splice(idx, 1)"
|
||||
>
|
||||
Odstrani
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<template v-if="eventKey(ev) === 'add_segment'">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<InputLabel :for="`cseg-${idx}`" value="Segment" />
|
||||
<select
|
||||
:id="`cseg-${idx}`"
|
||||
v-model.number="ev.config.segment_id"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
>
|
||||
<option :value="null">— Izberi segment —</option>
|
||||
<option v-for="s in segments" :key="s.id" :value="s.id">
|
||||
{{ s.name }}
|
||||
</option>
|
||||
</select>
|
||||
<p
|
||||
v-if="createForm.errors[`events.${idx}.config.segment_id`]"
|
||||
class="text-xs text-red-600 mt-1"
|
||||
>
|
||||
{{ createForm.errors[`events.${idx}.config.segment_id`] }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<label class="flex items-center gap-2 text-sm mt-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="ev.config.deactivate_previous"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
Deaktiviraj prejšnje
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="eventKey(ev) === 'archive_contract'">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<InputLabel :for="`cas-${idx}`" value="Archive setting" />
|
||||
<select
|
||||
:id="`cas-${idx}`"
|
||||
v-model.number="ev.config.archive_setting_id"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
>
|
||||
<option :value="null">— Izberi nastavitev —</option>
|
||||
<option v-for="a in archiveSettings" :key="a.id" :value="a.id">
|
||||
{{ a.name }}
|
||||
</option>
|
||||
</select>
|
||||
<p
|
||||
v-if="
|
||||
createForm.errors[`events.${idx}.config.archive_setting_id`]
|
||||
"
|
||||
class="text-xs text-red-600 mt-1"
|
||||
>
|
||||
{{ createForm.errors[`events.${idx}.config.archive_setting_id`] }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<label class="flex items-center gap-2 text-sm mt-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="ev.config.reactivate"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
Reactivate namesto arhiva
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="eventKey(ev) === 'end_field_job'">
|
||||
<p class="text-sm text-gray-600">
|
||||
Ta dogodek nima dodatnih nastavitev.
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<InputLabel :for="`ccfg-${idx}`" value="Napredna nastavitev (JSON)" />
|
||||
<textarea
|
||||
:id="`ccfg-${idx}`"
|
||||
v-model="ev.__rawJson"
|
||||
@focus="
|
||||
ev.__rawJson =
|
||||
ev.__rawJson ?? JSON.stringify(ev.config || {}, null, 2)
|
||||
"
|
||||
@change="tryAdoptRaw(ev)"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm font-mono"
|
||||
rows="6"
|
||||
placeholder="{ }"
|
||||
></textarea>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
@click="createForm.events.push(defaultEventPayload())"
|
||||
>+ Dodaj dogodek</PrimaryButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': createForm.processing }"
|
||||
:disabled="createForm.processing"
|
||||
:class="{ 'opacity-25': createForm.processing || !eventsValidCreate }"
|
||||
:disabled="createForm.processing || !eventsValidCreate"
|
||||
>
|
||||
Dodaj
|
||||
</PrimaryButton>
|
||||
|
||||
@@ -10,6 +10,8 @@ const props = defineProps({
|
||||
decisions: Array,
|
||||
segments: Array,
|
||||
email_templates: { type: Array, default: () => [] },
|
||||
events: { type: Array, default: () => [] },
|
||||
archive_settings: { type: Array, default: () => [] },
|
||||
});
|
||||
|
||||
const activeTab = ref("actions");
|
||||
@@ -33,6 +35,9 @@ const activeTab = ref("actions");
|
||||
:decisions="decisions"
|
||||
:actions="actions"
|
||||
:email-templates="email_templates"
|
||||
:available-events="events"
|
||||
:segments="segments"
|
||||
:archive-settings="archive_settings"
|
||||
/>
|
||||
</fwb-tab>
|
||||
</fwb-tabs>
|
||||
|
||||
Reference in New Issue
Block a user