Merge pull request #32 from dikstub-rssa/feat/equipment-device

Feat Equipment Device

app/components/flow/device/entry.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+import { z, ZodError } from 'zod'
+
+const errors = ref({})
+const data = ref({
+  code: '',
+  name: '',
+  type: '',
+})
+
+const schema = z.object({
+  code: z.string().min(1, 'Code must be at least 1 characters long'),
+  name: z.string().min(1, 'Name must be at least 1 characters long'),
+  type: z.string(),
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/tools-equipment-src/device')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+    const input = data.value
+    console.log(input)
+    const errorsParsed: any = {}
+    try {
+      const result = schema.safeParse(input)
+      if (!result.success) {
+        // You can handle the error here, e.g. show a message
+        const errorsCaptures = result?.error?.errors || []
+        const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
+        errorsCaptures.forEach((value: any) => {
+          const keyName = value?.path?.length > 0 ? value.path[0] : 'key'
+          errorsParsed[keyName as string] = value.message || ''
+        })
+        console.log(errorMessage)
+      }
+    } catch (e) {
+      if (e instanceof ZodError) {
+        const jsonError = e.flatten()
+        console.log(JSON.stringify(jsonError, null, 2))
+      }
+    }
+    setTimeout(() => {
+      errors.value = errorsParsed
+    }, 0)
+  }
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-paint-bucket" class="me-2" />
+    <span class="font-semibold">Tambah</span> Alat Kesehatan
+  </div>
+  <AppDeviceEntryForm v-model="data" :errors="errors" />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>

app/components/flow/device/list.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Alat Kesehatan',
+  icon: 'i-lucide-paint-bucket',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/tools-equipment-src/device/add'),
+  },
+}
+
+async function getMaterialList() {
+  isLoading.dataListLoading = true
+
+  const resp = await xfetch('/api/v1/device')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getMaterialList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <div class="rounded-md border p-4">
+      <AppMaterialList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+  </div>
+</template>

app/components/flow/material/entry.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+import { z, ZodError } from 'zod'
+
+const errors = ref({})
+const data = ref({
+  code: '',
+  name: '',
+  type: '',
+  stock: 0,
+})
+
+const schema = z.object({
+  code: z.string().min(1, 'Code must be at least 1 characters long'),
+  name: z.string().min(1, 'Name must be at least 1 characters long'),
+  type: z.string(),
+  stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: 'Stok harus berupa angka' })),
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/tools-equipment-src/material')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+    const input = data.value
+    console.log(input)
+    const errorsParsed: any = {}
+    try {
+      const result = schema.safeParse(input)
+      if (!result.success) {
+        // You can handle the error here, e.g. show a message
+        const errorsCaptures = result?.error?.errors || []
+        const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
+        errorsCaptures.forEach((value: any) => {
+          const keyName = value?.path?.length > 0 ? value.path[0] : 'key'
+          errorsParsed[keyName as string] = value.message || ''
+        })
+        console.log(errorMessage)
+      }
+    } catch (e) {
+      if (e instanceof ZodError) {
+        const jsonError = e.flatten()
+        console.log(JSON.stringify(jsonError, null, 2))
+      }
+    }
+    setTimeout(() => {
+      errors.value = errorsParsed
+    }, 0)
+  }
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-paint-bucket" class="me-2" />
+    <span class="font-semibold">Tambah</span> Alat Kesehatan
+  </div>
+  <AppMaterialEntryForm v-model="data" :errors="errors" />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>

app/components/flow/material/list.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'BMHP',
+  icon: 'i-lucide-paint-bucket',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/tools-equipment-src/material/add'),
+  },
+}
+
+async function getMaterialList() {
+  isLoading.dataListLoading = true
+
+  const resp = await xfetch('/api/v1/material')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getMaterialList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <div class="rounded-md border p-4">
+      <AppMaterialList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+  </div>
+</template>