fix(cards): comment

client-portal/modules/card/components/Detail.tsx

@@ -83,7 +83,9 @@ export default class CardDetail extends React.Component<
                 />
                 <div>
                   <CommentContent>
-                    <h5>{`${createdUser?.firstName} ${createdUser?.lastName}`}</h5>
+                    <h5>
+                      {renderUserFullName(createdUser)}
+                    </h5>
                     <div
                       className="comment"
                       dangerouslySetInnerHTML={{ __html: comment.content }}

client-portal/modules/card/graphql/queries.ts

@@ -125,13 +125,12 @@ const clientPortalComments = `
       content
       createdUser {
         _id
+        avatar
+        firstName
+        fullName
+        lastName
         email
         username
-        details {
-          firstName
-          lastName
-          fullName
-        }
       }
       createdAt
       userType

client-portal/modules/main/containers/notifications/List.tsx

@@ -1,6 +1,5 @@
-import { IUser, NotificationsQueryResponse } from "../../../types";
-import { gql, useMutation, useQuery } from "@apollo/client";
-
+import { IUser, NotificationsQueryResponse } from '../../../types';
+import { gql, useMutation, useQuery } from '@apollo/client';
 import Alert from "../../../utils/Alert";
 import NotificationList from "../../components/notifications/List";
 import React from "react";
@@ -84,8 +83,8 @@ function NotificationsContainer(props: Props) {
   const markAsRead = (ids: string[]) => {
     markAsReadMutaion({
       variables: {
-        ids,
-      },
+        ids
+      }
     });
   };
 
@@ -109,9 +108,9 @@ function NotificationsContainer(props: Props) {
       skip: !props.currentUser,
       variables: {
         page: 1,
-        perPage: 10,
+        perPage: 10
       },
-      fetchPolicy: "network-only",
+      fetchPolicy: 'network-only'
     }
   );
 
@@ -135,7 +134,7 @@ function NotificationsContainer(props: Props) {
     markAsRead,
     showNotifications,
     markAllAsRead,
-    refetch,
+    refetch
   };
 
   return <NotificationList {...updatedProps} />;

packages/plugin-clientportal-api/src/graphql/resolvers/comment.ts

@@ -32,7 +32,9 @@ export default {
         _id: user._id,
         avatar: details.avatar,
         firstName: details.firstName,
-        lastName: details.lastName
+        lastName: details.lastName,
+        fullName: details.fullName,
+        email: user.email
       };
     }
 
@@ -43,8 +45,10 @@ export default {
     return {
       _id: cpUser._id,
       avatar: cpUser.avatar,
+      fullName: `${cpUser.firstName} ${cpUser.lastName}`,
       firstName: cpUser.firstName,
-      lastName: cpUser.lastName
+      lastName: cpUser.lastName,
+      email: cpUser.email
     };
   }
 };

packages/plugin-clientportal-api/src/graphql/schema/clientPortalUser.ts

@@ -49,6 +49,7 @@ type VerificationRequest {
     _id: String!
     createdAt: Date
     modifiedAt: Date
+    fullName: String
     firstName: String
     lastName: String
     phone: String

packages/plugin-clientportal-api/src/graphql/schema/comment.ts

@@ -8,7 +8,7 @@ export const types = `
     userType: String,
     content: String
 
-    createdUser: User
+    createdUser: ClientPortalUser
     createdAt: Date
   }
 `;

packages/ui-cards/src/boards/components/editForm/Actions.tsx

@@ -15,7 +15,7 @@ import { TAG_TYPES } from '@erxes/ui-tags/src/constants';
 import TaggerPopover from '@erxes/ui-tags/src/components/TaggerPopover';
 import Tags from '@erxes/ui/src/components/Tags';
 import Watch from '../../containers/editForm/Watch';
-import Comment from '../../../comment/components/Comment';
+import Comment from '../../../comment/containers/Comment';
 import { loadDynamicComponent, __ } from '@erxes/ui/src/utils';
 import { isEnabled } from '@erxes/ui/src/utils/core';
 import PrintActionButton from './PrintDocumentBtn';

packages/ui-cards/src/comment/components/Comment.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Button from '@erxes/ui/src/components/Button';
 import Icon from '@erxes/ui/src/components/Icon';
 import Modal from 'react-bootstrap/Modal';
-import { __, readFile } from 'coreui/utils';
+import { __, readFile, renderFullName } from 'coreui/utils';
 import {
   SpaceFormsWrapper,
   CommentWrapper,
@@ -11,101 +11,118 @@ import {
   CommentContent
 } from '@erxes/ui-settings/src/styles';
 import { ColorButton } from '../../boards/styles/common';
-import { gql, useQuery, useMutation } from '@apollo/client';
 import dayjs from 'dayjs';
-import { queries, mutations } from '../graphql/';
+import { IUser } from '@erxes/ui/src/auth/types';
+import { IClientPortalComment, ICommentCreatedUser } from '../types';
 
-function Comment(item) {
-  const typeId = item.item._id;
-  const type = item.item.stage.type;
+type Props = {
+  currentUser: IUser;
+  clientPortalComments: IClientPortalComment[];
+  remove: (_id: string) => void;
+};
 
-  const { loading, data = {} as any } = useQuery(
-    gql(queries.clientPortalComments),
-    {
-      variables: { typeId: typeId, type: type },
-      fetchPolicy: 'network-only',
-      notifyOnNetworkStatusChange: true
-    }
-  );
-  const [clientPortalCommentsRemove] = useMutation(
-    gql(mutations.clientPortalCommentsRemove)
-  );
+type State = {
+  show: boolean;
+};
 
-  const clientPortalComments = data ? data.clientPortalComments || [] : [];
-  const [show, setShow] = useState(false);
-  const handleClose = () => setShow(false);
-  const handleShow = () => setShow(true);
+class Comment extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
 
-  return (
-    <>
-      <ColorButton onClick={handleShow}>
-        <Icon icon="comment-alt-message" />
-        {__('Comment')}
-      </ColorButton>
+    this.state = {
+      show: false
+    };
+  }
 
-      <Modal
-        centered
-        show={show}
-        onHide={handleClose}
-        backdrop="static"
-        keyboard={false}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{__('Comments')}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <SpaceFormsWrapper>
-            <CommentWrapper>
-              {clientPortalComments.map(comment => {
-                const { createdUser = {} } = comment;
+  render() {
+    const { currentUser, clientPortalComments = [], remove } = this.props;
 
-                return (
-                  <TicketComment key={comment._id}>
-                    <CreatedUser>
-                      <img
-                        src={readFile(
-                          createdUser && createdUser.avatar
-                            ? createdUser?.avatar
-                            : '/static/avatar-colored.svg'
+    const handleClose = () => this.setState({ show: false });
+    const handleShow = () => this.setState({ show: true });
+
+    return (
+      <>
+        <ColorButton onClick={() => handleShow()}>
+          <Icon icon="comment-alt-message" />
+          {__('Comment')}
+        </ColorButton>
+
+        <Modal
+          centered={true}
+          show={this.state.show}
+          onHide={() => handleClose()}
+          backdrop="static"
+          keyboard={false}
+        >
+          <Modal.Header closeButton={true}>
+            <Modal.Title>{__('Comments')}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <SpaceFormsWrapper>
+              <CommentWrapper>
+                {clientPortalComments.map(comment => {
+                  const { createdUser = {} as ICommentCreatedUser } = comment;
+
+                  return (
+                    <TicketComment key={comment._id}>
+                      <CreatedUser>
+                        <img
+                          src={readFile(
+                            createdUser && createdUser.avatar
+                              ? createdUser.avatar
+                              : '/images/avatar-colored.svg'
+                          )}
+                          alt="profile"
+                        />
+                        <div>
+                          <CommentContent>
+                            <h5>
+                              {createdUser.fullName
+                                ? createdUser.fullName
+                                : renderFullName(createdUser)}
+                            </h5>
+                            <div
+                              className="comment"
+                              dangerouslySetInnerHTML={{
+                                __html: comment.content
+                              }}
+                            />
+                          </CommentContent>
+                          <span>
+                            Created at{' '}
+                            {dayjs(comment.createdAt).format(
+                              'YYYY-MM-DD HH:mm'
+                            )}
+                          </span>
+                        </div>
+                        {createdUser?._id === currentUser._id && (
+                          <div className="actions">
+                            <span onClick={() => remove(comment._id)}>
+                              Delete
+                            </span>
+                          </div>
                         )}
-                        alt="profile"
-                      />
-                      <div>
-                        <CommentContent>
-                          <h5>{`${createdUser?.firstName} ${createdUser?.lastName}`}</h5>
-                          <div
-                            className="comment"
-                            dangerouslySetInnerHTML={{
-                              __html: comment.content
-                            }}
-                          />
-                        </CommentContent>
-                        <span>
-                          Reported{' '}
-                          {dayjs(comment.createdAt).format('YYYY-MM-DD HH:mm')}
-                        </span>
-                      </div>
-                      <div className="actions"></div>
-                    </CreatedUser>
-                  </TicketComment>
-                );
-              })}
-            </CommentWrapper>
-          </SpaceFormsWrapper>
-          <Modal.Footer>
-            <Button
-              btnStyle="simple"
-              size="small"
-              icon="times-circle"
-              onClick={handleClose}
-            >
-              {__('Cancel')}
-            </Button>
-          </Modal.Footer>
-        </Modal.Body>
-      </Modal>
-    </>
-  );
+                      </CreatedUser>
+                    </TicketComment>
+                  );
+                })}
+              </CommentWrapper>
+            </SpaceFormsWrapper>
+            <Modal.Footer>
+              <Button
+                btnStyle="simple"
+                size="small"
+                icon="times-circle"
+                onClick={() => handleClose()}
+              >
+                {__('Cancel')}
+              </Button>
+            </Modal.Footer>
+          </Modal.Body>
+        </Modal>
+      </>
+    );
+  }
 }
 
 export default Comment;