@ant-design/icons#FilePdfFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#FilePdfFilled.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From condo with MIT License | 4 votes |
|
TicketAnalyticsPage: ITicketAnalyticsPage = () => {
const intl = useIntl()
const PageTitle = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.PageTitle' })
const HeaderButtonTitle = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.HeaderButtonTitle' })
const ViewModeTitle = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.ViewModeTitle' })
const StatusFilterLabel = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.groupByFilter.Status' })
const PropertyFilterLabel = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.groupByFilter.Property' })
const CategoryFilterLabel = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.groupByFilter.Category' })
const UserFilterLabel = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.groupByFilter.User' })
const ResponsibleFilterLabel = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.groupByFilter.Responsible' })
const AllAddresses = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.AllAddresses' })
const ManyAddresses = intl.formatMessage({ id:'pages.condo.analytics.TicketAnalyticsPage.ManyAddresses' })
const AllAddressTitle = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.tableColumns.AllAddresses' })
const SingleAddress = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.SingleAddress' })
const AllCategories = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.AllCategories' })
const AllCategoryClassifiersTitle = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.tableColumns.AllClassifiers' })
const AllExecutorsTitle = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.tableColumns.AllExecutors' })
const AllAssigneesTitle = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.tableColumns.AllAssignees' })
const EmptyCategoryClassifierTitle = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.NullReplaces.CategoryClassifier' })
const EmptyExecutorTitle = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.NullReplaces.Executor' })
const EmptyAssigneeTitle = intl.formatMessage({ id: 'pages.condo.analytics.TicketAnalyticsPage.NullReplaces.Assignee' })
const TableTitle = intl.formatMessage({ id: 'Table' })
const NotImplementedYetMessage = intl.formatMessage({ id: 'NotImplementedYet' })
const PrintTitle = intl.formatMessage({ id: 'Print' })
const ExcelTitle = intl.formatMessage({ id: 'Excel' })
const router = useRouter()
const userOrganization = useOrganization()
const userOrganizationId = get(userOrganization, ['organization', 'id'])
const { isSmall } = useLayoutContext()
const filtersRef = useRef<null | ticketAnalyticsPageFilters>(null)
const mapperInstanceRef = useRef(null)
const ticketLabelsRef = useRef<TicketLabel[]>([])
const [groupTicketsBy, setGroupTicketsBy] = useState<GroupTicketsByTypes>('status')
const [viewMode, setViewMode] = useState<ViewModeTypes>('line')
const [analyticsData, setAnalyticsData] = useState<null | TicketGroupedCounter[]>(null)
const [excelDownloadLink, setExcelDownloadLink] = useState<null | string>(null)
const [ticketType, setTicketType] = useState<TicketSelectTypes>('all')
const [dateFrom, dateTo] = filtersRef.current !== null ? filtersRef.current.range : []
const selectedPeriod = filtersRef.current !== null ? filtersRef.current.range.map(e => e.format(DATE_DISPLAY_FORMAT)).join(' - ') : ''
const selectedAddresses = filtersRef.current !== null ? filtersRef.current.addressList : []
const ticketTypeRef = useRef<TicketSelectTypes>('all')
const { TicketWarningModal, setIsVisible } = useTicketWarningModal(groupTicketsBy)
const nullReplaces = {
categoryClassifier: EmptyCategoryClassifierTitle,
executor: EmptyExecutorTitle,
assignee: EmptyAssigneeTitle,
}
const [loadTicketAnalytics, { loading }] = useLazyQuery(TICKET_ANALYTICS_REPORT_QUERY, {
onError: error => {
console.log(error)
notification.error(error)
},
fetchPolicy: 'network-only',
onCompleted: response => {
const { result: { groups, ticketLabels } } = response
ticketLabelsRef.current = ticketLabels
setAnalyticsData(groups)
},
})
const [exportTicketAnalyticsToExcel, { loading: isXSLXLoading }] = useLazyQuery(EXPORT_TICKET_ANALYTICS_TO_EXCEL, {
onError: error => {
console.log(error)
notification.error(error)
},
fetchPolicy: 'network-only',
onCompleted: response => {
const { result: { link } } = response
setExcelDownloadLink(link)
},
})
const getAnalyticsData = useCallback(() => {
if (filtersRef.current !== null) {
mapperInstanceRef.current = new TicketChart({
line: {
chart: (viewMode, ticketGroupedCounter) => {
const { groupBy } = filterToQuery(
{ filter: filtersRef.current, viewMode, ticketType, mainGroup: groupTicketsBy }
)
const data = getAggregatedData(ticketGroupedCounter, groupBy)
const axisLabels = Array.from(new Set(Object.values(data).flatMap(e => Object.keys(e))))
const legend = Object.keys(data)
const series = []
Object.entries(data).map(([groupBy, dataObj]) => {
series.push({
name: groupBy,
type: viewMode,
symbol: 'none',
stack: groupBy,
data: Object.values(dataObj),
emphasis: {
focus: 'none',
blurScope: 'none',
},
})
})
const axisData = { yAxis: { type: 'value', data: null }, xAxis: { type: 'category', data: axisLabels } }
const tooltip = { trigger: 'axis', axisPointer: { type: 'line' } }
const result = { series, legend, axisData, tooltip }
if (groupBy[0] === 'status') {
result['color'] = ticketLabelsRef.current.map(({ color }) => color)
}
return result
},
table: (viewMode, ticketGroupedCounter, restOptions) => {
const { groupBy } = filterToQuery(
{ filter: filtersRef.current, viewMode, ticketType, mainGroup: groupTicketsBy }
)
const data = getAggregatedData(ticketGroupedCounter, groupBy)
const dataSource = []
const { translations, filters } = restOptions
const tableColumns: TableColumnsType = [
{ title: translations['address'], dataIndex: 'address', key: 'address', sorter: (a, b) => a['address'] - b['address'] },
{
title: translations['date'],
dataIndex: 'date',
key: 'date',
defaultSortOrder: 'descend',
sorter: (a, b) => dayjs(a['date'], DATE_DISPLAY_FORMAT).unix() - dayjs(b['date'], DATE_DISPLAY_FORMAT).unix(),
},
...Object.entries(data).map(([key]) => ({ title: key, dataIndex: key, key, sorter: (a, b) =>a[key] - b[key] })),
]
const uniqueDates = Array.from(new Set(Object.values(data).flatMap(e => Object.keys(e))))
uniqueDates.forEach((date, key) => {
const restTableColumns = {}
Object.keys(data).forEach(ticketType => (restTableColumns[ticketType] = data[ticketType][date]))
let address = translations['allAddresses']
const addressList = get(filters, 'address')
if (addressList && addressList.length) {
address = addressList.join(', ')
}
dataSource.push({ key, address, date, ...restTableColumns })
})
return { dataSource, tableColumns }
},
},
bar: {
chart: (viewMode, ticketGroupedCounter) => {
const { groupBy } = filterToQuery(
{ filter: filtersRef.current, viewMode, ticketType, mainGroup: groupTicketsBy }
)
const data = getAggregatedData(ticketGroupedCounter, groupBy, true)
const series = []
const axisLabels = Object.keys(data.summary)
.sort((firstLabel, secondLabel) => data.summary[firstLabel] - data.summary[secondLabel])
const legend = Object.keys(data)
Object.entries(data).map(([name, dataObj]) => {
const seriesData = []
axisLabels.forEach(axisLabel => {
seriesData.push(dataObj[axisLabel])
})
series.push({
name,
type: viewMode,
symbol: 'none',
stack: 'total',
sampling: 'sum',
large: true,
largeThreshold: 200,
data: seriesData,
emphasis: {
focus: 'self',
blurScope: 'self',
},
})
})
const axisData = { yAxis: { type: 'category', data: axisLabels }, xAxis: { type: 'value', data: null } }
const tooltip = { trigger: 'item', axisPointer: { type: 'line' }, borderColor: '#fff' }
const result = { series, legend, axisData, tooltip }
if (groupBy[0] === 'status') {
result['color'] = ticketLabelsRef.current.map(({ color }) => color)
}
return result
},
table: (viewMode, ticketGroupedCounter, restOptions) => {
const { groupBy } = filterToQuery(
{ filter: filtersRef.current, viewMode, ticketType, mainGroup: groupTicketsBy }
)
const data = getAggregatedData(ticketGroupedCounter, groupTicketsBy === 'status' ? groupBy.reverse() : groupBy)
const { translations, filters } = restOptions
const dataSource = []
const tableColumns: TableColumnsType = [
{ title: translations['address'], dataIndex: 'address', key: 'address', sorter: (a, b) => a['address'] - b['address'] },
...Object.entries(data).map(([key]) => ({ title: key, dataIndex: key, key, sorter: (a, b) => a[key] - b[key] })),
]
if (TICKET_REPORT_TABLE_MAIN_GROUP.includes(groupBy[1])) {
tableColumns.unshift({
title: translations[groupBy[1]],
dataIndex: groupBy[1],
key: groupBy[1],
sorter: (a, b) => a[groupBy[1]] - b[groupBy[1]],
})
}
const restTableColumns = {}
const addressList = get(filters, 'address', [])
const aggregateSummary = [addressList, get(filters, groupBy[1], [])]
.every(filterList => filterList.length === 0)
if (aggregateSummary) {
Object.entries(data).forEach((rowEntry) => {
const [ticketType, dataObj] = rowEntry
const counts = Object.values(dataObj) as number[]
restTableColumns[ticketType] = sum(counts)
})
dataSource.push({
key: 0,
address: translations['allAddresses'],
categoryClassifier: translations['allCategoryClassifiers'],
executor: translations['allExecutors'],
assignee: translations['allAssignees'],
...restTableColumns,
})
} else {
const mainAggregation = TICKET_REPORT_TABLE_MAIN_GROUP.includes(groupBy[1]) ? get(filters, groupBy[1], []) : null
// TODO(sitozzz): find clean solution for aggregation by 2 id_in fields
if (mainAggregation === null) {
addressList.forEach((address, key) => {
const tableRow = { key, address }
Object.entries(data).forEach(rowEntry => {
const [ticketType, dataObj] = rowEntry
const counts = Object.entries(dataObj)
.filter(obj => obj[0] === address).map(e => e[1]) as number[]
tableRow[ticketType] = sum(counts)
})
dataSource.push(tableRow)
})
} else {
mainAggregation.forEach((aggregateField, key) => {
const tableRow = { key, [groupBy[1]]: aggregateField }
tableRow['address'] = addressList.length
? addressList.join(', ')
: translations['allAddresses']
Object.entries(data).forEach(rowEntry => {
const [ticketType, dataObj] = rowEntry
const counts = Object.entries(dataObj)
.filter(obj => obj[0] === aggregateField).map(e => e[1]) as number[]
tableRow[ticketType] = sum(counts)
})
dataSource.push(tableRow)
})
}
}
return { dataSource, tableColumns }
},
},
pie: {
chart: (viewMode, ticketGroupedCounter) => {
const { groupBy } = filterToQuery(
{ filter: filtersRef.current, viewMode, ticketType, mainGroup: groupTicketsBy }
)
const data = getAggregatedData(ticketGroupedCounter, groupBy)
const series = []
const legend = [...new Set(Object.values(data).flatMap(e => Object.keys(e)))]
Object.entries(data).forEach(([label, groupObject]) => {
const chartData = Object.entries(groupObject)
.map(([name, value]) => ({ name, value }))
if (chartData.map(({ value }) => value).some(value => value > 0)) {
series.push({
name: label,
data: chartData,
selectedMode: false,
type: viewMode,
radius: [60, 120],
center: ['25%', '50%'],
symbol: 'none',
emphasis: {
focus: 'self',
blurScope: 'self',
},
labelLine: { show: false },
label: {
show: true,
fontSize: fontSizes.content,
overflow: 'none',
formatter: [
'{value|{b}} {percent|{d} %}',
].join('\n'),
rich: {
value: {
fontSize: fontSizes.content,
align: 'left',
width: 100,
},
percent: {
align: 'left',
fontWeight: 700,
fontSize: fontSizes.content,
width: 40,
},
},
},
labelLayout: (chart) => {
const { dataIndex, seriesIndex } = chart
const elementYOffset = 25 * dataIndex
const yOffset = 75 + 250 * Math.floor(seriesIndex / 2) + 10 + elementYOffset
return {
x: 340,
y: yOffset,
align: 'left',
verticalAlign: 'top',
}
},
})
}
})
return { series, legend, color: ticketLabelsRef.current.map(({ color }) => color) }
},
table: (viewMode, ticketGroupedCounter, restOptions) => {
const { groupBy } = filterToQuery(
{ filter: filtersRef.current, viewMode, ticketType, mainGroup: groupTicketsBy }
)
const data = getAggregatedData(ticketGroupedCounter, groupBy.reverse())
const { translations, filters } = restOptions
const dataSource = []
const tableColumns: TableColumnsType = [
{ title: translations['address'], dataIndex: 'address', key: 'address', sorter: (a, b) => a['address'] - b['address'] },
...Object.entries(data).map(([key]) => ({ title: key, dataIndex: key, key, sorter: (a, b) => a[key] - b[key] })),
]
if (TICKET_REPORT_TABLE_MAIN_GROUP.includes(groupBy[1])) {
tableColumns.unshift({
title: translations[groupBy[1]],
dataIndex: groupBy[1],
key: groupBy[1],
sorter: (a, b) => a[groupBy[1]] - b[groupBy[1]],
})
}
const restTableColumns = {}
const addressList = get(filters, 'address', [])
const aggregateSummary = [addressList, get(filters, groupBy[1], [])]
.every(filterList => filterList.length === 0)
if (aggregateSummary) {
const totalCount = Object.values(data)
.reduce((prev, curr) => prev + sum(Object.values(curr)), 0)
Object.entries(data).forEach((rowEntry) => {
const [ticketType, dataObj] = rowEntry
const counts = Object.values(dataObj) as number[]
restTableColumns[ticketType] = totalCount > 0
? ((sum(counts) / totalCount) * 100).toFixed(2) + ' %'
: totalCount
})
dataSource.push({
key: 0,
address: translations['allAddresses'],
categoryClassifier: translations['allCategoryClassifiers'],
executor: translations['allExecutors'],
assignee: translations['allAssignees'],
...restTableColumns,
})
} else {
const totalCounts = {}
Object.values(data).forEach((dataObj) => {
Object.entries(dataObj).forEach(([aggregationField, count]) => {
if (get(totalCounts, aggregationField, false)) {
totalCounts[aggregationField] += count
} else {
totalCounts[aggregationField] = count
}
})
})
const mainAggregation = TICKET_REPORT_TABLE_MAIN_GROUP.includes(groupBy[1]) ? get(filters, groupBy[1], []) : null
// TODO(sitozzz): find clean solution for aggregation by 2 id_in fields
if (mainAggregation === null) {
addressList.forEach((address, key) => {
const tableRow = { key, address }
Object.entries(data).forEach(rowEntry => {
const [ticketType, dataObj] = rowEntry
const counts = Object.entries(dataObj)
.filter(obj => obj[0] === address).map(e => e[1]) as number[]
const totalPropertyCount = sum(counts)
tableRow[ticketType] = totalCounts[address] > 0
? (totalPropertyCount / totalCounts[address] * 100).toFixed(2) + ' %'
: totalCounts[address]
})
dataSource.push(tableRow)
})
} else {
mainAggregation.forEach((aggregateField, key) => {
const tableRow = { key, [groupBy[1]]: aggregateField }
tableRow['address'] = addressList.length
? addressList.join(', ')
: translations['allAddresses']
Object.entries(data).forEach(rowEntry => {
const [ticketType, dataObj] = rowEntry
const counts = Object.entries(dataObj)
.filter(obj => obj[0] === aggregateField).map(e => e[1]) as number[]
const totalPropertyCount = sum(counts)
tableRow[ticketType] = totalCounts[aggregateField] > 0
? (totalPropertyCount / totalCounts[aggregateField] * 100).toFixed(2) + ' %'
: totalCounts[aggregateField]
})
dataSource.push(tableRow)
})
}
}
return { dataSource, tableColumns }
},
},
})
const { AND, groupBy } = filterToQuery(
{ filter: filtersRef.current, viewMode, ticketType: ticketTypeRef.current, mainGroup: groupTicketsBy }
)
const where = { organization: { id: userOrganizationId }, AND }
loadTicketAnalytics({ variables: { data: { groupBy, where, nullReplaces } } })
}
}, [userOrganizationId, viewMode, groupTicketsBy])
useEffect(() => {
const queryParams = getQueryParams()
setGroupTicketsBy(get(queryParams, 'groupTicketsBy', 'status'))
setViewMode(get(queryParams, 'viewMode', 'line'))
}, [])
useEffect(() => {
ticketTypeRef.current = ticketType
setAnalyticsData(null)
getAnalyticsData()
}, [groupTicketsBy, userOrganizationId, ticketType, viewMode])
// Download excel file when file link was created
useEffect(() => {
if (excelDownloadLink !== null && !isXSLXLoading) {
const link = document.createElement('a')
link.href = excelDownloadLink
link.target = '_blank'
link.hidden = true
document.body.appendChild(link)
link.click()
link.parentNode.removeChild(link)
setExcelDownloadLink(null)
}
}, [excelDownloadLink, isXSLXLoading])
const printPdf = useCallback(
() => {
let currentFilter
switch (groupTicketsBy) {
case 'property':
currentFilter = filtersRef.current.addressList
break
case 'categoryClassifier':
currentFilter = filtersRef.current.classifierList
break
case 'executor':
currentFilter = filtersRef.current.executorList
break
case 'assignee':
currentFilter = filtersRef.current.responsibleList
break
default:
currentFilter = null
}
const uniqueDataSets = Array.from(new Set(analyticsData.map(ticketCounter => ticketCounter[groupTicketsBy])))
const isPdfAvailable = currentFilter === null
|| uniqueDataSets.length < MAX_FILTERED_ELEMENTS
|| (currentFilter.length !== 0 && currentFilter.length < MAX_FILTERED_ELEMENTS)
if (isPdfAvailable) {
router.push(router.route + '/pdf?' + qs.stringify({
dateFrom: dateFrom.toISOString(),
dateTo: dateTo.toISOString(),
groupBy: groupTicketsBy,
ticketType,
viewMode,
addressList: JSON.stringify(filtersRef.current.addressList),
executorList: JSON.stringify(filtersRef.current.executorList),
assigneeList: JSON.stringify(filtersRef.current.responsibleList),
categoryClassifierList: JSON.stringify(filtersRef.current.classifierList),
specification: filtersRef.current.specification,
}))
} else {
setIsVisible(true)
}
},
[ticketType, viewMode, dateFrom, dateTo, groupTicketsBy, userOrganizationId, analyticsData],
)
const downloadExcel = useCallback(
() => {
const { AND, groupBy } = filterToQuery({ filter: filtersRef.current, viewMode, ticketType, mainGroup: groupTicketsBy })
const where = { organization: { id: userOrganizationId }, AND }
const filters = filtersRef.current
const translates: ExportTicketAnalyticsToExcelTranslates = {
property: filters.addressList.length
? filters.addressList.map(({ value }) => value).join('@')
: AllAddressTitle,
categoryClassifier: filters.classifierList.length
? filters.classifierList.map(({ value }) => value).join('@')
: AllCategoryClassifiersTitle,
executor: filters.executorList.length
? filters.executorList.map(({ value }) => value).join('@')
: AllExecutorsTitle,
assignee: filters.responsibleList.length
? filters.responsibleList.map(({ value }) => value).join('@')
: AllAssigneesTitle,
}
exportTicketAnalyticsToExcel({ variables: { data: { groupBy, where, translates, nullReplaces } } })
},
[ticketType, viewMode, dateFrom, dateTo, groupTicketsBy, userOrganizationId],
)
const onFilterChange: ITicketAnalyticsPageFilterProps['onChange'] = useCallback((filters) => {
setAnalyticsData(null)
filtersRef.current = filters
getAnalyticsData()
}, [viewMode, userOrganizationId, groupTicketsBy, dateFrom, dateTo])
let addressFilterTitle = selectedAddresses.length === 0 ? AllAddresses : `${SingleAddress} «${selectedAddresses[0].value}»`
if (selectedAddresses.length > 1) {
addressFilterTitle = ManyAddresses
}
const onTabChange = useCallback((key: GroupTicketsByTypes) => {
setGroupTicketsBy((prevState) => {
if (prevState !== key) {
setAnalyticsData(null)
return key
} else {
return prevState
}
})
if (key === 'status') {
setViewMode('line')
} else {
setViewMode('bar')
}
}, [viewMode, groupTicketsBy])
const isControlsDisabled = loading || isXSLXLoading || filtersRef.current === null
return <>
<Head>
<title>{PageTitle}</title>
</Head>
<PageWrapper>
<PageContent>
<Row gutter={[0, 40]}>
<Col xs={24} sm={18}>
<PageHeader title={<Typography.Title>{PageTitle}</Typography.Title>} />
</Col>
<Col span={6} hidden={isSmall}>
<Tooltip title={NotImplementedYetMessage}>
<Button icon={<PlusCircleFilled />} type='sberPrimary' secondary>{HeaderButtonTitle}</Button>
</Tooltip>
</Col>
</Row>
<Row gutter={[0, 24]} align={'top'} justify={'space-between'}>
<Col span={24}>
<Tabs
css={tabsCss}
defaultActiveKey='status'
activeKey={groupTicketsBy}
onChange={onTabChange}
>
<Tabs.TabPane key='status' tab={StatusFilterLabel} />
<Tabs.TabPane key='property' tab={PropertyFilterLabel} />
<Tabs.TabPane key='categoryClassifier' tab={CategoryFilterLabel} />
<Tabs.TabPane key='executor' tab={UserFilterLabel} />
<Tabs.TabPane key='assignee' tab={ResponsibleFilterLabel} />
</Tabs>
</Col>
<Col span={24}>
<Row justify={'space-between'} gutter={[0, 20]}>
<Col span={24}>
<TicketAnalyticsPageFilter
onChange={onFilterChange}
viewMode={viewMode}
groupTicketsBy={groupTicketsBy}
/>
</Col>
<Col span={24}>
<Divider/>
</Col>
<Col xs={24} lg={16}>
<Typography.Title level={3}>
{ViewModeTitle} {selectedPeriod} {addressFilterTitle} {AllCategories}
</Typography.Title>
</Col>
<Col xs={12} lg={3}>
<RadioGroupWithIcon
value={viewMode}
size='small'
buttonStyle='outline'
onChange={(e) => setViewMode(e.target.value)}
>
{groupTicketsBy === 'status' && (
<Radio.Button value='line'>
<LinearChartIcon height={32} width={24} />
</Radio.Button>
)}
<Radio.Button value='bar'>
<BarChartIcon height={32} width={24} />
</Radio.Button>
{groupTicketsBy !== 'status' && (
<Radio.Button value='pie'>
<PieChartIcon height={32} width={24} />
</Radio.Button>
)}
</RadioGroupWithIcon>
</Col>
<Col
xs={8}
hidden={!isSmall}
>
<TicketTypeSelect
ticketType={ticketType}
setTicketType={setTicketType}
loading={loading}
/>
</Col>
</Row>
</Col>
<Col span={24}>
{useMemo(() => (
<TicketChartView
data={analyticsData}
loading={loading}
viewMode={viewMode}
mainGroup={groupTicketsBy}
chartConfig={{
animationEnabled: true,
chartOptions: { renderer: 'svg', height: viewMode === 'line' ? 440 : 'auto' },
}}
mapperInstance={mapperInstanceRef.current}
>
<Col
style={{ position: 'absolute', top: 0, right: 0, minWidth: '132px' }}
hidden={isSmall}
>
<TicketTypeSelect
ticketType={ticketType}
setTicketType={setTicketType}
loading={loading}
/>
</Col>
</TicketChartView>
), [analyticsData, loading, viewMode, ticketType, userOrganizationId, groupTicketsBy, isSmall])}
</Col>
<Col span={24}>
<Row gutter={[0, 20]}>
<Col span={24}>
<Typography.Title level={4}>{TableTitle}</Typography.Title>
</Col>
<Col span={24}>
{useMemo(() => (
<TicketListView
data={analyticsData}
loading={loading}
viewMode={viewMode}
filters={filtersRef.current}
mapperInstance={mapperInstanceRef.current}
/>
), [analyticsData, loading, viewMode, ticketType, userOrganizationId, groupTicketsBy])}
</Col>
</Row>
</Col>
<ActionBar hidden={isSmall}>
<Button disabled={isControlsDisabled || isEmpty(analyticsData)} onClick={printPdf} icon={<FilePdfFilled />} type='sberPrimary' secondary>
{PrintTitle}
</Button>
<Button disabled={isControlsDisabled || isEmpty(analyticsData)} onClick={downloadExcel} loading={isXSLXLoading} icon={<EditFilled />} type='sberPrimary' secondary>
{ExcelTitle}
</Button>
</ActionBar>
</Row>
<TicketWarningModal />
</PageContent>
</PageWrapper>
</>
}
Example #2
| Source File: index.tsx From condo with MIT License | 4 votes |
|
TicketPageContent = ({ organization, employee, TicketContent }) => {
const intl = useIntl()
const ServerErrorMessage = intl.formatMessage({ id: 'ServerError' })
const UpdateMessage = intl.formatMessage({ id: 'Edit' })
const PrintMessage = intl.formatMessage({ id: 'Print' })
const SourceMessage = intl.formatMessage({ id: 'pages.condo.ticket.field.Source' })
const TicketAuthorMessage = intl.formatMessage({ id: 'Author' })
const EmergencyMessage = intl.formatMessage({ id: 'Emergency' })
const PaidMessage = intl.formatMessage({ id: 'Paid' })
const WarrantyMessage = intl.formatMessage({ id: 'Warranty' })
const ReturnedMessage = intl.formatMessage({ id: 'Returned' })
const ChangedMessage = intl.formatMessage({ id: 'Changed' })
const TimeHasPassedMessage = intl.formatMessage({ id: 'TimeHasPassed' })
const DaysShortMessage = intl.formatMessage({ id: 'DaysShort' })
const HoursShortMessage = intl.formatMessage({ id: 'HoursShort' })
const MinutesShortMessage = intl.formatMessage({ id: 'MinutesShort' })
const LessThanMinuteMessage = intl.formatMessage({ id: 'LessThanMinute' })
const ResidentCannotReadTicketMessage = intl.formatMessage({ id: 'pages.condo.ticket.title.ResidentCannotReadTicket' })
const router = useRouter()
const auth = useAuth() as { user: { id: string } }
const user = get(auth, 'user')
const { isSmall } = useLayoutContext()
// NOTE: cast `string | string[]` to `string`
const { query: { id } } = router as { query: { [key: string]: string } }
const { refetch: refetchTicket, loading, obj: ticket, error } = Ticket.useObject({
where: { id: id },
}, {
fetchPolicy: 'network-only',
})
// TODO(antonal): get rid of separate GraphQL query for TicketChanges
const ticketChangesResult = TicketChange.useObjects({
where: { ticket: { id } },
// TODO(antonal): fix "Module not found: Can't resolve '@condo/schema'"
// sortBy: [SortTicketChangesBy.CreatedAtDesc],
// @ts-ignore
sortBy: ['createdAt_DESC'],
}, {
fetchPolicy: 'network-only',
})
const { objs: comments, refetch: refetchComments } = TicketComment.useObjects({
where: { ticket: { id } },
// @ts-ignore
sortBy: ['createdAt_DESC'],
})
const commentsIds = useMemo(() => map(comments, 'id'), [comments])
const { objs: ticketCommentFiles, refetch: refetchCommentFiles } = TicketCommentFile.useObjects({
where: { ticketComment: { id_in: commentsIds } },
// @ts-ignore
sortBy: ['createdAt_DESC'],
})
const commentsWithFiles = useMemo(() => comments.map(comment => {
comment.files = ticketCommentFiles.filter(file => file.ticketComment.id === comment.id)
return comment
}), [comments, ticketCommentFiles])
const updateComment = TicketComment.useUpdate({}, () => {
refetchComments()
refetchCommentFiles()
})
const deleteComment = TicketComment.useSoftDelete({}, () => {
refetchComments()
})
const createCommentAction = TicketComment.useCreate({
ticket: id,
user: auth.user && auth.user.id,
}, () => Promise.resolve())
const { obj: ticketCommentsTime, refetch: refetchTicketCommentsTime } = TicketCommentsTime.useObject({
where: {
ticket: { id: id },
},
})
const {
obj: userTicketCommentReadTime, refetch: refetchUserTicketCommentReadTime, loading: loadingUserTicketCommentReadTime,
} = UserTicketCommentReadTime.useObject({
where: {
user: { id: user.id },
ticket: { id: id },
},
})
const createUserTicketCommentReadTime = UserTicketCommentReadTime.useCreate({
user: user.id,
ticket: id,
}, () => refetchUserTicketCommentReadTime())
const updateUserTicketCommentReadTime = UserTicketCommentReadTime.useUpdate({
user: user.id,
ticket: id,
}, () => refetchUserTicketCommentReadTime())
const canShareTickets = get(employee, 'role.canShareTickets')
const TicketTitleMessage = useMemo(() => getTicketTitleMessage(intl, ticket), [ticket])
const TicketCreationDate = useMemo(() => getTicketCreateMessage(intl, ticket), [ticket])
const refetchCommentsWithFiles = useCallback(async () => {
await refetchComments()
await refetchCommentFiles()
await refetchTicketCommentsTime()
await refetchUserTicketCommentReadTime()
}, [refetchCommentFiles, refetchComments, refetchTicketCommentsTime, refetchUserTicketCommentReadTime])
const actionsFor = useCallback(comment => {
const isAuthor = comment.user.id === auth.user.id
const isAdmin = get(auth, ['user', 'isAdmin'])
return {
updateAction: isAdmin || isAuthor ? updateComment : null,
deleteAction: isAdmin || isAuthor ? deleteComment : null,
}
}, [auth, deleteComment, updateComment])
useEffect(() => {
const handler = setInterval(refetchCommentsWithFiles, COMMENT_RE_FETCH_INTERVAL)
return () => {
clearInterval(handler)
}
})
const isEmergency = get(ticket, 'isEmergency')
const isPaid = get(ticket, 'isPaid')
const isWarranty = get(ticket, 'isWarranty')
const statusReopenedCounter = get(ticket, 'statusReopenedCounter')
const handleTicketStatusChanged = () => {
refetchTicket()
ticketChangesResult.refetch()
}
const ticketStatusType = get(ticket, ['status', 'type'])
const disabledEditButton = useMemo(() => ticketStatusType === CLOSED_STATUS_TYPE, [ticketStatusType])
const statusUpdatedAt = get(ticket, 'statusUpdatedAt')
const isResidentTicket = useMemo(() => get(ticket, ['createdBy', 'type']) === RESIDENT, [ticket])
const canReadByResident = useMemo(() => get(ticket, 'canReadByResident'), [ticket])
const canCreateComments = useMemo(() => get(auth, ['user', 'isAdmin']) || get(employee, ['role', 'canManageTicketComments']),
[auth, employee])
const getTimeSinceCreation = useCallback(() => {
const diffInMinutes = dayjs().diff(dayjs(statusUpdatedAt), 'minutes')
const daysHavePassed = dayjs.duration(diffInMinutes, 'minutes').format('D')
const hoursHavePassed = dayjs.duration(diffInMinutes, 'minutes').format('H')
const minutesHavePassed = dayjs.duration(diffInMinutes, 'minutes').format('m')
const timeSinceCreation = compact([
Number(daysHavePassed) > 0 && DaysShortMessage.replace('${days}', daysHavePassed),
Number(hoursHavePassed) > 0 && HoursShortMessage.replace('${hours}', hoursHavePassed),
Number(minutesHavePassed) > 0 && MinutesShortMessage.replace('${minutes}', minutesHavePassed),
])
if (isEmpty(timeSinceCreation)) {
return LessThanMinuteMessage
}
return timeSinceCreation.join(' ')
}, [DaysShortMessage, HoursShortMessage, LessThanMinuteMessage, MinutesShortMessage, statusUpdatedAt])
if (!ticket) {
return (
<LoadingOrErrorPage title={TicketTitleMessage} loading={loading} error={error ? ServerErrorMessage : null}/>
)
}
return (
<>
<Head>
<title>{TicketTitleMessage}</title>
</Head>
<PageWrapper>
<PageContent>
<Row gutter={[0, 40]}>
<Col lg={16} xs={24}>
<Row gutter={[0, 40]}>
<Col span={24}>
<Row gutter={[0, 40]}>
<Col lg={18} xs={24}>
<Row gutter={[0, 20]}>
<Col span={24}>
<Typography.Title style={{ margin: 0 }} level={1}>{TicketTitleMessage}</Typography.Title>
</Col>
<Col span={24}>
<Row>
<Col span={24}>
<Typography.Text style={TICKET_CREATE_INFO_TEXT_STYLE}>
<Typography.Text style={TICKET_CREATE_INFO_TEXT_STYLE} type='secondary'>{TicketCreationDate}, {TicketAuthorMessage} </Typography.Text>
<UserNameField user={get(ticket, ['createdBy'])}>
{({ name, postfix }) => (
<Typography.Text style={TICKET_CREATE_INFO_TEXT_STYLE}>
{name}
{postfix && <Typography.Text type='secondary' ellipsis> {postfix}</Typography.Text>}
</Typography.Text>
)}
</UserNameField>
</Typography.Text>
</Col>
<Col span={24}>
<Typography.Text type='secondary' style={TICKET_CREATE_INFO_TEXT_STYLE}>
{SourceMessage} — {get(ticket, ['source', 'name'], '').toLowerCase()}
</Typography.Text>
</Col>
<Col span={24}>
{
!isResidentTicket && !canReadByResident && (
<Typography.Text type='secondary' style={TICKET_CREATE_INFO_TEXT_STYLE}>
<FormattedMessage
id={'pages.condo.ticket.title.CanReadByResident'}
values={{
canReadByResident: (
<Typography.Text type={'danger'}>
{ResidentCannotReadTicketMessage}
</Typography.Text>
),
}}
/>
</Typography.Text>
)
}
</Col>
</Row>
</Col>
</Row>
</Col>
<Col lg={6} xs={24}>
<Row justify={isSmall ? 'center' : 'end'} gutter={[0, 20]}>
<Col span={24}>
<TicketStatusSelect
organization={organization}
employee={employee}
ticket={ticket}
onUpdate={handleTicketStatusChanged}
loading={loading}
data-cy={'ticket__status-select'}
/>
</Col>
{
statusUpdatedAt && (
<Col>
<Typography.Paragraph style={TICKET_UPDATE_INFO_TEXT_STYLE}>
{ChangedMessage}: {dayjs(statusUpdatedAt).format('DD.MM.YY, HH:mm')}
</Typography.Paragraph>
<Typography.Paragraph style={TICKET_UPDATE_INFO_TEXT_STYLE} type={'secondary'}>
{TimeHasPassedMessage.replace('${time}', getTimeSinceCreation())}
</Typography.Paragraph>
</Col>
)
}
</Row>
</Col>
</Row>
<Space direction={'horizontal'} style={{ marginTop: '1.6em ' }}>
{isEmergency && <TicketTag color={TICKET_TYPE_TAG_COLORS.emergency}>{EmergencyMessage.toLowerCase()}</TicketTag>}
{isPaid && <TicketTag color={TICKET_TYPE_TAG_COLORS.paid}>{PaidMessage.toLowerCase()}</TicketTag>}
{isWarranty && <TicketTag color={TICKET_TYPE_TAG_COLORS.warranty}>{WarrantyMessage.toLowerCase()}</TicketTag>}
{
statusReopenedCounter > 0 && (
<TicketTag color={TICKET_TYPE_TAG_COLORS.returned}>
{ReturnedMessage.toLowerCase()} {statusReopenedCounter > 1 && `(${statusReopenedCounter})`}
</TicketTag>
)
}
</Space>
</Col>
<TicketContent ticket={ticket}/>
<ActionBar>
<Link href={`/ticket/${ticket.id}/update`}>
<Button
disabled={disabledEditButton}
color={'green'}
type={'sberDefaultGradient'}
secondary
icon={<EditFilled />}
data-cy={'ticket__update-link'}
>
{UpdateMessage}
</Button>
</Link>
{
!isSmall && (
<Button
type={'sberDefaultGradient'}
icon={<FilePdfFilled />}
href={`/ticket/${ticket.id}/pdf`}
target={'_blank'}
secondary
>
{PrintMessage}
</Button>
)
}
{
canShareTickets
? <ShareTicketModal
organization={organization}
date={get(ticket, 'createdAt')}
number={get(ticket, 'number')}
details={get(ticket, 'details')}
id={id}
locale={get(organization, 'country')}
/>
: null
}
</ActionBar>
<TicketChanges
loading={get(ticketChangesResult, 'loading')}
items={get(ticketChangesResult, 'objs')}
total={get(ticketChangesResult, 'count')}
/>
</Row>
</Col>
<Col lg={7} xs={24} offset={isSmall ? 0 : 1}>
<Affix offsetTop={40}>
<Comments
ticketCommentsTime={ticketCommentsTime}
userTicketCommentReadTime={userTicketCommentReadTime}
createUserTicketCommentReadTime={createUserTicketCommentReadTime}
updateUserTicketCommentReadTime={updateUserTicketCommentReadTime}
loadingUserTicketCommentReadTime={loadingUserTicketCommentReadTime}
FileModel={TicketCommentFile}
fileModelRelationField={'ticketComment'}
ticket={ticket}
// @ts-ignore
createAction={createCommentAction}
updateAction={updateComment}
refetchComments={refetchCommentsWithFiles}
comments={commentsWithFiles}
canCreateComments={canCreateComments}
actionsFor={actionsFor}
/>
</Affix>
</Col>
</Row>
</PageContent>
</PageWrapper>
</>
)
}
