Ivan - Update profile pic upload [skip ci]

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
+import classNames from 'classnames';
 
 import i18n from 'lib-app/i18n';
 import API from 'lib-app/api-call';
@@ -13,6 +14,8 @@ import FormField from 'core-components/form-field';
 import SubmitButton from 'core-components/submit-button';
 import Message from 'core-components/message';
 import Button from 'core-components/button';
+import Icon from 'core-components/icon';
+import Loading from 'core-components/loading';
 
 class StaffEditor extends React.Component {
     static propTypes = {
@@ -32,6 +35,7 @@ class StaffEditor extends React.Component {
         email: this.props.email,
         level: this.props.level - 1,
         message: null,
+        loadingPicture: false,
         departments: this.getUserDepartments()
     };
     
@@ -67,9 +71,12 @@ class StaffEditor extends React.Component {
                                     </div>
                                 </div>
                             </div>
-                            <div className="staff-editor__card-pic-wrapper">
+                            <label className={this.getPictureWrapperClass()}>
+                                <div className="staff-editor__card-pic-background"></div>
                                 <img className="staff-editor__card-pic" src={this.props.profilePic} />
-                            </div>
+                                {(this.state.loadingPicture) ? <Loading className="staff-editor__card-pic-loading" size="large"/> : <Icon className="staff-editor__card-pic-icon" name="upload" size="4x"/>}
+                                <input className="staff-editor__image-uploader" type="file" multiple={false} accept="image/x-png,image/gif,image/jpeg" onChange={this.onProfilePicChange.bind(this)}/>
+                            </label>
                         </div>
                     </div>
                     <div className="col-md-8">
@@ -195,6 +202,15 @@ class StaffEditor extends React.Component {
         );
     }
 
+    getPictureWrapperClass() {
+        let classes = {
+            'staff-editor__card-pic-wrapper': true,
+            'staff-editor__card-pic-wrapper_loading': this.state.loadingPicture
+        };
+
+        return classNames(classes);
+    }
+
     getTicketListProps() {
         return {
             type: 'secondary',
@@ -282,6 +298,31 @@ class StaffEditor extends React.Component {
             this.setState({message: 'FAIL'});
         });
     }
+
+    onProfilePicChange(event) {
+        this.setState({
+            loadingPicture: true
+        });
+
+        API.call({
+            path: '/staff/edit',
+            data: {
+                staffId: this.props.staffId,
+                file: event.target.files[0]
+            }
+        }).then(() => {
+            this.setState({
+                loadingPicture: false
+            });
+
+            if(this.props.onChange) {
+                this.props.onChange();
+            }
+        }).catch(() => {
+            window.scrollTo(0,0);
+            this.setState({message: 'FAIL', loadingPicture: false});
+        });
+    }
 }
 
 export default StaffEditor;

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

@@ -11,13 +11,41 @@
         border: 2px solid $grey;
         margin-bottom: 20px;
 
+        &__image-uploader {
+            opacity: 0;
+        }
+
         &-pic {
             height: 100%;
             position: absolute;
             left: 50%;
             transform: translate(-50%, 0);
 
+            &-background {
+                background-color: black;
+                opacity: 0;
+                transition: opacity 0.2s ease;
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                z-index: 10;
+            }
+
+            &-icon {
+                position: absolute;
+                color: white;
+                opacity: 0;
+                transition: opacity 0.2s ease;
+                top: 70px;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                z-index: 11;
+            }
+
             &-wrapper {
+                transition: opacity 0.2s ease;
+                background-color: $grey;
                 position: absolute;
                 top: 20px;
                 border: 4px solid $grey;
@@ -28,6 +56,26 @@
                 text-align: center;
                 left: 50%;
                 transform: translate(-50%, 0);
+                opacity: 1;
+
+                &_loading,
+                &:hover {
+                    cursor: pointer;
+
+                    .staff-editor__card-pic-background {
+                        opacity: 0.6;
+                    }
+
+                    .staff-editor__card-pic-icon {
+                        opacity: 0.8;
+                    }
+
+                    .staff-editor__card-pic-loading {
+                        position: absolute;
+                        top: 0;
+                        z-index: 11;
+                    }
+                }
             }
         }
 

server/controllers/staff/edit.php

@@ -57,6 +57,11 @@ class EditStaffController extends Controller {
             $this->staffInstance->sharedDepartmentList = $this->getDepartmentList();
         }
 
+        if(Controller::request('file')) {
+            $fileUploader = $this->uploadFile();
+            $this->staffInstance->profilePic = ($fileUploader instanceof FileUploader) ? $fileUploader->getFileName() : null;
+        }
+
         $this->staffInstance->store();
     }