Skip to content

Commit

Permalink
frontend - refacto list
Browse files Browse the repository at this point in the history
  • Loading branch information
@lndrtrbn
lndrtrbn committed Jan 9, 2025
1 parent b057e6c commit ce00dcc
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 180 deletions.
5 changes: 3 additions & 2 deletions ...encti-front/src/private/components/settings/sub_types/fintel_templates/FintelTemplate.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { Suspense } from 'react';
import { graphql, PreloadedQuery, usePreloadedQuery } from 'react-relay';
import { useParams } from 'react-router-dom';
import FintelTemplatePreview from '@components/settings/sub_types/fintel_templates/FintelTemplatePreview';
import { FintelTemplateProvider } from '@components/settings/sub_types/fintel_templates/FintelTemplateContext';
import FintelTemplatePreview from './FintelTemplatePreview';
import { FintelTemplateProvider } from './FintelTemplateContext';
import FintelTemplateContentEditor from './FintelTemplateContentEditor';
import FintelTemplateTabs from './FintelTemplateTabs';
import FintelTemplateHeader from './FintelTemplateHeader';
Expand All @@ -25,6 +25,7 @@ export const fintelTemplateQuery = graphql`
...FintelTemplateHeader_template
...FintelTemplateContentEditor_template
...FintelTemplateWidgetsSidebar_template
...FintelTemplatePreview_template
}
}
`;
Expand Down
50 changes: 39 additions & 11 deletions ...ront/src/private/components/settings/sub_types/fintel_templates/FintelTemplatePreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,52 @@ import React, { CSSProperties, useEffect, useState } from 'react';
import { Paper } from '@mui/material';
import { useTheme } from '@mui/styles';
import Typography from '@mui/material/Typography';
import { useFragment } from 'react-relay';
import { FintelTemplateQuery$data } from './__generated__/FintelTemplateQuery.graphql';
import { FintelTemplateWidgetsSidebar_template$key } from './__generated__/FintelTemplateWidgetsSidebar_template.graphql';
import { graphql, useFragment } from 'react-relay';
import { useFintelTemplateContext } from './FintelTemplateContext';
import { widgetsFragment } from './FintelTemplateWidgetsSidebar';
import type { Theme } from '../../../../../components/Theme';
import { useFormatter } from '../../../../../components/i18n';
import FintelTemplatePreviewForm, { FintelTemplatePreviewFormInputs } from './FintelTemplatePreviewForm';
import useFileFromTemplate from '../../../../../utils/outcome_template/engine/useFileFromTemplate';
import { htmlToPdfReport } from '../../../../../utils/htmlToPdf/htmlToPdf';
import PdfViewer from '../../../../../components/PdfViewer';
import { FintelTemplatePreview_template$key } from './__generated__/FintelTemplatePreview_template.graphql';
import { EngineFintelTemplateQuery$data } from '../../../../../utils/outcome_template/engine/__generated__/EngineFintelTemplateQuery.graphql';

const previewFragment = graphql`
fragment FintelTemplatePreview_template on FintelTemplate {
fintel_template_widgets {
variable_name
widget {
id
type
dataSelection {
instance_id
filters
dynamicFrom
dynamicTo
date_attribute
number
attribute
isTo
columns {
label
variableName
attribute
displayStyle
}
}
}
}
}
`;

interface FintelTemplatePreviewProps {
fintelTemplate: NonNullable<FintelTemplateQuery$data['fintelTemplate']>;
data: FintelTemplatePreview_template$key;
isTabActive: boolean
}

const FintelTemplatePreview = ({
fintelTemplate,
data,
isTabActive,
}: FintelTemplatePreviewProps) => {
const theme = useTheme<Theme>();
Expand All @@ -31,9 +58,9 @@ const FintelTemplatePreview = ({
const [pdf, setPdf] = useState<File>();
const [formValues, setFormValues] = useState<FintelTemplatePreviewFormInputs>();

const { fintel_template_widgets } = useFragment<FintelTemplateWidgetsSidebar_template$key>(
widgetsFragment,
fintelTemplate,
const { fintel_template_widgets } = useFragment<FintelTemplatePreview_template$key>(
previewFragment,
data,
);

const paperStyle: CSSProperties = {
Expand All @@ -48,13 +75,14 @@ const FintelTemplatePreview = ({
maxMarkings: string[],
fileMarkings: string[],
) => {
const htmlTemplate = await buildFileFromTemplate(scoId, maxMarkings, undefined, {
const template = {
template_content: editorValue ?? '',
name: 'Preview',
id: 'preview',
fintel_template_widgets,
instance_filters: null,
});
} as unknown as EngineFintelTemplateQuery$data['fintelTemplate'];
const htmlTemplate = await buildFileFromTemplate(scoId, maxMarkings, undefined, template);
const PDF = await htmlToPdfReport(scoName, htmlTemplate, 'Preview', fileMarkings);
PDF.getBlob((blob) => {
const file = new File([blob], 'Preview.pdf', { type: blob.type });
Expand Down
115 changes: 88 additions & 27 deletions .../src/private/components/settings/sub_types/fintel_templates/FintelTemplateWidgetsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import List from '@mui/material/List';
import IconButton from '@mui/material/IconButton';
import React, { FunctionComponent, MouseEvent, useMemo, useState } from 'react';
import { AddOutlined } from '@mui/icons-material';
import React, { FunctionComponent, MouseEvent } from 'react';
import { Tooltip } from '@mui/material';
import Typography from '@mui/material/Typography';
import { Menu, MenuItem, Tooltip, IconButton, List, Typography } from '@mui/material';
import { useTheme } from '@mui/styles';
import FintelTemplateWidgetDefault from './FintelTemplateWidgetDefault';
import FintelTemplateWidgetAttribute from './FintelTemplateWidgetAttribute';
import { useFormatter } from '../../../../../components/i18n';
import type { Theme } from '../../../../../components/Theme';
import type { Widget } from '../../../../../utils/widget/widget';
import { MESSAGING$ } from '../../../../../relay/environment';
import { useFintelTemplateContext } from './FintelTemplateContext';

export interface FintelTemplateWidget {
variable_name: string
Expand All @@ -18,19 +17,61 @@ export interface FintelTemplateWidget {

interface FintelTemplateWidgetsListProps {
widgets: FintelTemplateWidget[]
handleOpenPopover: (event: MouseEvent<HTMLButtonElement>, lineKey: string) => void
title: string
onCreateWidget?: () => void
onCreateWidget: () => void
onDeleteWidget: (w: FintelTemplateWidget) => void
onUpdateWidget: (w: FintelTemplateWidget) => void
}

const FintelTemplateWidgetsList: FunctionComponent<FintelTemplateWidgetsListProps> = ({
widgets,
handleOpenPopover,
title,
onCreateWidget,
onDeleteWidget,
onUpdateWidget,
}) => {
const { t_i18n } = useFormatter();
const theme = useTheme<Theme>();
const { t_i18n } = useFormatter();
const { editorValue } = useFintelTemplateContext();

const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
const [selectedWidget, setSelectedWidget] = useState<FintelTemplateWidget>();

const isSelectedWidgetUsed = useMemo(() => {
if (!selectedWidget) return false;
return !!editorValue?.includes(`$${selectedWidget.variable_name}`);
}, [selectedWidget, editorValue]);

const openPopover = (e: MouseEvent<HTMLButtonElement>, varName: string) => {
const widget = widgets.find((w) => w.variable_name === varName);
if (widget) {
setSelectedWidget(widget);
setMenuAnchor(e.currentTarget);
}
};

const copyWidgetToClipboard = async () => {
if (selectedWidget) {
await navigator.clipboard.writeText(`$${selectedWidget}`);
MESSAGING$.notifySuccess(t_i18n('Widget copied to clipboard'));
}
setMenuAnchor(null);
setSelectedWidget(undefined);
};

const deleteWidget = () => {
if (selectedWidget) {
onDeleteWidget(selectedWidget);
}
setMenuAnchor(null);
setSelectedWidget(undefined);
};

const updateWidget = () => {
if (selectedWidget) {
onUpdateWidget(selectedWidget);
}
setMenuAnchor(null);
setSelectedWidget(undefined);
};

return (
<>
Expand All @@ -43,19 +84,20 @@ const FintelTemplateWidgetsList: FunctionComponent<FintelTemplateWidgetsListProp
paddingRight: theme.spacing(1),
}}
>
<Typography variant="body2">{title}</Typography>
{onCreateWidget && (
<Tooltip title={t_i18n('Create widget')}>
<IconButton
onClick={onCreateWidget}
color="primary"
size="small"
aria-label={t_i18n('Create widget')}
>
<AddOutlined />
</IconButton>
</Tooltip>
)}
<Typography variant="body2">
{t_i18n('Available template widgets')}
</Typography>

<Tooltip title={t_i18n('Create widget')}>
<IconButton
onClick={onCreateWidget}
color="primary"
size="small"
aria-label={t_i18n('Create widget')}
>
<AddOutlined />
</IconButton>
</Tooltip>
</div>

{widgets.length === 0 && (
Expand All @@ -72,22 +114,41 @@ const FintelTemplateWidgetsList: FunctionComponent<FintelTemplateWidgetsListProp
<FintelTemplateWidgetAttribute
key={variable_name}
widget={widget}
onOpenPopover={handleOpenPopover}
onOpenPopover={openPopover}
variableName={isSelfAttributeWidget
? t_i18n('Attributes of the instance')
: variable_name
}
}
/>
) : (
<FintelTemplateWidgetDefault
key={variable_name}
widgetType={widget.type}
variableName={variable_name}
onOpenPopover={handleOpenPopover}
onOpenPopover={openPopover}
/>
);
})}
</List>

<Menu
anchorEl={menuAnchor}
open={Boolean(menuAnchor)}
onClose={() => setMenuAnchor(null)}
>
<MenuItem onClick={copyWidgetToClipboard}>
{t_i18n('Copy widget to clipboard')}
</MenuItem>
<MenuItem onClick={updateWidget}>
{t_i18n('Update')}
</MenuItem>
<MenuItem
onClick={deleteWidget}
disabled={isSelectedWidgetUsed}
>
{t_i18n('Delete')}
</MenuItem>
</Menu>
</>
);
};
Expand Down
Loading

0 comments on commit ce00dcc

Please sign in to comment.