Skip to content

phsl / new-api

Go to a project
Commit 0229dc20 by CaIon
Options

refactor: refine toolbar controls and model drawer

parent 9100e15e
Showing with 27 additions and 28 deletions
web/default/src/components/data-table/toolbar/toolbar.tsx
...@@ -77,11 +77,6 @@ export type DataTableToolbarProps<TData> = { ...@@ -77,11 +77,6 @@ export type DataTableToolbarProps<TData> = {
*/ */
additionalSearch?: ReactNode additionalSearch?: ReactNode
/** /**
* Extra controls displayed immediately after the filter chips, before the
* right-aligned action cluster.
*/
afterFilters?: ReactNode
/**
* Whether non-table filters (e.g. `additionalSearch` or `expandable` * Whether non-table filters (e.g. `additionalSearch` or `expandable`
* inputs) are currently active. Controls Reset button visibility * inputs) are currently active. Controls Reset button visibility
* when no column filters are set. * when no column filters are set.
...@@ -351,7 +346,6 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) { ...@@ -351,7 +346,6 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
{props.customSearch !== undefined ? props.customSearch : searchInput} {props.customSearch !== undefined ? props.customSearch : searchInput}
{props.additionalSearch} {props.additionalSearch}
{filterChips} {filterChips}
{props.afterFilters}
<div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'> <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
{expandToggle} {expandToggle}
</div> </div>
...@@ -387,7 +381,6 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) { ...@@ -387,7 +381,6 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
{props.customSearch !== undefined ? props.customSearch : searchInput} {props.customSearch !== undefined ? props.customSearch : searchInput}
{props.additionalSearch} {props.additionalSearch}
{filterChips} {filterChips}
{props.afterFilters}
{expanded && hasExpandable && props.expandable} {expanded && hasExpandable && props.expandable}
<div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'> <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
......
web/default/src/features/channels/components/channels-table.tsx
...@@ -409,7 +409,7 @@ export function ChannelsTable() { ...@@ -409,7 +409,7 @@ export function ChannelsTable() {
singleSelect: true, singleSelect: true,
}, },
], ],
afterFilters: ( preActions: (
<Tooltip> <Tooltip>
<TooltipTrigger <TooltipTrigger
render={ render={
......
web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx
...@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com ...@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
import { useState, useCallback, useMemo } from 'react' import { useState, useCallback, useMemo } from 'react'
import { useQueryClient, useIsFetching } from '@tanstack/react-query' import { useQueryClient, useIsFetching } from '@tanstack/react-query'
import { useNavigate, getRouteApi } from '@tanstack/react-router' import { useNavigate, getRouteApi } from '@tanstack/react-router'
import { type Table } from '@tanstack/react-table' import type { Table } from '@tanstack/react-table'
import { Eye, EyeOff } from 'lucide-react' import { Eye, EyeOff } from 'lucide-react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useIsAdmin } from '@/hooks/use-admin' import { useIsAdmin } from '@/hooks/use-admin'
...@@ -265,26 +265,28 @@ export function CommonLogsFilterBar<TData>( ...@@ -265,26 +265,28 @@ export function CommonLogsFilterBar<TData>(
const statsBar = ( const statsBar = (
<div className='flex flex-wrap items-center gap-2'> <div className='flex flex-wrap items-center gap-2'>
<CommonLogsStats /> <CommonLogsStats />
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
size='icon'
onClick={() => setSensitiveVisible(!sensitiveVisible)}
aria-label={sensitiveVisible ? t('Hide') : t('Show')}
className='text-muted-foreground hover:text-foreground size-7'
/>
}
>
{sensitiveVisible ? <Eye /> : <EyeOff />}
</TooltipTrigger>
<TooltipContent>
{sensitiveVisible ? t('Hide') : t('Show')}
</TooltipContent>
</Tooltip>
</div> </div>
) )
const sensitiveToggle = (
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
size='icon'
onClick={() => setSensitiveVisible(!sensitiveVisible)}
aria-label={sensitiveVisible ? t('Hide') : t('Show')}
className='text-muted-foreground hover:text-foreground size-7'
/>
}
>
{sensitiveVisible ? <Eye /> : <EyeOff />}
</TooltipTrigger>
<TooltipContent>
{sensitiveVisible ? t('Hide') : t('Show')}
</TooltipContent>
</Tooltip>
)
const dateRangeFilter = ( const dateRangeFilter = (
<LogsFilterField wide> <LogsFilterField wide>
...@@ -410,6 +412,7 @@ export function CommonLogsFilterBar<TData>( ...@@ -410,6 +412,7 @@ export function CommonLogsFilterBar<TData>(
<LogsFilterToolbar <LogsFilterToolbar
table={props.table} table={props.table}
stats={statsBar} stats={statsBar}
actionStart={sensitiveToggle}
primaryFilters={ primaryFilters={
<> <>
{dateRangeFilter} {dateRangeFilter}
......
web/default/src/features/usage-logs/components/logs-filter-toolbar.tsx
...@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. ...@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com For commercial licensing, please contact support@quantumnous.com
*/ */
import { useState, type ComponentProps, type ReactNode } from 'react' import { useState, type ComponentProps, type ReactNode } from 'react'
import { type Table } from '@tanstack/react-table' import type { Table } from '@tanstack/react-table'
import { useMediaQuery } from '@/hooks' import { useMediaQuery } from '@/hooks'
import { ChevronDown, Loader2 } from 'lucide-react' import { ChevronDown, Loader2 } from 'lucide-react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
...@@ -44,6 +44,7 @@ interface LogsFilterToolbarProps<TData> { ...@@ -44,6 +44,7 @@ interface LogsFilterToolbarProps<TData> {
mobileFilters?: ReactNode mobileFilters?: ReactNode
mobileFilterCount?: number mobileFilterCount?: number
stats?: ReactNode stats?: ReactNode
actionStart?: ReactNode
hasActiveFilters: boolean hasActiveFilters: boolean
hasAdvancedActiveFilters?: boolean hasAdvancedActiveFilters?: boolean
advancedFilterCount?: number advancedFilterCount?: number
...@@ -142,6 +143,7 @@ export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) { ...@@ -142,6 +143,7 @@ export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) {
<div className='mt-2 flex flex-col gap-2'> <div className='mt-2 flex flex-col gap-2'>
{props.stats} {props.stats}
<div className='flex items-center justify-end gap-1.5'> <div className='flex items-center justify-end gap-1.5'>
{props.actionStart}
<DrawerTrigger asChild> <DrawerTrigger asChild>
<Button <Button
type='button' type='button'
...@@ -240,6 +242,7 @@ export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) { ...@@ -240,6 +242,7 @@ export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) {
<div className='mt-2 flex flex-wrap items-center gap-2'> <div className='mt-2 flex flex-wrap items-center gap-2'>
{props.stats} {props.stats}
<div className='ms-auto flex flex-wrap items-center justify-end gap-1.5 sm:gap-2'> <div className='ms-auto flex flex-wrap items-center justify-end gap-1.5 sm:gap-2'>
{props.actionStart}
<Button <Button
type='button' type='button'
variant='outline' variant='outline'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment