feat(subspecialist): finishing integrate specialist

app/components/app/specialist/list-cfg.ts

@@ -30,7 +30,7 @@ export const funcParsed: RecStrFuncUnknown = {
   },
   unit: (rec: unknown): unknown => {
     const recX = rec as SmallDetailDto
-    return `${recX.unit_id}`
+    return recX.unit_id || '-'
   },
 }
 

app/components/app/specialist/list.vue

@@ -22,10 +22,15 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+      :skeleton-size="paginationMeta?.pageSize"
     />
-
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>

app/components/app/subspecialist/entry-form-prev.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+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'
+
+interface SubSpecialistFormData {
+  name: string
+  code: string
+  installationId: string
+  unitId: string
+  specialistId: string
+}
+
+const props = defineProps<{
+  schema: any
+  initialValues?: Partial<SubSpecialistFormData>
+  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
+    }[]
+  }
+  specialist: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+}>()
+
+const emit = defineEmits<{
+  'submit': [values: SubSpecialistFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+  'installationChanged': [id: string]
+  'unitChanged': [id: string]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: SubSpecialistFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    installationId: values.installationId || '',
+    unitId: values.unitId || '',
+    specialistId: values.specialistId || '',
+  }
+  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)
+  setFieldValue('specialistId', '', false)
+  emit('installationChanged', installationId || '')
+}
+
+function onUnitChanged(unitId: string, setFieldValue: any) {
+  setFieldValue('specialistId', '', false)
+  emit('unitChanged', unitId || '')
+}
+</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"
+                      @update:model-value="(value) => onUnitChanged(value, setFieldValue)"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="specialistId">Specialist</Label>
+            <Field id="specialistId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="specialistId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="specialistId" :disabled="!values.unitId" v-bind="componentField" :items="specialist.items"
+                      :placeholder="specialist.msg.placeholder" :search-placeholder="specialist.msg.search"
+                      :empty-message="specialist.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>

app/components/app/subspecialist/entry-form.vue

@@ -1,213 +1,128 @@
 <script setup lang="ts">
-import type { FormErrors } from '~/types/error'
-import { toTypedSchema } from '@vee-validate/zod'
-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'
+// Components
+import Block from '~/components/pub/custom-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/custom-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/custom-ui/doc-entry/field.vue'
+import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
+// import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
 
-interface SubSpecialistFormData {
-  name: string
-  code: string
-  installationId: string
-  unitId: string
-  specialistId: string
+// Types
+import type { SubspecialistFormData } from '~/schemas/subspecialist.schema.ts'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  specialists: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
 }
 
-const props = defineProps<{
-  schema: any
-  initialValues?: Partial<SubSpecialistFormData>
-  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
-    }[]
-  }
-  specialist: {
-    msg: {
-      placeholder: string
-      search: string
-      empty: string
-    }
-    items: {
-      value: string
-      label: string
-      code: string
-    }[]
-  }
-}>()
-
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 const emit = defineEmits<{
-  'submit': [values: SubSpecialistFormData, resetForm: () => void]
-  'cancel': [resetForm: () => void]
-  'installationChanged': [id: string]
-  'unitChanged': [id: string]
+  submit: [values: SubspecialistFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
 }>()
 
-const formSchema = toTypedSchema(props.schema)
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    specialist_id: 0,
+  } as Partial<SubspecialistFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [specialist, specialistAttrs] = defineField('specialist_id')
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.specialist_id !== undefined) specialist.value = props.values.specialist_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  specialist.value = ''
+}
 
 // Form submission handler
-function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
-  const formData: SubSpecialistFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    installationId: values.installationId || '',
-    unitId: values.unitId || '',
-    specialistId: values.specialistId || '',
+function onSubmitForm(values: any) {
+  const formData: SubspecialistFormData = {
+    name: name.value || '',
+    code: code.value || '',
+    specialist_id: specialist.value || '',
   }
   emit('submit', formData, resetForm)
 }
 
 // Form cancel handler
-function onCancelForm({ resetForm }: { resetForm: () => void }) {
+function onCancelForm() {
   emit('cancel', resetForm)
 }
-
-// Watch for installation changes
-function onInstallationChanged(installationId: string, setFieldValue: any) {
-  setFieldValue('unitId', '', false)
-  setFieldValue('specialistId', '', false)
-  emit('installationChanged', installationId || '')
-}
-
-function onUnitChanged(unitId: string, setFieldValue: any) {
-  setFieldValue('specialistId', '', false)
-  emit('unitChanged', unitId || '')
-}
 </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"
-                      @update:model-value="(value) => onUnitChanged(value, setFieldValue)"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </FieldGroup>
-
-          <FieldGroup>
-            <Label label-for="specialistId">Specialist</Label>
-            <Field id="specialistId" :errors="errors">
-              <FormField v-slot="{ componentField }" name="specialistId">
-                <FormItem>
-                  <FormControl>
-                    <Combobox
-                      id="specialistId" :disabled="!values.unitId" v-bind="componentField" :items="specialist.items"
-                      :placeholder="specialist.msg.placeholder" :search-placeholder="specialist.msg.search"
-                      :empty-message="specialist.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>
+  <form id="form-specialist" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Spesialis</Label>
+        <Field :errMessage="errors.specialist">
+          <!-- <Combobox
+            id="specialis"
+            placeholder="Pilih spesialis"
+            search-placeholder="Cari spesialis"
+            empty-message="Spesialis tidak ditemukan"
+            v-model="specialist"
+            v-bind="specialistAttrs"
+            :items="specialists"
+            :disabled="isLoading || isReadonly"
+          /> -->
+          <Select
+            id="specialist"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih spesialis"
+            v-model="specialist"
+            v-bind="specialistAttrs"
+            :items="specialists"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
 </template>

app/components/app/subspecialist/list-cfg.ts

@@ -10,14 +10,13 @@ import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-ud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, {}, {}, {}, { width: 50 }]
+export const cols: Col[] = [{}, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [
-  [{ label: 'Id' }, { label: 'Nama' }, { label: 'Kode' }, { label: 'Specialist' }, { label: '' }],
-]
-export const keys = ['id', 'name', 'cellphone', 'religion_code', 'action']
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Specialis' }, { label: '' }]]
+
+export const keys = ['code', 'name', 'specialist', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -27,15 +26,11 @@ export const delKeyNames: KeyLabel[] = [
 export const funcParsed: RecStrFuncUnknown = {
   name: (rec: unknown): unknown => {
     const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.lastName || ''}`.trim()
-  },
-  unit: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.unit?.name || '-'
+    return `${recX.name}`.trim()
   },
   specialist: (rec: unknown): unknown => {
     const recX = rec as SmallDetailDto
-    return recX.specialist?.name || '-'
+    return recX.specialist_id || '-'
   },
 }
 
@@ -45,9 +40,6 @@ export const funcComponent: RecStrFuncComponent = {
       idx,
       rec: rec as object,
       component: action,
-      props: {
-        size: 'sm',
-      },
     }
     return res
   },

app/components/app/subspecialist/list.vue

@@ -22,10 +22,15 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+      :skeleton-size="paginationMeta?.pageSize"
     />
-
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>