137 lines
4.6 KiB
Vue
137 lines
4.6 KiB
Vue
<template>
|
|
<div>
|
|
<BasicShowContext title="اعلانهای اپ" :help="appNotificationsPageIntro">
|
|
<template #extra>
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<a-radio-group
|
|
v-model:value="sourceFilter"
|
|
button-style="solid"
|
|
size="small"
|
|
@change="onSourceChange"
|
|
>
|
|
<a-radio-button
|
|
v-for="tab in sourceTabs"
|
|
:key="tab.value"
|
|
:value="tab.value"
|
|
>
|
|
{{ tab.label }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
<BaseButton type="primary" size="small" @click="emits('add')">
|
|
<span>افزودن اعلان</span>
|
|
<BaseIcon icon="vuesax-linear:add" size="16" />
|
|
</BaseButton>
|
|
</div>
|
|
</template>
|
|
|
|
<BaseTable v-bind="tblProps" @register="submit" ref="tbl">
|
|
<template #action="{ record }">
|
|
<div class="flex justify-center gap-2">
|
|
<a-tooltip v-if="can('recipients')" placement="bottom">
|
|
<template #title>گیرندگان</template>
|
|
<Icon
|
|
icon="vuesax-linear:profile-2user"
|
|
color="#7C3AED"
|
|
class="cursor-pointer"
|
|
@click="emits('recipients', record)"
|
|
/>
|
|
</a-tooltip>
|
|
<a-tooltip v-if="can('readers')" placement="bottom">
|
|
<template #title>بازدیدکنندگان</template>
|
|
<Icon
|
|
icon="vuesax-linear:people"
|
|
color="#10913A"
|
|
class="cursor-pointer"
|
|
@click="emits('readers', record)"
|
|
/>
|
|
</a-tooltip>
|
|
<a-tooltip v-if="can('edit') && !isSystemRecord(record)" placement="bottom">
|
|
<template #title>ویرایش</template>
|
|
<Icon
|
|
icon="vuesax-linear:edit"
|
|
color="#4572E9"
|
|
class="cursor-pointer"
|
|
@click="emits('edit', record)"
|
|
/>
|
|
</a-tooltip>
|
|
<a-tooltip v-if="can('toggle')" placement="bottom">
|
|
<template #title>{{ record.is_active ? 'غیرفعال کردن' : 'فعال کردن' }}</template>
|
|
<Icon
|
|
:icon="record.is_active ? 'vuesax-linear:close-circle' : 'vuesax-linear:tick-circle'"
|
|
:color="record.is_active ? '#C53030' : '#25855A'"
|
|
class="cursor-pointer"
|
|
@click="emits('toggle', record)"
|
|
/>
|
|
</a-tooltip>
|
|
<a-tooltip v-if="can('delete')" placement="bottom">
|
|
<template #title>حذف</template>
|
|
<Icon
|
|
icon="vuesax-linear:trash"
|
|
color="#C53030"
|
|
class="cursor-pointer"
|
|
@click="emits('delete', record.id)"
|
|
/>
|
|
</a-tooltip>
|
|
</div>
|
|
</template>
|
|
</BaseTable>
|
|
</BasicShowContext>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="tsx" setup>
|
|
import { computed, ref } from 'vue'
|
|
import type { TableInput } from '@core/type/baseTable'
|
|
import useBaseTable from '@core/components/BaseTableOld/hooks/useBaseTable'
|
|
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
|
import { cols } from '../hooks/appNotificationsColumns'
|
|
import { getAppNotificationsTable } from '@/api/appNotifications'
|
|
import { appNotificationsPageIntro } from '@/utils/adminHelpCopy'
|
|
import {
|
|
APP_NOTIFICATION_SOURCE_TABS,
|
|
type AppNotificationSourceFilter,
|
|
} from '@/model/appNotifications'
|
|
import { usePageActionAccess } from '@/composables/usePageActionAccess'
|
|
|
|
const { can } = usePageActionAccess()
|
|
|
|
const [submit, reload] = useBaseTable()
|
|
|
|
const sourceFilter = ref<AppNotificationSourceFilter>('all')
|
|
const sourceTabs = APP_NOTIFICATION_SOURCE_TABS
|
|
|
|
const emits = defineEmits<{
|
|
add: []
|
|
edit: [record: Record<string, unknown>]
|
|
toggle: [record: Record<string, unknown>]
|
|
delete: [id: number]
|
|
readers: [record: Record<string, unknown>]
|
|
recipients: [record: Record<string, unknown>]
|
|
}>()
|
|
|
|
function isSystemRecord(record: Record<string, unknown>) {
|
|
if (typeof record.is_system === 'boolean') return record.is_system
|
|
const label = String(record.audience_label || '')
|
|
return record.created_by == null && label.startsWith('سیستمی')
|
|
}
|
|
|
|
const tblProps = computed(() => ({
|
|
columns: cols,
|
|
api: (params: TableInput) =>
|
|
getAppNotificationsTable({
|
|
...params,
|
|
source: sourceFilter.value,
|
|
} as TableInput & { source: AppNotificationSourceFilter }),
|
|
}))
|
|
|
|
function onSourceChange() {
|
|
reload()
|
|
}
|
|
|
|
function fetch() {
|
|
reload()
|
|
}
|
|
|
|
defineExpose({ fetch })
|
|
</script>
|