Merge pull request #331 from shesha-io/feat/ps/timeline-icons-title

Feat/ps/timeline icons title
shesha-io · Jun 21, 2023 · 5cf8f6a · 5cf8f6a
2 parents dabcfd6 + e4d850a
commit 5cf8f6a
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 17 deletions.
diff --git a/shesha-reactjs/src/components/timeline/index.tsx b/shesha-reactjs/src/components/timeline/index.tsx
@@ -61,14 +61,14 @@ export const ShaTimeline: FC<ITimelineProps> = ({ properties, ownerId, entityTyp
 
   return (
     <Spin spinning={isFetchingEntities}>
-      {(!timelineData?.length && <Empty description="Empty timeline" />) || (
+      {(!sortedTimelineData?.length && <Empty description="Empty timeline" />) || (
         <Timeline>
-          {sortedTimelineData?.map(({ title, body, toPerson, actionDate, type }) => {
+          {sortedTimelineData?.map(({ title, body, toPerson, actionDate, channel }) => {
             return (
               <TimelineItem
                 title={title}
                 toPerson={toPerson?._displayName}
-                type={type}
+                channel={channel}
                 actionDate={moment(actionDate).format('DD/MM/YYYY HH:mm')}
                 body={body}
               />

diff --git a/shesha-reactjs/src/components/timeline/models.ts b/shesha-reactjs/src/components/timeline/models.ts
@@ -5,6 +5,7 @@ import { ICommonContainerProps } from '../../designer-components/container/inter
 export interface ITimelineItemProps {
   toPerson?: string;
   fromPerson?: string;
+  channel?: number;
   body?: string;
   title?: string;
   actionDate?: string;

diff --git a/shesha-reactjs/src/components/timeline/timelineItem/index.tsx b/shesha-reactjs/src/components/timeline/timelineItem/index.tsx
@@ -3,10 +3,11 @@ import { Timeline, Card } from 'antd';
 import React, { FC } from 'react';
 import { getTimelineIcon } from '../../../utils/timelineIcon';
 import { ITimelineItemProps } from '../models';
+import { getTimelineTitle } from 'utils/timelinetitle';
 
-export const TimelineItem: FC<ITimelineItemProps> = ({ title, type, toPerson, body, actionDate }) => {
+export const TimelineItem: FC<ITimelineItemProps> = ({ title, channel, toPerson, body, actionDate }) => {
   return (
-    <Timeline.Item dot={getTimelineIcon(type)}>
+    <Timeline.Item dot={getTimelineIcon(channel)}>
       <Card
         extra={
           <small style={{ color: 'gray' }}>
@@ -17,7 +18,8 @@ export const TimelineItem: FC<ITimelineItemProps> = ({ title, type, toPerson, bo
         title={
           <div>
             <label>
-              <strong style={{ textDecoration: 'underline' }}>{toPerson}</strong> {title}
+              <strong style={{ textDecoration: 'underline' }}>{toPerson}</strong>{' '}
+              {!!channel ? getTimelineTitle(channel) : title}
             </label>
           </div>
         }

diff --git a/shesha-reactjs/src/components/timeline/timelineItem/timelineChannels.ts b/shesha-reactjs/src/components/timeline/timelineItem/timelineChannels.ts
@@ -0,0 +1,6 @@
+export enum TimelineChannels {
+  Email = 1,
+  SMS = 2,
+  Note = 3,
+  Message = 4,
+}
diff --git a/shesha-reactjs/src/utils/timelineIcon.tsx b/shesha-reactjs/src/utils/timelineIcon.tsx
@@ -1,22 +1,19 @@
-import { CommentOutlined, InboxOutlined, MailOutlined, MessageOutlined, PhoneOutlined } from '@ant-design/icons';
+import { CommentOutlined, InboxOutlined, MailOutlined, MessageOutlined } from '@ant-design/icons';
+import { TimelineChannels } from 'components/timeline/timelineItem/timelineChannels';
 import React from 'react';
 
-export const getTimelineIcon = (type: string) => {
-  switch (type) {
-    case 'phone':
-    case 'call':
-      return <PhoneOutlined />;
-      break;
-    case 'sms':
+export const getTimelineIcon = (channel: number) => {
+  switch (channel) {
+    case TimelineChannels.SMS:
       return <InboxOutlined />;
       break;
-    case 'message':
+    case TimelineChannels.Message:
       return <MessageOutlined />;
       break;
-    case 'email':
+    case TimelineChannels.Email:
       return <MailOutlined />;
       break;
-    case 'note':
+    case TimelineChannels.Note:
       return <CommentOutlined />;
     default:
       return null;

diff --git a/shesha-reactjs/src/utils/timelinetitle.ts b/shesha-reactjs/src/utils/timelinetitle.ts
@@ -0,0 +1,16 @@
+import { TimelineChannels } from 'components/timeline/timelineItem/timelineChannels';
+
+export const getTimelineTitle = (channel: number) => {
+  switch (channel) {
+    case TimelineChannels.SMS:
+      return 'sent a sms';
+    case TimelineChannels.Message:
+      return 'Sent a direct message';
+    case TimelineChannels.Email:
+      return 'sent an email';
+    case TimelineChannels.Note:
+      return 'Commented on this Service Request';
+    default:
+      return '';
+  }
+};