124 lines
4.6 KiB
Vue
124 lines
4.6 KiB
Vue
<script setup>
|
|
import AppLayout from '@/Layouts/AppLayout.vue';
|
|
import { ref } from 'vue';
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import Multiselect from 'vue-multiselect';
|
|
|
|
const props = defineProps({
|
|
clients: Array,
|
|
});
|
|
|
|
const form = useForm({
|
|
name: '',
|
|
description: '',
|
|
source_type: 'csv',
|
|
default_record_type: '',
|
|
is_active: true,
|
|
client_uuid: null,
|
|
entities: [],
|
|
});
|
|
|
|
function submit() {
|
|
form.post(route('importTemplates.store'), {
|
|
onSuccess: () => {
|
|
// You can redirect or show a success message here
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Create Import Template">
|
|
<template #header>
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Create Import Template</h2>
|
|
</template>
|
|
|
|
<div class="py-6">
|
|
<div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="bg-white shadow sm:rounded-lg p-6 space-y-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Client (optional)</label>
|
|
<Multiselect
|
|
v-model="form.client_uuid"
|
|
:options="props.clients || []"
|
|
:reduce="c => c.uuid"
|
|
track-by="uuid"
|
|
label="name"
|
|
placeholder="Global (no client)"
|
|
:searchable="true"
|
|
:allow-empty="true"
|
|
class="mt-1"
|
|
/>
|
|
<p class="text-xs text-gray-500 mt-1">Leave empty to make this template global (visible to all clients).</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Entities (tables)</label>
|
|
<Multiselect
|
|
v-model="form.entities"
|
|
:options="[
|
|
{ value: 'person', label: 'Person' },
|
|
{ value: 'person_addresses', label: 'Person Addresses' },
|
|
{ value: 'person_phones', label: 'Person Phones' },
|
|
{ value: 'emails', label: 'Emails' },
|
|
{ value: 'accounts', label: 'Accounts' },
|
|
{ value: 'contracts', label: 'Contracts' },
|
|
]"
|
|
:multiple="true"
|
|
track-by="value"
|
|
label="label"
|
|
:reduce="o => o.value"
|
|
placeholder="Select one or more entities"
|
|
:searchable="false"
|
|
class="mt-1"
|
|
/>
|
|
<p class="text-xs text-gray-500 mt-1">Choose which tables this template targets. You can still define per-column mappings later.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Name</label>
|
|
<input v-model="form.name" type="text" class="mt-1 block w-full border rounded p-2" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Description</label>
|
|
<textarea v-model="form.description" class="mt-1 block w-full border rounded p-2" rows="3" />
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Source Type</label>
|
|
<select v-model="form.source_type" class="mt-1 block w-full border rounded p-2">
|
|
<option value="csv">CSV</option>
|
|
<option value="xml">XML</option>
|
|
<option value="xls">XLS</option>
|
|
<option value="xlsx">XLSX</option>
|
|
<option value="json">JSON</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Default Record Type (optional)</label>
|
|
<input v-model="form.default_record_type" type="text" class="mt-1 block w-full border rounded p-2" placeholder="e.g., account, person" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<input id="is_active" v-model="form.is_active" type="checkbox" class="rounded" />
|
|
<label for="is_active" class="text-sm font-medium text-gray-700">Active</label>
|
|
</div>
|
|
|
|
<div class="pt-4">
|
|
<button @click.prevent="submit" class="px-4 py-2 bg-emerald-600 text-white rounded" :disabled="form.processing">
|
|
{{ form.processing ? 'Saving…' : 'Create Template' }}
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="form.errors && Object.keys(form.errors).length" class="text-sm text-red-600">
|
|
<div v-for="(msg, key) in form.errors" :key="key">{{ msg }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|