Vinicius

app/Http/Controllers/Auth/RegisterController.php

@@ -70,7 +70,12 @@ protected function create(array $data)
             'ontology' => 'bfo'
         ]);
         $user->categoria = 'modelador';
+
+        $data = User::saveImg($data, 'avatar_url', 'public/img/profile/');
+        $user->avatar_url = $data['avatar_url'];
+
         $user->save();
+
         return $user;
     }
 

app/Http/Controllers/UserController.php

@@ -9,6 +9,7 @@
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Hash;
+use App\Http\Requests\UserProfileRequest;
 use Illuminate\Support\Facades\Validator;
 use App\Http\Requests\UpdateUserRequest;
 
@@ -131,4 +132,33 @@ public function updatePassword(Request $request, $locale, $id)
     }
 
 
+    public function updatePicture(UserProfileRequest $request,  $locale, $id)
+    {
+        if($id != Auth::user()->id)
+            return view('lockscreen');
+        $user = User::find($id);
+
+        $data = $request->validated();
+        $data = User::saveImg($data, 'avatar_url', 'public/img/profile/', $user->avatar_url);
+
+        $user->avatar_url = $data['avatar_url'];
+        $user->save();
+
+        return redirect()->back()->with('success', true);
+    }
+
+    public function deletePicture($locale, $id)
+    {
+        if($id != Auth::user()->id)
+            return view('lockscreen');
+        $user = User::find($id);
+
+        User::deleteImg($user->avatar_url, 'public/img/profile/');
+        $user->avatar_url = "profile_default.png";
+        $user->save();
+
+        return redirect()->back()->with('success', true);
+    }
+
+
 }

app/Http/Requests/UserProfileRequest.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UserProfileRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'avatar_url' => 'required|image|mimes:jpg,jpeg,png,bmp,svg,webp|max:5120',
+        ];
+    }
+
+    public function attributes(){
+        return[
+            'avatar_url' => 'imagem',
+        ];
+    }
+}

app/Models/User.php

@@ -9,6 +9,7 @@
 use Illuminate\Auth\Reminders\RemindableTrait;
 use Illuminate\Contracts\Auth\CanResetPassword;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Support\Facades\Storage;
 
 class User extends Authenticatable
 {
@@ -27,10 +28,12 @@ public function sendPasswordResetNotification($token)
      * @var array
      */
     protected $fillable = [
+        'id',
         'name',
         'email',
         'password',
-        'ontology'
+        'ontology',
+        'avatar_url'
     ];
 
     protected $guarded = [
@@ -80,6 +83,29 @@ public function thesaurus()
     {
         return $this->hasMany(Thesauru::class);
     }
+
+    /*************************** Functions **********************************/
+
+    public static function saveImg($data, $name, $patch, $oldPatch = '')
+    {
+        if (isset($data[$name]) && is_file($data[$name])) {
+            $imgName = $data[$name]->getClientOriginalName();
+            $imgName = hash('sha256', $imgName . strval(time())) . '.' . $data[$name]->getClientOriginalExtension();
+            User::deleteImg($oldPatch, $patch);
+            $data[$name]->storeAs($patch, $imgName);
+            $data[$name] = $imgName;
+        } else {
+            unset($data[$name]);
+        }
+
+        return $data;
+    }
+    public static function deleteImg($imgName, $patch)
+    {
+        if ($imgName != '' && $imgName != 'profile_default.png') {
+            Storage::delete($patch . $imgName);
+        }
+    }
 }
 
 

database/migrations/2022_01_29_154159_add_profile_path_column_to_users_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddProfilePathColumnToUsersTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('avatar_url')->default("profile_default.png");
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('avatar_url');
+        });
+    }
+}

public/css/admin-pages.css

@@ -0,0 +1,45 @@
+.d-none {
+  display: none !important;
+}
+
+.profile-user-img {
+  border: 3px solid #adb5bd;
+  margin: 0 auto;
+  padding: 3px;
+  width: 100px;
+}
+
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.img-circle {
+  border-radius: 50%;
+}
+
+.box-profile {
+  position: relative;
+  width: 100%;
+  max-width: 150px;
+  text-align: center;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  transition: 0.3s ease;
+}
+
+.box-profile:hover .overlay {
+  opacity: 1;
+}
+
+.box-profile:focus .overlay {
+  opacity: 1;
+}

resources/views/index.blade.php

@@ -1253,7 +1253,7 @@ function updateChat(id) {
                                 d.getMinutes(),
                                 d.getSeconds()].join(':');
 
-                        $('<div class="direct-chat-msg right"><div class="direct-chat-info clearfix"><span class="direct-chat-name pull-right">{{ Auth::user()->name }}</span><span class="direct-chat-timestamp pull-left">' + dataFormatada +'</span></div><img class="direct-chat-img" src="/css/images/LogoDark.png" alt="Imagem de perfil"><div class="direct-chat-text">' + $("#message").val() + '</div></div>').insertAfter($(".direct-chat-msg").last());
+                        $('<div class="direct-chat-msg right"><div class="direct-chat-info clearfix"><span class="direct-chat-name pull-right">{{ Auth::user()->name }}</span><span class="direct-chat-timestamp pull-left">' + dataFormatada +'</span></div><img class="direct-chat-img" src="{{ asset("storage/img/profile/" . Auth::user()->avatar_url) }}" alt="Imagem de perfil"><div class="direct-chat-text">' + $("#message").val() + '</div></div>').insertAfter($(".direct-chat-msg").last());
 
                         $("#message").val("");
 

resources/views/ontologies/chat.blade.php

@@ -11,7 +11,7 @@
                     <span
                         class="direct-chat-timestamp pull-right">{{ date('d/m/Y h:m:s', strtotime($message->created_at)) }}</span>
                 </div>
-                <img class="direct-chat-img" src="/css/images/LogoDark.png" alt="Imagem de perfil">
+                <img class="direct-chat-img" src="{{ asset('storage/img/profile/' . $message->user->avatar_url) }}" alt="Imagem de perfil">
                 <div class="direct-chat-text">
                     {{ $message->message }}
                 </div>
@@ -25,7 +25,7 @@ class="direct-chat-timestamp pull-right">{{ date('d/m/Y h:m:s', strtotime($messa
                     <span
                         class="direct-chat-timestamp pull-left">{{ date('d/m/Y h:m:s', strtotime($message->created_at)) }}</span>
                 </div>
-                <img class="direct-chat-img" src="/css/images/LogoDark.png" alt="Imagem de perfil">
+                <img class="direct-chat-img" src="{{ asset('storage/img/profile/' . $message->user->avatar_url) }}" alt="Imagem de perfil">
                 <div class="direct-chat-text">
                     {{ $message->message }}
                 </div>

resources/views/ontologies/ontologies-edit.blade.php

@@ -147,14 +147,24 @@ class="form-control">
                         <option value="http://www.w3.org/2001/XMLSchema#">http://www.w3.org/2001/XMLSchema#</option>
                     </select>
                 </div>
-                <div class="form-group">
+                <!--<div class="form-group">
                     <label>{{__('Collaborators')}}</label>
                     <select id="collaborators-select" style="width: 100%" class="js-example-basic-multiple" name="collaborators[]" multiple="multiple">
                         @foreach($users as $user)
-                            <option @foreach($ontology->users as $collaborator) @if($collaborator->id == $user->id)selected @endif @endforeach value="{{$user->id}}">{{$user->name}}</option>
+                            <option @foreach($ontology->users as $collaborator) @if($collaborator->id == $user->id)selected @endif @endforeach value="{{$user->id}}" data-image="/storage/img/profile/profile_default.png">{{$user->name}}</option>
+                        @endforeach
+                    </select>
+                </div>-->
+
+                <div class="form-group">
+                    <label>{{__('Collaborators')}}</label>
+                    <select id="collaborators-select" class="js-example-basic-multiple" name="collaborators[]" multiple="multiple">
+                        @foreach($users as $user)
+                            <option @foreach($ontology->users as $collaborator) @if($collaborator->id == $user->id)selected @endif @endforeach value="{{$user->id}}" data-image="/storage/img/profile/profile_default.png">{{$user->name}}</option>
                         @endforeach
                     </select>
                 </div>
+
                 <button class="btn btn-success btn-block" type="submit">Submit</button>
             </form>
         </div>
@@ -163,14 +173,39 @@ class="form-control">
     <script>
         //$('#collaborators-select').val(data['collaborators']).trigger('change');
         $(document).ready(function () {
-            $('.js-example-basic-multiple').select2({
-                theme: 'classic'
-            });
             $('.js-example-tags').select2({
                 theme: 'classic',
                 tags: true
             });
         });
+
+        function formatState (opt) {
+            if (!opt.id) {
+                return opt.text.toUpperCase();
+            }
+
+            var optimage = $(opt.element).attr('data-image'); 
+
+            if(!optimage){
+                return opt.text.toUpperCase();
+            } else {   
+                return $('<span><img class="img-circle"" src="' + optimage + '" width="30px" /> ' + opt.text.toUpperCase() + '</span>');
+            }
+
+        };
+
+        $("#collaborators-select").select2({
+            theme: 'classic',
+            width: "100%",
+            templateResult: formatState,
+            templateSelection: function (option) {
+                return option.text;
+            },
+            escapeMarkup: function (m) {
+                return m;
+            }
+        });
+
     </script>
 @stop
 

resources/views/user/profile.blade.php

@@ -21,7 +21,7 @@
             <!-- Profile Image -->
             <div class="box box-success">
                 <div class="box-body box-profile">
-                    <img class="profile-user-img img-responsive img-circle" src="{{asset('css/images/LogoMini.png')}}"
+                    <img class="profile-user-img img-responsive img-circle" src="{{ asset('storage/img/profile/' . Auth::user()->avatar_url) }}"
                          alt="User profile picture">
 
                     <h3 class="profile-username text-center">{{$user->name}}</h3>

resources/views/user/settings.blade.php

@@ -30,6 +30,34 @@
         <div class="box-header with-border">
             <h3 class="box-title">{{__('Account Settings')}}</h3>
         </div>
+
+        <div class="box-profile">
+            <form id="form-delete-picture" action="{{ route('user.deletePicture', ['locale'=> app()->getLocale(), 'user' => Auth::user()->id]) }}" method="post">
+                @csrf
+                @method('delete')
+            </form>
+            <form id="form-update-picture" action="{{ route('user.updatePicture', ['locale'=> app()->getLocale(), 'user' => Auth::user()->id]) }}" method="post"
+                enctype="multipart/form-data">
+                @csrf
+                @method('put')
+                <input type="file" name="avatar_url" id="profile" class="d-none">
+                <img src="{{ asset('storage/img/profile/' . Auth::user()->avatar_url) }}" id="previewProfile"
+                    alt="User profile picture" class="profile-user-img img-fluid img-circle">
+                <div class="overlay">
+                    <div class="row">
+                        <a href="javascript:;" id="btnEditProfile" class="" title="Editar">
+                            <i class="fa fa-pencil text-dark fa-2x"></i>
+                        </a>
+                        @if (Auth::user()->avatar_url != 'profile_default.png')
+                            <a href="javascript:;" id="btnDeleteProfile" class="ml-4" title="Excluir">
+                                <i class="fa fa-trash text-dark fa-2x"></i>
+                            </a>
+                        @endif
+                    </div>
+                </div>
+            </form>
+        </div>
+
         <form role="form" action="{{route('user.update', ['locale'=> app()->getLocale(), 'user' => Auth::user()->id])}}" method="post">
             @csrf
             @method('PATCH')
@@ -113,4 +141,31 @@
 
 @section('footer')
     .
-@stop
+@stop
+
+@push('js')
+    <script>
+
+        function filePreview(input, previewProfile) {
+            if (input.files && input.files[0]) {
+                var reader = new FileReader();
+                reader.onload = function(e) {
+                    $(previewProfile).attr('src', e.target.result);
+                }
+                reader.readAsDataURL(input.files[0]); // convert to base64 string
+            }
+        }
+
+        $("#type").attr("disabled", true);
+        $("#btnEditProfile").click(function() {
+            $("#profile").click();
+        });
+        $("#btnDeleteProfile").click(function() {
+            $('#form-delete-picture').submit();
+        });
+        $("#profile").change(function() {
+            filePreview(this, '#previewProfile');
+            $('#form-update-picture').submit();
+        });
+    </script>
+@endpush