Merge branch 'dev' into refactor/mv-flow-to-content

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

@@ -1,70 +1,132 @@
 <script setup lang="ts">
-import Block from '~/components/pub/custom-ui/form/block.vue'
-import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
-import Field from '~/components/pub/custom-ui/form/field.vue'
+// types
+import type z from 'zod'
+import type { MaterialFormData } from '~/schemas/material'
+// helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+// components
 import Label from '~/components/pub/custom-ui/form/label.vue'
 
-const props = defineProps<{ modelValue: any; errors: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
+interface Props {
+  isLoading: boolean
+  schema: z.ZodSchema<any>
+  uoms: any[]
+  items: any[]
+}
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => {
-    emit('update:modelValue', val)
-  },
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  back: []
+  submit: [data: any]
+}>()
+
+const { handleSubmit, defineField, errors } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    uom_code: '',
+    item_id: '',
+    stock: 0,
+  } as Partial<MaterialFormData>,
 })
 
-const items = [
-  { value: 'item1', label: 'Item 1' },
-  { value: 'item2', label: 'Item 2' },
-]
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [uom, uomAttrs] = defineField('uom_code')
+const [item, itemAttrs] = defineField('item_id')
+const [stock, stockAttrs] = defineField('stock')
+
+const onSubmit = handleSubmit(async (values) => {
+  try {
+    emit('submit', values)
+  } catch (error) {
+    console.error('Submission failed:', error)
+  }
+})
 </script>
 
 <template>
-  <form id="entry-form">
-    <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>
-          <FieldGroup :column="1">
-            <Label>Kode</Label>
-            <Field>
-              <Input v-model="data.code" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup v-if="!!props.errors.code">
-            <Label></Label>
-            <span class="text-red-400 text-sm">{{ props.errors.code }}</span>
-          </FieldGroup>
-          <FieldGroup :column="1">
-            <Label>Nama</Label>
-            <Field>
-              <Input v-model="data.name" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup v-if="!!props.errors.name">
-            <Label></Label>
-            <span class="text-red-400 text-sm">{{ props.errors.name }}</span>
-          </FieldGroup>
-          <FieldGroup :column="1">
-            <Label>Item</Label>
-            <Field>
-              <Select v-model="data.type" :items="items" placeholder="Pilih item" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="1">
-            <Label>Satuan</Label>
-            <Field>
-              <Select v-model="data.uom" :items="items" placeholder="Pilih item" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="1">
-            <Label>Stok</Label>
-            <Field>
-              <Input v-model="data.stock" type="number" />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+  <form class="grid gap-2" @submit="onSubmit">
+    <div class="grid gap-2">
+      <Label for="code">Kode</Label>
+      <Input
+        id="code"
+        v-model="code"
+        v-bind="codeAttrs"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.code }"
+      />
+      <span v-if="errors.code" class="text-sm text-red-500">
+        {{ errors.code }}
+      </span>
+    </div>
+    <div class="grid gap-2">
+      <Label for="name">Nama</Label>
+      <Input
+        id="name"
+        v-model="name"
+        v-bind="nameAttrs"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.name }"
+      />
+      <span v-if="errors.name" class="text-sm text-red-500">
+        {{ errors.name }}
+      </span>
+    </div>
+    <div class="grid gap-2">
+      <Label for="uom">Satuan</Label>
+      <Select
+        id="uom"
+        v-model="uom"
+        icon-name="i-lucide-chevron-down"
+        placeholder="Pilih satuan"
+        v-bind="uomAttrs"
+        :items="uoms"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.uom_code }"
+      />
+      <span v-if="errors.uom_code" class="text-sm text-red-500">
+        {{ errors.uom_code }}
+      </span>
+    </div>
+    <div class="grid gap-2">
+      <Label for="item">Item</Label>
+      <Select
+        id="item"
+        v-model="item"
+        icon-name="i-lucide-chevron-down"
+        placeholder="Pilih item"
+        v-bind="itemAttrs"
+        :items="items"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.item_id }"
+      />
+      <span v-if="errors.item_id" class="text-sm text-red-500">
+        {{ errors.item_id }}
+      </span>
+    </div>
+    <div class="grid gap-2">
+      <Label for="stock">Stok</Label>
+      <Input
+        id="stock"
+        v-model="stock"
+        type="number"
+        v-bind="stockAttrs"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.stock }"
+      />
+      <span v-if="errors.stock" class="text-sm text-red-500">
+        {{ errors.stock }}
+      </span>
+    </div>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button variant="secondary" class="w-[120px]" @click="emit('back')"> Kembali </Button>
+      <Button type="submit" class="w-[120px]">
+        <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+        Simpan
+      </Button>
     </div>
   </form>
 </template>

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

@@ -3,7 +3,6 @@ import type {
   KeyLabel,
   RecComponent,
   RecStrFuncComponent,
-  RecStrFuncUnknown,
   Th,
 } from '~/components/pub/custom-ui/data/types'
 import { defineAsyncComponent } from 'vue'
@@ -12,11 +11,11 @@ type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 100 }, { width: 50 }]
+export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 50 }]
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Item' }, { label: 'Satuan' }]]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Stok' }, { label: 'Item' }, { label: 'Satuan' }]]
 
-export const keys = ['code', 'name', 'item_id', 'uom_code', 'action']
+export const keys = ['code', 'name', 'stock', 'item_id', 'uom_code', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },