Merge pull request #47 from dikstub-rssa/fe-specialist-intern-35

Fe specialist intern 35
2025-09-17 10:22:41 +07:00
parent f94dac1444 19c0966dee
commit 9ce5038e62
5 changed files with 298 additions and 0 deletions
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+  }
+  items: {
+    value: string
+    label: string
+    code: string
+  }[]
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const relationshipOpts = mapToComboboxOptList(relationshipCodes)
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    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">
+          <Block>
+            <!-- Specialist -->
+            <FieldGroup :column="2">
+              <Label label-for="specialist_id">Specialist</Label>
+              <Field id="specialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="specialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="specialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Subpecialist -->
+            <FieldGroup :column="2">
+              <Label label-for="subspecialist_id">Subspecialist</Label>
+              <Field id="subspecialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="subspecialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="subspecialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>