Skip to content

Commit

Permalink
Add table tab and add image
Browse files Browse the repository at this point in the history
  • Loading branch information
@barshathakuri
barshathakuri committed Jun 13, 2024
1 parent 4643781 commit 051e309
Show file tree
Hide file tree
Showing 6 changed files with 629 additions and 9 deletions.
252 changes: 252 additions & 0 deletions app/components/LeftPaneEntries/TableAndVisualItem/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
import React, { useMemo } from 'react';
import { BsDownload } from 'react-icons/bs';
import {
IoArrowUndoSharp,
IoCheckmark,
IoClose,
IoTrashBinOutline,
} from 'react-icons/io5';

import {
_cs,
isDefined,
} from '@togglecorp/fujs';
import {
Container,
QuickActionButton,
useInputState,
Button,
QuickActionButtonProps,
Tag,
QuickActionLink,
} from '@the-deep/deep-ui';
import { requiredStringCondition } from '@togglecorp/toggle-form';

import ExcerptTextArea from '#components/entry/ExcerptTextArea';
import ExcerptInput from '#components/entry/ExcerptInput';
import {
EntryTagTypeEnum,
LeadPreviewAttachmentType,
} from '#generated/types';

import styles from './styles.css';

interface ExcerptModalProps {
title: string;
excerpt?: string;
onComplete?: (modifiedExcerpt: string | undefined) => void;
}

export function ExcerptModal(props: ExcerptModalProps) {
const {
title,
excerpt: excerptFromProps,
onComplete,
} = props;

const [excerpt, setExcerpt] = useInputState(excerptFromProps);

const handleSubmit = React.useCallback(
() => {
if (onComplete) {
onComplete(excerpt);
}
},
[onComplete, excerpt],
);

return (
<Container
className={styles.excerptModalContainer}
heading={title}
spacing="compact"
footerActions={(
<Button
name={excerpt}
onClick={handleSubmit}
disabled={requiredStringCondition(excerpt) !== undefined}
>
Done
</Button>
)}
>
<ExcerptTextArea
className={styles.excerptTextArea}
name="modified-excerpt"
value={excerpt}
onChange={setExcerpt}
rows={10}
/>
</Container>
);
}

interface TableAndVisualItemProps {
attachmentId: string;
onClick?: (dataId: LeadPreviewAttachmentType['id']) => void;
onApproveButtonClick?: QuickActionButtonProps<string>['onClick'];
onDiscardButtonClick?: QuickActionButtonProps<string>['onClick'];
onEntryDelete?: (entryId: string) => void;
onEntryRestore?: (entryId: string) => void;
className?: string;
disableApproveButton?: boolean;
disableDiscardButton?: boolean;
disableClick?: boolean;
errored?: boolean;
data: LeadPreviewAttachmentType;
isActive?: boolean;
}

function TableAndVisualItem(props: TableAndVisualItemProps) {
const {
className,
attachmentId,
onClick,
onApproveButtonClick,
onDiscardButtonClick,
disableApproveButton,
disableDiscardButton,
disableClick,
onEntryDelete,
onEntryRestore,
deleted,
errored,
stale,
data,
isActive,
} = props;
console.log('isActive', isActive, attachmentId);

const handleClick = React.useCallback(() => {
if (onClick && !disableClick) {
onClick(attachmentId);
}
}, [attachmentId, onClick, disableClick]);

const entryTypeFromLead = useMemo((): EntryTagTypeEnum | undefined => {
if (data?.type === 'IMAGE' || data?.type === 'XLSX') {
return 'IMAGE';
}
return undefined;
}, [data]);

return (
<div
className={styles.clickableArea}
onClick={handleClick}
role="presentation"
>
<Container
className={_cs(
className,
isActive && styles.active && styles.taggedExcerpt,
)}
headerActions={data?.type === 'XLSX' ? (
<QuickActionLink
title="Open external"
to={data?.file?.url || ''}
>
<BsDownload />
</QuickActionLink>
) : undefined}
// heading={isDefined(entryServerId) ? (
// <NumberOutput
// className={styles.attachmentId}
// prefix="#"
// value={Number(entryServerId)}
// />
// ) : (
// <span className={styles.unsavedEntry}>(unsaved entry)</span>
// )}
heading={isActive && (
<span className={styles.unsavedEntry}>(unsaved entry)</span>
)}
headingClassName={styles.heading}
headingSize="extraSmall"
headingSectionClassName={styles.headingSection}
// footerIcons={(
// <>
// {stale && !deleted && !errored && (
// <Tag
// spacing="compact"
// >
// Changed
// </Tag>
// )}
// {deleted && (
// <Tag
// variant="complement2"
// spacing="compact"
// >
// Deleted
// </Tag>
// )}
// {errored && (
// <Tag
// spacing="compact"
// >
// Error
// </Tag>
// )}
// </>
// )}
footerQuickActions={isActive && (
<>
<QuickActionButton
title="Discard changes"
name={attachmentId}
onClick={onDiscardButtonClick}
disabled={disableDiscardButton}
>
<IoClose />
</QuickActionButton>
<QuickActionButton
title="Approve changes"
name={attachmentId}
onClick={onApproveButtonClick}
variant="primary"
disabled={disableApproveButton}
>
<IoCheckmark />
</QuickActionButton>
{/* {deleted ? (
<QuickActionButton
title="Restore entry"
name={attachmentId}
onClick={onEntryRestore}
>
<IoArrowUndoSharp />
</QuickActionButton>
) : (
<QuickActionButton
title="Delete entry"
name={attachmentId}
onClick={onEntryDelete}
>
<IoTrashBinOutline />
</QuickActionButton>
)} */}
</>
)}
contentClassName={styles.content}
>

{isDefined(entryTypeFromLead) && (
<ExcerptInput
// className={styles.taggedExcerpt}
value={data?.type}
leadImageUrl={data?.filePreview?.url ?? undefined}
entryType={entryTypeFromLead}
image={undefined}
imageRaw={undefined}
readOnly
/>
)}

<div className={styles.verticalBorder} />
</Container>
</div>
);
}

export default TableAndVisualItem;
68 changes: 68 additions & 0 deletions app/components/LeftPaneEntries/TableAndVisualItem/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
.tagged-excerpt {
/* NOTE: when user select tagged excerpt, the add button will be visible */
position: relative;
flex-shrink: 0;
border: var(--dui-width-separator-thin) solid var(--dui-color-accent);
background-color: var(--dui-color-foreground);
max-height: 360px;
overflow-y: auto;
font-weight: var(--dui-font-weight-bold);
user-select: none;

.heading-section {
overflow: visible;

.heading {
display: flex;
align-items: baseline;
gap: var(--dui-spacing-medium);

.entry-id {
color: var(--dui-color-accent);
font-weight: var(--dui-font-weight-bold);
}

.unsaved-entry {
color: var(--dui-color-text-description);
font-weight: var(--dui-font-weight-light);
font-style: italic;
}
}
}

.vertical-border {
position: absolute;
top: 0;
right: 0;
background-color: transparent;
width: var(--dui-width-separator-thick);
height: 100%;
}

&.created-from-assisted {
border-color: var(--dui-color-nlp);
}

&.active {
.vertical-border {
background-color: var(--dui-color-accent);
animation: grow var(--dui-duration-transition-medium) ease-in forwards;
}

&.created-from-assisted {
.vertical-border {
background-color: var(--dui-color-nlp);
}
}
}

.content {
.clickable-area {
display: flex;
flex-direction: column;
flex-grow: 1;
cursor: pointer;
overflow-y: auto;
}
}
}
Loading

0 comments on commit 051e309

Please sign in to comment.