wip: adjust form

- adjust rencana edukasi
- hide code on select items

app/components/app/assessment-education/entry-form.vue

@@ -3,10 +3,11 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { FieldArray } from 'vee-validate'
 import { Form } from '~/components/pub/ui/form'
 
+// componenets
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import Separator from '~/components/pub/ui/separator/Separator.vue'
-
+import { BaseSelect, CheckboxGeneral, CheckboxSpecial } from './field'
-import { BaseSelect, BaseTextarea, CheckboxGeneral, CheckboxSpecial } from './field'
+import { ButtonAction, TextAreaInput } from '~/components/pub/my-ui/form'
 
 // constant
 import {
@@ -154,53 +155,53 @@ defineExpose({
     >
       <FieldArray
         v-slot="{ fields, push, remove }"
-        name="plans"
+        name="tissueNotes"
       >
-        <div
+        <template v-if="fields.length === 0">
-          :col-count="2"
+          {{ push({ note: '' }) }}
-          v-for="(field, idx) in fields"
+        </template>
-          :key="field.key"
+        <div class="space-y-4">
-        >
           <DE.Block
-            :col-count="4"
+            v-for="(field, idx) in fields"
+            :key="field.key"
+            :col-count="6"
             :cell-flex="false"
           >
-            <DE.Cell :col-span="3">
+            <DE.Cell :col-span="5">
-              <BaseTextarea
+              <TextAreaInput
                 :field-name="`plans[${idx}].value`"
                 :label="'Rencana ' + Number(idx + 1)"
+                placeholder="Masukkan rencana catatan"
+                :col-span="2"
+                :rows="5"
+                :is-disabled="isReadonly"
               />
             </DE.Cell>
-            <Button
+            <DE.Cell class="flex items-start justify-start">
-              type="button"
+              <DE.Field :class="idx === 0 ? 'mt-[30px]' : 'mt-0'">
-              variant="outline"
+                <ButtonAction
-              size="icon"
+                  v-if="idx !== 0"
-              class="mt-5 text-red-600 hover:border-red-400 hover:bg-red-50 hover:text-red-700 dark:border-red-400 dark:text-red-400 dark:hover:border-red-300 dark:hover:bg-red-900/20"
+                  :disabled="isReadonly"
-              :class="{ invisible: idx === 0 }"
+                  preset="delete"
-              @click="remove(idx)"
+                  :title="`Hapus Rencana ${idx + 1}`"
-            >
+                  icon-only
-              <Icon
+                  @click="remove(idx)"
-                name="i-lucide-trash-2"
+                />
-                class="h-5 w-5"
+              </DE.Field>
-              />
+            </DE.Cell>
-            </Button>
           </DE.Block>
         </div>
 
         <div class="self-center pt-3">
-          <Button
+          <ButtonAction
-            :disabled="fields.length >= noteLimit"
+            preset="add"
-            type="button"
+            label="Tambah Rencana"
-            variant="outline"
+            title="Tambah Rencana Edukasi"
-            size="sm"
+            :disabled="fields.length >= noteLimit || isReadonly"
+            :full-width-mobile="true"
+            class="mt-4"
             @click="push({ id: fields.length + 1, value: '' })"
-          >
+          />
-            <Icon
-              name="i-lucide-plus"
-              class="h-5 w-5"
-            />
-            Tambah Kontak
-          </Button>
         </div>
       </FieldArray>
     </DE.Block>

app/components/app/assessment-education/field/base-select.vue

@@ -18,7 +18,24 @@ const props = defineProps<{
 
 const { placeholder = 'Pilih', class: containerClass, selectClass, fieldGroupClass, labelClass } = props
 
-const religionOptions = mapToComboboxOptList(props.items)
+const opts = computed(() => {
+  const data = mapToComboboxOptList(props.items)
+  // hide code on select options
+  const filtered = data
+    .filter((item) => item.code)
+    .reduce(
+      (acc, item) => {
+        acc.push({
+          label: item.label as string,
+          value: item.value as string,
+        })
+        return acc
+      },
+      [] as Array<{ label: string; value: string }>,
+    )
+
+  return filtered
+})
 </script>
 
 <template>
@@ -43,7 +60,7 @@ const religionOptions = mapToComboboxOptList(props.items)
             <Select
               :id="fieldName"
               v-bind="componentField"
-              :items="religionOptions"
+              :items="opts"
               :placeholder="placeholder"
               :preserve-order="false"
               :class="

app/components/app/assessment-education/field/base-textarea.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import * as DE from '~/components/pub/my-ui/doc-entry'
-
-const props = defineProps<{
-  label: string
-  fieldName: string
-  placeholder?: string
-  colSpan?: number
-}>()
-
-const { label, fieldName, placeholder = 'Masukkan catatan' } = props
-</script>
-
-<template>
-  <DE.Cell :col-span="colSpan || 1">
-    <DE.Label :label-for="fieldName">
-      {{ label }}
-    </DE.Label>
-    <DE.Field :id="fieldName">
-      <FormField
-        v-slot="{ componentField }"
-        :name="fieldName"
-      >
-        <FormItem>
-          <FormControl>
-            <Textarea
-              v-bind="componentField"
-              :placeholder="placeholder"
-            />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      </FormField>
-    </DE.Field>
-  </DE.Cell>
-</template>

app/components/app/assessment-education/field/index.ts

@@ -1,5 +1,4 @@
 export { default as BaseSelect } from './base-select.vue'
-export { default as BaseTextarea } from './base-textarea.vue'
 export { default as CheckboxGeneral } from './checkbox-general.vue'
 export { default as CheckboxSpecial } from './checkbox-special.vue'
 export { default as SelectAssessmentCode } from './select-assessment-code.vue'