Skip to content

Commit e7f9f7c

Browse files
khangaridbBattulga BatAmar
authored andcommitted
feat(deal/ticket/task): added notification color on item
close #1232, close #1209
1 parent d11ff0b commit e7f9f7c

File tree

11 files changed

+70
-53
lines changed

11 files changed

+70
-53
lines changed

src/modules/boards/components/editForm/EditForm.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,11 @@ class EditForm extends React.Component<Props, State> {
109109

110110
if (reactiveFields.includes(name)) {
111111
this.props.saveItem({ [name]: value }, updatedItem => {
112-
this.setState({ updatedItem });
112+
this.setState({ updatedItem }, () => {
113+
if (name === 'stageId') {
114+
this.props.onUpdate(updatedItem, this.state.prevStageId);
115+
}
116+
});
113117
});
114118
}
115119
});

src/modules/boards/components/stage/ItemList.tsx

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1+
import client from 'apolloClient';
2+
import gql from 'graphql-tag';
13
import EmptyState from 'modules/common/components/EmptyState';
24
import routerUtils from 'modules/common/utils/router';
5+
import { mutations as notificationMutations } from 'modules/notifications/graphql';
36
import React from 'react';
47
import { Draggable, Droppable } from 'react-beautiful-dnd';
58
import history from '../../../../browserHistory';
6-
import { DropZone, EmptyContainer, Wrapper } from '../../styles/common';
9+
import {
10+
DropZone,
11+
EmptyContainer,
12+
ItemContainer,
13+
Wrapper
14+
} from '../../styles/common';
715
import { IItem, IOptions } from '../../types';
816

917
type Props = {
@@ -26,12 +34,15 @@ type DraggableContainerProps = {
2634

2735
class DraggableContainer extends React.Component<
2836
DraggableContainerProps,
29-
{ isDragDisabled: boolean }
37+
{ isDragDisabled: boolean; hasNotified: boolean }
3038
> {
3139
constructor(props: DraggableContainerProps) {
3240
super(props);
3341

34-
this.state = { isDragDisabled: false };
42+
this.state = {
43+
isDragDisabled: false,
44+
hasNotified: props.item.hasNotified === false ? false : true
45+
};
3546
}
3647

3748
onItemClick = () => {
@@ -40,10 +51,19 @@ class DraggableContainer extends React.Component<
4051
this.setState({ isDragDisabled: true }, () => {
4152
routerUtils.setParams(history, { itemId: item._id });
4253
});
54+
55+
if (!this.state.hasNotified) {
56+
client.mutate({
57+
mutation: gql(notificationMutations.markAsRead),
58+
variables: {
59+
contentTypeId: item._id
60+
}
61+
});
62+
}
4363
};
4464

4565
beforePopupClose = () => {
46-
this.setState({ isDragDisabled: false });
66+
this.setState({ isDragDisabled: false, hasNotified: true });
4767
};
4868

4969
render() {
@@ -59,16 +79,22 @@ class DraggableContainer extends React.Component<
5979
isDragDisabled={isDragDisabled}
6080
>
6181
{(dragProvided, dragSnapshot) => (
62-
<ItemComponent
63-
key={item._id}
64-
stageId={stageId}
65-
item={item}
82+
<ItemContainer
6683
isDragging={dragSnapshot.isDragging}
67-
onClick={this.onItemClick}
68-
beforePopupClose={this.beforePopupClose}
69-
provided={dragProvided}
70-
options={options}
71-
/>
84+
innerRef={dragProvided.innerRef}
85+
hasNotified={this.state.hasNotified}
86+
{...dragProvided.draggableProps}
87+
{...dragProvided.dragHandleProps}
88+
>
89+
<ItemComponent
90+
key={item._id}
91+
stageId={stageId}
92+
item={item}
93+
onClick={this.onItemClick}
94+
beforePopupClose={this.beforePopupClose}
95+
options={options}
96+
/>
97+
</ItemContainer>
7298
)}
7399
</Draggable>
74100
);

src/modules/boards/styles/common.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,13 @@ export const ItemDate = styled.span`
7373
z-index: 10;
7474
`;
7575

76-
export const ItemContainer = styledTS<{ isDragging?: boolean }>(styled.div)`
76+
export const ItemContainer = styledTS<{
77+
isDragging?: boolean;
78+
hasNotified?: boolean;
79+
}>(styled.div)`
7780
margin-bottom: 8px;
78-
background-color: rgb(255, 255, 255);
81+
background-color: ${props =>
82+
props.hasNotified === false ? colors.bgActive : `rgb(255, 255, 255)`};
7983
box-shadow: ${props =>
8084
props.isDragging
8185
? 'rgba(0, 0, 0, 0.4) 0px 5px 15px 0px'

src/modules/boards/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export interface IItem {
105105
stage?: IStage;
106106
isWatched?: boolean;
107107
priority?: string;
108+
hasNotified?: boolean;
108109
}
109110

110111
export interface IDraggableLocation {

src/modules/deals/components/DealItem.tsx

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import dayjs from 'dayjs';
22
import EditForm from 'modules/boards/containers/editForm/EditForm';
3-
import { ItemContainer, ItemDate } from 'modules/boards/styles/common';
3+
import { ItemDate } from 'modules/boards/styles/common';
44
import { Footer, PriceContainer, Right } from 'modules/boards/styles/item';
55
import { Content, ItemIndicator } from 'modules/boards/styles/stage';
66
import { renderAmount } from 'modules/boards/utils';
@@ -14,10 +14,8 @@ import { IDeal } from '../types';
1414
type Props = {
1515
stageId: string;
1616
item: IDeal;
17-
isDragging: boolean;
18-
provided;
19-
onClick: () => void;
2017
beforePopupClose: () => void;
18+
onClick: () => void;
2119
options?: IOptions;
2220
};
2321

@@ -31,7 +29,7 @@ class DealItem extends React.PureComponent<Props, {}> {
3129
}
3230

3331
renderForm = () => {
34-
const { beforePopupClose, stageId, item, options } = this.props;
32+
const { stageId, item, options, beforePopupClose } = this.props;
3533

3634
return (
3735
<EditForm
@@ -44,17 +42,12 @@ class DealItem extends React.PureComponent<Props, {}> {
4442
};
4543

4644
render() {
47-
const { item, isDragging, provided, onClick } = this.props;
45+
const { item, onClick } = this.props;
4846
const products = (item.products || []).map(p => p.product);
4947
const { customers, companies } = item;
5048

5149
return (
52-
<ItemContainer
53-
isDragging={isDragging}
54-
innerRef={provided.innerRef}
55-
{...provided.draggableProps}
56-
{...provided.dragHandleProps}
57-
>
50+
<>
5851
<Content onClick={onClick}>
5952
<h5>{item.name}</h5>
6053

@@ -103,7 +96,7 @@ class DealItem extends React.PureComponent<Props, {}> {
10396
</Content>
10497

10598
{this.renderForm()}
106-
</ItemContainer>
99+
</>
107100
);
108101
}
109102
}

src/modules/deals/graphql/queries.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const dealFields = `
2626
_id
2727
name
2828
stageId
29+
hasNotified
2930
pipeline {
3031
_id
3132
name

src/modules/notifications/graphql/mutations.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const markAsRead = `
2-
mutation notificationsMarkAsRead( $_ids: [String]) {
3-
notificationsMarkAsRead(_ids: $_ids)
2+
mutation notificationsMarkAsRead( $_ids: [String], $contentTypeId: String) {
3+
notificationsMarkAsRead(_ids: $_ids, contentTypeId: $contentTypeId)
44
}
55
`;
66

src/modules/tasks/components/TaskItem.tsx

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import dayjs from 'dayjs';
22
import EditForm from 'modules/boards/containers/editForm/EditForm';
3-
import { ItemContainer, ItemDate } from 'modules/boards/styles/common';
3+
import { ItemDate } from 'modules/boards/styles/common';
44
import { Footer, PriceContainer, Right } from 'modules/boards/styles/item';
55
import { Content, ItemIndicator } from 'modules/boards/styles/stage';
66
import { IOptions } from 'modules/boards/types';
@@ -12,8 +12,6 @@ import { ITask } from '../types';
1212
type Props = {
1313
stageId: string;
1414
item: ITask;
15-
isDragging: boolean;
16-
provided;
1715
onClick: () => void;
1816
beforePopupClose: () => void;
1917
options?: IOptions;
@@ -42,16 +40,11 @@ class TaskItem extends React.PureComponent<Props, {}> {
4240
};
4341

4442
render() {
45-
const { onClick, item, isDragging, provided } = this.props;
43+
const { onClick, item } = this.props;
4644
const { customers, companies } = item;
4745

4846
return (
49-
<ItemContainer
50-
isDragging={isDragging}
51-
innerRef={provided.innerRef}
52-
{...provided.draggableProps}
53-
{...provided.dragHandleProps}
54-
>
47+
<>
5548
<Content onClick={onClick}>
5649
<h5>
5750
{renderPriority(item.priority)}
@@ -93,7 +86,7 @@ class TaskItem extends React.PureComponent<Props, {}> {
9386
</Footer>
9487
</Content>
9588
{this.renderForm()}
96-
</ItemContainer>
89+
</>
9790
);
9891
}
9992
}

src/modules/tasks/graphql/queries.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const taskFields = `
2626
_id
2727
name
2828
stageId
29+
hasNotified
2930
pipeline {
3031
_id
3132
name

src/modules/tickets/components/TicketItem.tsx

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import dayjs from 'dayjs';
22
import EditForm from 'modules/boards/containers/editForm/EditForm';
3-
import { ItemContainer, ItemDate } from 'modules/boards/styles/common';
3+
import { ItemDate } from 'modules/boards/styles/common';
44
import { Footer, PriceContainer, Right } from 'modules/boards/styles/item';
55
import { Content, ItemIndicator } from 'modules/boards/styles/stage';
66
import { IOptions } from 'modules/boards/types';
@@ -12,8 +12,6 @@ import { ITicket } from '../types';
1212
type Props = {
1313
stageId: string;
1414
item: ITicket;
15-
isDragging: boolean;
16-
provided;
1715
onClick: () => void;
1816
beforePopupClose: () => void;
1917
options?: IOptions;
@@ -41,16 +39,11 @@ class TicketItem extends React.PureComponent<Props, {}> {
4139
};
4240

4341
render() {
44-
const { item, isDragging, provided, onClick } = this.props;
42+
const { item, onClick } = this.props;
4543
const { customers, companies } = item;
4644

4745
return (
48-
<ItemContainer
49-
isDragging={isDragging}
50-
innerRef={provided.innerRef}
51-
{...provided.draggableProps}
52-
{...provided.dragHandleProps}
53-
>
46+
<>
5447
<Content onClick={onClick}>
5548
<h5>
5649
{renderPriority(item.priority)}
@@ -92,7 +85,7 @@ class TicketItem extends React.PureComponent<Props, {}> {
9285
</Footer>
9386
</Content>
9487
{this.renderForm()}
95-
</ItemContainer>
88+
</>
9689
);
9790
}
9891
}

0 commit comments

Comments
 (0)