156 lines
3.9 KiB
Vue
156 lines
3.9 KiB
Vue
<script setup>
|
|
import DialogModal from "@/Components/DialogModal.vue";
|
|
import { Button } from "@/Components/ui/button";
|
|
import {
|
|
Field,
|
|
FieldContent,
|
|
FieldDescription,
|
|
FieldError,
|
|
FieldLabel,
|
|
} from "@/Components/ui/field";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/Components/ui/select";
|
|
import { toTypedSchema } from "@vee-validate/zod";
|
|
import { useForm, Field as VeeField } from "vee-validate";
|
|
import { router } from "@inertiajs/vue3";
|
|
import { onMounted, ref } from "vue";
|
|
import z from "zod";
|
|
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
segments: { type: Array, default: [] },
|
|
contracts: { type: Array, default: [] },
|
|
clearSelectedRows: { type: Function, default: () => console.log("test") },
|
|
});
|
|
|
|
const emit = defineEmits(["close"]);
|
|
|
|
const close = () => {
|
|
emit("close");
|
|
};
|
|
|
|
const processing = ref(false);
|
|
|
|
// vee-validate Form setup
|
|
const formSchema = toTypedSchema(
|
|
z.object({
|
|
segment_id: z
|
|
.number()
|
|
.refine((val) => props.segments.find((item) => item.value == val) !== undefined, {
|
|
message: "Izbran segment ne obstaja v zbirki segmentov",
|
|
}),
|
|
})
|
|
);
|
|
|
|
const { handleSubmit, resetForm, errors } = useForm({
|
|
validationSchema: formSchema,
|
|
});
|
|
|
|
const onSubmit = handleSubmit((data) => {
|
|
processing.value = true;
|
|
router.patch(
|
|
route("contracts.segment"),
|
|
{
|
|
...data,
|
|
contracts: props.contracts,
|
|
},
|
|
{
|
|
onSuccess: () => {
|
|
router.reload({ only: ["contracts"] });
|
|
close();
|
|
resetForm();
|
|
props.clearSelectedRows();
|
|
processing.value = false;
|
|
},
|
|
onError: (e) => {
|
|
errors = e;
|
|
|
|
processing.value = false;
|
|
},
|
|
onFinish: () => {
|
|
processing.value = false;
|
|
},
|
|
}
|
|
);
|
|
});
|
|
|
|
onMounted(() => {
|
|
console.log(props.segments);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<DialogModal :show="show" @close="close">
|
|
<template #title>
|
|
<h3 class="text-lg font-semibold leading-6 text-foreground">
|
|
Spremeni segment pogodbam
|
|
</h3>
|
|
</template>
|
|
|
|
<template #content>
|
|
<form id="segment-change-form" @submit.prevent="onSubmit">
|
|
<VeeField v-slot="{ field, errors }" name="segment_id">
|
|
<Field orientation="responsive" :data-invalid="!!errors.length">
|
|
<FieldContent>
|
|
<FieldLabel for="segment">Segment</FieldLabel>
|
|
<FieldDescription>Izberi segment za preusmeritev</FieldDescription>
|
|
<FieldError v-if="errors.length" :errors="errors" />
|
|
</FieldContent>
|
|
|
|
<Select
|
|
:model-value="field.value"
|
|
@update:model-value="field.onChange"
|
|
@blur="field.onBlur"
|
|
>
|
|
<SelectTrigger id="segment_id" :aria-invalid="!!errors.length">
|
|
<SelectValue placeholder="Izberi segment..."></SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent position="item-aligned">
|
|
<SelectItem value="auto"> Auto </SelectItem>
|
|
<SelectItem
|
|
v-for="segment in segments"
|
|
:key="segment.label"
|
|
:value="segment.value"
|
|
>
|
|
{{ segment.label }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
</VeeField>
|
|
</form>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="flex flex-row gap-2">
|
|
<Button
|
|
type="button"
|
|
:disabled="processing"
|
|
variant="ghost"
|
|
@click="
|
|
() => {
|
|
close();
|
|
resetForm();
|
|
}
|
|
"
|
|
>
|
|
Prekliči
|
|
</Button>
|
|
<Button type="submit" form="segment-change-form" :disabled="processing">
|
|
Potrdi
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
</DialogModal>
|
|
</template>
|
|
|
|
<style></style>
|