Phone view case updated
This commit is contained in:
Simon Pocrnjič
@@ -0,0 +1,582 @@
|
||||
<script setup>
|
||||
import DatePicker from "@/Components/DatePicker.vue";
|
||||
import CurrencyInput from "@/Components/CurrencyInput.vue";
|
||||
import { useForm as useInertiaForm, usePage } from "@inertiajs/vue3";
|
||||
import { Textarea } from "@/Components/ui/textarea";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/Components/ui/select";
|
||||
import { Switch } from "@/Components/ui/switch";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import AppMultiSelect from "@/Components/app/ui/AppMultiSelect.vue";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerFooter,
|
||||
DrawerClose,
|
||||
} from "@/Components/ui/drawer";
|
||||
import { ScrollArea } from "@/Components/ui/scroll-area";
|
||||
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 },
|
||||
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 = useInertiaForm({
|
||||
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_uuids: props.contractUuid
|
||||
? [props.contractUuid]
|
||||
: (props.contracts || []).filter((item) => item.active == 1).map((c) => c.uuid),
|
||||
send_auto_mail: true,
|
||||
attach_documents: false,
|
||||
attachment_document_ids: [],
|
||||
call_back_at_date: null,
|
||||
call_back_at_time: null,
|
||||
});
|
||||
|
||||
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_uuids = cu
|
||||
? [cu]
|
||||
: (props.contracts || []).filter((item) => item.active == 1).map((c) => c.uuid);
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
form.contract_uuids = props.contractUuid
|
||||
? [props.contractUuid]
|
||||
: (props.contracts || []).filter((item) => item.active == 1).map((c) => c.uuid);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
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}`;
|
||||
};
|
||||
|
||||
const contractUuids =
|
||||
Array.isArray(form.contract_uuids) && form.contract_uuids.length > 0
|
||||
? form.contract_uuids
|
||||
: null;
|
||||
|
||||
const isMultipleContracts = contractUuids && contractUuids.length > 1;
|
||||
|
||||
const buildCallBackAt = (date, time) => {
|
||||
if (!date) return null;
|
||||
const t = time || "00:00";
|
||||
const [h, m] = t.split(":");
|
||||
const d = date instanceof Date ? date : new Date(date);
|
||||
if (isNaN(d.getTime())) return null;
|
||||
const y = d.getFullYear();
|
||||
const mo = String(d.getMonth() + 1).padStart(2, "0");
|
||||
const dy = String(d.getDate()).padStart(2, "0");
|
||||
const hh = String(Number(h || 0)).padStart(2, "0");
|
||||
const mm = String(Number(m || 0)).padStart(2, "0");
|
||||
return `${y}-${mo}-${dy} ${hh}:${mm}:00`;
|
||||
};
|
||||
|
||||
form
|
||||
.transform((data) => ({
|
||||
...data,
|
||||
phone_view: props.phoneMode,
|
||||
due_date: formatDateForSubmit(data.due_date),
|
||||
contract_uuids: contractUuids,
|
||||
create_for_all_contracts: isMultipleContracts,
|
||||
attachment_document_ids:
|
||||
templateAllowsAttachments.value && data.attach_documents && !isMultipleContracts
|
||||
? data.attachment_document_ids
|
||||
: [],
|
||||
call_back_at: hasCallLaterEvent.value
|
||||
? buildCallBackAt(data.call_back_at_date, data.call_back_at_time)
|
||||
: null,
|
||||
call_back_at_date: undefined,
|
||||
call_back_at_time: undefined,
|
||||
}))
|
||||
.post(route("clientCase.activity.store", props.client_case), {
|
||||
onSuccess: () => {
|
||||
close();
|
||||
form.reset(
|
||||
"due_date",
|
||||
"amount",
|
||||
"note",
|
||||
"contract_uuids",
|
||||
"call_back_at_date",
|
||||
"call_back_at_time"
|
||||
);
|
||||
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 hasCallLaterEvent = computed(() => {
|
||||
const d = currentDecision();
|
||||
if (!d) return false;
|
||||
return Array.isArray(d.events) && d.events.some((e) => e.key === "add_call_later");
|
||||
});
|
||||
|
||||
watch(
|
||||
() => hasCallLaterEvent.value,
|
||||
(has) => {
|
||||
if (!has) {
|
||||
form.call_back_at_date = null;
|
||||
form.call_back_at_time = 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 contractItems = computed(() => {
|
||||
return pageContracts.value.map((c) => ({
|
||||
value: c.uuid,
|
||||
label: c.active == 1 ? `${c.reference}` : `${c.reference} (Arhivirano)`,
|
||||
}));
|
||||
});
|
||||
|
||||
const autoMailDisabled = computed(() => {
|
||||
if (!showSendAutoMail()) return false;
|
||||
if (form.contract_uuids && form.contract_uuids.length > 1) return true;
|
||||
if (
|
||||
autoMailRequiresContract.value &&
|
||||
(!form.contract_uuids || form.contract_uuids.length === 0)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
const autoMailDisabledHint = computed(() => {
|
||||
if (!showSendAutoMail()) return "";
|
||||
if (form.contract_uuids && form.contract_uuids.length > 1) {
|
||||
return "Avtomatska e-pošta ni na voljo pri več pogodbah.";
|
||||
}
|
||||
if (
|
||||
autoMailRequiresContract.value &&
|
||||
(!form.contract_uuids || form.contract_uuids.length === 0)
|
||||
) {
|
||||
return "Ta e-poštna predloga zahteva pogodbo. Najprej izberite pogodbo.";
|
||||
}
|
||||
return "";
|
||||
});
|
||||
|
||||
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") {
|
||||
const s = val.includes("T") ? val : val.replace(" ", "T");
|
||||
d = new Date(s);
|
||||
if (isNaN(d.getTime())) {
|
||||
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_uuids || form.contract_uuids.length === 0) return [];
|
||||
if (form.contract_uuids.length > 1) return [];
|
||||
const selectedUuid = form.contract_uuids[0];
|
||||
const docs = docsSource.value;
|
||||
const all = docs.filter((d) => d.contract_uuid === selectedUuid);
|
||||
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;
|
||||
}
|
||||
if (props.contracts?.data) {
|
||||
return props.contracts.data;
|
||||
}
|
||||
const propsVal = page?.props?.value || {};
|
||||
if (propsVal.contracts?.data) {
|
||||
return propsVal.contracts.data;
|
||||
}
|
||||
return Array.isArray(propsVal.contracts) ? propsVal.contracts : [];
|
||||
});
|
||||
|
||||
watch(
|
||||
[
|
||||
() => props.phoneMode,
|
||||
() => templateAllowsAttachments.value,
|
||||
() => form.contract_uuids,
|
||||
() => form.decision_id,
|
||||
() => availableContractDocs.value.length,
|
||||
],
|
||||
() => {
|
||||
if (!props.phoneMode) return;
|
||||
if (!templateAllowsAttachments.value) return;
|
||||
if (!form.contract_uuids || form.contract_uuids.length !== 1) 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>
|
||||
<Drawer :open="show" @update:open="(val) => !val && close()">
|
||||
<DrawerContent class="flex flex-col max-h-[90vh]">
|
||||
<DrawerHeader class="border-b px-4 py-3 shrink-0">
|
||||
<DrawerTitle>Dodaj aktivnost</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
|
||||
<ScrollArea class="flex-1 min-h-0">
|
||||
<form @submit.prevent="store" class="px-4 py-4 space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label>Akcija</Label>
|
||||
<Select v-model="form.action_id" :disabled="!actions || !actions.length">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Izberi akcijo" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="a in actions" :key="a.id" :value="a.id">
|
||||
{{ a.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Odločitev</Label>
|
||||
<Select v-model="form.decision_id" :disabled="!decisions || !decisions.length">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Izberi odločitev" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="d in decisions" :key="d.id" :value="d.id">
|
||||
{{ d.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Pogodbe</Label>
|
||||
<AppMultiSelect
|
||||
v-model="form.contract_uuids"
|
||||
:items="contractItems"
|
||||
placeholder="Izberi pogodbe (neobvezno)"
|
||||
search-placeholder="Išči pogodbo..."
|
||||
empty-text="Ni pogodb."
|
||||
:clearable="true"
|
||||
:show-selected-chips="true"
|
||||
/>
|
||||
<p
|
||||
v-if="form.contract_uuids && form.contract_uuids.length > 1"
|
||||
class="text-xs text-muted-foreground"
|
||||
>
|
||||
Bo ustvarjenih {{ form.contract_uuids.length }} aktivnosti (ena za vsako
|
||||
pogodbo).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="activityNote">Opomba</Label>
|
||||
<Textarea
|
||||
id="activityNote"
|
||||
v-model="form.note"
|
||||
class="block w-full max-h-40"
|
||||
placeholder="Opomba"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="activityDueDate">Datum zapadlosti</Label>
|
||||
<DatePicker
|
||||
id="activityDueDate"
|
||||
v-model="form.due_date"
|
||||
format="dd.MM.yyyy"
|
||||
:error="form.errors.due_date"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="hasCallLaterEvent" class="space-y-2">
|
||||
<Label>Datum in ura povratnega klica</Label>
|
||||
<div class="flex gap-2">
|
||||
<DatePicker
|
||||
v-model="form.call_back_at_date"
|
||||
format="dd.MM.yyyy"
|
||||
:error="form.errors.call_back_at"
|
||||
class="flex-1"
|
||||
/>
|
||||
<input
|
||||
v-model="form.call_back_at_time"
|
||||
type="time"
|
||||
class="flex-1 border rounded-md px-3 py-2 text-sm bg-background focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="form.errors.call_back_at" class="text-xs text-destructive">
|
||||
{{ form.errors.call_back_at }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="activityAmount">Znesek</Label>
|
||||
<CurrencyInput
|
||||
id="activityAmount"
|
||||
v-model="form.amount"
|
||||
:precision="{ min: 0, max: 4 }"
|
||||
placeholder="0,00"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="showSendAutoMail()" class="space-y-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<Switch v-model="form.send_auto_mail" :disabled="autoMailDisabled" />
|
||||
<Label class="cursor-pointer">Pošlji samodejno e-pošto</Label>
|
||||
</div>
|
||||
<p v-if="autoMailDisabled" class="text-xs text-amber-600">
|
||||
{{ autoMailDisabledHint }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
templateAllowsAttachments &&
|
||||
form.contract_uuids &&
|
||||
form.contract_uuids.length === 1
|
||||
"
|
||||
class="mt-3"
|
||||
>
|
||||
<label class="inline-flex items-center gap-2">
|
||||
<Switch 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-40 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_uuids[0]">
|
||||
<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 max-w-sm gap-2 text-sm"
|
||||
>
|
||||
<Switch
|
||||
:model-value="form.attachment_document_ids.includes(doc.id)"
|
||||
@update:model-value="
|
||||
(checked) => {
|
||||
if (checked) {
|
||||
if (!form.attachment_document_ids.includes(doc.id)) {
|
||||
form.attachment_document_ids.push(doc.id);
|
||||
}
|
||||
} else {
|
||||
form.attachment_document_ids =
|
||||
form.attachment_document_ids.filter(
|
||||
(id) => id !== doc.id
|
||||
);
|
||||
}
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="wrap-anywhere">
|
||||
<p>
|
||||
<span>{{ doc.name }}.{{ doc.extension }}</span>
|
||||
</p>
|
||||
<span class="text-xs text-gray-400"
|
||||
>({{ doc.extension?.toUpperCase() || "" }},
|
||||
{{ (doc.size / 1024 / 1024).toFixed(2) }} MB)</span
|
||||
>
|
||||
</div>
|
||||
</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>
|
||||
</form>
|
||||
</ScrollArea>
|
||||
|
||||
<DrawerFooter class="border-t shrink-0 flex-row gap-2 px-4 py-3">
|
||||
<Button class="flex-1" :disabled="form.processing" @click="store">
|
||||
Shrani
|
||||
</Button>
|
||||
<DrawerClose as-child>
|
||||
<Button variant="outline" class="flex-1" @click="close">Prekliči</Button>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</template>
|
||||
Reference in New Issue
Block a user