62 lines
1.7 KiB
Vue
62 lines
1.7 KiB
Vue
<template>
|
|
<SettingsRawTable :columns="columns" :data="data">
|
|
<template #cell(finance_notifications)="{ row }">
|
|
<div class="d-flex align-items-center text-clr-grey-600">
|
|
<Component :is="resolveComponent(`ui-icon-${row.original.icon}`)" :style="`color: ${row.original.color}`" />
|
|
<h4 class="ml-10">
|
|
{{ row.original.finance_notifications }}
|
|
</h4>
|
|
</div>
|
|
</template>
|
|
|
|
<template #cell(telegram)="{ row }">
|
|
<div class="d-flex justify-content-center">
|
|
<UiCheckbox id="telegram" />
|
|
</div>
|
|
</template>
|
|
|
|
<template #cell(mail)="{ row }">
|
|
<div class="d-flex justify-content-center">
|
|
<UiCheckbox id="mail" :model-value="true" disabled />
|
|
</div>
|
|
</template>
|
|
|
|
<template #cell(push)="{ row }">
|
|
<div class="d-flex justify-content-center">
|
|
<UiCheckbox id="push" :model-value="true" />
|
|
</div>
|
|
</template>
|
|
</SettingsRawTable>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { createColumnHelper } from '@tanstack/vue-table'
|
|
|
|
const columnHelper = createColumnHelper()
|
|
|
|
const columns = [
|
|
columnHelper.display({
|
|
id: 'finance_notifications',
|
|
header: 'Finance Notifications',
|
|
}),
|
|
columnHelper.display({
|
|
id: 'telegram',
|
|
header: 'Telegram',
|
|
}),
|
|
columnHelper.display({
|
|
id: 'mail',
|
|
header: 'Mail',
|
|
}),
|
|
columnHelper.display({
|
|
id: 'push',
|
|
header: 'Push',
|
|
}),
|
|
]
|
|
|
|
const data = [
|
|
{ finance_notifications: 'Поступления средств', icon: 'ArrowReceive', color: '#10C44C' },
|
|
{ finance_notifications: 'Выводы', icon: 'ArrowSend', color: '#1464D3' },
|
|
{ finance_notifications: 'Счет частично оплачен', icon: 'InstallmentPlan' },
|
|
]
|
|
</script>
|