170 lines
4.2 KiB
Vue
170 lines
4.2 KiB
Vue
<template>
|
|
<tr
|
|
:data-pivot-id="resource.id.pivotValue"
|
|
:dusk="`${resource.id.value}-row`"
|
|
class="group"
|
|
>
|
|
<!-- Fields -->
|
|
<td
|
|
v-for="(field, index) in resource.fields"
|
|
:key="field.uniqueKey"
|
|
class="dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900 px-2"
|
|
>
|
|
<component
|
|
:is="'index-' + field.component"
|
|
:class="`text-${field.textAlign}`"
|
|
:field="field"
|
|
:resource="resource"
|
|
:resource-name="resourceName"
|
|
:via-resource="viaResource"
|
|
:via-resource-id="viaResourceId"
|
|
/>
|
|
</td>
|
|
|
|
<td class="px-2 td-fit text-right align-middle dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900 py-2">
|
|
<div class="flex items-center justify-end space-x-0 text-gray-400">
|
|
<!-- Preview Resource Link -->
|
|
<button
|
|
type="button"
|
|
v-tooltip.click="__('View')"
|
|
:aria-label="__('View')"
|
|
:dusk="`${resource['id'].value}-edit-button`"
|
|
class="toolbar-button hover:text-primary-500 px-2 disabled:opacity-50 disabled:pointer-events-none"
|
|
@click="openPreviewModal"
|
|
>
|
|
<Icon type="eye" />
|
|
</button>
|
|
|
|
<!-- Edit Resource Link -->
|
|
<!-- <button
|
|
type="button"
|
|
v-tooltip.click="__('Edit')"
|
|
:aria-label="__('Edit')"
|
|
:data-testid="`${testId}-delete-button`"
|
|
:dusk="`${resource['id'].value}-edit-button`"
|
|
class="toolbar-button hover:text-primary-500 px-2 disabled:opacity-50 disabled:pointer-events-none"
|
|
@click.stop="openEditModal"
|
|
>
|
|
<Icon type="pencil-alt" />
|
|
</button> -->
|
|
|
|
<!-- Delete Resource Link -->
|
|
<button
|
|
type="button"
|
|
v-tooltip.click="__('Delete')"
|
|
:aria-label="__('Delete')"
|
|
:data-testid="`${testId}-delete-button`"
|
|
:dusk="`${resource['id'].value}-delete-button`"
|
|
class="toolbar-button hover:text-primary-500 px-2 disabled:opacity-50 disabled:pointer-events-none"
|
|
@click.stop="openDeleteModal"
|
|
>
|
|
<Icon type="trash" />
|
|
</button>
|
|
|
|
<DeleteResourceModal
|
|
mode="delete"
|
|
:show="deleteModalOpen"
|
|
@close="closeDeleteModal"
|
|
@confirm="confirmDelete"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<PreviewResourceModal
|
|
v-if="previewModalOpen"
|
|
:resource-id="resource.id.value"
|
|
:resource-name="resourceName"
|
|
:show="previewModalOpen"
|
|
@close="closePreviewModal"
|
|
@confirm="closePreviewModal"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import { Localization } from 'laravel-nova'
|
|
|
|
export default {
|
|
emits: ['actionExecuted'],
|
|
|
|
mixins: [Localization],
|
|
|
|
props: [
|
|
'testId',
|
|
'restoreResource',
|
|
'resource',
|
|
'resourcesSelected',
|
|
'resourceName',
|
|
'relationshipType',
|
|
'viaRelationship',
|
|
'viaResource',
|
|
'viaResourceId',
|
|
'viaManyToMany',
|
|
'checked',
|
|
'shouldShowCheckboxes',
|
|
'shouldShowColumnBorders',
|
|
'tableStyle',
|
|
'updateSelectionStatus',
|
|
'queryString',
|
|
'clickAction',
|
|
],
|
|
|
|
data: () => ({
|
|
previewModalOpen: false,
|
|
editModalOpen: false,
|
|
deleteModalOpen: false,
|
|
}),
|
|
|
|
methods: {
|
|
openPreviewModal() {
|
|
this.previewModalOpen = true;
|
|
},
|
|
|
|
closePreviewModal() {
|
|
this.previewModalOpen = false;
|
|
},
|
|
|
|
openEditModal() {
|
|
this.editModalOpen = true;
|
|
},
|
|
|
|
closeEditModal() {
|
|
this.editModalOpen = false;
|
|
},
|
|
|
|
openDeleteModal() {
|
|
this.deleteModalOpen = true
|
|
},
|
|
|
|
closeDeleteModal() {
|
|
this.deleteModalOpen = false
|
|
},
|
|
|
|
confirmDelete() {
|
|
this.deleteResource(this.resource)
|
|
this.closeDeleteModal()
|
|
},
|
|
|
|
/**
|
|
* Delete the given resource.
|
|
*/
|
|
deleteResource(resource) {
|
|
return Nova.request({
|
|
url: '/nova-api/' + this.resourceName,
|
|
method: 'delete',
|
|
params: {
|
|
'resources[]': resource.id.value
|
|
},
|
|
}).then(response => {
|
|
this.deleteModalOpen = false
|
|
|
|
Nova.success(this.__('The :resource was deleted!', { resource: this.resourceName }))
|
|
}).catch(exception => {
|
|
console.log({exception});
|
|
})
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|