DriverVault/Web App/web/src/components/ServiceFormModal.vue

<script setup>
import { ref } from "vue";
import { api } from "../api";
import { formatKm } from "../lib/format.js";
import { applyAttachment } from "../lib/attachment.js";
import { t } from "../i18n";
import AttachmentField from "./AttachmentField.vue";
import Modal from "./Modal.vue";

const props = defineProps({
  carId: { type: String, required: true },
  car: { type: Object, default: null },
  service: { type: Object, default: null },
});
const emit = defineEmits(["saved", "close"]);

const isEdit = !!props.service;
const saving = ref(false);
const error = ref("");
const form = ref({
  date: props.service ? toDateInput(props.service.date) : new Date().toISOString().slice(0, 10),
  km: props.service?.km ?? "",
  changedOil: props.service ? props.service.changedOil : true,
  changedEngineAirFilter: props.service ? props.service.changedEngineAirFilter : false,
  changedCabinAirFilter: props.service ? props.service.changedCabinAirFilter : false,
  notes: props.service?.notes ?? "",
});

const file = ref(null);
const removeFile = ref(false);

function toDateInput(value) {
  const d = new Date(value);
  return isNaN(d) ? "" : d.toISOString().slice(0, 10);
}

async function submit() {
  saving.value = true;
  error.value = "";
  try {
    const payload = {
      car: props.carId,
      date: new Date(form.value.date).toISOString(),
      km: form.value.km ? Number(form.value.km) : 0,
      changedOil: form.value.changedOil,
      changedEngineAirFilter: form.value.changedEngineAirFilter,
      changedCabinAirFilter: form.value.changedCabinAirFilter,
      notes: form.value.notes.trim(),
    };
    const saved = isEdit
      ? await api.updateService(props.service.id, payload)
      : await api.createService(payload);
    emit("saved", await applyAttachment(api.files.services, saved, {
      file: file.value,
      remove: removeFile.value,
    }));
  } catch (e) {
    error.value = e.message;
  } finally {
    saving.value = false;
  }
}
</script>

<template>
  <Modal :title="isEdit ? t('forms.service.editTitle') : t('forms.service.addTitle')" @close="emit('close')">
    <p v-if="error" class="mb-3 rounded-control bg-danger-soft px-3 py-2 text-sm font-medium text-danger">{{ error }}</p>
    <form class="space-y-3" @submit.prevent="submit">
      <div class="grid grid-cols-2 gap-2">
        <div>
          <label class="dh-label">{{ t("forms.service.date") }}</label>
          <input v-model="form.date" type="date" required class="dh-input data" />
        </div>
        <div>
          <label class="dh-label">{{ t("forms.service.odometer") }}</label>
          <input v-model="form.km" type="number" placeholder="16138" class="dh-input data" />
        </div>
      </div>
      <fieldset class="rounded-control border border-subtle p-3">
        <legend class="eyebrow px-1">{{ t("forms.service.changedParts") }}</legend>
        <label class="flex items-center gap-2 py-1 text-sm text-body"><input type="checkbox" v-model="form.changedOil" class="accent-[var(--accent)]" /> {{ t("forms.service.oil") }}</label>
        <label class="flex items-center gap-2 py-1 text-sm text-body"><input type="checkbox" v-model="form.changedEngineAirFilter" class="accent-[var(--accent)]" /> {{ t("forms.service.engineFilter") }}</label>
        <label class="flex items-center gap-2 py-1 text-sm text-body"><input type="checkbox" v-model="form.changedCabinAirFilter" class="accent-[var(--accent)]" /> {{ t("forms.service.cabinFilter") }}</label>
      </fieldset>
      <AttachmentField
        v-model:file="file"
        v-model:remove="removeFile"
        :record="service"
        :legend="t('forms.service.attachmentLegend')"
      />
      <div>
        <label class="dh-label">{{ t("forms.service.notes") }}</label>
        <input v-model="form.notes" class="dh-input" />
      </div>
      <p v-if="car" class="text-xs text-muted">
        {{ t("forms.service.autoHint", { days: car.serviceIntervalDays, km: formatKm(car.serviceIntervalKm) }) }}
      </p>
      <div class="mt-4 flex justify-end gap-2">
        <button type="button" class="dh-btn dh-btn-ghost" @click="emit('close')">{{ t("common.cancel") }}</button>
        <button type="submit" :disabled="saving" class="dh-btn dh-btn-primary">
          {{ saving ? t("common.saving") : isEdit ? t("common.saveChanges") : t("forms.service.submit") }}
        </button>
      </div>
    </form>
  </Modal>
</template>