From 527843f00ff3676f81ea08ecf2e9134d2fac7cc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joel=20Elias=20M=C3=A9ndez?=
 <67445275+joelmendez1@users.noreply.github.com>
Date: Thu, 3 Feb 2022 17:19:22 -0300
Subject: [PATCH] [DEV-217] update tickets when changing departments (#1137)

* update tickets when changing departments

* add loading to ticketlist
---
 .../src/app/admin/panel/staff/staff-editor.js | 22 ++++++++++++++-----
 .../app/admin/panel/staff/staff-editor.scss   |  9 ++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/client/src/app/admin/panel/staff/staff-editor.js b/client/src/app/admin/panel/staff/staff-editor.js
index 60d27eb9..a60da57c 100644
--- a/client/src/app/admin/panel/staff/staff-editor.js
+++ b/client/src/app/admin/panel/staff/staff-editor.js
@@ -64,7 +64,8 @@ class StaffEditor extends React.Component {
             owners: [],
             tags: []
         },
-        ticketData: {}
+        ticketData: {},
+        ticketListLoading: false
     };
 
     componentDidMount() {
@@ -301,7 +302,7 @@ class StaffEditor extends React.Component {
 
     renderDepartmentsInfo() {
         const { departments } = this.state;
-        const departmentsAssigned = this.getDepartments().filter((_department, index) => departments.includes(index))
+        const departmentsAssigned = this.getDepartments().filter((_department, index) => departments.includes(index));
 
         return (
             <Form values={{departments: Array.from({length: departmentsAssigned.length}, (value, index) => index)}}>
@@ -330,7 +331,10 @@ class StaffEditor extends React.Component {
                 <span className="separator" />
                 <div className="staff-editor__tickets">
                     <div className="staff-editor__tickets-title">{i18n('TICKETS_ASSIGNED')}</div>
-                    <TicketList {...this.getTicketListProps()} />
+                        {this.state.ticketListLoading ?
+                            <Loading className="staff-editor__ticketlist-loading" backgrounded size="large"/> :
+                            <TicketList {...this.getTicketListProps()} />
+                        }
                 </div>
             </div>
         );
@@ -423,7 +427,10 @@ class StaffEditor extends React.Component {
     }
 
     onSubmit(eventType, form) {
-        this.setState({loadingStats: true});
+        this.setState({
+            loadingStats: true,
+            ticketListLoading: true
+        });
 
         const { myAccount, staffId, onChange } = this.props;
         let departments;
@@ -447,7 +454,11 @@ class StaffEditor extends React.Component {
         }).then(() => {
             this.retrieveStaffMembers();
             window.scrollTo(0,250);
-            this.setState({message: eventType, showMessage: true});
+            this.setState({
+                message: eventType,
+                showMessage: true,
+                ticketListLoading: false
+            });
 
             const departmentsAssigned = SessionStore.getDepartments().filter((_department, index) => this.state.departments.includes(index));
             const departmentsAssignedId = departmentsAssigned.map(department => department.id);
@@ -462,6 +473,7 @@ class StaffEditor extends React.Component {
                 this.setState({loadingStats: false});
             });
 
+            this.retrieveTicketsAssigned({page: 1});
             onChange && onChange();
         }).catch(() => {
             window.scrollTo(0,250);
diff --git a/client/src/app/admin/panel/staff/staff-editor.scss b/client/src/app/admin/panel/staff/staff-editor.scss
index 0782f0aa..4ef8836c 100644
--- a/client/src/app/admin/panel/staff/staff-editor.scss
+++ b/client/src/app/admin/panel/staff/staff-editor.scss
@@ -174,6 +174,15 @@
         margin-bottom: 20px;
     }
 
+    &__ticketlist-loading {
+        min-height: 361px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background-color: $grey;
+    }
+
     &__separator {
         margin: 3px 0;
     }