exchange/resources/js/Pages/Requests.vue

89 lines
1.9 KiB
Vue

<template>
<div>
<div class="flex bg-white p-4 text-lg border-b border-gray-300 h-20 items-center">
<div class="flex-1 font-semibold">{{ trans('Requests') }}</div>
</div>
<a-table
:dataSource="requests"
:columns="columns"
:pagination="false"
expand-row-by-click
rowKey="id"
>
<span
slot="id"
slot-scope="_, __, index"
class="text-right"
v-text="index + 1"
/>
<span slot="actions" slot-scope="_, row" class="text-center">
<a-button @click.stop="() => reply(row)"> {{ trans('Reply') }} </a-button>
<!-- <a-tooltip :title="trans('Delete')">
<a-button
type="danger"
ghost
icon="delete"
@click="() => destroy('requests', row.id)"
/>
</a-tooltip> -->
</span>
<a-table
slot="expandedRowRender"
slot-scope="row"
:columns="innerColumns"
:data-source="row.items"
:pagination="false"
:show-header="false"
rowKey="id"
>
<span slot="count" slot-scope="_, row">
{{ row.count }} {{ row.unit }}
</span>
</a-table>
</a-table>
</div>
</template>
<script>
import columns from "@/data/request-columns";
export default {
props: ["requests"],
metaInfo() {
return {
title: this.trans('Requests'),
}
},
computed: {
columns() {
return columns.map((column) => {
column.title = this.trans(column.title)
return column
});
},
innerColumns() {
return [
{
dataIndex: "title",
key: "title",
},
{
dataIndex: "count",
key: "count",
scopedSlots: { customRender: "count" },
width: 160,
},
];
},
},
methods: {
reply(row) {
window.open(`mailto:${row.email}`, "_blank");
},
},
};
</script>