Merge pull request #2588 from glific/feature/ticket-update

Added created at for ticketing system
glific · Oct 11, 2023 · e186c34 · e186c34
2 parents 3e42d0e + 9d50b53
commit e186c34
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
diff --git a/src/containers/Ticket/TicketList/TicketList.module.css b/src/containers/Ticket/TicketList/TicketList.module.css
@@ -36,22 +36,24 @@
   width: 15%;
 }
 
+.Created {
+  width: 200px;
+}
+
 .Label {
-  min-width: 100px;
-  width: 20%;
+  width: 300px;
 }
 
 .Issue {
-  min-width: 300px;
-  max-width: 400px;
-  width: 30%;
+  width: 200px;
 }
+
 .Assigned {
-  width: 20%;
+  width: 200px;
 }
 
 .Status {
-  width: 10%;
+  width: 100px;
 }
 
 .Body {
@@ -61,8 +63,7 @@
 }
 
 .Actions {
-  min-width: 150px;
-  width: 25%;
+  width: 150px;
   justify-content: flex-end;
   margin-left: auto;
 }

diff --git a/src/containers/Ticket/TicketList/TicketList.tsx b/src/containers/Ticket/TicketList/TicketList.tsx
@@ -10,10 +10,14 @@ import Ticket from 'containers/Ticket/Ticket';
 import { SupportAgent } from '@mui/icons-material';
 import { Dropdown } from 'components/UI/Form/Dropdown/Dropdown';
 import { getUserSession } from 'services/AuthService';
+import moment from 'moment';
 
 import styles from './TicketList.module.css';
 
 const getBody = (body: any) => <div className={styles.TableText}>{body}</div>;
+const getInsertedAt = (insertedAt: string) => (
+  <div className={styles.TableText}>{moment(insertedAt).format('DD-MM-YYYY hh:mm')}</div>
+);
 const getStatus = (status: string) => {
   let showStatus;
   switch (status) {
@@ -32,14 +36,22 @@ const getStatus = (status: string) => {
 
 const getUser = (user: any) => <div className={styles.TableText}>{user?.name}</div>;
 
-const getColumns = ({ body, status, topic, user, contact }: any) => ({
+const getColumns = ({ body, status, insertedAt, user, contact }: any) => ({
+  insertedAt: getInsertedAt(insertedAt),
   body: getBody(body),
   contact: getUser(contact),
   status: getStatus(status),
   user: getUser(user),
 });
 
-const columnStyles = [styles.Label, styles.Issue, styles.Status, styles.Assigned, styles.Actions];
+const columnStyles = [
+  styles.Created,
+  styles.Label,
+  styles.Issue,
+  styles.Status,
+  styles.Assigned,
+  styles.Actions,
+];
 const ticketIcon = <SupportAgent className={styles.Icon} />;
 
 const queries = {
@@ -81,6 +93,7 @@ export const TicketList = () => {
   }
 
   const columnNames: any = [
+    { name: 'inserted_at', label: t('Created at'), sort: true, order: 'desc' },
     { name: 'body', label: t('Issue') },
     { label: t('Opened by') },
     { label: t('Status') },

diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json
@@ -419,5 +419,6 @@
   "Request header": "Request header",
   "Request JSON": "Request JSON",
   "Response JSON": "Response JSON",
-  "Webhook Logs": "Webhook Logs"
+  "Webhook Logs": "Webhook Logs",
+  "Created at": "Created at"
 }
diff --git a/src/mocks/Ticket.tsx b/src/mocks/Ticket.tsx
@@ -33,7 +33,7 @@ export const ticketListQuery = {
     query: TICKET_LIST_QUERY,
     variables: {
       filter: { status: 'open' },
-      opts: { limit: 50, offset: 0, order: 'ASC', orderWith: 'body' },
+      opts: { limit: 50, offset: 0, order: 'DESC', orderWith: 'inserted_at' },
     },
   },