All files / libs/reporting/custom-reports/views/details/src/lib CustomReportDetailsView.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo } from 'react';

import { AlertBanner, Group, Stack } from '@allshares/studio-design-system';
import { PageContainer } from '@amalia/core/layout/components';
import { useShallowObjectMemo } from '@amalia/ext/react/hooks';
import { useParams } from '@amalia/ext/react-router-dom';
import { toError } from '@amalia/ext/typescript';

import { CustomReportContent } from './content/CustomReportContent';
import { CustomReportEditContextProvider, type CustomReportEditContextInterface } from './CustomReportEditContext';
import { CustomReportEditDrawer } from './drawer/CustomReportEditDrawer';
import { CustomReportEditHeader } from './header/CustomReportEditHeader';
import { useCustomReportEditingState } from './useCustomReportEditingState';
import { useCustomReportRecords } from './useCustomReportRecords';

export const CustomReportDetailsView = memo(function CustomReportDetailsView() {
  const { reportId } = useParams<{ reportId: string }>();

  const {
    customReport,
    setCustomReport,
    customReportError,
    isCustomReportLoading,

    isDirty,
    setDirty,

    canEdit,
    isDrawerOpen,
    toggleDrawerOpen,
  } = useCustomReportEditingState(reportId);

  const {
    page,
    setPage,
    searchText,
    setSearchText,
    pageSize,
    setPageSize,

    customReportContent,
    errorContent,
    isLoadingContent,

    manifestsMap,
    errorManifests,
    isLoadingManifests,

    columns,
  } = useCustomReportRecords(customReport, canEdit);

  const contextValues = useShallowObjectMemo<CustomReportEditContextInterface>({
    customReport: customReport!, // Consumers are not rendered if customReport is null.
    setCustomReport,
    isDirty,
    setDirty,
    isDrawerOpen,
    toggleOpenDrawer: toggleDrawerOpen,
    manifestsMap,
    canEdit,
    isLoading: isCustomReportLoading || isLoadingManifests,
  });

  const firstLevelError = errorManifests ?? customReportError ?? null;

  return (
    <PageContainer showLoadingBar={isCustomReportLoading || isLoadingManifests}>
      <CustomReportEditContextProvider value={contextValues}>
        {!!customReport && (
          <Stack gap={32}>
            <CustomReportEditHeader />

            <Stack gap={16}>
              {!!firstLevelError && (
                <AlertBanner
                  inline
                  withBorder
                  variant="error"
                >
                  {toError(firstLevelError).message}
                </AlertBanner>
              )}

              <Group
                key={customReport.id}
                gap={16}
              >
                <CustomReportContent
                  columns={columns}
                  data={customReportContent}
                  error={errorContent}
                  isReportLoading={isLoadingContent}
                  page={page}
                  pageSize={pageSize}
                  searchValue={searchText}
                  setPage={setPage}
                  setSearchValue={setSearchText}
                  onPageSizeChange={setPageSize}
                />
                <CustomReportEditDrawer />
              </Group>
            </Stack>
          </Stack>
        )}
      </CustomReportEditContextProvider>
    </PageContainer>
  );
});