Khafid Prayoga
66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
// components
|
|
import { FieldArray } from 'vee-validate'
|
|
import * as DE from '~/components/pub/my-ui/doc-entry'
|
|
|
|
// form field components
|
|
import { ButtonAction, InputBase } from '~/components/pub/my-ui/form'
|
|
|
|
interface Props {
|
|
isDisabled: boolean
|
|
limit: number
|
|
title: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const isReadonly = computed(() => props.isDisabled)
|
|
</script>
|
|
<template>
|
|
<FieldArray
|
|
v-slot="{ fields, push, remove }"
|
|
name="tissueNotes"
|
|
>
|
|
<template v-if="fields.length === 0">
|
|
{{ push({ note: '' }) }}
|
|
</template>
|
|
<div class="space-y-4">
|
|
<DE.Block
|
|
v-for="(field, idx) in fields"
|
|
:key="field.key"
|
|
:col-count="3"
|
|
:cell-flex="false"
|
|
>
|
|
<InputBase
|
|
:label="idx === 0 ? 'Keterangan Jaringan' : undefined"
|
|
:field-name="`tissueNotes[${idx}].note`"
|
|
placeholder="Masukkan catatan"
|
|
:is-disabled="isReadonly"
|
|
/>
|
|
<DE.Cell class="flex items-start justify-start">
|
|
<DE.Field :class="idx === 0 ? 'mt-[30px]' : 'mt-0'">
|
|
<ButtonAction
|
|
v-if="idx !== 0"
|
|
:disabled="isReadonly"
|
|
preset="delete"
|
|
:title="`Hapus Kontak ${idx + 1}`"
|
|
icon-only
|
|
@click="remove(idx)"
|
|
/>
|
|
</DE.Field>
|
|
</DE.Cell>
|
|
</DE.Block>
|
|
</div>
|
|
|
|
<ButtonAction
|
|
preset="add"
|
|
label="Tambah Catatan"
|
|
title="Tambah Catatan Keterangan Jaringan"
|
|
:disabled="fields.length >= limit || isReadonly"
|
|
:full-width-mobile="true"
|
|
class="mt-4"
|
|
@click="push({ name: '', dose: '', unit: '' })"
|
|
/>
|
|
</FieldArray>
|
|
</template>
|