117 lines
3.3 KiB
Vue
117 lines
3.3 KiB
Vue
<template>
|
|
<div
|
|
class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded divide-y divide-gray-200 dark:divide-gray-700"
|
|
>
|
|
<div
|
|
class="flex items-center bg-gray-50 dark:bg-gray-800 py-2 px-3 rounded-t"
|
|
>
|
|
<div class="flex items-center space-x-2">
|
|
<IconButton
|
|
v-if="sortable"
|
|
dusk="row-move-up-button"
|
|
@click="$emit('move-up', index)"
|
|
iconType="arrow-up"
|
|
solid
|
|
small
|
|
/>
|
|
<IconButton
|
|
v-if="sortable"
|
|
dusk="row-move-down-button"
|
|
@click="$emit('move-down', index)"
|
|
iconType="arrow-down"
|
|
solid
|
|
small
|
|
/>
|
|
</div>
|
|
|
|
<IconButton
|
|
dusk="row-delete-button"
|
|
@click.stop.prevent="beforeRemove"
|
|
class="ml-auto"
|
|
iconType="trash"
|
|
solid
|
|
small
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="grid grid-cols-full divide-y divide-gray-100 dark:divide-gray-700"
|
|
>
|
|
<div v-for="(field, fieldIndex) in item.fields">
|
|
<component
|
|
:ref="fieldRefs[`fields.${field.attribute}`]"
|
|
:is="'form-' + field.component"
|
|
:field="field"
|
|
:index="fieldIndex"
|
|
:errors="errors"
|
|
:show-help-text="true"
|
|
@file-deleted="$emit('file-deleted')"
|
|
:nested="true"
|
|
:resource-name="resourceName"
|
|
:resource-id="resourceId"
|
|
:shown-via-new-relation-modal="shownViaNewRelationModal"
|
|
:via-resource="viaResource"
|
|
:via-resource-id="viaResourceId"
|
|
:via-relationship="viaRelationship"
|
|
/>
|
|
<!-- :related-resource-name="relatedResourceName"-->
|
|
<!-- :related-resource-id="relatedResourceId"-->
|
|
<!-- syncEndpoint,-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, provide, computed, inject } from 'vue'
|
|
import fromPairs from 'lodash/fromPairs'
|
|
import first from 'lodash/first'
|
|
import { useLocalization } from '@/composables/useLocalization'
|
|
|
|
const emit = defineEmits(['click', 'move-up', 'move-down', 'file-deleted'])
|
|
const { __ } = useLocalization()
|
|
|
|
const props = defineProps({
|
|
field: { type: Object, required: true },
|
|
index: { type: Number, required: true },
|
|
item: { type: Object, required: true },
|
|
errors: { type: Object, required: true },
|
|
sortable: { type: Boolean, required: false },
|
|
viaParent: { type: String },
|
|
})
|
|
|
|
provide(
|
|
'viaParent',
|
|
computed(() => props.viaParent)
|
|
)
|
|
provide(
|
|
'index',
|
|
computed(() => props.index)
|
|
)
|
|
|
|
const fieldKeys = props.item.fields.map(f => f.attribute)
|
|
const fieldRefs = fromPairs(fieldKeys.map(k => [`fields.${k}`, ref(null)]))
|
|
|
|
const resourceName = inject('resourceName')
|
|
const resourceId = inject('resourceId')
|
|
const shownViaNewRelationModal = inject('shownViaNewRelationModal')
|
|
const viaResource = inject('viaResource')
|
|
const viaResourceId = inject('viaResourceId')
|
|
const viaRelationship = inject('viaRelationship')
|
|
|
|
const beforeRemove = () =>
|
|
props.item.confirmBeforeRemoval
|
|
? confirm(__('Are you sure you want to remove this item?'))
|
|
? remove()
|
|
: null
|
|
: remove()
|
|
|
|
const remove = () => {
|
|
Object.keys(fieldRefs).forEach(async k => {
|
|
// await fieldRefs[k]?.value[0]?.beforeRemove?()
|
|
})
|
|
|
|
emit('click', props.index)
|
|
}
|
|
</script>
|