feat(deal/ticket/task): added notification color on item

khangaridb · Battulga BatAmar · commit e7f9f7cc3477 · 2019-08-29T17:48:33.000+08:00
close #1232, close #1209
diff --git a/src/modules/boards/components/editForm/EditForm.tsx b/src/modules/boards/components/editForm/EditForm.tsx
@@ -109,7 +109,11 @@ class EditForm extends React.Component<Props, State> {
 
       if (reactiveFields.includes(name)) {
         this.props.saveItem({ [name]: value }, updatedItem => {
-          this.setState({ updatedItem });
+          this.setState({ updatedItem }, () => {
+            if (name === 'stageId') {
+              this.props.onUpdate(updatedItem, this.state.prevStageId);
+            }
+          });
         });
       }
     });
diff --git a/src/modules/boards/components/stage/ItemList.tsx b/src/modules/boards/components/stage/ItemList.tsx
@@ -1,9 +1,17 @@
+import client from 'apolloClient';
+import gql from 'graphql-tag';
 import EmptyState from 'modules/common/components/EmptyState';
 import routerUtils from 'modules/common/utils/router';
+import { mutations as notificationMutations } from 'modules/notifications/graphql';
 import React from 'react';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import history from '../../../../browserHistory';
-import { DropZone, EmptyContainer, Wrapper } from '../../styles/common';
+import {
+  DropZone,
+  EmptyContainer,
+  ItemContainer,
+  Wrapper
+} from '../../styles/common';
 import { IItem, IOptions } from '../../types';
 
 type Props = {
@@ -26,12 +34,15 @@ type DraggableContainerProps = {
 
 class DraggableContainer extends React.Component<
   DraggableContainerProps,
-  { isDragDisabled: boolean }
+  { isDragDisabled: boolean; hasNotified: boolean }
 > {
   constructor(props: DraggableContainerProps) {
     super(props);
 
-    this.state = { isDragDisabled: false };
+    this.state = {
+      isDragDisabled: false,
+      hasNotified: props.item.hasNotified === false ? false : true
+    };
   }
 
   onItemClick = () => {
@@ -40,10 +51,19 @@ class DraggableContainer extends React.Component<
     this.setState({ isDragDisabled: true }, () => {
       routerUtils.setParams(history, { itemId: item._id });
     });
+
+    if (!this.state.hasNotified) {
+      client.mutate({
+        mutation: gql(notificationMutations.markAsRead),
+        variables: {
+          contentTypeId: item._id
+        }
+      });
+    }
   };
 
   beforePopupClose = () => {
-    this.setState({ isDragDisabled: false });
+    this.setState({ isDragDisabled: false, hasNotified: true });
   };
 
   render() {
@@ -59,16 +79,22 @@ class DraggableContainer extends React.Component<
         isDragDisabled={isDragDisabled}
       >
         {(dragProvided, dragSnapshot) => (
-          <ItemComponent
-            key={item._id}
-            stageId={stageId}
-            item={item}
+          <ItemContainer
             isDragging={dragSnapshot.isDragging}
-            onClick={this.onItemClick}
-            beforePopupClose={this.beforePopupClose}
-            provided={dragProvided}
-            options={options}
-          />
+            innerRef={dragProvided.innerRef}
+            hasNotified={this.state.hasNotified}
+            {...dragProvided.draggableProps}
+            {...dragProvided.dragHandleProps}
+          >
+            <ItemComponent
+              key={item._id}
+              stageId={stageId}
+              item={item}
+              onClick={this.onItemClick}
+              beforePopupClose={this.beforePopupClose}
+              options={options}
+            />
+          </ItemContainer>
         )}
       </Draggable>
     );
diff --git a/src/modules/boards/styles/common.ts b/src/modules/boards/styles/common.ts
@@ -73,9 +73,13 @@ export const ItemDate = styled.span`
   z-index: 10;
 `;
 
-export const ItemContainer = styledTS<{ isDragging?: boolean }>(styled.div)`
+export const ItemContainer = styledTS<{
+  isDragging?: boolean;
+  hasNotified?: boolean;
+}>(styled.div)`
   margin-bottom: 8px;
-  background-color: rgb(255, 255, 255);
+  background-color: ${props =>
+    props.hasNotified === false ? colors.bgActive : `rgb(255, 255, 255)`};
   box-shadow: ${props =>
     props.isDragging
       ? 'rgba(0, 0, 0, 0.4) 0px 5px 15px 0px'
diff --git a/src/modules/boards/types.ts b/src/modules/boards/types.ts
@@ -105,6 +105,7 @@ export interface IItem {
   stage?: IStage;
   isWatched?: boolean;
   priority?: string;
+  hasNotified?: boolean;
 }
 
 export interface IDraggableLocation {
diff --git a/src/modules/deals/components/DealItem.tsx b/src/modules/deals/components/DealItem.tsx
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import EditForm from 'modules/boards/containers/editForm/EditForm';
-import { ItemContainer, ItemDate } from 'modules/boards/styles/common';
+import { ItemDate } from 'modules/boards/styles/common';
 import { Footer, PriceContainer, Right } from 'modules/boards/styles/item';
 import { Content, ItemIndicator } from 'modules/boards/styles/stage';
 import { renderAmount } from 'modules/boards/utils';
@@ -14,10 +14,8 @@ import { IDeal } from '../types';
 type Props = {
   stageId: string;
   item: IDeal;
-  isDragging: boolean;
-  provided;
-  onClick: () => void;
   beforePopupClose: () => void;
+  onClick: () => void;
   options?: IOptions;
 };
 
@@ -31,7 +29,7 @@ class DealItem extends React.PureComponent<Props, {}> {
   }
 
   renderForm = () => {
-    const { beforePopupClose, stageId, item, options } = this.props;
+    const { stageId, item, options, beforePopupClose } = this.props;
 
     return (
       <EditForm
@@ -44,17 +42,12 @@ class DealItem extends React.PureComponent<Props, {}> {
   };
 
   render() {
-    const { item, isDragging, provided, onClick } = this.props;
+    const { item, onClick } = this.props;
     const products = (item.products || []).map(p => p.product);
     const { customers, companies } = item;
 
     return (
-      <ItemContainer
-        isDragging={isDragging}
-        innerRef={provided.innerRef}
-        {...provided.draggableProps}
-        {...provided.dragHandleProps}
-      >
+      <>
         <Content onClick={onClick}>
           <h5>{item.name}</h5>
 
@@ -103,7 +96,7 @@ class DealItem extends React.PureComponent<Props, {}> {
         </Content>
 
         {this.renderForm()}
-      </ItemContainer>
+      </>
     );
   }
 }
diff --git a/src/modules/deals/graphql/queries.ts b/src/modules/deals/graphql/queries.ts
@@ -26,6 +26,7 @@ const dealFields = `
   _id
   name
   stageId
+  hasNotified
   pipeline {
     _id
     name
diff --git a/src/modules/notifications/graphql/mutations.ts b/src/modules/notifications/graphql/mutations.ts
@@ -1,6 +1,6 @@
 const markAsRead = `
-  mutation notificationsMarkAsRead( $_ids: [String]) {
-    notificationsMarkAsRead(_ids: $_ids)
+  mutation notificationsMarkAsRead( $_ids: [String], $contentTypeId: String) {
+    notificationsMarkAsRead(_ids: $_ids, contentTypeId: $contentTypeId)
   }
 `;
 
diff --git a/src/modules/tasks/components/TaskItem.tsx b/src/modules/tasks/components/TaskItem.tsx
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import EditForm from 'modules/boards/containers/editForm/EditForm';
-import { ItemContainer, ItemDate } from 'modules/boards/styles/common';
+import { ItemDate } from 'modules/boards/styles/common';
 import { Footer, PriceContainer, Right } from 'modules/boards/styles/item';
 import { Content, ItemIndicator } from 'modules/boards/styles/stage';
 import { IOptions } from 'modules/boards/types';
@@ -12,8 +12,6 @@ import { ITask } from '../types';
 type Props = {
   stageId: string;
   item: ITask;
-  isDragging: boolean;
-  provided;
   onClick: () => void;
   beforePopupClose: () => void;
   options?: IOptions;
@@ -42,16 +40,11 @@ class TaskItem extends React.PureComponent<Props, {}> {
   };
 
   render() {
-    const { onClick, item, isDragging, provided } = this.props;
+    const { onClick, item } = this.props;
     const { customers, companies } = item;
 
     return (
-      <ItemContainer
-        isDragging={isDragging}
-        innerRef={provided.innerRef}
-        {...provided.draggableProps}
-        {...provided.dragHandleProps}
-      >
+      <>
         <Content onClick={onClick}>
           <h5>
             {renderPriority(item.priority)}
@@ -93,7 +86,7 @@ class TaskItem extends React.PureComponent<Props, {}> {
           </Footer>
         </Content>
         {this.renderForm()}
-      </ItemContainer>
+      </>
     );
   }
 }
diff --git a/src/modules/tasks/graphql/queries.ts b/src/modules/tasks/graphql/queries.ts
@@ -26,6 +26,7 @@ const taskFields = `
   _id
   name
   stageId
+  hasNotified
   pipeline {
     _id
     name
diff --git a/src/modules/tickets/components/TicketItem.tsx b/src/modules/tickets/components/TicketItem.tsx
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import EditForm from 'modules/boards/containers/editForm/EditForm';
-import { ItemContainer, ItemDate } from 'modules/boards/styles/common';
+import { ItemDate } from 'modules/boards/styles/common';
 import { Footer, PriceContainer, Right } from 'modules/boards/styles/item';
 import { Content, ItemIndicator } from 'modules/boards/styles/stage';
 import { IOptions } from 'modules/boards/types';
@@ -12,8 +12,6 @@ import { ITicket } from '../types';
 type Props = {
   stageId: string;
   item: ITicket;
-  isDragging: boolean;
-  provided;
   onClick: () => void;
   beforePopupClose: () => void;
   options?: IOptions;
@@ -41,16 +39,11 @@ class TicketItem extends React.PureComponent<Props, {}> {
   };
 
   render() {
-    const { item, isDragging, provided, onClick } = this.props;
+    const { item, onClick } = this.props;
     const { customers, companies } = item;
 
     return (
-      <ItemContainer
-        isDragging={isDragging}
-        innerRef={provided.innerRef}
-        {...provided.draggableProps}
-        {...provided.dragHandleProps}
-      >
+      <>
         <Content onClick={onClick}>
           <h5>
             {renderPriority(item.priority)}
@@ -92,7 +85,7 @@ class TicketItem extends React.PureComponent<Props, {}> {
           </Footer>
         </Content>
         {this.renderForm()}
-      </ItemContainer>
+      </>
     );
   }
 }
diff --git a/src/modules/tickets/graphql/queries.ts b/src/modules/tickets/graphql/queries.ts
@@ -28,6 +28,7 @@ const ticketFields = `
   _id
   name
   stageId
+  hasNotified
   pipeline {
     _id
     name

Original file line number	Diff line number	Diff line change
`@@ -105,6 +105,7 @@ export interface IItem {`
`105`	`105`	`stage?: IStage;`
`106`	`106`	`isWatched?: boolean;`
`107`	`107`	`priority?: string;`
	`108`	`+ hasNotified?: boolean;`
`108`	`109`	`}`
`109`	`110`
`110`	`111`	`export interface IDraggableLocation {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	const markAsRead = `
`2`		`- mutation notificationsMarkAsRead( $_ids: [String]) {`
`3`		`- notificationsMarkAsRead(_ids: $_ids)`
	`2`	`+ mutation notificationsMarkAsRead( $_ids: [String], $contentTypeId: String) {`
	`3`	`+ notificationsMarkAsRead(_ids: $_ids, contentTypeId: $contentTypeId)`
`4`	`4`	`}`
`5`	`5`	`;
`6`	`6`