Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: alertdialog story #974

Merged
merged 3 commits into from
Jan 31, 2023
Merged

feat: alertdialog story #974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5e4577
feat: alertdialog story
StereoPT Jan 30, 2023
90f9915
feat: alertdialog fixes
StereoPT Jan 31, 2023
c95f635
fix: alertDialog primitive component normalization
jpvsalvador Jan 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 24 additions & 16 deletions frontend/src/components/Board/Card/DeleteCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
} from '@/components/Primitives/AlertDialog';
import Flex from '@/components/Primitives/Flex';
import Text from '@/components/Primitives/Text';
import useCards from '@/hooks/useCards';

interface DeleteProps {
Expand Down Expand Up @@ -42,21 +49,22 @@ const DeleteCard = ({
};

return (
<AlertCustomDialog
defaultOpen
addEllipsis={cardTitle.length > 100}
cancelText="Cancel"
confirmText="Delete card"
handleClose={handleClose}
handleConfirm={handleDelete}
title="Delete card"
variant="danger"
text={
<>
Do you really want to delete <span>{cardTitle}</span> card?
</>
}
/>
<AlertDialog defaultOpen>
<AlertDialogContent title="Delete card">
<Text>Do you really want to delete the following card?</Text>
<Text ellipsis fontWeight="bold">
{cardTitle}
</Text>
<Flex gap="16" justify="end" css={{ mt: '$24' }}>
<AlertDialogCancel variant="primaryOutline" onClick={handleClose}>
Cancel
</AlertDialogCancel>
<AlertDialogAction variant="danger" onClick={handleDelete}>
Delete card
</AlertDialogAction>
</Flex>
</AlertDialogContent>
</AlertDialog>
);
};

Expand Down
129 changes: 45 additions & 84 deletions frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,19 @@
import Icon from '@/components/icons/Icon';
import {
DialogTitleContainer,
StyledDialogTitle,
} from '@/components/Primitives/AlertCustomDialog/styles';
// TODO: AlertDialog handle is weird!
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
} from '@/components/Primitives/AlertDialog';
import Flex from '@/components/Primitives/Flex';
import Input from '@/components/Primitives/Input';
import Separator from '@/components/Primitives/Separator';
import { SchemaChangeColumnName } from '@/schema/schemaChangeColumnName';
import { ReactNode, useRef } from 'react';
import { useRef } from 'react';
import { joiResolver } from '@hookform/resolvers/joi';
import { FormProvider, useForm, useWatch } from 'react-hook-form';
import { styled } from '@/styles/stitches/stitches.config';
import Button from '@/components/Primitives/Button';
import useColumn from '@/hooks/useColumn';
import CardType from '@/types/card/card';
import { ButtonsContainer } from '@/components/Board/Settings/styles';
import Text from '@/components/Primitives/Text';
import TextArea from '@/components/Primitives/TextArea';

Expand All @@ -31,7 +25,6 @@ type UpdateColumnNameProps = {
cards: CardType[];
isOpen: boolean;
setIsOpen: (value: boolean) => void;
children?: ReactNode;
cardText?: string;
isDefaultText?: boolean;
type: string;
Expand All @@ -48,7 +41,6 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
cards,
isOpen,
setIsOpen,
children,
isDefaultText,
type,
}) => {
Expand Down Expand Up @@ -101,87 +93,56 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({

return (
<AlertDialog open={isOpen}>
{children}
<AlertDialogContent handleClose={handleClose}>
<DialogTitleContainer css={{ px: '$24' }} align="center" justify="between">
<StyledDialogTitle heading="4">
{type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
</StyledDialogTitle>

<AlertDialogCancel
asChild
isIcon
css={{ '@hover': { '&:hover': { cursor: 'pointer' } } }}
onClick={handleClose}
>
<Flex css={{ '& svg': { color: '$primaryBase' } }}>
<Icon css={{ width: '$24', height: '$24' }} name="close" />
</Flex>
</AlertDialogCancel>
</DialogTitleContainer>
<AlertDialogContent
title={type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
handleClose={handleClose}
>
<FormProvider {...methods}>
<StyledForm
id="form_dialog"
onSubmit={methods.handleSubmit(({ title, text }) => {
handleConfirm(title, text);
})}
direction="column"
gap="16"
>
<Flex direction="column" css={{ width: '100%' }}>
<Separator css={{ backgroundColor: '$primary100' }} />
<Flex direction="column" css={{ width: '100%', px: '$32', pt: '$24' }}>
{type === 'ColumnName' ? (
<Input
forceState
id="title"
maxChars="15"
placeholder="Column name"
state="default"
type="text"
showCount
currentValue={columnName}
/>
) : (
<>
<Text size="md" color="primary400" fontWeight="regular">
This default text will be visible as placeholder when someone is creating a
new card.
</Text>
<TextArea
floatPlaceholder={false}
id="text"
placeholder={columnTextCard || 'Write your comment here...'}
/>
</>
)}
</Flex>
<ButtonsContainer
gap={24}
align="center"
justify="end"
css={{
backgroundColor: '$white',
borderRadius: '$12',
border: 'none',
}}
{type === 'ColumnName' ? (
<Input
forceState
id="title"
maxChars="15"
placeholder="Column name"
state="default"
type="text"
showCount
currentValue={columnName}
css={{ mb: '0' }}
/>
) : (
<>
<Text size="md" color="primary400" fontWeight="regular">
This default text will be visible as placeholder when someone is creating a new
card.
</Text>
<TextArea
floatPlaceholder={false}
id="text"
placeholder={columnTextCard || 'Write your comment here...'}
/>
</>
)}
<Flex gap="16" justify="end">
<AlertDialogCancel variant="primaryOutline" onClick={handleClose}>
Cancel
</AlertDialogCancel>
<AlertDialogAction
variant="primary"
form="form_dialog"
ref={submitBtnRef}
type="submit"
>
<Button
css={{ margin: '0 $24 0 auto', padding: '$16 $24' }}
variant="primaryOutline"
onClick={handleClose}
type="button"
>
Cancel
</Button>

<Button
css={{ marginRight: '$32', padding: '$16 $24' }}
variant="primary"
form="form_dialog"
ref={submitBtnRef}
>
{type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
</Button>
</ButtonsContainer>
{type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
</AlertDialogAction>
</Flex>
</StyledForm>
</FormProvider>
Expand Down
74 changes: 38 additions & 36 deletions frontend/src/components/Board/Settings/partials/Columns/DeleteButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import Flex from '@/components/Primitives/Flex';
import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
import { AlertDialogTrigger } from '@radix-ui/react-alert-dialog';
import Text from '@/components/Primitives/Text';
// import { AlertDialogTrigger } from '@radix-ui/react-alert-dialog';
import Tooltip from '@/components/Primitives/Tooltip';
import Icon from '@/components/icons/Icon';
import { editColumnsState } from '@/store/board/atoms/board.atom';
import { useRecoilState } from 'recoil';
import { DisabledDeleteColumnButton } from './DisabledDeleteButton';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogTrigger,
} from '@/components/Primitives/AlertDialog';
import Button from '@/components/Primitives/Button';

interface Props {
columnTitle: string;
Expand All @@ -22,40 +29,35 @@ const DeleteColumnButton = ({ columnTitle, columnIndex, disableDeleteColumn }: P
};

return (
<Flex direction="column">
<Flex css={{ alignItems: 'center' }}>
<Flex align="center" css={{ ml: '$24' }} gap="24">
{disableDeleteColumn ? (
<DisabledDeleteColumnButton />
) : (
<AlertCustomDialog
cancelText="Cancel"
confirmText="Delete"
css={undefined}
defaultOpen={false}
handleConfirm={handleDeleteColumn}
text={`Do you really want to delete the column ${columnTitle}?`}
title="Delete column"
>
<Tooltip content="Delete column">
<AlertDialogTrigger asChild>
<Flex pointer>
<Icon
name="trash-alt"
css={{
color: '$primary400',
mt: '$16',
size: '$20',
}}
/>
</Flex>
</AlertDialogTrigger>
</Tooltip>
</AlertCustomDialog>
)}
<AlertDialog>
<Tooltip
content={
disableDeleteColumn ? 'Your board must have at least one column.' : 'Delete column'
}
>
<AlertDialogTrigger asChild onMouseDown={(e) => e.preventDefault()}>
<Button isIcon disabled={disableDeleteColumn}>
<Icon
name="trash-alt"
css={{
mt: '$16',
size: '$20',
}}
/>
</Button>
</AlertDialogTrigger>
</Tooltip>

<AlertDialogContent title="Delete column">
<Text>
Do you really want to delete the column <Text fontWeight="bold">{columnTitle}</Text>?
</Text>
<Flex gap="16" justify="end" css={{ mt: '$24' }}>
<AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleDeleteColumn}>Delete</AlertDialogAction>
</Flex>
</Flex>
</Flex>
</AlertDialogContent>
</AlertDialog>
);
};

Expand Down
42 changes: 27 additions & 15 deletions frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import Icon from '@/components/icons/Icon';
import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
import { AlertDialogTrigger } from '@/components/Primitives/AlertDialog';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogTrigger,
} from '@/components/Primitives/AlertDialog';
import Button from '@/components/Primitives/Button';
import Flex from '@/components/Primitives/Flex';
import Text from '@/components/Primitives/Text';
import useCards from '@/hooks/useCards';

type Props = {
Expand All @@ -11,25 +18,30 @@ type Props = {
const AlertMergeIntoMain: React.FC<Props> = ({ boardId, socketId }) => {
const { mergeBoard } = useCards();

const handleMergeClick = () => {
mergeBoard.mutate({ subBoardId: boardId, socketId });
};

return (
<AlertCustomDialog
cancelText="Cancel"
confirmText="Merge into main board"
defaultOpen={false}
text="If you merge your sub-team's board into the main board it can not be edited anymore afterwards. Are you sure you want to merge it?"
title="Merge board into main board"
variant="primary"
handleConfirm={() => {
mergeBoard.mutate({ subBoardId: boardId, socketId });
}}
>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button size="sm" variant="primaryOutline">
<Button variant="primaryOutline" size="sm">
Merge into main board
<Icon name="merge" />
</Button>
</AlertDialogTrigger>
</AlertCustomDialog>

<AlertDialogContent title="Merge board into main board">
<Text>
If you merge your sub-team&apos;s board into the main board it can not be edited anymore
afterwards. Are you sure you want to merge it?
</Text>
<Flex gap="16" justify="end" css={{ mt: '$24' }}>
<AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleMergeClick}>Merge into main board</AlertDialogAction>
</Flex>
</AlertDialogContent>
</AlertDialog>
);
};

Expand Down
Loading