Changes

2026-01-18 18:21:41 +01:00
parent 28f28be1b8
commit cc4c07717e
33 changed files with 1440 additions and 579 deletions
@@ -0,0 +1,155 @@
+<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>