64 lines
2.0 KiB
Vue
64 lines
2.0 KiB
Vue
<script setup>
|
|
import {
|
|
EyeIcon,
|
|
ArrowPathIcon,
|
|
BeakerIcon,
|
|
ArrowDownOnSquareIcon,
|
|
} from "@heroicons/vue/24/outline";
|
|
const props = defineProps({
|
|
importId: [Number, String],
|
|
isCompleted: Boolean,
|
|
processing: Boolean,
|
|
savingMappings: Boolean,
|
|
canProcess: Boolean,
|
|
selectedMappingsCount: Number,
|
|
});
|
|
const emits = defineEmits(["preview", "save-mappings", "process-import", "simulate"]);
|
|
</script>
|
|
<template>
|
|
<div class="flex flex-wrap gap-2 items-center" v-if="!isCompleted">
|
|
<button
|
|
@click.prevent="$emit('preview')"
|
|
:disabled="!importId"
|
|
class="px-4 py-2 bg-gray-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
|
|
>
|
|
<EyeIcon class="h-4 w-4" />
|
|
Predogled vrstic
|
|
</button>
|
|
<button
|
|
@click.prevent="$emit('save-mappings')"
|
|
:disabled="!importId || processing || savingMappings || isCompleted"
|
|
class="px-4 py-2 bg-orange-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
|
|
title="Shrani preslikave za ta uvoz"
|
|
>
|
|
<span
|
|
v-if="savingMappings"
|
|
class="inline-block h-4 w-4 border-2 border-white/70 border-t-transparent rounded-full animate-spin"
|
|
></span>
|
|
<ArrowPathIcon v-else class="h-4 w-4" />
|
|
<span>Shrani preslikave</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="$emit('process-import')"
|
|
:disabled="!canProcess"
|
|
class="px-4 py-2 bg-purple-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
|
|
>
|
|
<BeakerIcon class="h-4 w-4" />
|
|
{{ processing ? "Obdelava…" : "Obdelaj uvoz" }}
|
|
</button>
|
|
<button
|
|
@click.prevent="$emit('simulate')"
|
|
:disabled="!importId || processing"
|
|
class="px-4 py-2 bg-blue-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
|
|
>
|
|
<ArrowDownOnSquareIcon class="h-4 w-4" />
|
|
Simulacija vnosa
|
|
</button>
|
|
</div>
|
|
</template>
|