8538004962

Committed 03 Apr 2024 11:36AM UTC coverage: 18.233% (-3.3%) from 21.535%

Build # 8538004962

Build Type

Pull #528

github

Committed by

web-flow

Commit Message

Merge c1a248a6f into 45ee7ebb3

Pull Request Pull Request #528: feat: Kanban view

Run Details

575 of 1136 branches covered (50.62%)

29 of 2908 new or added lines in 83 files covered. (1.0%)

5 existing lines in 5 files now uncovered.

6439 of 35315 relevant lines covered (18.23%)

3.94 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/apps/nextjs-app/src/features/app/blocks/view/tool-bar/components/GridViewOperators.tsx

import type { IGridViewOptions } from '@teable/core';
import {
  ArrowUpDown,
  PaintBucket,
  Filter as FilterIcon,
  EyeOff,
  LayoutList,
  Share2,
} from '@teable/icons';
import { Filter, HideFields, RowHeight, useFields, Sort, Group } from '@teable/sdk';
import { useView } from '@teable/sdk/hooks/use-view';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  cn,
} from '@teable/ui-lib/shadcn';
import { useTranslation } from 'next-i18next';
import { GUIDE_VIEW_FILTERING, GUIDE_VIEW_SORTING, GUIDE_VIEW_GROUPING } from '@/components/Guide';
import { tableConfig } from '@/features/i18n/table.config';
import { useToolbarChange } from '../../hooks/useToolbarChange';
import { ToolBarButton } from '../ToolBarButton';

export const GridViewOperators: React.FC<{ disabled?: boolean }> = (props) => {
  const { disabled } = props;
  const view = useView();
  const fields = useFields();

  const { onFilterChange, onRowHeightChange, onSortChange, onGroupChange } = useToolbarChange();
  const { t } = useTranslation(tableConfig.i18nNamespaces);
  if (!view || !fields.length) {
    return <div></div>;
  }

  return (
    <div className="flex gap-1">
      <HideFields>
        {(text, isActive) => (
          <ToolBarButton
            disabled={disabled}
            isActive={isActive}
            text={text}
            textClassName="@2xl/toolbar:inline"
          >
            <EyeOff className="size-4 text-sm" />
          </ToolBarButton>
        )}
      </HideFields>
      <Filter
        filters={view?.filter || null}
        onChange={onFilterChange}
        contentHeader={
          view.enableShare && (
            <div className="flex max-w-full items-center justify-start rounded-t bg-accent px-4 py-2 text-[11px]">
              <Share2 className="mr-4 size-4 shrink-0" />
              <span className="text-muted-foreground">{t('table:toolbar.viewFilterInShare')}</span>
            </div>
          )
        }
      >
        {(text, isActive) => (
          <ToolBarButton
            disabled={disabled}
            isActive={isActive}
            text={text}
            className={cn(
              GUIDE_VIEW_FILTERING,
              'max-w-xs',
              isActive &&
                'bg-violet-100 dark:bg-violet-600/30 hover:bg-violet-200 dark:hover:bg-violet-500/30'
            )}
            textClassName="@2xl/toolbar:inline"
          >
            <FilterIcon className="size-4 text-sm" />
          </ToolBarButton>
        )}
      </Filter>
      <Sort sorts={view?.sort || null} onChange={onSortChange}>
        {(text: string, isActive) => (
          <ToolBarButton
            disabled={disabled}
            isActive={isActive}
            text={text}
            className={cn(
              GUIDE_VIEW_SORTING,
              'max-w-xs',
              isActive &&
                'bg-orange-100 dark:bg-orange-600/30 hover:bg-orange-200 dark:hover:bg-orange-500/30'
            )}
            textClassName="@2xl/toolbar:inline"
          >
            <ArrowUpDown className="size-4 text-sm" />
          </ToolBarButton>
        )}
      </Sort>
      <Group group={view?.group || null} onChange={onGroupChange}>
        {(text: string, isActive) => (
          <ToolBarButton
            disabled={disabled}
            isActive={isActive}
            text={text}
            className={cn(
              GUIDE_VIEW_GROUPING,
              'max-w-xs',
              isActive &&
                'bg-green-100 dark:bg-green-600/30 hover:bg-green-200 dark:hover:bg-green-500/30'
            )}
            textClassName="@2xl/toolbar:inline"
          >
            <LayoutList className="size-4 text-sm" />
          </ToolBarButton>
        )}
      </Group>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <ToolBarButton className="opacity-30" text="Color" textClassName="@2xl/toolbar:inline">
              <PaintBucket className="size-4 text-sm" />
            </ToolBarButton>
          </TooltipTrigger>
          <TooltipContent>
            <p>{t('table:toolbar.comingSoon')}</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>

      <RowHeight
        rowHeight={(view?.options as IGridViewOptions)?.rowHeight || null}
        onChange={onRowHeightChange}
      >
        {(_, isActive, Icon) => (
          <ToolBarButton disabled={disabled} isActive={isActive}>
            <Icon className="text-sm" />
          </ToolBarButton>
        )}
      </RowHeight>
    </div>
  );
};

1	import type { IGridViewOptions } from '@teable/core';	×
2	import {	×
3	ArrowUpDown,	×
4	PaintBucket,	×
5	Filter as FilterIcon,	×
6	EyeOff,	×
7	LayoutList,	×
8	Share2,	×
9	} from '@teable/icons';	×
10	import { Filter, HideFields, RowHeight, useFields, Sort, Group } from '@teable/sdk';	×
11	import { useView } from '@teable/sdk/hooks/use-view';	×
12	import {	×
13	Tooltip,	×
14	TooltipContent,	×
15	TooltipProvider,	×
16	TooltipTrigger,	×
17	cn,	×
18	} from '@teable/ui-lib/shadcn';	×
19	import { useTranslation } from 'next-i18next';	×
20	import { GUIDE_VIEW_FILTERING, GUIDE_VIEW_SORTING, GUIDE_VIEW_GROUPING } from '@/components/Guide';	×
21	import { tableConfig } from '@/features/i18n/table.config';	×
NEW 22	import { useToolbarChange } from '../../hooks/useToolbarChange';	×
NEW 23	import { ToolBarButton } from '../ToolBarButton';	×
24		×
NEW 25	export const GridViewOperators: React.FC<{ disabled?: boolean }> = (props) => {	×
26	const { disabled } = props;	×
27	const view = useView();	×
28	const fields = useFields();	×
29		×
30	const { onFilterChange, onRowHeightChange, onSortChange, onGroupChange } = useToolbarChange();	×
31	const { t } = useTranslation(tableConfig.i18nNamespaces);	×
32	if (!view \|\| !fields.length) {	×
33	return <div></div>;	×
34	}	×
35		×
36	return (	×
37	<div className="flex gap-1">	×
38	<HideFields>	×
39	{(text, isActive) => (	×
40	<ToolBarButton	×
41	disabled={disabled}	×
42	isActive={isActive}	×
43	text={text}	×
44	textClassName="@2xl/toolbar:inline"	×
45	>	×
46	<EyeOff className="size-4 text-sm" />	×
47	</ToolBarButton>	×
48	)}	×
49	</HideFields>	×
50	<Filter	×
51	filters={view?.filter \|\| null}	×
52	onChange={onFilterChange}	×
53	contentHeader={	×
54	view.enableShare && (	×
55	<div className="flex max-w-full items-center justify-start rounded-t bg-accent px-4 py-2 text-[11px]">	×
56	<Share2 className="mr-4 size-4 shrink-0" />	×
57	<span className="text-muted-foreground">{t('table:toolbar.viewFilterInShare')}</span>	×
58	</div>	×
59	)	×
60	}	×
61	>	×
62	{(text, isActive) => (	×
63	<ToolBarButton	×
64	disabled={disabled}	×
65	isActive={isActive}	×
66	text={text}	×
67	className={cn(	×
68	GUIDE_VIEW_FILTERING,	×
69	'max-w-xs',	×
70	isActive &&	×
71	'bg-violet-100 dark:bg-violet-600/30 hover:bg-violet-200 dark:hover:bg-violet-500/30'	×
72	)}	×
73	textClassName="@2xl/toolbar:inline"	×
74	>	×
75	<FilterIcon className="size-4 text-sm" />	×
76	</ToolBarButton>	×
77	)}	×
78	</Filter>	×
79	<Sort sorts={view?.sort \|\| null} onChange={onSortChange}>	×
80	{(text: string, isActive) => (	×
81	<ToolBarButton	×
82	disabled={disabled}	×
83	isActive={isActive}	×
84	text={text}	×
85	className={cn(	×
86	GUIDE_VIEW_SORTING,	×
87	'max-w-xs',	×
88	isActive &&	×
89	'bg-orange-100 dark:bg-orange-600/30 hover:bg-orange-200 dark:hover:bg-orange-500/30'	×
90	)}	×
91	textClassName="@2xl/toolbar:inline"	×
92	>	×
93	<ArrowUpDown className="size-4 text-sm" />	×
94	</ToolBarButton>	×
95	)}	×
96	</Sort>	×
97	<Group group={view?.group \|\| null} onChange={onGroupChange}>	×
98	{(text: string, isActive) => (	×
99	<ToolBarButton	×
100	disabled={disabled}	×
101	isActive={isActive}	×
102	text={text}	×
103	className={cn(	×
104	GUIDE_VIEW_GROUPING,	×
105	'max-w-xs',	×
106	isActive &&	×
107	'bg-green-100 dark:bg-green-600/30 hover:bg-green-200 dark:hover:bg-green-500/30'	×
108	)}	×
109	textClassName="@2xl/toolbar:inline"	×
110	>	×
111	<LayoutList className="size-4 text-sm" />	×
112	</ToolBarButton>	×
113	)}	×
114	</Group>	×
115	<TooltipProvider>	×
116	<Tooltip>	×
117	<TooltipTrigger asChild>	×
118	<ToolBarButton className="opacity-30" text="Color" textClassName="@2xl/toolbar:inline">	×
119	<PaintBucket className="size-4 text-sm" />	×
120	</ToolBarButton>	×
121	</TooltipTrigger>	×
122	<TooltipContent>	×
NEW 123	<p>{t('table:toolbar.comingSoon')}</p>	×
124	</TooltipContent>	×
125	</Tooltip>	×
126	</TooltipProvider>	×
127		×
128	<RowHeight	×
129	rowHeight={(view?.options as IGridViewOptions)?.rowHeight \|\| null}	×
130	onChange={onRowHeightChange}	×
131	>	×
132	{(_, isActive, Icon) => (	×
133	<ToolBarButton disabled={disabled} isActive={isActive}>	×
134	<Icon className="text-sm" />	×
135	</ToolBarButton>	×
136	)}	×
137	</RowHeight>	×
138	</div>	×
139	);	×
140	};	×

teableio / teable / 8538004962

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous