sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added option to import payments from csv file

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-10-02 22:09:05 +02:00
parent 971a9e89d1
commit 12de0186cf
21 changed files with 2828 additions and 824 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Imports/Create.vue
+239 -119
View File
@@ -1,9 +1,9 @@
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import { ref, watch, computed, onMounted } from 'vue';
import { useForm, router } from '@inertiajs/vue3';
import Multiselect from 'vue-multiselect';
import axios from 'axios';
import AppLayout from "@/Layouts/AppLayout.vue";
import { ref, watch, computed, onMounted } from "vue";
import { useForm, router } from "@inertiajs/vue3";
import Multiselect from "vue-multiselect";
import axios from "axios";
const props = defineProps({
templates: Array,
@@ -11,7 +11,7 @@ const props = defineProps({
});
const hasHeader = ref(true);
const detected = ref({ columns: [], delimiter: ',', has_header: true });
const detected = ref({ columns: [], delimiter: ",", has_header: true });
const importId = ref(null);
const templateApplied = ref(false);
const processing = ref(false);
@@ -19,15 +19,28 @@ const processResult = ref(null);
const mappingRows = ref([]);
const mappingSaved = ref(false);
const mappingSavedCount = ref(0);
const selectedMappingsCount = computed(() => mappingRows.value.filter(r => !r.skip && r.entity && r.field).length);
const mappingError = ref('');
const selectedMappingsCount = computed(
() => mappingRows.value.filter((r) => !r.skip && r.entity && r.field).length
);
const mappingError = ref("");
const savingMappings = ref(false);
// Dynamic entity definitions and suggestions from API
const entityDefs = ref([]);
const entityOptions = computed(() => entityDefs.value.map(e => ({ value: e.key, label: e.label || e.key })));
const fieldOptionsByEntity = computed(() => Object.fromEntries(entityDefs.value.map(e => [e.key, (e.fields || []).map(f => ({ value: f, label: f }))])));
const canonicalRootByKey = computed(() => Object.fromEntries(entityDefs.value.map(e => [e.key, e.canonical_root || e.key])));
const entityOptions = computed(() =>
entityDefs.value.map((e) => ({ value: e.key, label: e.label || e.key }))
);
const fieldOptionsByEntity = computed(() =>
Object.fromEntries(
entityDefs.value.map((e) => [
e.key,
(e.fields || []).map((f) => ({ value: f, label: f })),
])
)
);
const canonicalRootByKey = computed(() =>
Object.fromEntries(entityDefs.value.map((e) => [e.key, e.canonical_root || e.key]))
);
const keyByCanonicalRoot = computed(() => {
const m = {};
for (const e of entityDefs.value) {
@@ -40,20 +53,24 @@ const keyByCanonicalRoot = computed(() => {
const suggestions = ref({});
async function loadEntityDefs() {
try {
const { data } = await axios.get('/api/import-entities');
const { data } = await axios.get("/api/import-entities");
entityDefs.value = data?.entities || [];
} catch (e) {
console.error('Failed to load import entity definitions', e);
console.error("Failed to load import entity definitions", e);
}
}
async function refreshSuggestions(columns) {
const cols = Array.isArray(columns) ? columns : (detected.value.columns || []);
if (!cols || cols.length === 0) { return; }
const cols = Array.isArray(columns) ? columns : detected.value.columns || [];
if (!cols || cols.length === 0) {
return;
}
try {
const { data } = await axios.post('/api/import-entities/suggest', { columns: cols });
// When a template is chosen and provides meta.entities, limit suggestions to those entities
const only = (selectedTemplate.value?.meta?.entities || []);
const { data } = await axios.post("/api/import-entities/suggest", { columns: cols, only_entities: only });
suggestions.value = { ...suggestions.value, ...(data?.suggestions || {}) };
} catch (e) {
console.error('Failed to load suggestions', e);
console.error("Failed to load suggestions", e);
}
}
@@ -64,8 +81,12 @@ function applySuggestionToRow(row) {
row.entity = s.entity;
row.field = s.field;
// default transform on if missing
if (!row.transform) { row.transform = 'trim'; }
if (!row.apply_mode) { row.apply_mode = 'both'; }
if (!row.transform) {
row.transform = "trim";
}
if (!row.apply_mode) {
row.apply_mode = "both";
}
row.skip = false;
return true;
}
@@ -84,11 +105,11 @@ const selectedClientOption = computed({
get() {
const cuuid = form.client_uuid;
if (!cuuid) return null;
return (props.clients || []).find(c => c.uuid === cuuid) || null;
return (props.clients || []).find((c) => c.uuid === cuuid) || null;
},
set(val) {
form.client_uuid = val ? val.uuid : null;
}
},
});
// Bridge Template Multiselect to store only template id (number) in form
@@ -96,18 +117,18 @@ const selectedTemplateOption = computed({
get() {
const tid = form.import_template_id;
if (tid == null) return null;
return (props.templates || []).find(t => t.id === tid) || null;
return (props.templates || []).find((t) => t.id === tid) || null;
},
set(val) {
form.import_template_id = val ? val.id : null;
}
},
});
// Helper: selected client's numeric id (fallback)
const selectedClientId = computed(() => {
const cuuid = form.client_uuid;
if (!cuuid) return null;
const c = (props.clients || []).find(x => x.uuid === cuuid);
const c = (props.clients || []).find((x) => x.uuid === cuuid);
return c ? c.id : null;
});
@@ -117,10 +138,12 @@ const filteredTemplates = computed(() => {
const cuuid = form.client_uuid;
const list = props.templates || [];
if (!cuuid) {
return list.filter(t => t.client_id == null);
return list.filter((t) => t.client_id == null);
}
// When client is selected, only show that client's templates (no globals)
return list.filter(t => t.client_uuid && t.client_uuid === cuuid);
return list.filter(
(t) => (t.client_uuid && t.client_uuid === cuuid) || t.client_id == null
);
});
function onFileChange(e) {
@@ -131,7 +154,7 @@ function onFileChange(e) {
}
async function submitUpload() {
await form.post(route('imports.store'), {
await form.post(route("imports.store"), {
forceFormData: true,
onSuccess: (res) => {
const data = res?.props || {};
@@ -141,29 +164,31 @@ async function submitUpload() {
if (!form.recentlySuccessful) return;
// Inertia doesn't expose JSON response directly with useForm; fallback to API call using fetch
const fd = new FormData();
fd.append('file', form.file);
fd.append("file", form.file);
},
});
}
async function fetchColumns() {
if (!importId.value) return;
const url = route('imports.columns', { import: importId.value });
const { data } = await axios.get(url, { params: { has_header: hasHeader.value ? 1 : 0 } });
const url = route("imports.columns", { import: importId.value });
const { data } = await axios.get(url, {
params: { has_header: hasHeader.value ? 1 : 0 },
});
detected.value = {
columns: data.columns || [],
delimiter: data.detected_delimiter || ',',
delimiter: data.detected_delimiter || ",",
has_header: !!data.has_header,
};
// initialize simple mapping rows with defaults if none exist
if (!mappingRows.value.length) {
mappingRows.value = (detected.value.columns || []).map((c, idx) => ({
source_column: c,
entity: '',
field: '',
entity: "",
field: "",
skip: false,
transform: 'trim',
apply_mode: 'both',
transform: "trim",
apply_mode: "both",
position: idx,
}));
}
@@ -180,22 +205,26 @@ async function uploadAndPreview() {
templateApplied.value = false;
processResult.value = null;
const fd = new window.FormData();
fd.append('file', form.file);
if (form.import_template_id !== null && form.import_template_id !== undefined && String(form.import_template_id).trim() !== '') {
fd.append('import_template_id', String(form.import_template_id));
fd.append("file", form.file);
if (
form.import_template_id !== null &&
form.import_template_id !== undefined &&
String(form.import_template_id).trim() !== ""
) {
fd.append("import_template_id", String(form.import_template_id));
}
if (form.client_uuid) {
fd.append('client_uuid', String(form.client_uuid));
fd.append("client_uuid", String(form.client_uuid));
}
fd.append('has_header', hasHeader.value ? '1' : '0');
fd.append("has_header", hasHeader.value ? "1" : "0");
try {
const { data } = await axios.post(route('imports.store'), fd, {
headers: { Accept: 'application/json' },
const { data } = await axios.post(route("imports.store"), fd, {
headers: { Accept: "application/json" },
withCredentials: true,
});
// Redirect immediately to the continue page for this import
if (data?.uuid) {
router.visit(route('imports.continue', { import: data.uuid }));
router.visit(route("imports.continue", { import: data.uuid }));
} else if (data?.id) {
// Fallback: if uuid not returned for some reason, fetch columns here (legacy)
importId.value = data.id;
@@ -203,12 +232,12 @@ async function uploadAndPreview() {
}
} catch (e) {
if (e.response) {
console.error('Upload error', e.response.status, e.response.data);
console.error("Upload error", e.response.status, e.response.data);
if (e.response.data?.errors) {
// Optionally you could surface errors in the UI; for now, log for visibility
}
} else {
console.error('Upload error', e);
console.error("Upload error", e);
}
}
}
@@ -219,19 +248,26 @@ async function uploadAndPreview() {
async function applyTemplateToImport() {
if (!importId.value || !form.import_template_id) return;
try {
await axios.post(route('importTemplates.apply', { template: form.import_template_id, import: importId.value }), {}, {
headers: { Accept: 'application/json' },
withCredentials: true,
});
await axios.post(
route("importTemplates.apply", {
template: form.import_template_id,
import: importId.value,
}),
{},
{
headers: { Accept: "application/json" },
withCredentials: true,
}
);
templateApplied.value = true;
// Load mappings and auto-assign UI rows
await loadImportMappings();
} catch (e) {
templateApplied.value = false;
if (e.response) {
console.error('Apply template error', e.response.status, e.response.data);
console.error("Apply template error", e.response.status, e.response.data);
} else {
console.error('Apply template error', e);
console.error("Apply template error", e);
}
}
}
@@ -239,33 +275,40 @@ async function applyTemplateToImport() {
async function loadImportMappings() {
if (!importId.value) return;
try {
const { data } = await axios.get(route('imports.mappings.get', { import: importId.value }), {
headers: { Accept: 'application/json' },
withCredentials: true,
});
const { data } = await axios.get(
route("imports.mappings.get", { import: importId.value }),
{
headers: { Accept: "application/json" },
withCredentials: true,
}
);
const rows = Array.isArray(data?.mappings) ? data.mappings : [];
if (!rows.length) return;
// Build a lookup by source_column
const bySource = new Map(rows.map(r => [r.source_column, r]));
const bySource = new Map(rows.map((r) => [r.source_column, r]));
// Update mappingRows (detected columns) to reflect applied mappings
mappingRows.value = (mappingRows.value || []).map((r, idx) => {
const m = bySource.get(r.source_column);
if (!m) return r;
// Parse target_field like 'person.first_name' into UI entity/field
const [record, field] = String(m.target_field || '').split('.', 2);
const entity = keyByCanonicalRoot.value[record] || record;
// Parse target_field like 'person.first_name' into UI entity/field
const [record, field] = String(m.target_field || "").split(".", 2);
const entity = keyByCanonicalRoot.value[record] || record;
return {
...r,
entity,
field: field || '',
transform: m.transform || '',
apply_mode: m.apply_mode || 'both',
field: field || "",
transform: m.transform || "",
apply_mode: m.apply_mode || "both",
skip: false,
position: idx,
};
});
} catch (e) {
console.error('Load import mappings error', e.response?.status || '', e.response?.data || e);
console.error(
"Load import mappings error",
e.response?.status || "",
e.response?.data || e
);
}
}
@@ -274,18 +317,22 @@ async function processImport() {
processing.value = true;
processResult.value = null;
try {
const { data } = await axios.post(route('imports.process', { import: importId.value }), {}, {
headers: { Accept: 'application/json' },
withCredentials: true,
});
const { data } = await axios.post(
route("imports.process", { import: importId.value }),
{},
{
headers: { Accept: "application/json" },
withCredentials: true,
}
);
processResult.value = data;
} catch (e) {
if (e.response) {
console.error('Process import error', e.response.status, e.response.data);
processResult.value = { error: e.response.data || 'Processing failed' };
console.error("Process import error", e.response.status, e.response.data);
processResult.value = { error: e.response.data || "Processing failed" };
} else {
console.error('Process import error', e);
processResult.value = { error: 'Processing failed' };
console.error("Process import error", e);
processResult.value = { error: "Processing failed" };
}
} finally {
processing.value = false;
@@ -296,41 +343,49 @@ async function processImport() {
async function saveMappings() {
if (!importId.value) return;
mappingError.value = '';
mappingError.value = "";
const mappings = mappingRows.value
.filter(r => !r.skip && r.entity && r.field)
.map(r => ({
.filter((r) => !r.skip && r.entity && r.field)
.map((r) => ({
source_column: r.source_column,
target_field: `${(canonicalRootByKey.value[r.entity] || r.entity)}.${r.field}`,
target_field: `${canonicalRootByKey.value[r.entity] || r.entity}.${r.field}`,
transform: r.transform || null,
apply_mode: r.apply_mode || 'both',
apply_mode: r.apply_mode || "both",
options: null,
}));
if (!mappings.length) {
mappingSaved.value = false;
mappingError.value = 'Select entity and field for at least one column (or uncheck Skip) before saving.';
mappingError.value =
"Select entity and field for at least one column (or uncheck Skip) before saving.";
return;
}
try {
savingMappings.value = true;
const url = (typeof route === 'function')
? route('imports.mappings.save', { import: importId.value })
: `/imports/${importId.value}/mappings`;
const { data } = await axios.post(url, { mappings }, {
headers: { 'Accept': 'application/json' },
withCredentials: true,
});
const url =
typeof route === "function"
? route("imports.mappings.save", { import: importId.value })
: `/imports/${importId.value}/mappings`;
const { data } = await axios.post(
url,
{ mappings },
{
headers: { Accept: "application/json" },
withCredentials: true,
}
);
mappingSaved.value = true;
mappingSavedCount.value = Number(data?.saved || mappings.length);
mappingError.value = '';
mappingError.value = "";
} catch (e) {
mappingSaved.value = false;
if (e.response) {
console.error('Save mappings error', e.response.status, e.response.data);
alert('Failed to save mappings: ' + (e.response.data?.message || e.response.status));
console.error("Save mappings error", e.response.status, e.response.data);
alert(
"Failed to save mappings: " + (e.response.data?.message || e.response.status)
);
} else {
console.error('Save mappings error', e);
alert('Failed to save mappings. See console for details.');
console.error("Save mappings error", e);
alert("Failed to save mappings. See console for details.");
}
} finally {
savingMappings.value = false;
@@ -338,16 +393,19 @@ async function saveMappings() {
}
// Reset saved flag whenever user edits mappings
watch(mappingRows, () => {
mappingSaved.value = false;
mappingSavedCount.value = 0;
mappingError.value = '';
}, { deep: true });
watch(
mappingRows,
() => {
mappingSaved.value = false;
mappingSavedCount.value = 0;
mappingError.value = "";
},
{ deep: true }
);
onMounted(async () => {
await loadEntityDefs();
});
</script>
<template>
@@ -388,20 +446,32 @@ onMounted(async () => {
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-2">
<span>{{ option.name }}</span>
<span class="ml-2 text-xs text-gray-500">({{ option.source_type }})</span>
<span class="ml-2 text-xs text-gray-500"
>({{ option.source_type }})</span
>
</div>
<span class="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-600">{{ option.client_id ? 'Client' : 'Global' }}</span>
<span
class="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-600"
>{{ option.client_id ? "Client" : "Global" }}</span
>
</div>
</template>
<template #singleLabel="{ option }">
<div class="flex items-center gap-2">
<span>{{ option.name }}</span>
<span class="ml-1 text-xs text-gray-500">({{ option.source_type }})</span>
<span class="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-600">{{ option.client_id ? 'Client' : 'Global' }}</span>
<span class="ml-1 text-xs text-gray-500"
>({{ option.source_type }})</span
>
<span
class="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-600"
>{{ option.client_id ? "Client" : "Global" }}</span
>
</div>
</template>
</Multiselect>
<p class="text-xs text-gray-500 mt-1" v-if="!form.client_uuid">Only global templates are shown until a client is selected.</p>
<p class="text-xs text-gray-500 mt-1" v-if="!form.client_uuid">
Only global templates are shown until a client is selected.
</p>
</div>
</div>
@@ -411,19 +481,26 @@ onMounted(async () => {
<input type="file" @change="onFileChange" class="mt-1 block w-full" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Has header row</label>
<label class="block text-sm font-medium text-gray-700"
>Has header row</label
>
<input type="checkbox" v-model="hasHeader" class="mt-2" />
</div>
</div>
<div class="flex gap-3">
<button @click.prevent="uploadAndPreview" class="px-4 py-2 bg-blue-600 text-white rounded">Upload & Preview Columns</button>
<button
@click.prevent="uploadAndPreview"
class="px-4 py-2 bg-blue-600 text-white rounded"
>
Upload & Preview Columns
</button>
<button
@click.prevent="applyTemplateToImport"
:disabled="!importId || !form.import_template_id || templateApplied"
class="px-4 py-2 bg-emerald-600 disabled:bg-gray-300 text-white rounded"
>
{{ templateApplied ? 'Template Applied' : 'Apply Template' }}
{{ templateApplied ? "Template Applied" : "Apply Template" }}
</button>
<button
@click.prevent="saveMappings"
@@ -431,32 +508,52 @@ onMounted(async () => {
class="px-4 py-2 bg-orange-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
title="Save ad-hoc mappings for this import"
>
<span v-if="savingMappings" class="inline-block h-4 w-4 border-2 border-white/70 border-t-transparent rounded-full animate-spin"></span>
<span
v-if="savingMappings"
class="inline-block h-4 w-4 border-2 border-white/70 border-t-transparent rounded-full animate-spin"
></span>
<span>Save Mappings</span>
<span v-if="selectedMappingsCount" class="ml-1 text-xs bg-white/20 px-1.5 py-0.5 rounded">{{ selectedMappingsCount }}</span>
<span
v-if="selectedMappingsCount"
class="ml-1 text-xs bg-white/20 px-1.5 py-0.5 rounded"
>{{ selectedMappingsCount }}</span
>
</button>
<button
@click.prevent="processImport"
:disabled="!importId || processing || (!templateApplied && !mappingSaved)"
class="px-4 py-2 bg-purple-600 disabled:bg-gray-300 text-white rounded"
>
{{ processing ? 'Processing…' : 'Process Import' }}
{{ processing ? "Processing…" : "Process Import" }}
</button>
</div>
<div class="mt-2 text-xs text-gray-600" v-if="!importId">
Upload a file first to enable saving mappings.
</div>
<div class="mt-2 text-xs text-gray-600" v-else-if="importId && !selectedMappingsCount">
Select an Entity and Field for at least one detected column (or uncheck Skip) and then click Save Mappings.
<div
class="mt-2 text-xs text-gray-600"
v-else-if="importId && !selectedMappingsCount"
>
Select an Entity and Field for at least one detected column (or uncheck Skip)
and then click Save Mappings.
</div>
<div v-if="detected.columns.length" class="pt-4">
<div class="flex items-center justify-between mb-2">
<h3 class="font-semibold">Detected Columns ({{ detected.has_header ? 'header' : 'positional' }})</h3>
<h3 class="font-semibold">
Detected Columns ({{ detected.has_header ? "header" : "positional" }})
</h3>
<button
class="px-3 py-1.5 border rounded text-sm"
@click.prevent="(async () => { await refreshSuggestions(detected.columns); mappingRows.forEach(r => applySuggestionToRow(r)); })()"
>Auto map suggestions</button>
@click.prevent="
(async () => {
await refreshSuggestions(detected.columns);
mappingRows.forEach((r) => applySuggestionToRow(r));
})()
"
>
Auto map suggestions
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full border bg-white">
@@ -476,21 +573,38 @@ onMounted(async () => {
<div>{{ row.source_column }}</div>
<div class="text-xs mt-1" v-if="suggestions[row.source_column]">
<span class="text-gray-500">Suggest:</span>
<button class="ml-1 underline text-indigo-700 hover:text-indigo-900" @click.prevent="applySuggestionToRow(row)">
{{ suggestions[row.source_column].entity }}.{{ suggestions[row.source_column].field }}
<button
class="ml-1 underline text-indigo-700 hover:text-indigo-900"
@click.prevent="applySuggestionToRow(row)"
>
{{ suggestions[row.source_column].entity }}.{{
suggestions[row.source_column].field
}}
</button>
</div>
</td>
<td class="p-2 border">
<select v-model="row.entity" class="border rounded p-1 w-full">
<option value="">—</option>
<option v-for="opt in entityOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
<option
v-for="opt in entityOptions"
:key="opt.value"
:value="opt.value"
>
{{ opt.label }}
</option>
</select>
</td>
<td class="p-2 border">
<select v-model="row.field" class="border rounded p-1 w-full">
<option value="">—</option>
<option v-for="f in fieldOptionsByEntity[row.entity] || []" :key="f.value" :value="f.value">{{ f.label }}</option>
<option
v-for="f in fieldOptionsByEntity[row.entity] || []"
:key="f.value"
:value="f.value"
>
{{ f.label }}
</option>
</select>
</td>
<td class="p-2 border">
@@ -515,16 +629,22 @@ onMounted(async () => {
</tbody>
</table>
</div>
<div v-if="mappingSaved" class="text-sm text-emerald-700 mt-2">Mappings saved ({{ mappingSavedCount }}).</div>
<div v-else-if="mappingError" class="text-sm text-red-600 mt-2">{{ mappingError }}</div>
<div v-if="mappingSaved" class="text-sm text-emerald-700 mt-2">
Mappings saved ({{ mappingSavedCount }}).
</div>
<div v-else-if="mappingError" class="text-sm text-red-600 mt-2">
{{ mappingError }}
</div>
</div>
<div v-if="processResult" class="pt-4">
<h3 class="font-semibold mb-2">Import Result</h3>
<pre class="bg-gray-50 border rounded p-3 text-sm overflow-x-auto">{{ processResult }}</pre>
<pre class="bg-gray-50 border rounded p-3 text-sm overflow-x-auto">{{
processResult
}}</pre>
</div>
</div>
</div>
</div>
</AppLayout>
</template>
</template>