simrsx-fe/app/components/app/specialist/entry-form-prev.vue

<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
import Field from '~/components/pub/my-ui/form/field.vue'
import Label from '~/components/pub/my-ui/form/label.vue'

interface SpecialistFormData {
  name: string
  code: string
  installationId: string
  unitId: string
}

const props = defineProps<{
  schema: any
  initialValues?: Partial<SpecialistFormData>
  errors?: FormErrors
  installation: {
    msg: {
      placeholder: string
      search: string
      empty: string
    }
    items: {
      value: string
      label: string
      code: string
    }[]
  }
  unit: {
    msg: {
      placeholder: string
      search: string
      empty: string
    }
    items: {
      value: string
      label: string
      code: string
    }[]
  }
}>()

const emit = defineEmits<{
  'submit': [values: SpecialistFormData, resetForm: () => void]
  'cancel': [resetForm: () => void]
  'installationChanged': [id: string]
}>()

const formSchema = toTypedSchema(props.schema)

// Form submission handler
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
  const formData: SpecialistFormData = {
    name: values.name || '',
    code: values.code || '',
    installationId: values.installationId || '',
    unitId: values.unitId || '',
  }
  emit('submit', formData, resetForm)
}

// Form cancel handler
function onCancelForm({ resetForm }: { resetForm: () => void }) {
  emit('cancel', resetForm)
}

// Watch for installation changes
function onInstallationChanged(installationId: string, setFieldValue: any) {
  setFieldValue('unitId', '', false)
  emit('installationChanged', installationId || '')
}
</script>

<template>
  <Form
    v-slot="{ handleSubmit, resetForm, values, setFieldValue }" as="" keep-values :validation-schema="formSchema"
    :initial-values="initialValues"
    >
    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
        <div class="flex flex-col justify-between">
          <FieldGroup>
            <Label label-for="name">Nama</Label>
            <Field id="name" :errors="errors">
              <FormField v-slot="{ componentField }" name="name">
                <FormItem>
                  <FormControl>
                    <Input
                      id="name"
                      type="text"
                      placeholder="Masukkan nama spesialisasi"
                      autocomplete="off"
                      v-bind="componentField"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormField>
            </Field>
          </FieldGroup>

          <FieldGroup>
            <Label label-for="code">Kode</Label>
            <Field id="code" :errors="errors">
              <FormField v-slot="{ componentField }" name="code">
                <FormItem>
                  <FormControl>
                    <Input
                      id="code"
                      type="text"
                      placeholder="Masukkan kode spesialisasi"
                      autocomplete="off"
                      v-bind="componentField"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormField>
            </Field>
          </FieldGroup>

          <FieldGroup>
            <Label label-for="installationId">Instalasi</Label>
            <Field id="installationId" :errors="errors">
              <FormField v-slot="{ componentField }" name="installationId">
                <FormItem>
                  <FormControl>
                    <Combobox
                      id="installationId"
                      v-bind="componentField"
                      :items="installation.items"
                      :placeholder="installation.msg.placeholder"
                      :search-placeholder="installation.msg.search"
                      :empty-message="installation.msg.empty"
                      @update:model-value="(value) => onInstallationChanged(value, setFieldValue)"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormField>
            </Field>
          </FieldGroup>

          <FieldGroup>
            <Label label-for="unitId">Unit</Label>
            <Field id="unitId" :errors="errors">
              <FormField v-slot="{ componentField }" name="unitId">
                <FormItem>
                  <FormControl>
                    <Combobox
                      id="unitId"
                      :disabled="!values.installationId"
                      v-bind="componentField"
                      :items="unit.items"
                      :placeholder="unit.msg.placeholder"
                      :search-placeholder="unit.msg.search"
                      :empty-message="unit.msg.empty"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormField>
            </Field>
          </FieldGroup>
        </div>
      </div>

      <div class="flex justify-end gap-2 mt-4">
        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
          Batal
        </Button>
        <Button type="submit">
          Simpan
        </Button>
      </div>
    </form>
  </Form>
</template>