feat(unit): integrate unit api

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

@@ -39,7 +39,7 @@ const { defineField, errors, meta } = useForm({
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [division, divisionAttrs] = defineField('uom_code')
+const [division, divisionAttrs] = defineField('division_id')
 
 // Fill fields from props.values if provided
 if (props.values) {

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

@@ -0,0 +1,125 @@
+<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 UnitFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  unit: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  schema: any
+  initialValues?: Partial<UnitFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  'submit': [values: UnitFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: UnitFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', 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">
+          <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 unit" 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 unit" autocomplete="off" v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="parentId">Instalasi</Label>
+            <Field id="parentId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="parentId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="parentId" 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>

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

@@ -1,125 +1,102 @@
 <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'
 
-interface UnitFormData {
-  name: string
-  code: string
-  parentId: string
+// Types
+import type { UnitFormData } from '~/schemas/unit.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>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
 }
 
-const props = defineProps<{
-  unit: {
-    msg: {
-      placeholder: string
-      search: string
-      empty: string
-    }
-    items: {
-      value: string
-      label: string
-      code: string
-    }[]
-  }
-  schema: any
-  initialValues?: Partial<UnitFormData>
-  errors?: FormErrors
-}>()
-
+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: UnitFormData, resetForm: () => void]
-  'cancel': [resetForm: () => void]
+  submit: [values: UnitFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
 }>()
 
-const formSchema = toTypedSchema(props.schema)
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    installation: '',
+  } as Partial<UnitFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [installation, installationAttrs] = defineField('installation')
+
+// 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.installation !== undefined) installation.value = props.values.installation
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  installation.value = ''
+}
 
 // Form submission handler
-function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+function onSubmitForm(values: any) {
   const formData: UnitFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    parentId: values.parentId || '',
+    name: name.value || '',
+    code: code.value || '',
+    installation: installation.value || '',
   }
   emit('submit', formData, resetForm)
 }
 
 // Form cancel handler
-function onCancelForm({ resetForm }: { resetForm: () => void }) {
+function onCancelForm() {
   emit('cancel', 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">
-          <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 unit" 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 unit" autocomplete="off" v-bind="componentField" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </FieldGroup>
-
-          <FieldGroup>
-            <Label label-for="parentId">Instalasi</Label>
-            <Field id="parentId" :errors="errors">
-              <FormField v-slot="{ componentField }" name="parentId">
-                <FormItem>
-                  <FormControl>
-                    <Combobox
-                      id="parentId" 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>
+  <form id="form-division" @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>
+    </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/unit/list-cfg.ts

@@ -12,31 +12,11 @@ type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [
-  { width: 100 },
-  { },
-  { },
-  { },
-  { width: 50 },
-]
+export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [
-  [
-    { label: 'Id' },
-    { label: 'Nama' },
-    { label: 'Kode' },
-    { label: 'Instalasi' },
-    { label: '' },
-  ],
-]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Instalasi' }, { label: '' }]]
 
-export const keys = [
-  'id',
-  'firstName',
-  'cellphone',
-  'birth_place',
-  'action',
-]
+export const keys = ['code', 'name', 'installation', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -46,22 +26,7 @@ export const delKeyNames: KeyLabel[] = [
 export const funcParsed: RecStrFuncUnknown = {
   name: (rec: unknown): unknown => {
     const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
-  },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
-  },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    return `${recX.name}`.trim()
   },
 }
 
@@ -71,16 +36,9 @@ export const funcComponent: RecStrFuncComponent = {
       idx,
       rec: rec as object,
       component: action,
-      props: {
-        size: 'sm',
-      },
     }
     return res
   },
 }
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
-  },
-}
+export const funcHtml: RecStrFuncUnknown = {}