Fix ticket date style (#958)

* Fix ticket date style in table componenet

* WIP

* WIP

* Add shortcat date in ticket list

Co-authored-by: LautaroCesso <lautaro_cesso@hotmail.com>

client/src/app-components/ticket-list.js

@@ -30,7 +30,7 @@ class TicketList extends React.Component {
         ]),
         closedTicketsShown: React.PropTypes.bool,
         onClosedTicketsShownChange: React.PropTypes.func,
-        onDepartmentChange: React.PropTypes.func,
+        onDepartmentChange: React.PropTypes.func
     };
 
     static defaultProps = {
@@ -48,16 +48,18 @@ class TicketList extends React.Component {
     };
 
     render() {
+        const { type, showDepartmentDropdown, onClosedTicketsShownChange } = this.props;
+
         return (
             <div className="ticket-list">
                 <div className="ticket-list__filters">
-                    {this.props.type === 'primary' ? this.renderMessage() : null}
+                    {(type === 'primary') ? this.renderMessage() : null}
                     {
-                        (this.props.type === 'secondary' && this.props.showDepartmentDropdown) ?
+                        ((type === 'secondary') && showDepartmentDropdown) ?
                             this.renderDepartmentsDropDown() :
                             null
                     }
-                    {this.props.onClosedTicketsShownChange ? this.renderFilterCheckbox() : null}
+                    {onClosedTicketsShownChange ? this.renderFilterCheckbox() : null}
                 </div>
                 <Table {...this.getTableProps()} />
             </div>
@@ -97,28 +99,25 @@ class TicketList extends React.Component {
     }
 
     getDepartmentDropdownProps() {
+        const { departments, onDepartmentChange } = this.props;
+
         return {
             departments: this.getDepartments(),
             onChange: (event) => {
-                const departmentId = event.index && this.props.departments[event.index - 1].id;
+                const departmentId = event.index && departments[event.index - 1].id;
+
                 this.setState({
                     selectedDepartment: departmentId
                 });
-                if(this.props.onDepartmentChange) {
+
-                    this.props.onDepartmentChange(departmentId || null);
+                onDepartmentChange && onDepartmentChange(departmentId || null);
-                }
             },
             size: 'medium'
         };
     }
 
     getTableProps() {
-        const {
+        const { loading, page, pages, onPageChange } = this.props;
-            loading,
-            page,
-            pages,
-            onPageChange,
-        } = this.props;
 
         return {
             loading,
@@ -142,7 +141,9 @@ class TicketList extends React.Component {
     }
 
     getTableHeaders() {
-        if (this.props.type  == 'primary' ) {
+        const { type } = this.props;
+
+        if(type == 'primary' ) {
             return [
                 {
                     key: 'number',
@@ -168,7 +169,7 @@ class TicketList extends React.Component {
                     className: 'ticket-list__date col-md-2'
                 }
             ];
-        } else if (this.props.type == 'secondary') {
+        } else if(type == 'secondary') {
             return [
                 {
                     key: 'number',
@@ -203,38 +204,25 @@ class TicketList extends React.Component {
     }
 
     renderSortArrow(header) {
-        const {
+        const { orderBy, showOrderArrows, onChangeOrderBy } = this.props;
-            orderBy,
-            showOrderArrows,
-            onChangeOrderBy
-        } = this.props;
-        let arrowIcon;
 
-        if(showOrderArrows) {
+        return (
-            arrowIcon = (
+            showOrderArrows ?
                 <Icon
                     name={`arrow-${this.getIconName(header, orderBy)}`}
                     className="ticket-list__order-icon"
                     color={this.getIconColor(header, orderBy)}
-                    onClick={() => onChangeOrderBy(header)}
+                    onClick={() => onChangeOrderBy(header)} /> :
-                />
+                null
         );
-        } else {
-            arrowIcon = null;
     }
 
-        return arrowIcon;
-    }
     getIconName(header, orderBy) {
-        let name = (orderBy && orderBy.value === header && orderBy.asc) ? "up" : "down";
+        return (orderBy && orderBy.value === header && orderBy.asc) ? "up" : "down";
-
-        return name;
     }
 
     getIconColor(header, orderBy) {
-        let color = (orderBy && orderBy.value === header) ? "gray" : "white";
+        return (orderBy && orderBy.value === header) ? "gray" : "white";
-
-        return color;
     }
 
     getTableRows() {
@@ -242,49 +230,66 @@ class TicketList extends React.Component {
     }
 
     getTickets() {
-        return (this.state.selectedDepartment) ? _.filter(this.props.tickets, (ticket) => {
+        const { tickets } = this.props;
-            return ticket.department.id == this.state.selectedDepartment
+        const { selectedDepartment } = this.state;
-        }) : this.props.tickets;
+
+        return (
+            (selectedDepartment) ?
+                _.filter(tickets, (ticket) => { return ticket.department.id == selectedDepartment}) :
+                tickets
+        );
     }
 
     gerTicketTableObject(ticket) {
-        let titleText = (this.isTicketUnread(ticket)) ? ticket.title  + ' (1)' : ticket.title;
+        const { date, title, ticketNumber, closed, tags, department, author } = ticket;
+        const dateTodayWithOutHoursAndMinutes = DateTransformer.getDateToday();
+        const ticketDateWithOutHoursAndMinutes = Math.floor(DateTransformer.UTCDateToLocalNumericDate(JSON.stringify(date*1)) / 10000);
+        const stringTicketLocalDateFormat = DateTransformer.transformToString(date, false, true);
+        const ticketDate = (
+            ((dateTodayWithOutHoursAndMinutes - ticketDateWithOutHoursAndMinutes) > 1) ?
+                stringTicketLocalDateFormat :
+                `${(dateTodayWithOutHoursAndMinutes - ticketDateWithOutHoursAndMinutes) ? "Yesterday" : "Today"} at ${stringTicketLocalDateFormat.slice(-5)}`
+        );
+        let titleText = (this.isTicketUnread(ticket)) ? title + ' (1)' : title;
 
         return {
             number: (
-                <Tooltip content={<TicketInfo ticket={ticket}/>} openOnHover>
+                <Tooltip content={<TicketInfo ticket={ticket} />} openOnHover>
-                    {'#' + ticket.ticketNumber}
+                    {'#' + ticketNumber}
                 </Tooltip>
             ),
             title: (
                 <div>
-                    {ticket.closed ? <Icon size="sm" name="lock" /> : null}
+                    {closed ? <Icon size="sm" name="lock" /> : null}
-                    <Button className="ticket-list__title-link" type="clean" route={{to: this.props.ticketPath + ticket.ticketNumber}}>
+                    <Button className="ticket-list__title-link" type="clean" route={{to: this.props.ticketPath + ticketNumber}}>
                         {titleText}
                     </Button>
-                    {(ticket.tags || []).map((tagName,index) => {
+                    {(tags || []).map((tagName,index) => {
                         let tag = _.find(this.props.tags, {name:tagName});
                         return <Tag size='small' name={tag && tag.name} color={tag && tag.color} key={index} />
                     })}
                 </div>
 
             ),
-            department: ticket.department.name,
+            department: department.name,
-            author: ticket.author.name,
+            author: author.name,
-            date: DateTransformer.transformToString(ticket.date, false),
+            date: ticketDate,
             unread: this.isTicketUnread(ticket),
             highlighted: this.isTicketUnread(ticket)
         };
     }
 
     isTicketUnread(ticket) {
-        if(this.props.type === 'primary') {
+        const { type, userId } = this.props;
-            return ticket.unread;
+        const { unread, author, unreadStaff } = ticket;
-        } else if(this.props.type === 'secondary') {
+
-              if(ticket.author.id == this.props.userId && ticket.author.staff) {
+        if(type === 'primary') {
-                  return ticket.unread;
+            return unread;
+        } else if(type === 'secondary') {
+            if(author.id == userId && author.staff) {
+                return unread;
             } else {
-                  return ticket.unreadStaff;
+                return unreadStaff;
             }
         }
     }

client/src/lib-app/search-tickets-utils.js

@@ -208,15 +208,15 @@ export default {
         return JSON.stringify([DEFAULT_UTC_START_DATE, this.getDefaultUTCEndDate()]);
     },
     getDefaultUTCStartDate() {
-        return DEFAULT_UTC_START_DATE
+        return DEFAULT_UTC_START_DATE;
     },
     getDefaultUTCEndDate() {
         return DateTransformer.localDateToUTCNumericDate(JSON.stringify((DateTransformer.getDateToday()*10000)+2359));
     },
     getDefaultLocalStartDate() {
-        return DateTransformer.UTCDateToLocalNumericDate(this.getDefaultUTCStartDate())
+        return DateTransformer.UTCDateToLocalNumericDate(this.getDefaultUTCStartDate());
     },
     getDefaultlocalEndDate() {
-        return DateTransformer.UTCDateToLocalNumericDate(this.getDefaultUTCEndDate())
+        return DateTransformer.UTCDateToLocalNumericDate(this.getDefaultUTCEndDate());
     }
 }

client/src/lib-core/date-transformer.js

@@ -24,9 +24,10 @@ export default {
 
         return range.map((date) => {return trasformerDateFunction(JSON.stringify(date))});
     },
-    transformToString(date, expressive = true) {
+    transformToString(date, expressive = true, retrunShortcutDate = false) {
         const momentDateLocal = this.stringDateToMoment(JSON.stringify(this.UTCDateToLocalNumericDate(date)));
-        if (expressive) momentDateLocal.format('D MMMM YYYY')
+        if(expressive) momentDateLocal.format('D MMMM YYYY');
+        if(retrunShortcutDate) return momentDateLocal.format('D MMM YYYY, HH:mm');
         return momentDateLocal.format('D MMMM YYYY, HH:mm');
     },
     getDate(date) {