Teren-app/resources/js/Pages/Cases/Partials/ActivityDrawer.vue

<script setup>
import ActionMessage from "@/Components/ActionMessage.vue";
import BasicButton from "@/Components/buttons/BasicButton.vue";
import DialogModal from "@/Components/DialogModal.vue";
import InputLabel from "@/Components/InputLabel.vue";
import DatePickerField from "@/Components/DatePickerField.vue";
import TextInput from "@/Components/TextInput.vue";
import CurrencyInput from "@/Components/CurrencyInput.vue";
import { useForm } from "@inertiajs/vue3";
import { FwbTextarea } from "flowbite-vue";
import { ref, watch } from "vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  client_case: Object,
  actions: Array,
  // optionally pre-select a contract to attach the activity to
  contractUuid: { type: String, default: null },
});

const decisions = ref(props.actions[0].decisions);

console.log(props.actions);

const emit = defineEmits(["close"]);

const close = () => {
  emit("close");
};

const form = useForm({
  due_date: null,
  amount: null,
  note: "",
  action_id: props.actions[0].id,
  decision_id: props.actions[0].decisions[0].id,
  contract_uuid: props.contractUuid,
});

watch(
  () => form.action_id,
  (action_id) => {
    decisions.value = props.actions.filter((el) => el.id === action_id)[0].decisions;
    form.decision_id = decisions.value[0].id;
  }
);

watch(
  () => form.due_date,
  (due_date) => {
    if (due_date) {
      let date = new Date(form.due_date).toLocaleDateString("en-CA");
      console.table({ old: due_date, new: date });
    }
  }
);

// keep contract_uuid synced if the prop changes while the drawer is open
watch(
  () => props.contractUuid,
  (cu) => {
    form.contract_uuid = cu || null;
  }
);

const store = async () => {
  console.table({
    due_date: form.due_date,
    action_id: form.action_id,
    decision_id: form.decision_id,
    amount: form.amount,
    note: form.note,
  });
  // Helper to safely format a selected date (Date instance or parsable value) to YYYY-MM-DD
  const formatDateForSubmit = (value) => {
    if (!value) return null; // leave empty as null
    const d = value instanceof Date ? value : new Date(value);
    if (isNaN(d.getTime())) return null; // invalid date -> null
    // Avoid timezone shifting by constructing in local time
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${y}-${m}-${day}`; // matches en-CA style YYYY-MM-DD
  };

  form
    .transform((data) => ({
      ...data,
      due_date: formatDateForSubmit(data.due_date),
    }))
    .post(route("clientCase.activity.store", props.client_case), {
      onSuccess: () => {
        close();
        // Preserve selected contract across submissions; reset only user-editable fields
        form.reset("due_date", "amount", "note");
      },
      onError: (errors) => {
        console.log("Validation or server error:", errors);
      },
      onFinish: () => {
        console.log("Request finished processing.");
      },
    });
};

// When the drawer opens, always sync the current contractUuid into the form,
// even if the value hasn't changed (prevents stale/null contract_uuid after reset)
watch(
  () => props.show,
  (visible) => {
    if (visible) {
      form.contract_uuid = props.contractUuid || null;
    }
  }
);
</script>
<template>
  <DialogModal :show="show" @close="close">
    <template #title>Dodaj aktivnost</template>
    <template #content>
      <form @submit.prevent="store">
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="activityAction" value="Akcija" />
          <select
            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
            id="activityAction"
            ref="activityActionSelect"
            v-model="form.action_id"
          >
            <option v-for="a in actions" :value="a.id">{{ a.name }}</option>
            <!-- ... -->
          </select>
        </div>
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="activityDecision" value="Odločitev" />
          <select
            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
            id="activityDecision"
            ref="activityDecisionSelect"
            v-model="form.decision_id"
          >
            <option v-for="d in decisions" :value="d.id">{{ d.name }}</option>
            <!-- ... -->
          </select>
        </div>
        <div class="col-span-6 sm:col-span-4">
          <FwbTextarea
            label="Opomba"
            id="activityNote"
            ref="activityNoteTextarea"
            v-model="form.note"
            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
          />
        </div>
        <DatePickerField
          id="activityDueDate"
          label="Datum zapadlosti"
          v-model="form.due_date"
          format="dd.MM.yyyy"
          :enable-time-picker="false"
          :auto-position="true"
          :teleport-target="'body'"
          :inline="false"
          :auto-apply="false"
          :fixed="false"
          :close-on-auto-apply="true"
          :close-on-scroll="true"
        />
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="activityAmount" value="Znesek" />
          <CurrencyInput
            id="activityAmount"
            ref="activityAmountinput"
            v-model="form.amount"
            :precision="{ min: 0, max: 4 }"
            placeholder="0,00"
          />
        </div>
        <div class="flex justify-end mt-4">
          <ActionMessage :on="form.recentlySuccessful" class="me-3">
            Shranjuje.
          </ActionMessage>
          <BasicButton
            :class="{ 'opacity-25': form.processing }"
            :disabled="form.processing"
          >
            Shrani
          </BasicButton>
        </div>
      </form>
    </template>
  </DialogModal>
</template>