Import export templates
This commit is contained in:
Simon Pocrnjič
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { Link, useForm } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import { Link, useForm, router } from "@inertiajs/vue3";
|
||||
import { ref, computed } from "vue";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -21,18 +21,54 @@ import {
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/Components/ui/alert-dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/Components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/Components/ui/select";
|
||||
import InputLabel from "@/Components/InputLabel.vue";
|
||||
import { Separator } from "@/Components/ui/separator";
|
||||
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
||||
import { ListIndentIncreaseIcon } from "lucide-vue-next";
|
||||
import { ListIndentIncreaseIcon, DownloadIcon, UploadIcon } from "lucide-vue-next";
|
||||
import TableActions from "@/Components/DataTable/TableActions.vue";
|
||||
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
|
||||
import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faPencil,
|
||||
faTrash,
|
||||
faFileExport,
|
||||
faFileImport,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
// Non-blocking confirm modal state
|
||||
const confirmOpen = ref(false);
|
||||
const confirmUuid = ref(null);
|
||||
const deleteForm = useForm({});
|
||||
|
||||
// Import modal state
|
||||
const importModalOpen = ref(false);
|
||||
const importForm = useForm({
|
||||
file: null,
|
||||
client_uuid: null,
|
||||
segment_id: null,
|
||||
decision_id: null,
|
||||
action_id: null,
|
||||
activity_action_id: null,
|
||||
activity_decision_id: null,
|
||||
});
|
||||
|
||||
const fileInputRef = ref(null);
|
||||
const importedData = ref(null);
|
||||
|
||||
function requestDelete(uuid) {
|
||||
confirmUuid.value = uuid;
|
||||
confirmOpen.value = true;
|
||||
@@ -54,8 +90,57 @@ function cancelDelete() {
|
||||
confirmUuid.value = null;
|
||||
}
|
||||
|
||||
function exportTemplate(uuid) {
|
||||
window.location.href = route("importTemplates.export", { template: uuid });
|
||||
}
|
||||
|
||||
function openImportModal() {
|
||||
importModalOpen.value = true;
|
||||
}
|
||||
|
||||
function cancelImport() {
|
||||
importModalOpen.value = false;
|
||||
importForm.reset();
|
||||
importedData.value = null;
|
||||
}
|
||||
|
||||
function handleFileChange(event) {
|
||||
const file = event.target.files[0];
|
||||
importForm.file = file;
|
||||
|
||||
// Parse JSON to show existing IDs
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const json = JSON.parse(e.target.result);
|
||||
importedData.value = json;
|
||||
} catch (error) {
|
||||
console.error("Failed to parse JSON:", error);
|
||||
importedData.value = null;
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
}
|
||||
|
||||
function performImport() {
|
||||
importForm.post(route("importTemplates.import"), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
importModalOpen.value = false;
|
||||
importForm.reset();
|
||||
importedData.value = null;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
templates: Array,
|
||||
clients: Array,
|
||||
segments: Array,
|
||||
decisions: Array,
|
||||
actions: Array,
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -89,9 +174,15 @@ const props = defineProps({
|
||||
}}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button as-child>
|
||||
<Link :href="route('importTemplates.create')"> Nova predloga </Link>
|
||||
</Button>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="outline" @click="openImportModal">
|
||||
<UploadIcon class="w-4 h-4 mr-2" />
|
||||
Uvozi predlogo
|
||||
</Button>
|
||||
<Button as-child>
|
||||
<Link :href="route('importTemplates.create')"> Nova predloga </Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -125,6 +216,11 @@ const props = defineProps({
|
||||
)
|
||||
"
|
||||
/>
|
||||
<ActionMenuItem
|
||||
:icon="faFileExport"
|
||||
label="Izvozi"
|
||||
@click="exportTemplate(t.uuid)"
|
||||
/>
|
||||
<ActionMenuItem
|
||||
:icon="faTrash"
|
||||
label="Izbriši"
|
||||
@@ -186,5 +282,198 @@ const props = defineProps({
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<!-- Import Template Dialog -->
|
||||
<Dialog v-model:open="importModalOpen">
|
||||
<DialogContent class="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Uvozi predlogo uvoza</DialogTitle>
|
||||
<DialogDescription>
|
||||
Izberite JSON datoteko za uvoz predloge uvoza. Po potrebi zamenjajte ID-je z
|
||||
lokalnimi vrednostmi.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="space-y-4 py-4">
|
||||
<div>
|
||||
<InputLabel>Datoteka</InputLabel>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
accept=".json,application/json"
|
||||
@change="handleFileChange"
|
||||
class="w-full mt-1"
|
||||
/>
|
||||
<p v-if="importForm.errors.file" class="text-sm text-destructive mt-2">
|
||||
{{ importForm.errors.file }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Separator v-if="importedData?.meta" />
|
||||
|
||||
<!-- Show ID mapping options if file is loaded and has meta -->
|
||||
<div v-if="importedData?.meta" class="space-y-4">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Predloga vsebuje naslednje ID-je. Izberite nove vrednosti, če želite
|
||||
zamenjati originalne ID-je:
|
||||
</p>
|
||||
|
||||
<!-- Client -->
|
||||
<div v-if="importedData.meta.client_id || clients.length > 0">
|
||||
<InputLabel for="client_uuid">Stranka</InputLabel>
|
||||
<Select v-model="importForm.client_uuid">
|
||||
<SelectTrigger id="client_uuid">
|
||||
<SelectValue placeholder="Izberi stranko (opcijsko)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="client in clients"
|
||||
:key="client.uuid"
|
||||
:value="client.uuid"
|
||||
>
|
||||
{{ client.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<!-- Segment -->
|
||||
<div v-if="importedData.meta.segment_id">
|
||||
<InputLabel for="segment_id">
|
||||
Segment
|
||||
<span class="text-muted-foreground"
|
||||
>(trenutno: {{ importedData.meta.segment_id }})</span
|
||||
>
|
||||
</InputLabel>
|
||||
<Select v-model="importForm.segment_id">
|
||||
<SelectTrigger id="segment_id">
|
||||
<SelectValue placeholder="Obdrži original ali izberi nov" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="segment in segments"
|
||||
:key="segment.id"
|
||||
:value="segment.id.toString()"
|
||||
>
|
||||
{{ segment.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<!-- Decision -->
|
||||
<div v-if="importedData.meta.decision_id">
|
||||
<InputLabel for="decision_id">
|
||||
Odločitev
|
||||
<span class="text-muted-foreground"
|
||||
>(trenutno: {{ importedData.meta.decision_id }})</span
|
||||
>
|
||||
</InputLabel>
|
||||
<Select v-model="importForm.decision_id">
|
||||
<SelectTrigger id="decision_id">
|
||||
<SelectValue placeholder="Obdrži original ali izberi nov" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="decision in decisions"
|
||||
:key="decision.id"
|
||||
:value="decision.id.toString()"
|
||||
>
|
||||
{{ decision.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<!-- Action -->
|
||||
<div v-if="importedData.meta.action_id">
|
||||
<InputLabel for="action_id">
|
||||
Akcija
|
||||
<span class="text-muted-foreground"
|
||||
>(trenutno: {{ importedData.meta.action_id }})</span
|
||||
>
|
||||
</InputLabel>
|
||||
<Select v-model="importForm.action_id">
|
||||
<SelectTrigger id="action_id">
|
||||
<SelectValue placeholder="Obdrži original ali izberi nov" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="action in actions"
|
||||
:key="action.id"
|
||||
:value="action.id.toString()"
|
||||
>
|
||||
{{ action.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<!-- Activity Action -->
|
||||
<div v-if="importedData.meta.activity_action_id">
|
||||
<InputLabel for="activity_action_id">
|
||||
Aktivnost - Akcija
|
||||
<span class="text-muted-foreground"
|
||||
>(trenutno: {{ importedData.meta.activity_action_id }})</span
|
||||
>
|
||||
</InputLabel>
|
||||
<Select v-model="importForm.activity_action_id">
|
||||
<SelectTrigger id="activity_action_id">
|
||||
<SelectValue placeholder="Obdrži original ali izberi nov" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="action in actions"
|
||||
:key="action.id"
|
||||
:value="action.id.toString()"
|
||||
>
|
||||
{{ action.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<!-- Activity Decision -->
|
||||
<div v-if="importedData.meta.activity_decision_id">
|
||||
<InputLabel for="activity_decision_id">
|
||||
Aktivnost - Odločitev
|
||||
<span class="text-muted-foreground"
|
||||
>(trenutno: {{ importedData.meta.activity_decision_id }})</span
|
||||
>
|
||||
</InputLabel>
|
||||
<Select v-model="importForm.activity_decision_id">
|
||||
<SelectTrigger id="activity_decision_id">
|
||||
<SelectValue placeholder="Obdrži original ali izberi nov" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="decision in decisions"
|
||||
:key="decision.id"
|
||||
:value="decision.id.toString()"
|
||||
>
|
||||
{{ decision.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
@click="cancelImport"
|
||||
:disabled="importForm.processing"
|
||||
>
|
||||
Prekliči
|
||||
</Button>
|
||||
<Button
|
||||
@click="performImport"
|
||||
:disabled="importForm.processing || !importForm.file"
|
||||
>
|
||||
<span v-if="importForm.processing">Uvažam…</span>
|
||||
<span v-else>Uvozi</span>
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user