Admin
53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { Table } from '@tanstack/vue-table'
|
|
|
|
import { X } from 'lucide-vue-next'
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import type { Announcement } from '@/pages/admin/announcements/data/schema'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
|
|
const props = defineProps<DataTableToolbarProps>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:searchFilter': [value: string]
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
interface DataTableToolbarProps {
|
|
table: Table<Announcement>
|
|
searchFilter?: string
|
|
}
|
|
|
|
const isFiltered = computed(() => !!props.searchFilter)
|
|
|
|
function resetFilters() {
|
|
emit('update:searchFilter', '')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center flex-1 space-x-2">
|
|
<Input
|
|
:placeholder="t('developer.announcements.searchAll')"
|
|
:model-value="searchFilter"
|
|
class="h-8 w-[200px] lg:w-[300px]"
|
|
@update:model-value="emit('update:searchFilter', $event as string)"
|
|
/>
|
|
|
|
<Button
|
|
v-if="isFiltered"
|
|
variant="ghost"
|
|
class="h-8 px-2 lg:px-3"
|
|
@click="resetFilters"
|
|
>
|
|
{{ t('developer.announcements.reset') }}
|
|
<X class="size-4 ml-2" />
|
|
</Button>
|
|
</div>
|
|
</template>
|