All files / app/src/entities/task/ui/task-header-content task-header-content.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
1x
 
 
 
 
 
 
 
 
 
 
 
 
1x
2x
 
2x
2x
 
2x
 
2x
 
2x
 
 
 
2x
2x
2x
2x
2x
2x
2x
2x
2x
 
2x
2x
2x
2x
2x
2x
2x
 
2x
2x
2x
2x
 
2x
 
import { FC } from 'react'
import { useAtomValue, useSetAtom } from 'jotai'
import { TableFilterItem } from '@tmk/ui-kit'
 
import { currentUserRolesAtom } from '@/features/rolevik'
 
import { getTaskFilters, taskFormModalConfigAtom, TaskFormMode, useDownloadTaskXLSX } from '@/entities/task'
 
import { useTranslate } from '@/shared/lib'
import { Button, TableFilters } from '@/shared/ui'
 
import PlusIcon from '@/shared/assets/icons/common/plus.svg'
 
export const TaskHeaderContent: FC = () => {
  const { t } = useTranslate(['common', 'accounting-object'])
 
  const currentRoles = useAtomValue(currentUserRolesAtom)
  const setTaskFormModalConfig = useSetAtom(taskFormModalConfigAtom)
 
  const isViewerManager = currentRoles?.some(role => role.role.includes('role_manager'))
 
  const { isLoadingXLSX, downloadTaskXLSX } = useDownloadTaskXLSX()
 
  const onAddTaskClick = () => {
    setTaskFormModalConfig({ isOpen: true, formMode: TaskFormMode.CREATE, isViewerManager: isViewerManager })
  }
 
  return (
    <div className='flex items-center gap-x-2.5 h-20'>
      <TableFilters filters={getTaskFilters(t, isViewerManager) as TableFilterItem[]} t={t} />
      <Button
        variant='outlined'
        color='secondary'
        loading={isLoadingXLSX}
        disabled={isLoadingXLSX}
        onClick={downloadTaskXLSX}
      >
        <h2>{t('accounting-object:Export_to_excel')}</h2>
      </Button>
      <Button
        variant='border-icon'
        className='py-2.5 px-4'
        childrenClassName='flex items-center gap-1'
        onClick={onAddTaskClick}
      >
        <h3>{t('accounting-object:task')}</h3>
        <PlusIcon className='stroke-currentColor' />
      </Button>
    </div>
  )
}