416 lines
13 KiB
Vue
416 lines
13 KiB
Vue
<script setup>
|
|
import ActionMessage from "@/Components/ActionMessage.vue";
|
|
import BasicButton from "@/Components/buttons/BasicButton.vue";
|
|
import DialogModal from "@/Components/DialogModal.vue";
|
|
import InputLabel from "@/Components/InputLabel.vue";
|
|
import DatePickerField from "@/Components/DatePickerField.vue";
|
|
import CurrencyInput from "@/Components/CurrencyInput.vue";
|
|
import { useForm, usePage } from "@inertiajs/vue3";
|
|
import { FwbTextarea } from "flowbite-vue";
|
|
import { ref, watch, computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
show: { type: Boolean, default: false },
|
|
client_case: { type: Object, required: true },
|
|
actions: { type: Array, default: () => [] },
|
|
contractUuid: { type: String, default: null },
|
|
phoneMode: { type: Boolean, default: false },
|
|
// Prefer passing these from parent (e.g., phone view) to avoid reliance on global page props in teleports
|
|
documents: { type: Array, default: null },
|
|
contracts: { type: Array, default: null },
|
|
});
|
|
|
|
const page = usePage();
|
|
|
|
const decisions = ref(
|
|
Array.isArray(props.actions) && props.actions.length > 0
|
|
? props.actions[0].decisions || []
|
|
: []
|
|
);
|
|
|
|
const emit = defineEmits(["close", "saved"]);
|
|
const close = () => emit("close");
|
|
|
|
const form = useForm({
|
|
due_date: null,
|
|
amount: null,
|
|
note: "",
|
|
action_id:
|
|
Array.isArray(props.actions) && props.actions.length > 0 ? props.actions[0].id : null,
|
|
decision_id:
|
|
Array.isArray(props.actions) &&
|
|
props.actions.length > 0 &&
|
|
Array.isArray(props.actions[0].decisions) &&
|
|
props.actions[0].decisions.length > 0
|
|
? props.actions[0].decisions[0].id
|
|
: null,
|
|
contract_uuid: props.contractUuid,
|
|
send_auto_mail: true,
|
|
attach_documents: false,
|
|
attachment_document_ids: [],
|
|
});
|
|
|
|
watch(
|
|
() => props.actions,
|
|
(list) => {
|
|
if (!Array.isArray(list) || list.length === 0) {
|
|
decisions.value = [];
|
|
form.action_id = null;
|
|
form.decision_id = null;
|
|
return;
|
|
}
|
|
if (!form.action_id) {
|
|
form.action_id = list[0].id;
|
|
}
|
|
const found = list.find((el) => el.id === form.action_id) || list[0];
|
|
decisions.value = Array.isArray(found.decisions) ? found.decisions : [];
|
|
if (!form.decision_id && decisions.value.length > 0) {
|
|
form.decision_id = decisions.value[0].id;
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
watch(
|
|
() => form.action_id,
|
|
(action_id) => {
|
|
const a = Array.isArray(props.actions)
|
|
? props.actions.find((el) => el.id === action_id)
|
|
: null;
|
|
decisions.value = Array.isArray(a?.decisions) ? a.decisions : [];
|
|
form.decision_id = decisions.value[0]?.id ?? null;
|
|
form.send_auto_mail = true;
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => props.contractUuid,
|
|
(cu) => {
|
|
form.contract_uuid = cu || null;
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => props.show,
|
|
(visible) => {
|
|
if (visible) {
|
|
form.contract_uuid = props.contractUuid || null;
|
|
}
|
|
}
|
|
);
|
|
|
|
const store = async () => {
|
|
const formatDateForSubmit = (value) => {
|
|
if (!value) return null;
|
|
const d = value instanceof Date ? value : new Date(value);
|
|
if (isNaN(d.getTime())) return null;
|
|
const y = d.getFullYear();
|
|
const m = String(d.getMonth() + 1).padStart(2, "0");
|
|
const day = String(d.getDate()).padStart(2, "0");
|
|
return `${y}-${m}-${day}`;
|
|
};
|
|
|
|
form
|
|
.transform((data) => ({
|
|
...data,
|
|
due_date: formatDateForSubmit(data.due_date),
|
|
attachment_document_ids:
|
|
templateAllowsAttachments.value && data.attach_documents
|
|
? data.attachment_document_ids
|
|
: [],
|
|
}))
|
|
.post(route("clientCase.activity.store", props.client_case), {
|
|
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");
|
|
},
|
|
});
|
|
};
|
|
|
|
const currentDecision = () => {
|
|
if (!Array.isArray(decisions.value) || decisions.value.length === 0) {
|
|
return null;
|
|
}
|
|
return (
|
|
decisions.value.find((d) => d.id === form.decision_id) || decisions.value[0] || null
|
|
);
|
|
};
|
|
const showSendAutoMail = () => {
|
|
const d = currentDecision();
|
|
return !!(d && d.auto_mail && d.email_template_id);
|
|
};
|
|
|
|
const templateAllowsAttachments = computed(() => {
|
|
const d = currentDecision();
|
|
const tmpl = d?.email_template || d?.emailTemplate || null;
|
|
return !!(tmpl && tmpl.allow_attachments);
|
|
});
|
|
|
|
const autoMailRequiresContract = computed(() => {
|
|
const d = currentDecision();
|
|
if (!d) return false;
|
|
const tmpl = d.email_template || d.emailTemplate || null;
|
|
const types = Array.isArray(tmpl?.entity_types) ? tmpl.entity_types : [];
|
|
return types.includes("contract");
|
|
});
|
|
|
|
const autoMailDisabled = computed(() => {
|
|
return showSendAutoMail() && autoMailRequiresContract.value && !form.contract_uuid;
|
|
});
|
|
const autoMailDisabledHint = computed(() => {
|
|
return autoMailDisabled.value
|
|
? "Ta e-poštna predloga zahteva pogodbo. Najprej izberite pogodbo."
|
|
: "";
|
|
});
|
|
watch(
|
|
() => autoMailDisabled.value,
|
|
(disabled) => {
|
|
if (disabled) {
|
|
form.send_auto_mail = false;
|
|
}
|
|
}
|
|
);
|
|
|
|
const isToday = (val) => {
|
|
try {
|
|
if (!val) return false;
|
|
let d;
|
|
if (val instanceof Date) {
|
|
d = val;
|
|
} else if (typeof val === "string") {
|
|
// Normalize common MySQL timestamp 'YYYY-MM-DD HH:mm:ss' for Safari/iOS
|
|
const s = val.includes("T") ? val : val.replace(" ", "T");
|
|
d = new Date(s);
|
|
if (isNaN(d.getTime())) {
|
|
// Fallback: parse manually as local date
|
|
const m = val.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::(\d{2}))?/);
|
|
if (m) {
|
|
const [_, yy, mm, dd, hh, mi, ss] = m;
|
|
d = new Date(
|
|
Number(yy),
|
|
Number(mm) - 1,
|
|
Number(dd),
|
|
Number(hh),
|
|
Number(mi),
|
|
Number(ss || "0")
|
|
);
|
|
}
|
|
}
|
|
} else if (typeof val === "number") {
|
|
d = new Date(val);
|
|
} else {
|
|
return false;
|
|
}
|
|
if (isNaN(d.getTime())) return false;
|
|
const today = new Date();
|
|
return (
|
|
d.getFullYear() === today.getFullYear() &&
|
|
d.getMonth() === today.getMonth() &&
|
|
d.getDate() === today.getDate()
|
|
);
|
|
} catch {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const docsSource = computed(() => {
|
|
if (Array.isArray(props.documents)) {
|
|
return props.documents;
|
|
}
|
|
const propsVal = page?.props?.value || {};
|
|
return Array.isArray(propsVal.documents) ? propsVal.documents : [];
|
|
});
|
|
|
|
const availableContractDocs = computed(() => {
|
|
if (!form.contract_uuid) return [];
|
|
const docs = docsSource.value;
|
|
const all = docs.filter((d) => d.contract_uuid === form.contract_uuid);
|
|
if (!props.phoneMode) return all;
|
|
return all.filter((d) => {
|
|
const mime = (d.mime_type || "").toLowerCase();
|
|
const isImage =
|
|
mime.startsWith("image/") ||
|
|
["jpg", "jpeg", "png", "gif", "webp", "heic", "heif"].includes(
|
|
(d.extension || "").toLowerCase()
|
|
);
|
|
return isImage && isToday(d.created_at || d.createdAt);
|
|
});
|
|
});
|
|
|
|
const pageContracts = computed(() => {
|
|
if (Array.isArray(props.contracts)) {
|
|
return props.contracts;
|
|
}
|
|
const propsVal = page?.props?.value || {};
|
|
return Array.isArray(propsVal.contracts) ? propsVal.contracts : [];
|
|
});
|
|
|
|
watch(
|
|
[
|
|
() => props.phoneMode,
|
|
() => templateAllowsAttachments.value,
|
|
() => form.contract_uuid,
|
|
() => form.decision_id,
|
|
() => availableContractDocs.value.length,
|
|
],
|
|
() => {
|
|
if (!props.phoneMode) return;
|
|
if (!templateAllowsAttachments.value) return;
|
|
if (!form.contract_uuid) return;
|
|
const docs = availableContractDocs.value;
|
|
if (docs.length === 0) return;
|
|
form.attach_documents = true;
|
|
if (
|
|
!Array.isArray(form.attachment_document_ids) ||
|
|
form.attachment_document_ids.length === 0
|
|
) {
|
|
form.attachment_document_ids = docs.map((d) => d.id);
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<DialogModal :show="show" @close="close">
|
|
<template #title>Dodaj aktivnost</template>
|
|
<template #content>
|
|
<form @submit.prevent="store">
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="activityAction" value="Akcija" />
|
|
<select
|
|
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
|
id="activityAction"
|
|
ref="activityActionSelect"
|
|
v-model="form.action_id"
|
|
:disabled="!actions || !actions.length"
|
|
>
|
|
<option v-for="a in actions" :key="a.id" :value="a.id">{{ a.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="activityDecision" value="Odločitev" />
|
|
<select
|
|
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
|
id="activityDecision"
|
|
ref="activityDecisionSelect"
|
|
v-model="form.decision_id"
|
|
:disabled="!decisions || !decisions.length"
|
|
>
|
|
<option v-for="d in decisions" :key="d.id" :value="d.id">{{ d.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<FwbTextarea
|
|
label="Opomba"
|
|
id="activityNote"
|
|
ref="activityNoteTextarea"
|
|
v-model="form.note"
|
|
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
|
/>
|
|
</div>
|
|
<DatePickerField
|
|
id="activityDueDate"
|
|
label="Datum zapadlosti"
|
|
v-model="form.due_date"
|
|
format="dd.MM.yyyy"
|
|
:enable-time-picker="false"
|
|
:auto-position="true"
|
|
:teleport-target="'body'"
|
|
:inline="false"
|
|
:auto-apply="false"
|
|
:fixed="false"
|
|
:close-on-auto-apply="true"
|
|
:close-on-scroll="true"
|
|
/>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="activityAmount" value="Znesek" />
|
|
<CurrencyInput
|
|
id="activityAmount"
|
|
ref="activityAmountinput"
|
|
v-model="form.amount"
|
|
:precision="{ min: 0, max: 4 }"
|
|
placeholder="0,00"
|
|
/>
|
|
</div>
|
|
<div class="mt-2" v-if="showSendAutoMail()">
|
|
<div class="flex items-center justify-between">
|
|
<label class="flex items-center gap-2 text-sm">
|
|
<input
|
|
type="checkbox"
|
|
v-model="form.send_auto_mail"
|
|
:disabled="autoMailDisabled"
|
|
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
/>
|
|
<span>Send auto email</span>
|
|
</label>
|
|
</div>
|
|
<p v-if="autoMailDisabled" class="mt-1 text-xs text-amber-600">
|
|
{{ autoMailDisabledHint }}
|
|
</p>
|
|
|
|
<div v-if="templateAllowsAttachments && form.contract_uuid" class="mt-3">
|
|
<label class="inline-flex items-center gap-2">
|
|
<input type="checkbox" v-model="form.attach_documents" />
|
|
<span class="text-sm">Dodaj priponke iz izbrane pogodbe</span>
|
|
</label>
|
|
<div
|
|
v-if="form.attach_documents"
|
|
class="mt-2 border rounded p-2 max-h-48 overflow-auto"
|
|
>
|
|
<div class="text-xs text-gray-600 mb-2">
|
|
Izberite dokumente, ki bodo poslani kot priponke:
|
|
</div>
|
|
<div class="space-y-1">
|
|
<template v-for="c in pageContracts" :key="c.uuid || c.id">
|
|
<div v-if="c.uuid === form.contract_uuid">
|
|
<div class="font-medium text-sm text-gray-700 mb-1">
|
|
Pogodba {{ c.reference }}
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div
|
|
v-for="doc in availableContractDocs"
|
|
:key="doc.uuid || doc.id"
|
|
class="flex items-center gap-2 text-sm"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
:value="doc.id"
|
|
v-model="form.attachment_document_ids"
|
|
/>
|
|
<span>{{ doc.original_name || doc.name }}</span>
|
|
<span class="text-xs text-gray-400"
|
|
>({{ doc.extension?.toUpperCase() || "" }},
|
|
{{ (doc.size / 1024 / 1024).toFixed(2) }} MB)</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div
|
|
v-if="availableContractDocs.length === 0"
|
|
class="text-sm text-gray-500"
|
|
>
|
|
Ni dokumentov, povezanih s to pogodbo.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
|
Shranjuje.
|
|
</ActionMessage>
|
|
<BasicButton
|
|
:class="{ 'opacity-25': form.processing }"
|
|
:disabled="form.processing"
|
|
>
|
|
Shrani
|
|
</BasicButton>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
</DialogModal>
|
|
</template>
|