Dev cleaning (#106)

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

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Types
+import type { MaterialFormData } from '~/schemas/material.schema.ts'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  uoms: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+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: MaterialFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    uom_code: '',
+    stock: 0,
+  } as Partial<MaterialFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [uom, uomAttrs] = defineField('uom_code')
+const [stock, stockAttrs] = defineField('stock')
+
+// 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.uom_code !== undefined) uom.value = props.values.uom_code
+  if (props.values.stock !== undefined) stock.value = props.values.stock
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  uom.value = ''
+  stock.value = 0
+}
+
+function onSubmitForm() {
+  const formData: MaterialFormData = {
+    name: name.value || '',
+    code: code.value || '',
+    uom_code: uom.value || '',
+    stock: stock.value || 0,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-equipment" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="">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">Satuan</Label>
+        <Field :errMessage="errors.uom_code">
+          <Select
+            id="uom"
+            v-model="uom"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-bind="uomAttrs"
+            :items="uoms"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Stok</Label>
+        <Field :errMessage="errors.stock">
+          <Input id="stock" v-model="stock" type="number" v-bind="stockAttrs" :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/equipment/list-cfg.ts

@@ -0,0 +1,43 @@
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, Th } from '~/components/pub/my-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 100 }, { width: 50 }]
+
+export const header: Th[][] = [
+  [{ label: 'Kode' }, { label: 'Nama' }, { label: 'Stok' }, { label: 'Satuan' }, { label: '' }],
+]
+
+export const keys = ['code', 'name', 'stock', 'uom_code', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.name}`.trim()
+  },
+  uom_code: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.uom_code
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}

app/components/app/equipment/list.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>