From 94ff47a7e76f18f2965b036381e34e99f21079ba Mon Sep 17 00:00:00 2001
From: Chris Brame <polonel@gmail.com>
Date: Fri, 7 Jun 2019 18:07:44 -0400
Subject: [PATCH] fix(departments): issue with creating department with no
 teams #206

---
 package.json                                  |   2 +-
 src/client/containers/Departments/index.jsx   | 141 +++++++++---------
 .../containers/Modals/EditDepartmentModal.jsx |  12 +-
 3 files changed, 78 insertions(+), 77 deletions(-)

diff --git a/package.json b/package.json
index 989413665..92b1a11f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "trudesk",
-  "version": "1.0.13",
+  "version": "1.0.14-beta",
   "private": true,
   "engines": {
     "node": ">=9.10.0"
diff --git a/src/client/containers/Departments/index.jsx b/src/client/containers/Departments/index.jsx
index 13b159946..2444bb8b0 100644
--- a/src/client/containers/Departments/index.jsx
+++ b/src/client/containers/Departments/index.jsx
@@ -114,76 +114,81 @@ class DepartmentsContainer extends React.Component {
               </tr>
             </thead>
             <tbody className={'scrollable full-height'}>
-              {this.props.departments.map(department => {
-                return (
-                  <tr key={department.get('_id')}>
-                    {/*<td style={{ padding: '17px 18px', verticalAlign: 'middle' }}>*/}
-                    {/*  <input*/}
-                    {/*    type='checkbox'*/}
-                    {/*    id={'c_' + department.get('_id')}*/}
-                    {/*    style={{ display: 'none' }}*/}
-                    {/*    className='svgcheckinput'*/}
-                    {/*  />*/}
-                    {/*  <label htmlFor={'c_' + department.get('_id')} className='svgcheck'>*/}
-                    {/*    <svg width='16px' height='16px' viewBox='0 0 18 18'>*/}
-                    {/*      <path d='M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z' />*/}
-                    {/*      <polyline points='1 9 7 14 15 4' />*/}
-                    {/*    </svg>*/}
-                    {/*  </label>*/}
-                    {/*</td>*/}
-                    <td style={{ verticalAlign: 'middle', padding: '8px 8px 8px 26px' }}>
-                      <div style={{ fontWeight: '500' }}>{department.get('name')}</div>
-                    </td>
-                    <td style={{ verticalAlign: 'middle' }}>
-                      {department.get('teams').map(team => {
-                        return (
-                          <div key={team.get('_id')} style={{ marginBottom: 4 }}>
-                            {team.get('name')}
+              {this.props.departments &&
+                this.props.departments.map(department => {
+                  const teams = department.get('teams')
+                  const groups = department.get('groups')
+                  return (
+                    <tr key={department.get('_id')}>
+                      {/*<td style={{ padding: '17px 18px', verticalAlign: 'middle' }}>*/}
+                      {/*  <input*/}
+                      {/*    type='checkbox'*/}
+                      {/*    id={'c_' + department.get('_id')}*/}
+                      {/*    style={{ display: 'none' }}*/}
+                      {/*    className='svgcheckinput'*/}
+                      {/*  />*/}
+                      {/*  <label htmlFor={'c_' + department.get('_id')} className='svgcheck'>*/}
+                      {/*    <svg width='16px' height='16px' viewBox='0 0 18 18'>*/}
+                      {/*      <path d='M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z' />*/}
+                      {/*      <polyline points='1 9 7 14 15 4' />*/}
+                      {/*    </svg>*/}
+                      {/*  </label>*/}
+                      {/*</td>*/}
+                      <td style={{ verticalAlign: 'middle', padding: '8px 8px 8px 26px' }}>
+                        <div style={{ fontWeight: '500' }}>{department.get('name')}</div>
+                      </td>
+                      <td style={{ verticalAlign: 'middle' }}>
+                        {teams &&
+                          teams.map(team => {
+                            return (
+                              <div key={team.get('_id')} style={{ marginBottom: 4 }}>
+                                {team.get('name')}
+                              </div>
+                            )
+                          })}
+                      </td>
+                      <td style={{ verticalAlign: 'middle' }}>
+                        {department.get('allGroups') === true && (
+                          <div>
+                            <h6 className={'text-success'} style={{ fontWeight: 'bold' }}>
+                              All Groups
+                            </h6>
                           </div>
-                        )
-                      })}
-                    </td>
-                    <td style={{ verticalAlign: 'middle' }}>
-                      {department.get('allGroups') === true && (
-                        <div>
-                          <h6 className={'text-success'} style={{ fontWeight: 'bold' }}>
-                            All Groups
-                          </h6>
-                        </div>
-                      )}
-                      {department.get('allGroups') !== true &&
-                        department.get('groups').map(group => {
-                          return (
-                            <div key={group.get('_id')} style={{ marginBottom: 4 }}>
-                              {group.get('name')}
-                            </div>
-                          )
-                        })}
-                    </td>
-                    <td>
-                      <ButtonGroup>
-                        {helpers.canUser('departments:update', true) && (
-                          <Button
-                            text={'Edit'}
-                            small={true}
-                            waves={true}
-                            onClick={() => this.onEditDepartmentClick(department)}
-                          />
                         )}
-                        {helpers.canUser('departments:delete', true) && (
-                          <Button
-                            text={'Delete'}
-                            style={'danger'}
-                            small={true}
-                            waves={true}
-                            onClick={() => this.onDeleteDepartmentClick(department.get('_id'))}
-                          />
-                        )}
-                      </ButtonGroup>
-                    </td>
-                  </tr>
-                )
-              })}
+                        {department.get('allGroups') !== true &&
+                          groups &&
+                          groups.map(group => {
+                            return (
+                              <div key={group.get('_id')} style={{ marginBottom: 4 }}>
+                                {group.get('name')}
+                              </div>
+                            )
+                          })}
+                      </td>
+                      <td>
+                        <ButtonGroup>
+                          {helpers.canUser('departments:update', true) && (
+                            <Button
+                              text={'Edit'}
+                              small={true}
+                              waves={true}
+                              onClick={() => this.onEditDepartmentClick(department)}
+                            />
+                          )}
+                          {helpers.canUser('departments:delete', true) && (
+                            <Button
+                              text={'Delete'}
+                              style={'danger'}
+                              small={true}
+                              waves={true}
+                              onClick={() => this.onDeleteDepartmentClick(department.get('_id'))}
+                            />
+                          )}
+                        </ButtonGroup>
+                      </td>
+                    </tr>
+                  )
+                })}
             </tbody>
           </table>
         </PageContent>
diff --git a/src/client/containers/Modals/EditDepartmentModal.jsx b/src/client/containers/Modals/EditDepartmentModal.jsx
index 5dd172e90..c33f30823 100644
--- a/src/client/containers/Modals/EditDepartmentModal.jsx
+++ b/src/client/containers/Modals/EditDepartmentModal.jsx
@@ -78,6 +78,8 @@ class EditDepartmentModal extends React.Component {
 
   render () {
     const { department } = this.props
+    const departmentTeams = department.get('teams')
+    const departmentGroups = department.get('groups')
     const mappedTeams = this.props.teams
       .map(team => {
         return { text: team.get('name'), value: team.get('_id') }
@@ -112,10 +114,7 @@ class EditDepartmentModal extends React.Component {
             <label style={{ marginBottom: 5 }}>Teams</label>
             <MultiSelect
               items={mappedTeams}
-              initialSelected={department
-                .get('teams')
-                .map(d => d.get('_id'))
-                .toArray()}
+              initialSelected={departmentTeams ? departmentTeams.map(d => d.get('_id')).toArray() : []}
               onChange={() => {}}
               ref={r => (this.teamsSelect = r)}
             />
@@ -146,10 +145,7 @@ class EditDepartmentModal extends React.Component {
             <MultiSelect
               items={mappedGroups}
               onChange={() => {}}
-              initialSelected={this.props.department
-                .get('groups')
-                .map(d => d.get('_id'))
-                .toArray()}
+              initialSelected={departmentGroups ? departmentGroups.map(d => d.get('_id')).toArray() : []}
               ref={r => (this.groupSelect = r)}
               disabled={this.allGroups}
             />