58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<template>
|
|
<div class="overflow-hidden overflow-x-auto relative">
|
|
<table
|
|
v-if="resources.length > 0"
|
|
class="w-full divide-y divide-gray-100 dark:divide-gray-700"
|
|
data-testid="resource-table"
|
|
>
|
|
<table-header
|
|
:resource-name="resourceName"
|
|
:fields="fields"
|
|
/>
|
|
<tbody class="divide-y divide-gray-100 dark:divide-gray-700">
|
|
<table-row
|
|
v-for="(resource, index) in resources"
|
|
@actionExecuted="$emit('actionExecuted')"
|
|
:testId="`${resourceName}-items-${index}`"
|
|
:key="`${resource.id.value}-items-${index}`"
|
|
:resource="resource"
|
|
:resource-name="resourceName"
|
|
/>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TableHeader from './TableHeader.vue'
|
|
import TableRow from './TableRow.vue'
|
|
|
|
export default {
|
|
components: {
|
|
'table-header': TableHeader,
|
|
'table-row': TableRow,
|
|
},
|
|
|
|
props: {
|
|
resourceName: { default: null },
|
|
resources: { default: [] },
|
|
singularName: { type: String, required: true },
|
|
},
|
|
|
|
computed: {
|
|
/**
|
|
* Get all of the available fields for the resources.
|
|
*/
|
|
fields() {
|
|
if (this.resources) {
|
|
return this.resources[0].fields
|
|
}
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|