Big changes added events for decisions
This commit is contained in:
Simon Pocrnjič
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user