Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feedback revisions: extract header into separate component and put pr…
Browse files Browse the repository at this point in the history
…eview back into progress and planning files
atGit2021 committed Dec 4, 2024

Verified

This commit was signed with the committer’s verified signature.
pawanjay176 Pawan Dhananjay
1 parent f228303 commit 79a3ea9
Showing 4 changed files with 90 additions and 59 deletions.
17 changes: 0 additions & 17 deletions src/components/Preview.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useMutation } from '@apollo/client';
import { Stack, Typography } from '@mui/material';
import { Typography } from '@mui/material';
import { entries } from '@seedcompany/common';
import { pick } from 'lodash';
import { makeStyles } from 'tss-react/mui';
@@ -12,17 +12,15 @@ import {
displayMethodology,
StyleProps,
} from '~/common';
import { Feature } from '~/components/Feature';
import { Preview } from '~/components/Preview';
import { DefinedFileCard } from '../../../../components/DefinedFileCard';
import { useDialog } from '../../../../components/Dialog';
import { DialogForm } from '../../../../components/Dialog/DialogForm';
import { FileActionsContextProvider } from '../../../../components/files/FileActions';
import { HandleUploadCompletedFunction } from '../../../../components/files/hooks';
import { EnumField, EnumOption } from '../../../../components/form';
import { PnPValidationIcon } from '../../../ProgressReports/PnpValidation/PnpValidationIcon';
import { UploadLanguageEngagementPnpDocument as UploadPnp } from '../../Files';
import { EngagementPlanningSpreadsheetFragment } from './PlanningSpreadsheet.graphql';
import { PlanningSpreadsheetHeader } from './PlanningSpreadsheetHeader';

const useStyles = makeStyles()(({ spacing, typography }) => ({
section: {
@@ -59,41 +57,7 @@ export const PlanningSpreadsheet = ({ engagement, ...rest }: Props) => {
disableIcon
disablePreview={true}
onUpload={setUploading}
header={
<Stack
sx={{
mt: -1,
flexDirection: 'row',
gap: 1,
alignItems: 'center',
}}
>
<Typography variant="h4">Planning Spreadsheet</Typography>
{engagement.pnp.value && (
<>
<Preview file={engagement.pnp.value} />
<Feature
flag="pnp-validation"
match={true}
sx={{
display: 'inherit',
flexDirection: 'inherit',
gap: 'inherit',
}}
>
{engagement.pnpExtractionResult && (
<PnPValidationIcon
file={engagement.pnp.value}
result={engagement.pnpExtractionResult}
engagement={engagement}
size="small"
/>
)}
</Feature>
</>
)}
</Stack>
}
header={<PlanningSpreadsheetHeader engagement={engagement} />}
/>
{upload && (
<DialogForm<{ methodology?: Methodology }>
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { Preview as PreviewIcon } from '@mui/icons-material';
import { IconButton, Stack, Tooltip, Typography } from '@mui/material';
import { StyleProps } from '~/common';
import { Feature } from '~/components/Feature';
import {
NonDirectoryActionItem as File,
useFileActions,
} from '~/components/files/FileActions';
import { PnPValidationIcon } from '../../../ProgressReports/PnpValidation/PnpValidationIcon';
import { EngagementPlanningSpreadsheetFragment } from './PlanningSpreadsheet.graphql';

interface PlanningSpreadsheetHeaderProps extends StyleProps {
engagement: EngagementPlanningSpreadsheetFragment;
}

export const PlanningSpreadsheetHeader = ({
engagement,
}: PlanningSpreadsheetHeaderProps) => (
<Stack
sx={{
mt: -1,
flexDirection: 'row',
gap: 1,
alignItems: 'center',
}}
>
<Typography variant="h4">Planning Spreadsheet</Typography>
{engagement.pnp.value && (
<>
<Preview file={engagement.pnp.value} />
<Feature
flag="pnp-validation"
match={true}
sx={{
display: 'inherit',
flexDirection: 'inherit',
gap: 'inherit',
}}
>
{engagement.pnpExtractionResult && (
<PnPValidationIcon
file={engagement.pnp.value}
result={engagement.pnpExtractionResult}
engagement={engagement}
size="small"
/>
)}
</Feature>
</>
)}
</Stack>
);

export const Preview = ({ file }: { file: File }) => {
const { openFilePreview } = useFileActions();
return (
<Tooltip title="Preview">
<IconButton onClick={() => openFilePreview(file)} size="small">
<PreviewIcon />
</IconButton>
</Tooltip>
);
};
27 changes: 24 additions & 3 deletions src/scenes/ProgressReports/Detail/ProgressReportCard.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
import { useMutation } from '@apollo/client';
import { CircularProgress, Stack, Typography } from '@mui/material';
import { Preview } from '~/components/Preview';
import { Preview as PreviewIcon } from '@mui/icons-material';
import {
CircularProgress,
IconButton,
Stack,
Tooltip,
Typography,
} from '@mui/material';
import {
DefinedFileCard,
DefinedFileCardProps,
} from '../../../components/DefinedFileCard';
import { Feature } from '../../../components/Feature';
import { FileActionsContextProvider } from '../../../components/files/FileActions';
import {
NonDirectoryActionItem as File,
FileActionsContextProvider,
useFileActions,
} from '../../../components/files/FileActions';
import { UploadPeriodicReportFileDocument } from '../../../components/PeriodicReports/Upload/UpdatePeriodicReport.graphql';
import { PnPReextractIconButton } from '../PnpValidation/PnPReextractIconButton';
import { PnPValidationIcon } from '../PnpValidation/PnpValidationIcon';
@@ -111,3 +121,14 @@ export const ProgressReportCard = ({ progressReport, ...rest }: Props) => {
</FileActionsContextProvider>
);
};

export const Preview = ({ file }: { file: File }) => {
const { openFilePreview } = useFileActions();
return (
<Tooltip title="Preview">
<IconButton onClick={() => openFilePreview(file)} size="small">
<PreviewIcon />
</IconButton>
</Tooltip>
);
};

0 comments on commit 79a3ea9

Please sign in to comment.