[DEV-153] Fix activity (#1080)

* fix spanish translations

* fix activity

* fix activity

* improve coding

* improve coding

* improve coding

* improve coding

client/src/app/admin/panel/dashboard/admin-panel-stats.js

@@ -1,14 +1,11 @@
 import React from 'react';
 import { connect }  from 'react-redux';
-import { Bar, HorizontalBar } from 'react-chartjs-2';
 
-import date from 'lib-app/date';
 import API from 'lib-app/api-call';
 import i18n from 'lib-app/i18n';
-import StatCard from 'app-components/stat-card';
+import statsUtils from 'lib-app/stats-utils';
 
 import Header from 'core-components/header';
-import Tooltip from 'core-components/tooltip';
 import Form from 'core-components/form';
 import FormField from 'core-components/form-field';
 import Icon from 'core-components/icon';
@@ -21,7 +18,7 @@ class AdminPanelStats extends React.Component {
     state = {
         loading: true,
         rawForm: {
-            dateRange: this.getInitialDateRange(),
+            dateRange: statsUtils.getInitialDateRange(),
             departments: [],
             owners: [],
             tags: []
@@ -29,29 +26,19 @@ class AdminPanelStats extends React.Component {
         ticketData: {}
     };
 
-    getInitialDateRange() {
-        let firstDayOfMonth = new Date();
-        firstDayOfMonth.setDate(1);
-        firstDayOfMonth.setHours(0);
-        firstDayOfMonth.setMinutes(0);
-        let todayAtNight = new Date();
-        todayAtNight.setHours(23);
-        todayAtNight.setMinutes(59);
-        return {
-            startDate: date.getFullDate(firstDayOfMonth),
-            endDate: date.getFullDate(todayAtNight)
-        }
-    }
-
     componentDidMount() {
-        this.retrieveStats();
+        statsUtils.retrieveStats({
+            rawForm: this.state.rawForm,
+            tags: this.props.tags
+        }).then(({data}) => {
+            this.setState({ticketData: data, loading: false});
+        }).catch((error) => {
+            if (showLogs) console.error('ERROR: ', error);
+        });
     }
 
     render() {
-        const {
+        const { loading, rawForm, ticketData } = this.state;
-            loading,
-            rawForm
-        } = this.state;
 
         return (
             <div className="admin-panel-stats">
@@ -90,98 +77,20 @@ class AdminPanelStats extends React.Component {
                         <span className="separator" />
                     </div>
                 </div>
-                {loading ? <div className="admin-panel-stats__loading"><Loading backgrounded size="large" /></div> : this.renderStatistics()}
+                {
+                    loading ?
+                        <div className="admin-panel-stats__loading"><Loading backgrounded size="large" /></div> :
+                        statsUtils.renderStatistics({showStatCards: true, showStatsByHours: true, showStatsByDays: true, ticketData})
+                }
             </div>
         )
     }
 
-    renderStatistics() {
-        const primaryBlueWithTransparency = (alpha) => `rgba(32, 184, 197, ${alpha})`;
-        const ticketsByHoursChartData = {
-            labels: Array.from(Array(24).keys()),
-            datasets: [
-                {
-                    label: 'Created Tickets by Hour',
-                    backgroundColor: primaryBlueWithTransparency(0.2),
-                    borderColor: primaryBlueWithTransparency(1),
-                    borderWidth: 1,
-                    hoverBackgroundColor: primaryBlueWithTransparency(0.4),
-                    hoverBorderColor: primaryBlueWithTransparency(1),
-                    data: this.state.ticketData.created_by_hour
-                }
-            ]
-        };
-
-        const primaryGreenWithTransparency = (alpha) => `rgba(130, 202, 156, ${alpha})`;
-        const ticketsByWeekdayChartData = {
-            labels: [
-                i18n('MONDAY'),
-                i18n('TUESDAY'),
-                i18n('WEDNESDAY'),
-                i18n('THURSDAY'),
-                i18n('FRIDAY'),
-                i18n('SATURDAY'),
-                i18n('SUNDAY')
-            ],
-            datasets: [
-                {
-                    label: 'Created Tickets by Weekday',
-                    backgroundColor: primaryGreenWithTransparency(0.2),
-                    borderColor: primaryGreenWithTransparency(1),
-                    borderWidth: 1,
-                    hoverBackgroundColor: primaryGreenWithTransparency(0.4),
-                    hoverBorderColor: primaryGreenWithTransparency(1),
-                    data: this.state.ticketData.created_by_weekday
-                }
-            ]
-        }
-
-        return (
-            <div>
-                {this.renderStatCards()}
-                <Bar
-                    options={this.getStatsOptions('y')}
-                    data={ticketsByHoursChartData}
-                    legend={{onClick: null}} /> {/* Weird, but if you only set the legend here, it changes that of the HorizontalBar next too*/}
-                <HorizontalBar
-                    options={this.getStatsOptions('x')}
-                    data={ticketsByWeekdayChartData}
-                    legend={{onClick: null}} />
-            </div>
-        );
-    }
-
-    renderStatCards() {
-        const {created, open, closed, instant, reopened} = this.state.ticketData;
-
-        return (
-            <div className="admin-panel-stats__card-list">
-                <StatCard label={i18n('CREATED')} description={i18n('CREATED_DESCRIPTION')} value={created} isPercentage={false} />
-                <StatCard label={i18n('OPEN')} description={i18n('OPEN_DESCRIPTION')} value={open} isPercentage={false} />
-                <StatCard label={i18n('CLOSED')} description={i18n('CLOSED_DESCRIPTION')} value={closed} isPercentage={false} />
-                <StatCard label={i18n('INSTANT')} description={i18n('INSTANT_DESCRIPTION')} value={100*instant / closed} isPercentage={true} />
-                <StatCard label={i18n('REOPENED')} description={i18n('REOPENED_DESCRIPTION')} value={100*reopened / created} isPercentage={true} />
-            </div>
-        )
-    }
-
-    getStatsOptions(axis) {
-        return {
-            scales: {
-                [`${axis}Axes`]: [{
-                    ticks: {
-                        beginAtZero: true
-                    }
-                }]
-            }
-        }
-    }
-
     clearFormValues(event) {
         event.preventDefault();
         this.setState({
             rawForm: {
-                dateRange: this.getInitialDateRange(),
+                dateRange: statsUtils.getInitialDateRange(),
                 departments: [],
                 owners: [],
                 tags: []
@@ -199,10 +108,6 @@ class AdminPanelStats extends React.Component {
         });
     }
 
-    getSelectedTagIds() {
-        return this.props.tags.filter(tag => _.includes(this.state.rawForm.tags, tag.name)).map(tag => tag.id);
-    }
-
     getStaffItems() {
         const getStaffProfilePic = (staff) => {
             return staff.profilePic ? API.getFileLink(staff.profilePic) : (API.getURL() + '/images/profile.png');
@@ -252,30 +157,19 @@ class AdminPanelStats extends React.Component {
         });
     }
 
-    retrieveStats() {
-        const { rawForm } = this.state;
-        const { startDate, endDate } = rawForm.dateRange;
-        API.call({
-            path: '/system/get-stats',
-            data: {
-                dateRange: "[" + startDate.toString() + "," + endDate.toString() + "]",
-                departments: "[" + rawForm.departments.map(department => department.id) + "]",
-                owners: "[" + rawForm.owners.map(owner => owner.id) + "]",
-                tags: "[" + this.getSelectedTagIds() + "]"
-            }
-        }).then(({data}) => {
-            this.setState({ticketData: data, loading: false});
-        }).catch((error) => {
-            if (showLogs) console.error('ERROR: ', error);
-        })
-    }
-
     onFormChange(newFormState) {
         this.setState({rawForm: newFormState});
     }
 
     onFormSubmit() {
-        this.retrieveStats();
+        statsUtils.retrieveStats({
+            rawForm: this.state.rawForm,
+            tags: this.props.tags
+        }).then(({data}) => {
+            this.setState({ticketData: data, loading: false});
+        }).catch((error) => {
+            if (showLogs) console.error('ERROR: ', error);
+        });
     }
 }
 

client/src/app/admin/panel/staff/staff-editor.js

@@ -10,7 +10,6 @@ import API from 'lib-app/api-call';
 import SessionStore from 'lib-app/session-store';
 import TicketList from 'app-components/ticket-list';
 import AreYouSure from 'app-components/are-you-sure';
-// import Stats from 'app-components/stats';
 
 import Form from 'core-components/form';
 import FormField from 'core-components/form-field';
@@ -19,6 +18,7 @@ import Message from 'core-components/message';
 import Button from 'core-components/button';
 import Icon from 'core-components/icon';
 import Loading from 'core-components/loading';
+import statsUtils from 'lib-app/stats-utils';
 
 const INITIAL_API_VALUE = {
     page: 1,
@@ -52,30 +52,38 @@ class StaffEditor extends React.Component {
         department: undefined,
         departments: this.getUserDepartments(),
         closedTicketsShown: false,
-        sendEmailOnNewTicket: this.props.sendEmailOnNewTicket
+        sendEmailOnNewTicket: this.props.sendEmailOnNewTicket,
+        rawForm: {
+            dateRange: statsUtils.getInitialDateRange(),
+            departments: [],
+            owners: [],
+            tags: []
+        },
+        ticketData: {}
     };
 
     componentDidMount() {
+        const departmentsAssigned = SessionStore.getDepartments().filter((_department, index) => this.state.departments.includes(index));
+        const departmentsAssignedId = departmentsAssigned.map(department => department.id);
+
         this.retrieveStaffMembers();
         this.retrieveTicketsAssigned(INITIAL_API_VALUE);
+        statsUtils.retrieveStats({
+            rawForm: this.state.rawForm,
+            departments: departmentsAssignedId
+        }).then(({data}) => {
+            this.setState({
+                ticketData: data,
+                loading: false
+            });
+        }).catch((error) => {
+            if (showLogs) console.error('ERROR: ', error);
+        });
     }
 
     render() {
-        const {
+        const { name, level, profilePic, myAccount, staffId, staffList, userId } = this.props;
-            name,
+        const { message, tickets, loadingPicture, email } = this.state;
-            level,
-            profilePic,
-            myAccount,
-            staffId,
-            staffList,
-            userId
-        } = this.props;
-        const {
-            message,
-            tickets,
-            loadingPicture,
-            email
-        } = this.state;
         const myData = _.filter(staffList, {id: `${staffId}`})[0];
 
         return (
@@ -231,11 +239,17 @@ class StaffEditor extends React.Component {
     }
 
     renderStaffStats() {
-        // return (
+        const { loading, ticketData } = this.state;
-        //     <Stats staffId={this.props.staffId} type="staff" />
-        // );
 
-        return null;
+        return (
+            <div className="admin-panel-stats">
+                {
+                    loading ?
+                        <div className="admin-panel-stats__loading"><Loading backgrounded size="large" /></div> :
+                        statsUtils.renderStatistics({showStatCards: true, showStatsByHours: true, ticketData})
+                }
+            </div>
+        )
     }
 
     renderTickets() {
@@ -276,16 +290,8 @@ class StaffEditor extends React.Component {
     }
 
     getTicketListProps() {
-        const {
+        const { staffId, departments } = this.props;
-            staffId,
+        const { tickets, page, pages, closedTicketsShown } = this.state;
-            departments
-        } = this.props;
-        const {
-            tickets,
-            page,
-            pages,
-            closedTicketsShown
-        } = this.state;
 
         return {
             type: 'secondary',
@@ -344,11 +350,7 @@ class StaffEditor extends React.Component {
     }
 
     onSubmit(eventType, form) {
-        const {
+        const { myAccount, staffId, onChange } = this.props;
-            myAccount,
-            staffId,
-            onChange
-        } = this.props;
         let departments;
 
         if(form.departments) {
@@ -372,6 +374,18 @@ class StaffEditor extends React.Component {
             window.scrollTo(0,0);
             this.setState({message: eventType});
 
+            const departmentsAssigned = SessionStore.getDepartments().filter((_department, index) => this.state.departments.includes(index));
+            const departmentsAssignedId = departmentsAssigned.map(department => department.id);
+
+            statsUtils.retrieveStats({
+                rawForm: this.state.rawForm,
+                departments: departmentsAssignedId
+            }).then(({data}) => {
+                this.setState({ticketData: data, loading: false});
+            }).catch((error) => {
+                if (showLogs) console.error('ERROR: ', error);
+            });
+
             onChange && onChange();
         }).catch(() => {
             window.scrollTo(0,0);
@@ -380,10 +394,8 @@ class StaffEditor extends React.Component {
     }
 
     onDeleteClick() {
-        const {
+        const { staffId, onDelete } = this.props;
-            staffId,
+
-            onDelete
-        } = this.props;
         return API.call({
             path: '/staff/delete',
             data: {
@@ -396,11 +408,8 @@ class StaffEditor extends React.Component {
     }
 
     onProfilePicChange(event) {
-        const {
+        const { myAcount, staffId, onChange } = this.props;
-            myAcount,
+
-            staffId,
-            onChange
-        } = this.props;
         this.setState({
             loadingPicture: true
         });
@@ -466,10 +475,7 @@ class StaffEditor extends React.Component {
     }
 
     onClosedTicketsShownChange() {
-        const {
+        const { department, closedTicketsShown } = this.state;
-            department,
-            closedTicketsShown
-        } = this.state;
         const newClosedValue = !closedTicketsShown;
 
         this.setState({

client/src/lib-app/stats-utils.js

@@ -0,0 +1,124 @@
+import API from 'lib-app/api-call';
+import i18n from 'lib-app/i18n';
+import StatCard from 'app-components/stat-card';
+import { Bar, HorizontalBar } from 'react-chartjs-2';
+import date from 'lib-app/date';
+
+export default {
+    renderStatistics({showStatCards, showStatsByHours, showStatsByDays, ticketData}) {
+        const primaryBlueWithTransparency = (alpha) => `rgba(32, 184, 197, ${alpha})`;
+        const ticketsByHoursChartData = {
+            labels: Array.from(Array(24).keys()),
+            datasets: [
+                {
+                    label: 'Created Tickets by Hour',
+                    backgroundColor: primaryBlueWithTransparency(0.2),
+                    borderColor: primaryBlueWithTransparency(1),
+                    borderWidth: 1,
+                    hoverBackgroundColor: primaryBlueWithTransparency(0.4),
+                    hoverBorderColor: primaryBlueWithTransparency(1),
+                    data: ticketData.created_by_hour
+                }
+            ]
+        };
+
+        const primaryGreenWithTransparency = (alpha) => `rgba(130, 202, 156, ${alpha})`;
+        const ticketsByWeekdayChartData = {
+            labels: [
+                i18n('MONDAY'),
+                i18n('TUESDAY'),
+                i18n('WEDNESDAY'),
+                i18n('THURSDAY'),
+                i18n('FRIDAY'),
+                i18n('SATURDAY'),
+                i18n('SUNDAY')
+            ],
+            datasets: [
+                {
+                    label: 'Created Tickets by Weekday',
+                    backgroundColor: primaryGreenWithTransparency(0.2),
+                    borderColor: primaryGreenWithTransparency(1),
+                    borderWidth: 1,
+                    hoverBackgroundColor: primaryGreenWithTransparency(0.4),
+                    hoverBorderColor: primaryGreenWithTransparency(1),
+                    data: ticketData.created_by_weekday
+                }
+            ]
+        };
+
+        return (
+            <div>
+                {showStatCards ? this.renderStatCards(ticketData) : null}
+                {
+                    showStatsByHours ?
+                        <Bar options={this.getStatsOptions('y')} data={ticketsByHoursChartData} legend={{onClick: null}} /> :
+                        null
+                }
+                {
+                    showStatsByDays ?
+                        <HorizontalBar options={this.getStatsOptions('x')} data={ticketsByWeekdayChartData} legend={{onClick: null}} /> :
+                        null
+                }
+            </div>
+        );
+    },
+
+    getInitialDateRange() {
+        let firstDayOfMonth = new Date();
+        firstDayOfMonth.setDate(1);
+        firstDayOfMonth.setHours(0);
+        firstDayOfMonth.setMinutes(0);
+        let todayAtNight = new Date();
+        todayAtNight.setHours(23);
+        todayAtNight.setMinutes(59);
+
+        return {
+            startDate: date.getFullDate(firstDayOfMonth),
+            endDate: date.getFullDate(todayAtNight)
+        };
+    } ,
+
+    getStatsOptions(axis) {
+        return {
+            scales: {
+                [`${axis}Axes`]: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            }
+        };
+    },
+
+    getSelectedTagIds(rawForm, tags) {
+        return tags.filter(tag => _.includes(rawForm.tags, tag.name)).map(tag => tag.id);
+    },
+
+    renderStatCards(ticketData) {
+        const {created, open, closed, instant, reopened} = ticketData;
+
+        return (
+            <div className="admin-panel-stats__card-list">
+                <StatCard label={i18n('CREATED')} description={i18n('CREATED_DESCRIPTION')} value={created} isPercentage={false} />
+                <StatCard label={i18n('OPEN')} description={i18n('OPEN_DESCRIPTION')} value={open} isPercentage={false} />
+                <StatCard label={i18n('CLOSED')} description={i18n('CLOSED_DESCRIPTION')} value={closed} isPercentage={false} />
+                <StatCard label={i18n('INSTANT')} description={i18n('INSTANT_DESCRIPTION')} value={100*instant / closed} isPercentage={true} />
+                <StatCard label={i18n('REOPENED')} description={i18n('REOPENED_DESCRIPTION')} value={100*reopened / created} isPercentage={true} />
+            </div>
+        );
+    },
+
+    retrieveStats({ rawForm, tags, departments}) {
+        const { startDate, endDate } = rawForm.dateRange;
+
+        return API.call({
+            path: '/system/get-stats',
+            data: {
+                dateRange: "[" + startDate.toString() + "," + endDate.toString() + "]",
+                departments: departments ? JSON.stringify(departments) : "[" + rawForm.departments.map(department => department.id) + "]",
+                owners: "[" + rawForm.owners.map(owner => owner.id) + "]",
+                tags: tags ? "[" + this.getSelectedTagIds(rawForm, tags) + "]" : "[]"
+            }
+        });
+    }
+}